demo · v130

WebGPU dual-source blending

A real WebGPU pipeline with requiredFeatures: ["dual-source-blending"]. The fragment shader emits two outputs — a colour and an alpha-mask — combined by the blend equation to simulate sub-pixel text rendering against the background swatch below.

requires WebGPU + dual-source-blending feature Available on Chrome 130+ where the adapter supports the feature. The demo feature-detects and renders a CSS-only fallback if WebGPU is missing.

the code

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("dual-source-blending")) throw new Error("not supported");
const device = await adapter.requestDevice({
  requiredFeatures: ["dual-source-blending"],
});

const shader = device.createShaderModule({ code: `
  enable dual_source_blending;
  @fragment
  fn fs() -> @location(0) @blend_src(0) FragmentOutput {
    return FragmentOutput(srcColor, srcMask);  // src1 = mask (per-channel)
  }
`});

device.createRenderPipeline({
  fragment: {
    module: shader,
    targets: [{
      format: "bgra8unorm",
      blend: {
        color: { srcFactor: "src1", dstFactor: "one-minus-src1", operation: "add" },
        alpha: { srcFactor: "src1-alpha", dstFactor: "one-minus-src1-alpha", operation: "add" },
      },
    }],
  },
});

see also