clearDepth() function

[davepagurek]

Increasing Access

When writing video feedback effects using 3D rendering, the previous frame is drawn into the scene of the next frame. Often we just want this to be a background image. However, it is typically done by drawing a 3D plane, which has depth, and may accidentally occlude part of the scene. This is unintuitive, but even once you understand what's happening, the fix in p5 is quite complicated.

One way to make sure everything else you draw goes in front of the rectangle is to draw the rectangle farther back, but scaled up so that it appears the same size. The math can be challenging to work out.

push();
translate(0, 0, -500);
// If the camera is z1 units away and
// you moved back z2 units, then to appear
// the same size as if you hadn't moved,
// scale by (z2 + z1) / z1
scale((500 + 800) / 800);
image(prev, 0, 0);
pop();

Another way is to use drawingContext, a reference to the native WebGL context object, to clear its memory of what depth everything has been drawn at. This is even harder since we do not attempt to document the native WebGL API, so users likely do not know that this is an option unless they encounter it in someone else's source code.

image(prev, 0, 0);
drawingContext.clear(
  drawingContext.DEPTH_BUFFER_BIT
);

Having a simple clearDepth() function to document would go a long way for making these effects easier. Even though the problem is still unintuitive, at least it will have a simple solution, and we can use it in our own documentation so it's more likely that users come across it.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

Feature request details

The implementation just needs to have this:

gl.clear(gl.DEPTH_BUFFER_BIT)

[aferriss]

This sounds simple and straightforward enough to me! I actually ran into this problem today and was happy to see the solution documented right here.