Merge pull request #20275 from takahirox/WebGPUAlpha

WebGPURenderer: Initial color blending
mrdoob · Sep 6, 2020 · fcde309 · fcde309
2 parents 3fd2561 + a34ff61
commit fcde309
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/examples/jsm/renderers/webgpu/WebGPUBindings.js b/examples/jsm/renderers/webgpu/WebGPUBindings.js
@@ -257,6 +257,28 @@ class WebGPUBindings {
 
 		const cameraGroup = this.sharedUniformsGroups.get( 'cameraUniforms' );
 
+		const opacityGroup = new WebGPUUniformsGroup();
+		opacityGroup.setName( 'opacityUniforms' );
+		opacityGroup.setUniform( 'opacity', 1.0 );
+		opacityGroup.visibility = GPUShaderStage.FRAGMENT;
+		opacityGroup.setUpdateCallback( function ( array, object ) {
+
+			const material = object.material;
+			const opacity = material.transparent ? material.opacity : 1.0;
+
+			let updated = false;
+
+			if ( array[ 0 ] !== opacity ) {
+
+				array[ 0 ] = opacity;
+				updated = true;
+
+			}
+
+			return updated;
+
+		} );
+
 		// samplers
 
 		const diffuseSampler = new WebGPUSampler();
@@ -271,6 +293,7 @@ class WebGPUBindings {
 
 		bindings.push( modelGroup );
 		bindings.push( cameraGroup );
+		bindings.push( opacityGroup );
 		bindings.push( diffuseSampler );
 		bindings.push( diffuseTexture );
 

diff --git a/examples/jsm/renderers/webgpu/WebGPURenderPipelines.js b/examples/jsm/renderers/webgpu/WebGPURenderPipelines.js
@@ -124,6 +124,20 @@ class WebGPURenderPipelines {
 
 			}
 
+			let colorBlend;
+
+			if ( material.transparent ) {
+
+				// @TODO: Should be customizable with material.blend* properties.
+
+				colorBlend = {
+					srcFactor: 'src-alpha',
+					dstFactor: 'one-minus-src-alpha',
+					operation: 'add'
+				};
+
+			}
+
 			// pipeline
 
 			const primitiveTopology = this._getPrimitiveTopology( object );
@@ -135,7 +149,10 @@ class WebGPURenderPipelines {
 				fragmentStage: moduleFragment,
 				primitiveTopology: primitiveTopology,
 				rasterizationState: rasterizationState,
-				colorStates: [ { format: GPUTextureFormat.BRGA8Unorm } ],
+				colorStates: [ {
+					format: GPUTextureFormat.BRGA8Unorm,
+					colorBlend: colorBlend
+				} ],
 				depthStencilState: {
 					depthWriteEnabled: material.depthWrite,
 					depthCompare: GPUCompareFunction.Less,
@@ -287,14 +304,19 @@ const ShaderLib = {
 			gl_Position = cameraUniforms.projectionMatrix * modelUniforms.modelViewMatrix * vec4( position, 1.0 );
 		}`,
 		fragmentShader: `#version 450
-		layout(set = 0, binding = 2) uniform sampler mySampler;
-		layout(set = 0, binding = 3) uniform texture2D myTexture;
+		layout(set = 0, binding = 2) uniform OpacityUniforms {
+			float opacity;
+		} opacityUniforms;
+
+		layout(set = 0, binding = 3) uniform sampler mySampler;
+		layout(set = 0, binding = 4) uniform texture2D myTexture;
 
 		layout(location = 0) in vec2 vUv;
 		layout(location = 0) out vec4 outColor;
 
 		void main() {
 			outColor = texture( sampler2D( myTexture, mySampler ), vUv );
+			outColor.a *= opacityUniforms.opacity;
 		}`
 	},
 	points_basic: {