WebGPURenderPipelines: Make blending more flexible.

examples/jsm/renderers/webgpu/WebGPURenderPipelines.js

@@ -1,5 +1,10 @@
-import { GPUPrimitiveTopology, GPUIndexFormat, GPUTextureFormat, GPUCompareFunction, GPUFrontFace, GPUCullMode, GPUVertexFormat, GPUBlendFactor, GPUBlendOperation } from './constants.js';
-import { FrontSide, BackSide, DoubleSide, NeverDepth, AlwaysDepth, LessDepth, LessEqualDepth, EqualDepth, GreaterEqualDepth, GreaterDepth, NotEqualDepth } from '../../../../build/three.module.js';
+import { GPUPrimitiveTopology, GPUIndexFormat, GPUTextureFormat, GPUCompareFunction, GPUFrontFace, GPUCullMode, GPUVertexFormat, GPUBlendFactor, GPUBlendOperation, BlendColorFactor, OneMinusBlendColorFactor } from './constants.js';
+import {
+	FrontSide, BackSide, DoubleSide,
+	NeverDepth, AlwaysDepth, LessDepth, LessEqualDepth, EqualDepth, GreaterEqualDepth, GreaterDepth, NotEqualDepth,
+	AddEquation, SubtractEquation, ReverseSubtractEquation, MinEquation, MaxEquation,
+	ZeroFactor, OneFactor, SrcColorFactor, OneMinusSrcColorFactor, SrcAlphaFactor, OneMinusSrcAlphaFactor, DstAlphaFactor, OneMinusDstAlphaFactor, DstColorFactor, OneMinusDstColorFactor, SrcAlphaSaturateFactor
+} from '../../../../build/three.module.js';
 
 class WebGPURenderPipelines {
 
@@ -129,15 +134,11 @@ class WebGPURenderPipelines {
 
 			let colorBlend;
 
-			if ( material.transparent ) {
+			if ( material.transparent === true ) {
 
-				// @TODO: Should be customizable with material.blend* properties.
+				// @TODO: Add support for blending modes (etc. NormalBlending, AdditiveBlending)
 
-				colorBlend = {
-					srcFactor: GPUBlendFactor.SrcAlpha,
-					dstFactor: GPUBlendFactor.OneMinusSrcAlpha,
-					operation: GPUBlendOperation.Add
-				};
+				colorBlend = this._getColorBlend( material );
 
 			}
 
@@ -219,6 +220,121 @@ class WebGPURenderPipelines {
 
 	}
 
+	_getColorBlend( material ) {
+
+		const colorBlend = {
+			srcFactor: this._getBlendFactor( material.blendSrc ),
+			dstFactor: this._getBlendFactor( material.blendDst ),
+			operation: this._getBlendOperation( material.blendEquation )
+		};
+
+		return colorBlend;
+
+	}
+
+	_getBlendFactor( blend ) {
+
+		let blendFactor;
+
+		switch ( blend ) {
+
+			case ZeroFactor:
+				blendFactor = GPUBlendFactor.Zero;
+				break;
+
+			case OneFactor:
+				blendFactor = GPUBlendFactor.One;
+				break;
+
+			case SrcColorFactor:
+				blendFactor = GPUBlendFactor.SrcColor;
+				break;
+
+			case OneMinusSrcColorFactor:
+				blendFactor = GPUBlendFactor.OneMinusSrcColor;
+				break;
+
+			case SrcAlphaFactor:
+				blendFactor = GPUBlendFactor.SrcAlpha;
+				break;
+
+			case OneMinusSrcAlphaFactor:
+				blendFactor = GPUBlendFactor.OneMinusSrcAlpha;
+				break;
+
+			case DstColorFactor:
+				blendFactor = GPUBlendFactor.DstColor;
+				break;
+
+			case OneMinusDstColorFactor:
+				blendFactor = GPUBlendFactor.OneMinusDstColor;
+				break;
+
+			case DstAlphaFactor:
+				blendFactor = GPUBlendFactor.DstAlpha;
+				break;
+
+			case OneMinusDstAlphaFactor:
+				blendFactor = GPUBlendFactor.OneMinusDstAlpha;
+				break;
+
+			case SrcAlphaSaturateFactor:
+				blendFactor = GPUBlendFactor.SrcAlphaSaturated;
+				break;
+
+			case BlendColorFactor:
+				blendFactor = GPUBlendFactor.BlendColor;
+				break;
+
+			case OneMinusBlendColorFactor:
+				blendFactor = GPUBlendFactor.OneMinusBlendColor;
+				break;
+
+
+			default:
+				console.error( 'THREE.WebGPURenderer: Blend factor not supported.', blend );
+
+		}
+
+		return blendFactor;
+
+	}
+
+	_getBlendOperation( blendEquation ) {
+
+		let blendOperation;
+
+		switch ( blendEquation ) {
+
+			case AddEquation:
+				blendOperation = GPUBlendOperation.Add;
+				break;
+
+			case SubtractEquation:
+				blendOperation = GPUBlendOperation.Subtract;
+				break;
+
+			case ReverseSubtractEquation:
+				blendOperation = GPUBlendOperation.ReverseSubtract;
+				break;
+
+			case MinEquation:
+				blendOperation = GPUBlendOperation.Min;
+				break;
+
+			case MaxEquation:
+				blendOperation = GPUBlendOperation.Max;
+				break;
+
+			default:
+				console.error( 'THREE.WebGPURenderer: Blend equation not supported.', blendEquation );
+
+		}
+
+		return blendOperation;
+
+	}
+
 	_getDepthCompare( material ) {
 
 		let depthCompare;

examples/jsm/renderers/webgpu/constants.js

@@ -199,3 +199,8 @@ export const GPUBlendOperation = {
 	Min: 'min',
 	Max: 'max'
 };
+
+// @TODO Move to src/constants.js
+
+export const BlendColorFactor = 211;
+export const OneMinusBlendColorFactor = 212;

examples/webgpu_sandbox.html

@@ -54,7 +54,7 @@
 				// data texture
 
 				const geometryPlane = new THREE.PlaneBufferGeometry();
-				const materialPlane = new THREE.MeshBasicMaterial( { map: createDataTexture() } );
+				const materialPlane = new THREE.MeshBasicMaterial( { map: createDataTexture(), transparent: true, opacity: 0.5 } );
 
 				const plane = new THREE.Mesh( geometryPlane, materialPlane );
 				plane.position.set( - 1, - 1, 0 );
@@ -86,6 +86,8 @@
 				line.position.set( 1, 1, 0 );
 				scene.add( line );
 
+				//
+
 				renderer = new WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -138,7 +140,7 @@
 					data[ stride ] = r;
 					data[ stride + 1 ] = g;
 					data[ stride + 2 ] = b;
-					data[ stride + 3 ] = 1;
+					data[ stride + 3 ] = 255;
 
 				}