wrong z order when rendering material with alpha mode "BLEND" about three.js HOT 7 CLOSED

@am05mhz
To get much better results you can use this trick:

		loader.load( 'meshes/forest_house.glb', function ( gltf ) {
			gltf.scene.traverse(function (child) {
				if (child.isMesh) {
					if (child.material.transparent === true) {
						child.material.depthWrite = true;
						child.material.alphaTest = 0.5;
					}
				}
			});

Here is the result: https://necromanthus.com/Test/html5/forest_house.html

@donmccurdy

Realtime 3D engines typically can sort objects - not triangles or pixels - making this category of problem in alpha blending a known limitation.

Don, there is an uninspired (I don't want to say wrong) setting inside of the GLTF Loader:
materialParams.depthWrite = false;
That will generate an alpha sorting mess in 99% of the scenarios.
You should study this sample as well: https://necromanthus.com/Test/html5/head.html
Click on the stage to see the 3 cases.
cheers

from three.js.

Realtime 3D engines typically can sort objects - not triangles or pixels - making this category of problem in alpha blending a known limitation. Entire scenes should not use alpha blending without special care for the sort order, or other techniques like OIT or alpha hashing.

from three.js.

@am05mhz To get much better results you can use this trick:

		loader.load( 'meshes/forest_house.glb', function ( gltf ) {
			gltf.scene.traverse(function (child) {
				if (child.isMesh) {
					if (child.material.transparent === true) {
						child.material.depthWrite = true;
						child.material.alphaTest = 0.5;
					}
				}
			});

Here is the result: https://necromanthus.com/Test/html5/forest_house.html

@donmccurdy

Realtime 3D engines typically can sort objects - not triangles or pixels - making this category of problem in alpha blending a known limitation.

Don, there is an uninspired (I don't want to say wrong) setting inside of the GLTF Loader: materialParams.depthWrite = false; That will generate an alpha sorting mess in 99% of the scenarios. You should study this sample as well: https://necromanthus.com/Test/html5/head.html Click on the stage to see the 3 cases. cheers

thanks, this solves my problem

from three.js.

We actually use an updated version of the asset in https://threejs.org/examples/webgl_loader_gltf_avif

from three.js.

Closing. Considering this as a modeling issue.

from three.js.

Considering this as a modeling issue.

It's not Michael.
See my above result with that (not very well designed) sample.

from three.js.

@Mugen87

We actually use an updated version of the asset in https://threejs.org/examples/webgl_loader_gltf_avif

I get exactly that result (in fact mine is a bit better) using the initial asset and this runtime change:

			gltf.scene.traverse(function (child) {
				if (child.isMesh) {
					if (child.material.name === "TreeLeafs") {
						child.material.side = THREE.DoubleSide;
						child.material.depthWrite = true;
						child.material.depthTest = true;
						child.material.alphaTest = 0.4;
						child.material.transparent = false;
					}
				}
			});

https://necromanthus.com/Test/html5/forest_house.html
And you'll find a similar modified material in the "fixed" asset.
So Michael, it was a hack, not a real fix.
cheers

from three.js.