Enabling "grid" option affecting depth test

[donmccurdy]

Testing this model: https://sketchfab.com/3d-models/low-poly-car-chevrolet-c10-pickup-1963-679354c151984747bb74310ec5af8995#download

If I enable/disable the grid, depth information is being lost and some backfaces show through the front of the vehicle. Possibly related to this line:

three-gltf-viewer/src/viewer.js

Line 510 in d428e8f

this.axesHelper.onBeforeRender = (renderer) => renderer.clearDepth();

[RobIsHere]

I've used your viewer.js here as a starting template for my small program, so I copy+pasted this issue and it almost drove me crazy. The good part about it is that I know a lot about threejs internals now after reading through its code :)
Thanks for your work on three.js.

What I still don't understand: onBeforeRender should run before all the rendering starts.

But this line above only affects objects of the transparency/transmissive rendering run. => that can only happen when the depth buffer is cleared after the opaque stuff rendering run but before the transparency/transmissive rendering run.

Is there a bug in threejs so that onBeforeRender is called too late, after the opaque material render run is already done? Or is the depth buffer clearing somehow delayed so that it happens after the opaque materials are rendered but before transparent/transmissive ones?

[RobIsHere]

Test_transmission5.zip

Look through the solid wall at the transmissive window. Then switch the grid on / off.

With grid=on the window is rendered in front of the wall, grid off like it should be right

But also the rendering in front of the wall should not be possible to happen if

render
->renderOpaqueStuff
->renderTransmissive/Transparent Stuff (with depth buffer testing)
end

but if it would be this order:

render
->renderOpaqueStuff
onBeforeRender => clearDepthBuffer
->renderTransmissive/Transparent Stuff (with depth buffer testing)
end

that would explain the behavior.

(Maybe I'm wrong and have not enough knowledge about three.js)

[donmccurdy]

@RobIsHere indeed, I believe onBeforeRender is called before that specific object is drawn. So for an object in the transparent queue, it should be after all opaque objects:

https://threejs.org/docs/?q=object3d#api/en/core/Object3D.onBeforeRender

I can't seem to recall why onBeforeRender was chosen here, or whether I copied it from somewhere. At a glance I would have hoped that just .depthTest = false on the material would have the same effect, but I haven't looked at this issue or THREE.AxesHelper closely in a while.

[RobIsHere]

I tried it with this code in different variants:

		if (this.state.grid) {
			this.gridHelper = new GridHelper();
			this.gridHelper.renderOrder = 998;
			traverseMaterials(this.gridHelper, (m) => {
				m.depthFunc = AlwaysDepth;
				m.depthTest = true;
				m.needsUpdate = true;
			});
			this.axesHelper = new AxesHelper();
			this.axesHelper.renderOrder = 999;
			traverseMaterials(this.axesHelper, (m) => {
				m.depthTest = false;
				m.needsUpdate = true;
			});
			this.scene.add(this.gridHelper);
			this.scene.add(this.axesHelper);
		} else {

What I got is

• Grid and AxesHelper behind everything else (e.g. see picture, disappearing where terrain level raises to the left)
• Grid and AxesHelper Z-Fighting which should not be possible because of different .renderOrder

[hooir-dev]

Just to share a resource that might be useful for anyone testing GLTF/GLB files — GLTF Tools Viewer
It's a free web-based viewer with drag-and-drop support and real-time rendering, which can help compare behavior across different viewers when troubleshooting issues like this one.