Implementing WEBGL 3D with graphics objects

p5.js Coding Questions
1

Hello, I’m currently working on adding 3D functionality to a music visualizer program. Initially I planned to just add the WEBGL argument to the existing createCanvas(), but it caused formatting problems, so I switched to creating a graphics object.

For testing purposes I am starting with a simple spinning sphere, but I am running into an issue where the black lines used to define the sphere draw over each other, causing it to become a black circle after it revolves once.

I am using seperate .js files with a constructor function for each visualizer, and they get called individually from the main .js file. For this post, I have reduced everything to one simple file which still produces the same issue for me:

function setup(){
	 createCanvas(windowWidth, windowHeight);
     pg = createGraphics(windowWidth, windowHeight, WEBGL);
	 background(0);
}

function draw(){
    push();
    pg.rotateY(0.01);
    pg.sphere(50);
    image(pg, 0,0);
    pop();
}

I have tried several variations of push() and pop(), including pg.push() and pg.pop(), to see if it’s a strange formatting issue, but I can’t find the root cause. I don’t see any errors in the console, and all methods I have tried to fix it either slow down the process, change nothing, or freeze the sphere with no rotation.

Thanks!

2

?

let pg;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  pg = createGraphics(120, 120, WEBGL);
  pg.background(0);
  pg.stroke(255);
  pg.noFill();
  pg.rotateY(millis() / 1000);
  pg.sphere(50);
  image(pg, 0, 0);
}
3

Well… that would explain it. Moving the createGraphics() line into the draw function fixes it.

Thanks for the help, I assumed it functioned virtually the same as createCanvas(), probably because I saw them both in setup() on the reference page. Didn’t realize implementing an animation required it to be moved to draw().

Thanks again!

4

After examining further, it seems that this implementation causes lag followed by a crash.

Console shows “WARNING: Too many active WebGL contexts. Oldest context will be lost.” and the number rockets up into the hundreds…

is this fixable in some way?

5

Wild guess, maybe writing pg = null; below image(pg, 0, 0);?

6

Doesn’t seem to work, I have tried a few other things like pg.remove(), nothing appears to have an influence so far, other than limiting the framerate slowing the process. I’m getting concerned this may be an issue with using graphics objects with WEBGL in general.

7

Well, I use Processing’s custom IDE and let it run for 10 minutes without getting any warning or error in Google Chrome.
I can’t use the P5.js Web editor with this code, because their seems to be a bug there with the WEBGL renderer. Just writing:

function setup() {
	createCanvas(150, 100, WEBGL);
}

already gives the error:

🌸 p5.js says: An error with message "Error creating webgl context" occured inside the p5js library when createCanvas was called (on line 72 in about:srcdoc [about:srcdoc:72:2])

If not stated otherwise, it might be an issue with the arguments passed to createCanvas. (http://p5js.org/reference/#/p5/createCanvas)
8

But do you really need a PGraphics?
This code works really smooth on my machine:


function setup() {
  createCanvas(400, 400, WEBGL);
  fill(200, 50, 50);
  stroke(170, 0, 0);
}

function draw() {
  background(0, 0, 150);
  ambientLight(250);
  pointLight(255, 255, 255, -width, -height, 2*height);
  rotateY(millis() / 1000);
  sphere(120);
}
9 
"use strict";

var pg;

function setup() {
  createCanvas(300, 200);
  background(0);
  pg = createGraphics(width, height, WEBGL);
}

function draw() {
  pg.clear().rotateY(.01).sphere(50);
  image(pg, 0, 0);
}
1 Like