SpriteNodeMaterial: Set transparent=true as default (#30435)

mrdoob · Jan 31, 2025 · 8a475a6 · 8a475a6
1 parent 422684a
commit 8a475a6
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 9 deletions.
diff --git a/examples/webgpu_instance_sprites.html b/examples/webgpu_instance_sprites.html
@@ -70,7 +70,7 @@
 
 				// material
 
-				material = new THREE.SpriteNodeMaterial( { sizeAttenuation: true, map, alphaMap: map, alphaTest: 0.1, transparent: true } );
+				material = new THREE.SpriteNodeMaterial( { sizeAttenuation: true, map, alphaMap: map, alphaTest: 0.1 } );
 				material.color.setHSL( 1.0, 0.3, 0.7, THREE.SRGBColorSpace );
 				material.positionNode = instancedBufferAttribute( positionAttribute );
 				material.rotationNode = time.add( instanceIndex ).sin();

diff --git a/examples/webgpu_particles.html b/examples/webgpu_particles.html
@@ -89,7 +89,6 @@
 				smokeNodeMaterial.positionNode = offsetRange.mul( lifeTime );
 				smokeNodeMaterial.scaleNode = scaleRange.mul( lifeTime.max( 0.3 ) );
 				smokeNodeMaterial.depthWrite = false;
-				smokeNodeMaterial.transparent = true;
 
 				const smokeInstancedSprite = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), smokeNodeMaterial );
 				smokeInstancedSprite.scale.setScalar( 400 );

diff --git a/examples/webgpu_postprocessing_afterimage.html b/examples/webgpu_postprocessing_afterimage.html
@@ -90,7 +90,7 @@
 
 				// material and TSL
 
-				const material = new THREE.SpriteNodeMaterial( { blending: THREE.AdditiveBlending, depthWrite: false, transparent: true } );
+				const material = new THREE.SpriteNodeMaterial( { blending: THREE.AdditiveBlending, depthWrite: false } );
 
 				const localTime = instancedBufferAttribute( timeAttribute ).add( time.mul( 0.1 ) );
 				const modTime = mod( localTime, 1.0 );

diff --git a/examples/webgpu_sprites.html b/examples/webgpu_sprites.html
@@ -70,7 +70,6 @@
 				material.colorNode = textureNode.mul( uv() ).mul( 2 ).saturate();
 				material.opacityNode = textureNode.a;
 				material.rotationNode = userData( 'rotation', 'float' ); // get value of: sprite.userData.rotation
-				material.transparent = true;
 
 				for ( let a = 0; a < amount; a ++ ) {
 

diff --git a/examples/webgpu_tsl_compute_attractors_particles.html b/examples/webgpu_tsl_compute_attractors_particles.html
@@ -141,7 +141,7 @@
 				// particles
 
 				const count = Math.pow( 2, 18 );
-				const material = new THREE.SpriteNodeMaterial( { transparent: true, blending: THREE.AdditiveBlending, depthWrite: false } );
+				const material = new THREE.SpriteNodeMaterial( { blending: THREE.AdditiveBlending, depthWrite: false } );
 
 				const attractorMass = uniform( Number( `1e${7}` ) );
 				const particleGlobalMass = uniform( Number( `1e${4}` ) );

diff --git a/examples/webgpu_tsl_galaxy.html b/examples/webgpu_tsl_galaxy.html
@@ -48,7 +48,6 @@
 				// galaxy
 
 				const material = new THREE.SpriteNodeMaterial( {
-					transparent: true,
 					depthWrite: false,
 					blending: THREE.AdditiveBlending
 				} );

diff --git a/examples/webgpu_tsl_vfx_flames.html b/examples/webgpu_tsl_vfx_flames.html
@@ -93,7 +93,7 @@
 
 				// flame 1 material
 
-				const flame1Material = new THREE.SpriteNodeMaterial( { transparent: true, side: THREE.DoubleSide } );
+				const flame1Material = new THREE.SpriteNodeMaterial( { side: THREE.DoubleSide } );
 
 				flame1Material.colorNode = Fn( () => {
 
@@ -129,7 +129,7 @@
 
 				// flame 2 material
 
-				const flame2Material = new THREE.SpriteNodeMaterial( { transparent: true, side: THREE.DoubleSide } );
+				const flame2Material = new THREE.SpriteNodeMaterial( { side: THREE.DoubleSide } );
 
 				flame2Material.colorNode = Fn( () => {
 

diff --git a/examples/webgpu_tsl_vfx_linkedparticles.html b/examples/webgpu_tsl_vfx_linkedparticles.html
@@ -123,7 +123,6 @@
 				const particleGeom = new THREE.PlaneGeometry( particleQuadSize, particleQuadSize );
 
 				const particleMaterial = new THREE.SpriteNodeMaterial();
-				particleMaterial.transparent = true;
 				particleMaterial.blending = THREE.AdditiveBlending;
 				particleMaterial.depthWrite = false;
 				particleMaterial.positionNode = particlePositions.toAttribute();

diff --git a/src/materials/nodes/SpriteNodeMaterial.js b/src/materials/nodes/SpriteNodeMaterial.js
@@ -86,6 +86,14 @@ class SpriteNodeMaterial extends NodeMaterial {
 		 */
 		this.scaleNode = null;
 
+		/**
+		 * In Sprites, the transparent property is enabled by default.
+		 *
+		 * @type {Boolean}
+		 * @default true
+		 */
+		this.transparent = true;
+
 		this.setDefaultValues( _defaultValues );
 
 		this.setValues( parameters );