v143 · graphics

WebGPU: Texture component swizzle

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

concepts

  1. Swizzle

    Pick per-channel mappings (r/g/b/a/zero/one), see the texture re-sample live on a canvas, and probe whether your WebGPU adapter exposes the optional texture-component-swizzle feature.

  2. Normal map fix-up

    The reason swizzle was added: reconcile DirectX-style vs OpenGL-style normal maps with one swizzle config, no shader changes. The canonical art-asset portability case.

  3. Channel router

    A visual playground: per-channel routing with dropdowns (r/g/b/a/zero/one), six common presets (BGRA, single-channel grey, luminance-alpha, alpha-mask, etc.), and a live canvas preview that re-renders without touching the shader.

  4. Swizzle Animator

    A 3-keyframe timeline editor with R/G/B/A rows and per-cell dropdowns animates a procedural gradient through swizzle configurations. Play/Pause, speed slider, and manual time scrubber drive the animation. Three preset animations (Channel Cycle, Pulse Alpha, Chromatic Shift) plus a live WGSL textureComponentSwizzle descriptor display show the API in motion.

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