demo · v130

Blend equation studio

Five canonical use cases for dual-source blending (subpixel text, premultiplied compositing, custom RGB-mask effects, two-pass lighting, color-channel correction). For each: the WGSL fragment output, the WebGPU blend-state JSON, the resulting equation written out, and a visual preview that demonstrates what the GPU actually produces.

use case

global alpha 100%

WGSL fragment output (two locations)

WebGPU blend state

resolved blend equation

visual preview

destination only

the existing framebuffer pixel

without dual-source

single src·alpha + dst·(1-alpha)

with dual-source (Chrome 130)

src·@location(0) + dst·@location(1)

apparent effect

the code

// WGSL — fragment outputs at two locations
struct Out { @location(0) src : vec4f, @location(1) mask : vec4f }

@fragment
fn fs(in: VsOut) -> Out {
  let coverage = vec3f(...);  // per-channel R, G, B coverage from glyph rasterisation
  return Out(vec4f(textColor.rgb, 1.0), vec4f(coverage, max(coverage.r, max(coverage.g, coverage.b))));
}

// JS — blend state references @location(1) as src1
device.createRenderPipeline({
  fragment: {
    targets: [{
      format: "bgra8unorm",
      blend: {
        color: { srcFactor: "src1", dstFactor: "one-minus-src1", operation: "add" },
        alpha: { srcFactor: "src1-alpha", dstFactor: "one-minus-src1-alpha", operation: "add" }
      }
    }]
  }
});