Feature: Add vertex color alpha channel support. (#20975)

* Feature: Add vertex color alpha channel support.

* Vertex alpha: Remove hasVertexAlpha from BufferGeometry

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

@@ -56,8 +56,13 @@
 		<div>
 		<code>
 		#ifdef USE_COLOR
-			// vertex color attribute
-			attribute vec3 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
 		#endif
 		</code>
 		<code>

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

@@ -56,8 +56,13 @@
 		<div>
 		<code>
 		#ifdef USE_COLOR
-			// vertex color attribute
-			attribute vec3 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
 		#endif
 		</code>
 		<code>

examples/webgl_buffergeometry.html

@@ -125,9 +125,11 @@
 
 					color.setRGB( vx, vy, vz );
 
-					colors.push( color.r, color.g, color.b );
-					colors.push( color.r, color.g, color.b );
-					colors.push( color.r, color.g, color.b );
+					const alpha = Math.random();
+
+					colors.push( color.r, color.g, color.b, alpha );
+					colors.push( color.r, color.g, color.b, alpha );
+					colors.push( color.r, color.g, color.b, alpha );
 
 				}
 
@@ -139,13 +141,13 @@
 
 				geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ).onUpload( disposeArray ) );
 				geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ).onUpload( disposeArray ) );
-				geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ).onUpload( disposeArray ) );
+				geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 4 ).onUpload( disposeArray ) );
 
 				geometry.computeBoundingSphere();
 
 				const material = new THREE.MeshPhongMaterial( {
 					color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
-					side: THREE.DoubleSide, vertexColors: true
+					side: THREE.DoubleSide, vertexColors: true, transparent: true
 				} );
 
 				mesh = new THREE.Mesh( geometry, material );

src/renderers/WebGLRenderer.js

@@ -1452,6 +1452,7 @@ function WebGLRenderer( parameters ) {
 		materialProperties.instancing = parameters.instancing;
 		materialProperties.numClippingPlanes = parameters.numClippingPlanes;
 		materialProperties.numIntersection = parameters.numClipIntersection;
+		materialProperties.vertexAlpha = parameters.vertexAlpha;
 
 	}
 
@@ -1465,6 +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 materialProperties = properties.get( material );
 		const lights = currentRenderState.state.lights;
@@ -1522,6 +1524,10 @@ function WebGLRenderer( parameters ) {
 
 				needsProgramChange = true;
 
+			} else if ( materialProperties.vertexAlpha !== vertexAlpha ) {
+
+				needsProgramChange = true;
+
 			}
 
 		} else {

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

@@ -1,7 +1,15 @@
 export default /* glsl */`
 #ifdef USE_COLOR
 
-	diffuseColor.rgb *= vColor;
+	#ifdef USE_VERTEX_ALPHA
+
+		diffuseColor *= vColor;
+
+	#else
+
+		diffuseColor.rgb *= vColor;
+
+	#endif
 
 #endif
 `;

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

@@ -1,7 +1,15 @@
 export default /* glsl */`
 #ifdef USE_COLOR
 
-	varying vec3 vColor;
+	#if defined( USE_VERTEX_ALPHA )
+
+		varying vec4 vColor;
+
+	#else
+
+		varying vec3 vColor;
+
+	#endif
 
 #endif
 `;

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

@@ -1,7 +1,15 @@
 export default /* glsl */`
 #if defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )
 
-	varying vec3 vColor;
+	#if defined( USE_VERTEX_ALPHA )
+
+		varying vec4 vColor;
+
+	#else
+
+		varying vec3 vColor;
+
+	#endif
 
 #endif
 `;

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

@@ -1,13 +1,21 @@
 export default /* glsl */`
 #if defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )
 
-	vColor = vec3( 1.0 );
+	#if defined( USE_VERTEX_ALPHA )
+
+		vColor = vec4( 1.0 );
+
+	#else
+
+		vColor = vec3( 1.0 );
+
+	#endif
 
 #endif
 
 #ifdef USE_COLOR
 
-	vColor.xyz *= color.xyz;
+	vColor *= color;
 
 #endif
 

src/renderers/webgl/WebGLProgram.js

@@ -472,6 +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.vertexUvs ? '#define USE_UV' : '',
 			parameters.uvsVertexOnly ? '#define UVS_VERTEX_ONLY' : '',
 
@@ -525,7 +526,15 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 
 			'#ifdef USE_COLOR',
 
-			'	attribute vec3 color;',
+			'	#ifdef USE_VERTEX_ALPHA',
+
+			'		attribute vec4 color;',
+
+			'	#else',
+
+			'		attribute vec3 color;',
+
+			'	#endif',
 
 			'#endif',
 
@@ -608,6 +617,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.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', 'vertexTangents', 'vertexUvs', 'uvsVertexOnly', 'fog', 'useFog', 'fogExp2',
+		'alphaMap', 'combine', 'vertexColors', 'vertexAlpha', 'vertexTangents', 'vertexUvs', 'uvsVertexOnly', 'fog', 'useFog', 'fogExp2',
 		'flatShading', 'sizeAttenuation', 'logarithmicDepthBuffer', 'skinning',
 		'maxBones', 'useVertexTexture', 'morphTargets', 'morphNormals', 'premultipliedAlpha',
 		'numDirLights', 'numPointLights', 'numSpotLights', 'numHemiLights', 'numRectAreaLights',
@@ -208,6 +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 ),
 			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,