Overlapping primitives not rendered when called in certain order

[kilian2323]

trafficstars

Most appropriate sub-area of p5.js?

• [ ] Accessibility (Web Accessibility)
• [ ] Build tools and processes
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Friendly error system
• [ ] Image
• [ ] IO (Input/Output)
• [ ] Localization
• [ ] Math
• [ ] Unit Testing
• [ ] Typography
• [ ] Utilities
• [ x] WebGL
• [ ] Other (specify if possible)

Details about the bug:

• p5.js version: 1.3.0
• Web browser and version: Chrome 93.0.4577.82
• Operating System: Windows 10
• Steps to reproduce this:

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

function draw() { background(220); camera(0,-100,400,0,0,0,0,1,0);

fill(127,127,255,50); box(60); // shows

fill(255,0,0,50); box(100);

fill(127,127,255,50); box(80); // does not show }

When the box() functions are called in the order of the respective box size, they render correctly inside each other, otherwise not. It means, calling box(60), then box(80), then box(100) works, but the above example fails on box(80) because the size is smaller than the previously drawn box. In 3D Euclidean space the order of calling should not matter, in my opinion.

[welcome[bot]]

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.

[stalgiag]

This is a depth-sorting issue. Depth-sorting is an issue that is common across all GL libraries. It would be inefficient for this to be fixed on the library side. The problem comes from trying to render an object inside of or behind an object that has already been rendered. It is better for users to handle this depth sorting on their end by doing just as you did and reordering their code so that the nearest or outermost renders last. Note that this same limitation exists in P3D mode in Processsing.

I can see how better documentation could be helpful though.

[davepagurek]

Hi, thanks for reporting this! As @stalgiag mentioned, this is an issue related to how transparent images are rendered, so for organizational purposes, I'm going to close this issue in favor of https://github.com/processing/p5.js/issues/3736, which is also about this topic. Feel free to continue the discussion there, or let me know if I've overlooked something!