WebGL Graphics background not clearing

p5.js Coding Questions
1

Hey all,

I’m facing an issue that a 3D WebGL enabled createGraphics object doesn’t seem to be clearing it’s background to allow transparency even when the clear() function is called.

You can see that the 2D graphics object (b) has transparency whereas the 3D graphics object (a) has a black background, even with clear. Does anyone know why this might be or a way around it? As ideally I’d like the option to be able to layer multiple 3D/2D graphics objects on top of eachother.

Code here and below:

let a,b;

function setup() {
  createCanvas(400, 400);
  
  a = createGraphics(width,height,WEBGL);
  b = createGraphics(width,height);
}

function draw() {
  background(0,255,255);
  
  a.push();
  a.clear();
  a.rotateX(frameCount/100);
  a.box(100);
  a.pop();
  
  b.push();
  b.clear();
  b.rect(0,0,width/2,height/2);
  b.pop();
  
  image(a,0,0);
  image(b,0,0);
}

Cheers!

1 Like