Understanding paint depth & opacity in p5js & webgl

[jedierikb]

https://codepen.io/jedierikb/pen/EBVyPE?editors=1010

In this example, I am confused that the green plane is over the red plane when on the right side of the sketch. If I change the opacity of the planes to 100%, then I get the expected paint order.

Is this a bug in my code, the library, or somewhere deeper? Where do I look for help in addressing this problem?

Thank you!

[jedierikb]

related?

Issue: WebGL rendering issue on transparent geometries

[jeremydouglass]

Not sure, but could it be related to depth testing?

hint(DISABLE_DEPTH_TEST) in P5

For me it works (click to toggle): var gl; var b = true; function setup() { createCanvas(400, 400, WEBGL); gl = document.getElementById('defaultCanvas0').getContext('webgl'); } function draw() { background(0); noStroke(); fill(255, 200, 30); rotateY(frameCount * 0.01); box(200); fill(30, 200, 255); rotateY(PI * 0.25); box(200); } function mousePressed() { if(b) { gl.disable(gl.DEPTH_TEST); } else { gl.enable(gl.DEPTH_TEST); } b = !b; } Run it at https://editor.p5js.org/a…