feat: add a blending option and assume premultiplied alpha everywhere

Author: jsulpis

lib/playground/src/pages/core/blending.astro

@@ -0,0 +1,74 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+
+<script>
+  import {
+    createRenderTarget,
+    linearToneMapping,
+    useCompositor,
+    useQuadRenderPass,
+    useWebGLCanvas,
+    useWebGLContext,
+  } from "usegl";
+  import { incrementRenderCount } from "../../components/renderCount";
+
+  const ctx = useWebGLContext("#glCanvas");
+  const target = createRenderTarget(ctx.gl);
+
+  const glCanvas = useWebGLCanvas({
+    canvas: "#glCanvas",
+    target,
+    fragment: /* glsl */ `
+      varying vec2 vUv;
+      uniform vec2 uResolution;
+
+      void main() {
+        vec2 uv = (vUv - .5) * 2.0 * uResolution / min(uResolution.x, uResolution.y);
+
+        float circleLeft = 1. - smoothstep(.3,.6, distance(uv, vec2(-.3, .2)));
+        float circleRight = 1. - smoothstep(.3,.6, distance(uv, vec2(.3, .2)));
+        float alpha = max(circleLeft, circleRight);
+
+        gl_FragColor = vec4(circleLeft, circleRight, 0, alpha);
+      }
+    `,
+  });
+  glCanvas.onAfterRender(incrementRenderCount);
+
+  const bluePass = useQuadRenderPass(glCanvas.gl, {
+    target,
+    fragment: /* glsl */ `
+      varying vec2 vUv;
+      uniform vec2 uResolution;
+
+      void main() {
+        vec2 uv = (vUv - .5) * 2.0 * uResolution / min(uResolution.x, uResolution.y);
+
+        float circleMiddle = 1. - smoothstep(.3,.6, distance(uv, vec2(0, -.3)));
+        gl_FragColor = vec4(0, 0, circleMiddle, circleMiddle);
+      }
+    `,
+    uniforms: {
+      uResolution: () => glCanvas.uniforms.uResolution,
+    },
+    blending: "additive",
+  });
+  bluePass.onAfterRender(incrementRenderCount);
+
+  const compositor = useCompositor(glCanvas.gl, bluePass, [linearToneMapping()]);
+
+  glCanvas.onAfterRender(() => {
+    compositor.render({ clear: false });
+  });
+</script>
+
+<Layout title="Blending">
+  <canvas id="glCanvas"></canvas>
+</Layout>
+
+<style>
+  canvas {
+    background: darkgray;
+  }
+</style>

lib/playground/src/pages/gpgpu/boids (static).astro

@@ -66,7 +66,6 @@ import Layout from "../../layouts/Layout.astro";
     attributes: {
       aCoords: positions.coords,
     },
-    transparent: true,
   });
 
   renderPass.onAfterRender(incrementRenderCount);

lib/playground/src/pages/gpgpu/boids.astro

@@ -67,7 +67,7 @@ import Layout from "../../layouts/Layout.astro";
     attributes: {
       aCoords: positions.coords,
     },
-    transparent: true,
+    blending: "normal",
   });
 
   renderPass.onAfterRender(incrementRenderCount);

lib/playground/src/pages/gpgpu/particles - FBO (static).astro

@@ -81,7 +81,6 @@ import Layout from "../../layouts/Layout.astro";
     attributes: {
       aCoords: positions.coords,
     },
-    transparent: true,
   });
 
   renderPass.onAfterRender(incrementRenderCount);

lib/playground/src/pages/gpgpu/particles - FBO.astro

@@ -79,7 +79,8 @@ import Layout from "../../layouts/Layout.astro";
 
       void main() {
         vec2 uv = gl_PointCoord.xy;
-        outColor = vec4(0, 1, .5, smoothstep(0.5, 0.4, length(uv - 0.5)));
+        outColor.a = smoothstep(0.5, 0.4, length(uv - 0.5));
+        outColor.rgb = vec3(0, 1, .5) * outColor.a;
       }
     `,
     uniforms: {
@@ -88,7 +89,7 @@ import Layout from "../../layouts/Layout.astro";
     attributes: {
       aCoords: positions.coords,
     },
-    transparent: true,
+    blending: "normal",
   });
 
   renderPass.onAfterRender(incrementRenderCount);

lib/playground/src/shaders/boids.ts

@@ -155,6 +155,7 @@ out vec4 outColor;
 
 void main() {
   vec2 uv = gl_PointCoord.xy;
-  outColor = vec4(vColor.rgb, vColor.a * smoothstep(0.5, 0.4, length(uv - 0.5)));
+  outColor.a = vColor.a * smoothstep(0.5, 0.4, length(uv - 0.5));
+  outColor.rgb = vColor.rgb * outColor.a;
 }
 `;

lib/src/effects/toneMapping/glsl/_main.glsl

@@ -1,6 +1,11 @@
 void main() {
-  vec4 color = texture(uTexture, vUv) * uExposure;
+  vec4 color = texture(uTexture, vUv);
+  color.rgb *= uExposure;
+  color.rgb = color.a == 0.0 ? vec3(0.0) : color.rgb / color.a; // premultiplied -> straight alpha
+
   color.rgb = toneMapping(color.rgb);
+
+  color.rgb *= color.a; // back to premultiplied alpha
   color = clamp(color, 0.0, 1.0);
 
   if (uConvertToSRGB) {

lib/src/hooks/useRenderPass.ts

@@ -19,7 +19,7 @@ export type RenderPassOptions<U extends Uniforms = Record<string, never>> = {
   vertex: string;
   attributes?: Record<string, Attribute>;
   uniforms?: U;
-  transparent?: boolean;
+  blending?: "none" | "normal" | "additive";
   drawMode?: DrawMode;
   transformFeedbackVaryings?: string[];
   resolutionScale?: number;
@@ -33,7 +33,7 @@ export function useRenderPass<U extends Uniforms>(
     vertex,
     attributes = {},
     uniforms: userUniforms = {} as U,
-    transparent = false,
+    blending = "none",
     drawMode: userDrawMode,
     transformFeedbackVaryings,
     resolutionScale = 1,
@@ -125,15 +125,9 @@ export function useRenderPass<U extends Uniforms>(
     setRenderTarget(_gl, target ?? _target, clear);
     _gl.useProgram(_program);
 
-    if (transparent) {
-      _gl.enable(_gl.BLEND);
-      _gl.blendFunc(_gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA);
-    } else {
-      _gl.disable(_gl.BLEND);
-    }
-
     bindVAO();
     setUniforms();
+    setBlending(_gl, blending);
 
     executeBeforeRenderCallbacks({ uniforms: getUniformsSnapshot() });
 
@@ -164,3 +158,21 @@ export function useRenderPass<U extends Uniforms>(
     onResize,
   };
 }
+
+function setBlending(gl: WebGL2RenderingContext, blending: "none" | "normal" | "additive") {
+  if (blending === "none") {
+    return gl.disable(gl.BLEND);
+  }
+
+  gl.enable(gl.BLEND);
+
+  // assuming premultiplied alpha
+  switch (blending) {
+    case "normal": {
+      return gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    }
+    case "additive": {
+      return gl.blendFunc(gl.ONE, gl.ONE);
+    }
+  }
+}