v142 · graphics

WebGPU: Texture component swizzle

Functionality added to the WebGPU spec after its first shipment in a browser.

concepts

  1. Swizzle

    Pick a colour and remap RGBA channels via a dropdown for each output — see the result the shader would sample, plus a live probe for the adapter feature.

  2. Single-Channel as RGB

    The canonical use case from the spec issue: a single-channel R8 heightmap broadcast to grayscale, heatmap, and alpha-mask views with no extra shader. Four canvases derived from the same source data.

  3. Normal Map Channel Swap

    Repair a DirectX-authored normal map for an OpenGL-convention shader without reuploading or rewriting the shader. Pick per-output channel sources or one of five presets (flip Y, force alpha=1, BGRA→RGBA, …) and see the synthetic sphere relight live.

  4. RGBA Channel Mixer

    Load an image (drag-and-drop or file picker) and remap its RGBA channels via four dropdowns (each mapped to r/g/b/a/0/1). A preset gallery covers grayscale, channel-swap, red-only, and alpha-invert. "Apply swizzle" runs a generated WGSL pipeline on GPU; a side-by-side canvas shows original vs remapped, and the live WGSL shader updates with each change.

why it shipped

The texture component swizzle optional feature allows for efficient, flexible, and robust texture sampling in WebGPU, enabling developers to optimize performance, correct component ordering mismatches, and reuse shader code across various texture formats.

references