# Understanding paint depth & opacity in p5js & webgl

**URL:** <https://discourse.processing.org/t/understanding-paint-depth-opacity-in-p5js-webgl/12046>\
**Category:** Coding Questions\
**Created:** [June 13, 2019, 5:07pm UTC](https://discourse.processing.org/t/understanding-paint-depth-opacity-in-p5js-webgl/12046 "2019-06-13T17:07:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jedierikb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jedierikb/32/5268_2.png) [@jedierikb](https://discourse.processing.org/u/jedierikb)\
**Post date:** [June 13, 2019, 5:07pm UTC](https://discourse.processing.org/t/understanding-paint-depth-opacity-in-p5js-webgl/12046/1 "2019-06-13T17:07:56Z")

</div>

[https://codepen.io/jedierikb/pen/EBVyPE?editors=1010](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!

---

<div class="post-metadata">

**Author:** ![jedierikb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jedierikb/32/5268_2.png) [@jedierikb](https://discourse.processing.org/u/jedierikb)\
**Post date:** [June 13, 2019, 6:15pm UTC](https://discourse.processing.org/t/understanding-paint-depth-opacity-in-p5js-webgl/12046/2 "2019-06-13T18:15:10Z")

</div>

related?

> <https://github.com/processing/p5.js/issues/2105>

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 15, 2019, 5:58pm UTC](https://discourse.processing.org/t/understanding-paint-depth-opacity-in-p5js-webgl/12046/3 "2019-06-15T17:58:15Z")

</div>

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

> [@hint(DISABLE\_DEPTH\_TEST) in P5](https://discourse.processing.org/t/hint-disable-depth-test-in-p5/5595/5):
>
> 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…](https://editor.p5js.org/abe/sketches/rJm884hTQ)