Merge pull request #18235 from donmccurdy/feat-gltfloader-transparent-depthwrite

GLTFLoader: Use depthWrite=false for transparent materials

examples/js/loaders/GLTFLoader.js

@@ -2099,6 +2099,9 @@ THREE.GLTFLoader = ( function () {
 
 			materialParams.transparent = true;
 
+			// See: https://github.com/mrdoob/three.js/issues/17706
+			materialParams.depthWrite = false;
+
 		} else if ( alphaMode === ALPHA_MODES.MASK ) {
 
 			materialParams.alphaTest = materialDef.alphaCutoff !== undefined ? materialDef.alphaCutoff : 0.5;

examples/jsm/loaders/GLTFLoader.js

@@ -2162,6 +2162,9 @@ var GLTFLoader = ( function () {
 
 			materialParams.transparent = true;
 
+			// See: https://github.com/mrdoob/three.js/issues/17706
+			materialParams.depthWrite = false;
+
 		} else if ( alphaMode === ALPHA_MODES.MASK ) {
 
 			materialParams.alphaTest = materialDef.alphaCutoff !== undefined ? materialDef.alphaCutoff : 0.5;

examples/webgl_postprocessing_unreal_bloom.html

@@ -92,11 +92,6 @@
 
 				scene.add( model );
 
-				// Mesh contains self-intersecting semi-transparent faces, which display
-				// z-fighting unless depthWrite is disabled.
-				var core = model.getObjectByName( 'geo1_HoloFillDark_0' );
-				core.material.depthWrite = false;
-
 				mixer = new THREE.AnimationMixer( model );
 				var clip = gltf.animations[ 0 ];
 				mixer.clipAction( clip.optimize() ).play();