Change in depthTest behavior breaks stencil buffer opertations

In versions 0.107.0+, the behavior of the depthTest flag on a Material seems to have changed in a way that breaks operations on the stencil buffer.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://jsfiddle.net/50cysg9x/
2. Change three@0.106.2 on line 28 to three@0.107.0 (or any higher version, including current; 0.127.0)
3. See that the stencil shadow no longer renders correctly.

Code

The line in question is 171: changing this line to tintMaterial.depthTest = true changes the output but it is not correct. As far as I can tell, the stencil buffer operations, buffer.setFunc (gl.ALWAYS, 0, 0xff) etc, are executed whether tintMaterial.depthTest is true or false. They just don’t contribute to the output in r0.107.0+.

Live example

• jsfiddle

Expected behavior

All stencil buffer operations should be executed.

Screenshots

Please see live example above

Platform:

• Device: [Desktop]
• OS: [Windows, macOS]
• Browser: [Chrome, Firefox]
• Three.js version: [r0.107.0+]

[gkjohnson]

Something changed between r0.106.2 and r0.107.0 that introduced this issue. I looked through the changelog and the migration guide, but didn’t see anything about the stencil buffer.

If you look at the changelog the addition of stencil parameters is listed as the third item in the r107 changes.

Here is the effect of using Material attributes: https://jsfiddle.net/md86ax1f/1/ … From what I can see, whether I use Material attributes or not, in r0.107.0+ the stencil operations simply don’t contribute to the output.

You haven’t set all the stencil options correctly for the effect you’re trying to render. If you add the following options for tintMaterial you get a stenciled shadow effect:

tintMaterial.stencilWrite = true;
tintMaterial.side = FrontSide;
tintMaterial.stencilFunc = NotEqualStencilFunc;

Also note that because this is a render order-dependent effect you’ll want to set tintMaterial.renderOrder to a higher number to ensure the tint material renders last.

[Mugen87]

Is there a guide to documentation standards/guidelines?

The only guideline about contribution in general is:

https://github.com/mrdoob/three.js/blob/dev/.github/CONTRIBUTING.md

I’d be happy to do the update.

Clarifying things is of course welcome!

The exposed buffers in WebGLState are in some sense a protected part of the API. E.g. the MaskPass class works with it. However, as far as I know it was never intended that users work directly with this API. At least with WebGPURenderer such low level access will not be possible.