WebGLRenderer: Refactored vertex color alpha code (#21530)

* WebGLRenderer: Refactored vertex color alpha code

* WebGLRenderer: Reimplemented vertexAlphas program check.

* WebGLProgram: Code robustness.

docs/api/en/renderers/webgl/WebGLProgram.html

@@ -55,14 +55,12 @@
 		<h3>Vertex shader (conditional):</h3>
 		<div>
 		<code>
-		#ifdef USE_COLOR
-			#ifdef USE_VERTEX_ALPHA
-				// vertex color attribute with alpha channel
-				attribute vec4 color;
-			#else
-				// vertex color attribute without alpha channel
-				attribute vec3 color;
-			#endif
+		#if defined( USE_COLOR_ALPHA )
+			// vertex color attribute with alpha
+			attribute vec4 color;
+		#elif defined( USE_COLOR )
+			// vertex color attribute
+			attribute vec3 color;
 		#endif
 		</code>
 		<code>

docs/api/zh/renderers/webgl/WebGLProgram.html

@@ -55,14 +55,12 @@
 		<h3>顶点着色器(有条件的):</h3>
 		<div>
 		<code>
-		#ifdef USE_COLOR
-			#ifdef USE_VERTEX_ALPHA
-				// vertex color attribute with alpha channel
-				attribute vec4 color;
-			#else
-				// vertex color attribute without alpha channel
-				attribute vec3 color;
-			#endif
+		#if defined( USE_COLOR_ALPHA )
+			// vertex color attribute with alpha
+			attribute vec4 color;
+		#elif defined( USE_COLOR )
+			// vertex color attribute
+			attribute vec3 color;
 		#endif
 		</code>
 		<code>

src/renderers/WebGLRenderer.js

@@ -1452,7 +1452,7 @@ function WebGLRenderer( parameters ) {
 		materialProperties.instancing = parameters.instancing;
 		materialProperties.numClippingPlanes = parameters.numClippingPlanes;
 		materialProperties.numIntersection = parameters.numClipIntersection;
-		materialProperties.vertexAlpha = parameters.vertexAlpha;
+		materialProperties.vertexAlphas = parameters.vertexAlphas;
 
 	}
 
@@ -1466,7 +1466,7 @@ function WebGLRenderer( parameters ) {
 		const environment = material.isMeshStandardMaterial ? scene.environment : null;
 		const encoding = ( _currentRenderTarget === null ) ? _this.outputEncoding : _currentRenderTarget.texture.encoding;
 		const envMap = cubemaps.get( material.envMap || environment );
-		const vertexAlpha = ( ( object.isMesh || object.isLine || object.isPoints ) && object.geometry.attributes.color && object.geometry.attributes.color.itemSize === 4 );
+		const vertexAlphas = material.vertexColors === true && object.geometry.attributes.color && object.geometry.attributes.color.itemSize === 4;
 
 		const materialProperties = properties.get( material );
 		const lights = currentRenderState.state.lights;
@@ -1524,7 +1524,7 @@ function WebGLRenderer( parameters ) {
 
 				needsProgramChange = true;
 
-			} else if ( materialProperties.vertexAlpha !== vertexAlpha ) {
+			} else if ( materialProperties.vertexAlphas !== vertexAlphas ) {
 
 				needsProgramChange = true;
 

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

 export default /* glsl */`
-#ifdef USE_COLOR
+#if defined( USE_COLOR_ALPHA )
 
-	#ifdef USE_VERTEX_ALPHA
+	diffuseColor *= vColor;
 
-		diffuseColor *= vColor;
+#elif defined( USE_COLOR )
 
-	#else
-
-		diffuseColor.rgb *= vColor;
-
-	#endif
+	diffuseColor.rgb *= vColor;
 
 #endif
 `;

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

 export default /* glsl */`
-#ifdef USE_COLOR
+#if defined( USE_COLOR_ALPHA )
 
-	#if defined( USE_VERTEX_ALPHA )
+	varying vec4 vColor;
 
-		varying vec4 vColor;
+#elif defined( USE_COLOR )
 
-	#else
-
-		varying vec3 vColor;
-
-	#endif
+	varying vec3 vColor;
 
 #endif
 `;

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

 export default /* glsl */`
-#if defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )
+#if defined( USE_COLOR_ALPHA )
 
-	#if defined( USE_VERTEX_ALPHA )
+	varying vec4 vColor;
 
-		varying vec4 vColor;
+#elif defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )
 
-	#else
-
-		varying vec3 vColor;
-
-	#endif
+	varying vec3 vColor;
 
 #endif
 `;

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

 export default /* glsl */`
-#if defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )
+#if defined( USE_COLOR_ALPHA )
 
-	#if defined( USE_VERTEX_ALPHA )
+	vColor = vec4( 1.0 );
 
-		vColor = vec4( 1.0 );
+#elif defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )
 
-	#else
-
-		vColor = vec3( 1.0 );
-
-	#endif
+	vColor = vec3( 1.0 );
 
 #endif
 

src/renderers/webgl/WebGLProgram.js

@@ -472,7 +472,7 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 
 			parameters.vertexTangents ? '#define USE_TANGENT' : '',
 			parameters.vertexColors ? '#define USE_COLOR' : '',
-			parameters.vertexAlpha ? '#define USE_VERTEX_ALPHA' : '',
+			parameters.vertexAlphas ? '#define USE_COLOR_ALPHA' : '',
 			parameters.vertexUvs ? '#define USE_UV' : '',
 			parameters.uvsVertexOnly ? '#define UVS_VERTEX_ONLY' : '',
 
@@ -524,17 +524,13 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 
 			'#endif',
 
-			'#ifdef USE_COLOR',
+			'#if defined( USE_COLOR_ALPHA )',
 
-			'	#ifdef USE_VERTEX_ALPHA',
+			'	attribute vec4 color;',
 
-			'		attribute vec4 color;',
+			'#elif defined( USE_COLOR )',
 
-			'	#else',
-
-			'		attribute vec3 color;',
-
-			'	#endif',
+			'	attribute vec3 color;',
 
 			'#endif',
 
@@ -617,7 +613,7 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 
 			parameters.vertexTangents ? '#define USE_TANGENT' : '',
 			parameters.vertexColors || parameters.instancingColor ? '#define USE_COLOR' : '',
-			parameters.vertexAlpha ? '#define USE_VERTEX_ALPHA' : '',
+			parameters.vertexAlphas ? '#define USE_COLOR_ALPHA' : '',
 			parameters.vertexUvs ? '#define USE_UV' : '',
 			parameters.uvsVertexOnly ? '#define UVS_VERTEX_ONLY' : '',
 

src/renderers/webgl/WebGLPrograms.js

@@ -38,7 +38,7 @@ function WebGLPrograms( renderer, cubemaps, extensions, capabilities, bindingSta
 		'map', 'mapEncoding', 'matcap', 'matcapEncoding', 'envMap', 'envMapMode', 'envMapEncoding', 'envMapCubeUV',
 		'lightMap', 'lightMapEncoding', 'aoMap', 'emissiveMap', 'emissiveMapEncoding', 'bumpMap', 'normalMap', 'objectSpaceNormalMap', 'tangentSpaceNormalMap', 'clearcoatMap', 'clearcoatRoughnessMap', 'clearcoatNormalMap', 'displacementMap', 'specularMap',
 		'roughnessMap', 'metalnessMap', 'gradientMap',
-		'alphaMap', 'combine', 'vertexColors', 'vertexAlpha', 'vertexTangents', 'vertexUvs', 'uvsVertexOnly', 'fog', 'useFog', 'fogExp2',
+		'alphaMap', 'combine', 'vertexColors', 'vertexAlphas', 'vertexTangents', 'vertexUvs', 'uvsVertexOnly', 'fog', 'useFog', 'fogExp2',
 		'flatShading', 'sizeAttenuation', 'logarithmicDepthBuffer', 'skinning',
 		'maxBones', 'useVertexTexture', 'morphTargets', 'morphNormals', 'premultipliedAlpha',
 		'numDirLights', 'numPointLights', 'numSpotLights', 'numHemiLights', 'numRectAreaLights',
@@ -208,7 +208,7 @@ function WebGLPrograms( renderer, cubemaps, extensions, capabilities, bindingSta
 
 			vertexTangents: ( material.normalMap && material.vertexTangents ),
 			vertexColors: material.vertexColors,
-			vertexAlpha: ( ( object.isMesh || object.isLine || object.isPoints ) && object.geometry.attributes.color && object.geometry.attributes.color.itemSize === 4 ),
+			vertexAlphas: material.vertexColors === true && object.geometry.attributes.color && object.geometry.attributes.color.itemSize === 4,
 			vertexUvs: !! material.map || !! material.bumpMap || !! material.normalMap || !! material.specularMap || !! material.alphaMap || !! material.emissiveMap || !! material.roughnessMap || !! material.metalnessMap || !! material.clearcoatMap || !! material.clearcoatRoughnessMap || !! material.clearcoatNormalMap || !! material.displacementMap || !! material.transmissionMap,
 			uvsVertexOnly: ! ( !! material.map || !! material.bumpMap || !! material.normalMap || !! material.specularMap || !! material.alphaMap || !! material.emissiveMap || !! material.roughnessMap || !! material.metalnessMap || !! material.clearcoatNormalMap || !! material.transmissionMap ) && !! material.displacementMap,