Add mechanism to disable blending with device parameters

visgl · Mar 31, 2024 · d9095d1 · d9095d1
1 parent 9ed3a8b
commit d9095d1
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 31 deletions.
diff --git a/modules/core/src/adapter/types/parameters.ts b/modules/core/src/adapter/types/parameters.ts
@@ -138,7 +138,7 @@ export type BlendFactor =
   | 'one-minus-constant-alpha';
 
 /** BlendOperation defines the algorithm used to combine source and destination blend factors: */
-export type BlendOperation = 'add' | 'subtract' | 'reverse-subtract' | 'min' | 'max';
+export type BlendOperation = 'add' | 'subtract' | 'reverse-subtract' | 'min' | 'max' | 'none';
 
 /* Color parameters are set on the RenderPipeline */
 export type ColorParameters = {

diff --git a/modules/test-utils/tsconfig.json b/modules/test-utils/tsconfig.json
@@ -10,6 +10,7 @@
   },
   "references": [
     {"path": "../core"},
+    {"path": "../engine"},
     {"path": "../webgl"},
     {"path": "../webgpu"}
   ]

diff --git a/modules/webgl/src/adapter/converters/device-parameters.ts b/modules/webgl/src/adapter/converters/device-parameters.ts
@@ -281,35 +281,39 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
   // COLOR STATE
 
   if (parameters.blendColorOperation || parameters.blendAlphaOperation) {
-    gl.enable(GL.BLEND);
-
-    const colorEquation = convertBlendOperationToEquation(
-      'blendColorOperation',
-      parameters.blendColorOperation || 'add'
-    );
-    const alphaEquation = convertBlendOperationToEquation(
-      'blendAlphaOperation',
-      parameters.blendAlphaOperation || 'add'
-    );
-    gl.blendEquationSeparate(colorEquation, alphaEquation);
+    if (parameters.blendColorOperation === 'none' || parameters.blendAlphaOperation === 'none') {
+      gl.disable(GL.BLEND);
+    } else {
+      gl.enable(GL.BLEND);
+
+      const colorEquation = convertBlendOperationToEquation(
+        'blendColorOperation',
+        parameters.blendColorOperation || 'add'
+      );
+      const alphaEquation = convertBlendOperationToEquation(
+        'blendAlphaOperation',
+        parameters.blendAlphaOperation || 'add'
+      );
+      gl.blendEquationSeparate(colorEquation, alphaEquation);
 
-    const colorSrcFactor = convertBlendFactorToFunction(
-      'blendColorSrcFactor',
-      parameters.blendColorSrcFactor || 'one'
-    );
-    const colorDstFactor = convertBlendFactorToFunction(
-      'blendColorDstFactor',
-      parameters.blendColorDstFactor || 'zero'
-    );
-    const alphaSrcFactor = convertBlendFactorToFunction(
-      'blendAlphaSrcFactor',
-      parameters.blendAlphaSrcFactor || 'one'
-    );
-    const alphaDstFactor = convertBlendFactorToFunction(
-      'blendAlphaDstFactor',
-      parameters.blendAlphaDstFactor || 'zero'
-    );
-    gl.blendFuncSeparate(colorSrcFactor, colorDstFactor, alphaSrcFactor, alphaDstFactor);
+      const colorSrcFactor = convertBlendFactorToFunction(
+        'blendColorSrcFactor',
+        parameters.blendColorSrcFactor || 'one'
+      );
+      const colorDstFactor = convertBlendFactorToFunction(
+        'blendColorDstFactor',
+        parameters.blendColorDstFactor || 'zero'
+      );
+      const alphaSrcFactor = convertBlendFactorToFunction(
+        'blendAlphaSrcFactor',
+        parameters.blendAlphaSrcFactor || 'one'
+      );
+      const alphaDstFactor = convertBlendFactorToFunction(
+        'blendAlphaDstFactor',
+        parameters.blendAlphaDstFactor || 'zero'
+      );
+      gl.blendFuncSeparate(colorSrcFactor, colorDstFactor, alphaSrcFactor, alphaDstFactor);
+    }
   }
 }
 
@@ -377,9 +381,9 @@ function convertStencilOperation(parameter: string, value: StencilOperation): GL
 
 function convertBlendOperationToEquation(
   parameter: string,
-  value: BlendOperation
+  value: Exclude<BlendOperation, 'none'>
 ): GLBlendEquation {
-  return map<BlendOperation, GLBlendEquation>(parameter, value, {
+  return map<Exclude<BlendOperation, 'none'>, GLBlendEquation>(parameter, value, {
     add: GL.FUNC_ADD,
     subtract: GL.FUNC_SUBTRACT,
     'reverse-subtract': GL.FUNC_REVERSE_SUBTRACT,