WebGLRenderer: Reversed Depth not working correctly

[WestLangley]

Description

Several examples are rendering black when reversed depth buffer is set.

webgl_loader_gltf_compressed.html is one of them.

The bug appears to be related to the use of PMREMGenerator.fromScene().

Reproduction steps

Set reversed depth buffer in webgl_loader_gltf_compressed.html.

Code

n/a

Live example

n/a

Screenshots

No response

Version

r179dev

Device

Desktop

Browser

Chrome

OS

MacOS

[WestLangley]

Who knows if this is related, but this seems unadvisable, IMO.

three.js/src/renderers/webgl/WebGLState.js

Lines 212 to 227 in 00b1736

	setClear: function ( depth ) {
	if ( currentDepthClear !== depth ) {
	if ( currentReversed ) {
	depth = 1 - depth;
	}
	gl.clearDepth( depth );
	currentDepthClear = depth;
	}
	},

Clear the depth requested -- not some other depth.

This seems unadvisable, too:

three.js/src/renderers/webgl/WebGLState.js

Lines 146 to 148 in c543bf7

	setFunc: function ( depthFunc ) {
	if ( currentReversed ) depthFunc = reversedFuncs[ depthFunc ];

[WestLangley]

Setting material.depthTest to false in createAreaLightMaterial() in RoomEnvironment.js mitigates this issue.

Well that's suspicious...

[WestLangley]

Another hint... Comment out this line and webgl_loader_gltf_compressed.html renders correctly with reversed depth.

three.js/src/extras/PMREMGenerator.js

Line 137 in 99a8d81

cubeUVRenderTarget.depthBuffer = true;

[Mugen87]

I think the issue is that _sceneToCubeUV() sets autoClear to false which means the intenral render target does not have an appropriate clear value for the (reversed) depth buffer. If you add the below code directly under the renderer.autoClear = false; statement at the beginning of the method, webgl_loader_gltf_compressed works again.

renderer.setRenderTarget( cubeUVRenderTarget );
renderer.clearDepth();
renderer.setRenderTarget( null );

This is in general a problem since whenever you use a reversed depth buffer and don't use autoClear=true, you can't rely on the default depth value in the buffer. You must clear at least once manually with the reversed clear value.

All these clears must be guarded since they are not required when using a normal depth buffer.

[Mugen87]

Sidenote: The changes to WebGLState look correct to me.

[WestLangley]

Sidenote: The changes to WebGLState look correct to me.

That is good to know, and I am aware that you did not write these sections, but these code blocks, along with the others I posted above, seem fragile and confusing to me.

three.js/src/renderers/webgl/WebGLState.js

Lines 105 to 109 in 00b1736

	currentReversed = reversed;
	const oldDepth = currentDepthClear;
	currentDepthClear = null;
	this.setClear( oldDepth );

three.js/src/renderers/webgl/WebGLState.js

Lines 222 to 223 in 00b1736

	gl.clearDepth( depth );
	currentDepthClear = depth;

[Mugen87]

Yeah, reverse z is tricky to implement. TBH, I underestimated how many bits of the engine are affected by this technique...