ShaderChunk: Turn alphaTest into a uniform. (#22409)

examples/webgl_interactive_points.html

@@ -36,6 +36,7 @@
 
 			uniform vec3 color;
 			uniform sampler2D pointTexture;
+			uniform float alphaTest;
 
 			varying vec3 vColor;
 
@@ -45,7 +46,7 @@
 
 				gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
 
-				if ( gl_FragColor.a < ALPHATEST ) discard;
+				if ( gl_FragColor.a < alphaTest ) discard;
 
 			}
 
@@ -120,12 +121,11 @@
 
 					uniforms: {
 						color: { value: new THREE.Color( 0xffffff ) },
-						pointTexture: { value: new THREE.TextureLoader().load( 'textures/sprites/disc.png' ) }
+						pointTexture: { value: new THREE.TextureLoader().load( 'textures/sprites/disc.png' ) },
+						alphaTest: { value: 0.9 }
 					},
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
-					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
-
-					alphaTest: 0.9
+					fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 
 				} );
 

src/materials/Material.js

@@ -6,6 +6,8 @@ let materialId = 0;
 
 class Material extends EventDispatcher {
 
+	#alphaTest = 0;
+
 	constructor() {
 
 		super();
@@ -62,7 +64,6 @@ class Material extends EventDispatcher {
 
 		this.dithering = false;
 
-		this.alphaTest = 0;
 		this.alphaToCoverage = false;
 		this.premultipliedAlpha = false;
 
@@ -76,6 +77,24 @@ class Material extends EventDispatcher {
 
 	}
 
+	get alphaTest() {
+
+		return this.#alphaTest;
+
+	}
+
+	set alphaTest( value ) {
+
+		if ( this.#alphaTest > 0 !== value > 0 ) {
+
+			this.version ++;
+
+		}
+
+		this.#alphaTest = value;
+
+	}
+
 	onBuild( /* shaderobject, renderer */ ) {}
 
 	onBeforeCompile( /* shaderobject, renderer */ ) {}

src/renderers/shaders/ShaderChunk.js

@@ -1,6 +1,7 @@
 import alphamap_fragment from './ShaderChunk/alphamap_fragment.glsl.js';
 import alphamap_pars_fragment from './ShaderChunk/alphamap_pars_fragment.glsl.js';
 import alphatest_fragment from './ShaderChunk/alphatest_fragment.glsl.js';
+import alphatest_pars_fragment from './ShaderChunk/alphatest_pars_fragment.glsl.js';
 import aomap_fragment from './ShaderChunk/aomap_fragment.glsl.js';
 import aomap_pars_fragment from './ShaderChunk/aomap_pars_fragment.glsl.js';
 import begin_vertex from './ShaderChunk/begin_vertex.glsl.js';
@@ -136,6 +137,7 @@ export const ShaderChunk = {
 	alphamap_fragment: alphamap_fragment,
 	alphamap_pars_fragment: alphamap_pars_fragment,
 	alphatest_fragment: alphatest_fragment,
+	alphatest_pars_fragment: alphatest_pars_fragment,
 	aomap_fragment: aomap_fragment,
 	aomap_pars_fragment: aomap_pars_fragment,
 	begin_vertex: begin_vertex,

src/renderers/shaders/ShaderChunk/alphatest_fragment.glsl.js

@@ -1,7 +1,7 @@
 export default /* glsl */`
-#ifdef ALPHATEST
+#ifdef USE_ALPHATEST
 
-	if ( diffuseColor.a < ALPHATEST ) discard;
+	if ( diffuseColor.a < alphaTest ) discard;
 
 #endif
 `;

src/renderers/shaders/ShaderChunk/alphatest_pars_fragment.glsl.js

@@ -0,0 +1,5 @@
+export default /* glsl */`
+#ifdef USE_ALPHATEST
+	uniform float alphaTest;
+#endif
+`;

src/renderers/shaders/ShaderLib/depth_frag.glsl.js

@@ -10,6 +10,7 @@ export default /* glsl */`
 #include <uv_pars_fragment>
 #include <map_pars_fragment>
 #include <alphamap_pars_fragment>
+#include <alphatest_pars_fragment>
 #include <logdepthbuf_pars_fragment>
 #include <clipping_planes_pars_fragment>
 

src/renderers/shaders/ShaderLib/distanceRGBA_frag.glsl.js

@@ -11,6 +11,7 @@ varying vec3 vWorldPosition;
 #include <uv_pars_fragment>
 #include <map_pars_fragment>
 #include <alphamap_pars_fragment>
+#include <alphatest_pars_fragment>
 #include <clipping_planes_pars_fragment>
 
 void main () {

src/renderers/shaders/ShaderLib/meshbasic_frag.glsl.js

@@ -15,6 +15,7 @@ uniform float opacity;
 #include <uv2_pars_fragment>
 #include <map_pars_fragment>
 #include <alphamap_pars_fragment>
+#include <alphatest_pars_fragment>
 #include <aomap_pars_fragment>
 #include <lightmap_pars_fragment>
 #include <envmap_common_pars_fragment>
@@ -42,7 +43,7 @@ void main() {
 
 	// accumulation (baked indirect lighting only)
 	#ifdef USE_LIGHTMAP
-	
+
 		vec4 lightMapTexel= texture2D( lightMap, vUv2 );
 		reflectedLight.indirectDiffuse += lightMapTexelToLinear( lightMapTexel ).rgb * lightMapIntensity;
 

src/renderers/shaders/ShaderLib/meshlambert_frag.glsl.js

@@ -20,6 +20,7 @@ varying vec3 vIndirectFront;
 #include <uv2_pars_fragment>
 #include <map_pars_fragment>
 #include <alphamap_pars_fragment>
+#include <alphatest_pars_fragment>
 #include <aomap_pars_fragment>
 #include <lightmap_pars_fragment>
 #include <emissivemap_pars_fragment>

src/renderers/shaders/ShaderLib/meshmatcap_frag.glsl.js

@@ -13,7 +13,7 @@ varying vec3 vViewPosition;
 #include <uv_pars_fragment>
 #include <map_pars_fragment>
 #include <alphamap_pars_fragment>
-
+#include <alphatest_pars_fragment>
 #include <fog_pars_fragment>
 #include <normal_pars_fragment>
 #include <bumpmap_pars_fragment>

src/renderers/shaders/ShaderLib/meshphong_frag.glsl.js

@@ -15,6 +15,7 @@ uniform float opacity;
 #include <uv2_pars_fragment>
 #include <map_pars_fragment>
 #include <alphamap_pars_fragment>
+#include <alphatest_pars_fragment>
 #include <aomap_pars_fragment>
 #include <lightmap_pars_fragment>
 #include <emissivemap_pars_fragment>

src/renderers/shaders/ShaderLib/meshphysical_frag.glsl.js

@@ -48,6 +48,7 @@ varying vec3 vViewPosition;
 #include <uv2_pars_fragment>
 #include <map_pars_fragment>
 #include <alphamap_pars_fragment>
+#include <alphatest_pars_fragment>
 #include <aomap_pars_fragment>
 #include <lightmap_pars_fragment>
 #include <emissivemap_pars_fragment>

src/renderers/shaders/ShaderLib/meshtoon_frag.glsl.js

@@ -13,6 +13,7 @@ uniform float opacity;
 #include <uv2_pars_fragment>
 #include <map_pars_fragment>
 #include <alphamap_pars_fragment>
+#include <alphatest_pars_fragment>
 #include <aomap_pars_fragment>
 #include <lightmap_pars_fragment>
 #include <emissivemap_pars_fragment>

src/renderers/shaders/ShaderLib/points_frag.glsl.js

@@ -5,6 +5,7 @@ uniform float opacity;
 #include <common>
 #include <color_pars_fragment>
 #include <map_particle_pars_fragment>
+#include <alphatest_pars_fragment>
 #include <fog_pars_fragment>
 #include <logdepthbuf_pars_fragment>
 #include <clipping_planes_pars_fragment>

src/renderers/shaders/ShaderLib/sprite_frag.glsl.js

@@ -6,6 +6,7 @@ uniform float opacity;
 #include <uv_pars_fragment>
 #include <map_pars_fragment>
 #include <alphamap_pars_fragment>
+#include <alphatest_pars_fragment>
 #include <fog_pars_fragment>
 #include <logdepthbuf_pars_fragment>
 #include <clipping_planes_pars_fragment>

src/renderers/shaders/UniformsLib.js

@@ -18,6 +18,7 @@ const UniformsLib = {
 		uv2Transform: { value: new Matrix3() },
 
 		alphaMap: { value: null },
+		alphaTest: { value: 0 }
 
 	},
 
@@ -194,6 +195,7 @@ const UniformsLib = {
 		scale: { value: 1.0 },
 		map: { value: null },
 		alphaMap: { value: null },
+		alphaTest: { value: 0 },
 		uvTransform: { value: new Matrix3() }
 
 	},
@@ -206,6 +208,7 @@ const UniformsLib = {
 		rotation: { value: 0.0 },
 		map: { value: null },
 		alphaMap: { value: null },
+		alphaTest: { value: 0 },
 		uvTransform: { value: new Matrix3() }
 
 	}

src/renderers/webgl/WebGLMaterials.js

@@ -139,6 +139,12 @@ function WebGLMaterials( properties ) {
 
 		}
 
+		if ( material.alphaTest > 0 ) {
+
+			uniforms.alphaTest.value = material.alphaTest;
+
+		}
+
 		const envMap = properties.get( material ).envMap;
 
 		if ( envMap ) {
@@ -351,6 +357,12 @@ function WebGLMaterials( properties ) {
 
 		}
 
+		if ( material.alphaTest > 0 ) {
+
+			uniforms.alphaTest.value = material.alphaTest;
+
+		}
+
 		// uv repeat and offset setting priorities
 		// 1. color map
 		// 2. alpha map
@@ -399,6 +411,12 @@ function WebGLMaterials( properties ) {
 
 		}
 
+		if ( material.alphaTest > 0 ) {
+
+			uniforms.alphaTest.value = material.alphaTest;
+
+		}
+
 		// uv repeat and offset setting priorities
 		// 1. color map
 		// 2. alpha map

src/renderers/webgl/WebGLProgram.js

@@ -598,8 +598,6 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 
 			customDefines,
 
-			parameters.alphaTest ? '#define ALPHATEST ' + parameters.alphaTest + ( parameters.alphaTest % 1 ? '' : '.0' ) : '', // add '.0' if integer
-
 			'#define GAMMA_FACTOR ' + gammaFactorDefine,
 
 			( parameters.useFog && parameters.fog ) ? '#define USE_FOG' : '',
@@ -629,7 +627,9 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 			parameters.specularTintMap ? '#define USE_SPECULARTINTMAP' : '',
 			parameters.roughnessMap ? '#define USE_ROUGHNESSMAP' : '',
 			parameters.metalnessMap ? '#define USE_METALNESSMAP' : '',
+
 			parameters.alphaMap ? '#define USE_ALPHAMAP' : '',
+			parameters.alphaTest ? '#define USE_ALPHATEST' : '',
 
 			parameters.sheenTint ? '#define USE_SHEEN' : '',
 			parameters.transmission ? '#define USE_TRANSMISSION' : '',

src/renderers/webgl/WebGLPrograms.js

@@ -41,13 +41,13 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 		'clearcoat', 'clearcoatMap', 'clearcoatRoughnessMap', 'clearcoatNormalMap',
 		'displacementMap',
 		'specularMap', 'specularIntensityMap', 'specularTintMap', 'specularTintMapEncoding', 'roughnessMap', 'metalnessMap', 'gradientMap',
-		'alphaMap', 'combine', 'vertexColors', 'vertexAlphas', 'vertexTangents', 'vertexUvs', 'uvsVertexOnly', 'fog', 'useFog', 'fogExp2',
+		'alphaMap', 'alphaTest', 'combine', 'vertexColors', 'vertexAlphas', 'vertexTangents', 'vertexUvs', 'uvsVertexOnly', 'fog', 'useFog', 'fogExp2',
 		'flatShading', 'sizeAttenuation', 'logarithmicDepthBuffer', 'skinning',
 		'maxBones', 'useVertexTexture', 'morphTargets', 'morphNormals', 'premultipliedAlpha',
 		'numDirLights', 'numPointLights', 'numSpotLights', 'numHemiLights', 'numRectAreaLights',
 		'numDirLightShadows', 'numPointLightShadows', 'numSpotLightShadows',
 		'shadowMapEnabled', 'shadowMapType', 'toneMapping', 'physicallyCorrectLights',
-		'alphaTest', 'doubleSided', 'flipSided', 'numClippingPlanes', 'numClipIntersection', 'depthPacking', 'dithering',
+		'doubleSided', 'flipSided', 'numClippingPlanes', 'numClipIntersection', 'depthPacking', 'dithering',
 		'sheenTint', 'transmission', 'transmissionMap', 'thicknessMap'
 	];
 
@@ -154,6 +154,7 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 
 		const currentRenderTarget = renderer.getRenderTarget();
 
+		const useAlphaTest = material.alphaTest > 0;
 		const useClearcoat = material.clearcoat > 0;
 
 		const parameters = {
@@ -208,6 +209,7 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 			specularTintMap: !! material.specularTintMap,
 			specularTintMapEncoding: getTextureEncodingFromMap( material.specularTintMap ),
 			alphaMap: !! material.alphaMap,
+			alphaTest: useAlphaTest,
 
 			gradientMap: !! material.gradientMap,
 
@@ -264,7 +266,6 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 
 			premultipliedAlpha: material.premultipliedAlpha,
 
-			alphaTest: material.alphaTest,
 			doubleSided: material.side === DoubleSide,
 			flipSided: material.side === BackSide,