search

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.46k stars 3.29k forks source link

paint depth & opacity in webgl #3819

Closed jedierikb closed 4 years ago

jedierikb commented 5 years ago

Nature of issue?

Most appropriate sub-area of p5.js?

Which platform were you using when you encountered this?

Details about the bug:

Click on the sketch. Note the change in z-order for the painted planes. Only works as expected when opacity is 100%.

welcome[bot] commented 5 years ago

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

jedierikb commented 5 years ago

is this related? https://github.com/processing/p5.js/issues/2616

stalgiag commented 4 years ago

Hi @jedierikb sorry for the delay! I kept glancing over this one and not fully understanding what was happening, but I went back over it and I think that there is an optical illusion happening here. It is easier to see if you change the x,y, and rotateY properties of your planes to something like:

const planes = [
      { 
        fill: [255, 0, 0, sk.mouseIsPressed ? 255 : 200 ],
        stroke: [200, 200, 200, sk.mouseIsPressed ? 255 : 200 ],
        width: 256,
        height: 144,
        y: -100,
        x: -100,
        rotateY: 0
      },
      { 
        fill: [0, 255, 0, 255 ],
        stroke: [200, 200, 200, 255 ],
        width: 256,
        height: 144,
        y: -100,
        x: -100,
        rotateY: sk.PI/3
      }

With this the z-order appears to be as-expected unless I am missing something. This just means that in your prior example, the rotation was angled directly behind the red plane. Meaning that when you can't see through the red plane, it appears that the green plane is drawn "underneath" it but really it is just rotating directly to the edge of it and the part rotated behind the red rectangle is occluded.

Let me know if this is correct.

stalgiag commented 4 years ago

I am going to close this for organizational purposes. If my previous response was incorrect, feel free to respond here and I will reopen. Thanks!