GLTFLoader: Could we re-think about how we deal depth buffer for `BLEND` materials?

Description of the problem

Already discussed a bit about it on #13889

Currently, we are letting depthWrite: true for every material that is being loaded from GLTFLoader, even when the material is alphaTest: BLEND . And glTF spec does not specify how we must set our depth write, even in non-normative sections, since the use of glTF is not restricted to the traditional realtime rasterizer. It just says that we should try to make it look proper in as many situations as possible.

See: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0/#alpha-coverage

I think we should follow other “majority” implementations for this situation. (uhhh is this good idea?) Note that it’s pretty easy to change the behavior, just adding a line to GLTFLoader would work I think.

• BabylonJS uses depth write only if alpha blending is disabled. https://github.com/BabylonJS/Babylon.js/blob/26d9fe4991d9e4d749618463548f853e837ff2ba/src/Engines/engine.ts#L837
• I depleted my energy to research other engines…

Three.js version

• Dev
• r109
• …

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

Hardware Requirements (graphics card, VR Device, …)

[donmccurdy]

@Kagetsuki the problem visible in your third image comes from setting depthWrite=false on all materials. If you set the option only on the transparent materials, you’ll get a reasonable result.

@FMS-Cat Okay, I think I agree at this point. Let’s set depthWrite=false for transparent materials in GLTFLoader. Opened https://github.com/mrdoob/three.js/pull/18235.

[greggman]

Maybe you have different experience. In games I’ve rarely worked on a project that used depthWrite = false except for particles effects. It’s extremely common to enable gl.BLEND for things like leaves and grass and use an alpha test discard and the depth test has to be on for it work. I’m sure there are a ton more scenes that will break where in three.js terms it needs to be (depthWrite = true, transparency = true, alphaTest = > 0) but unfortunately most of the scenes that would show this are not downloadable from sketchfab