demo · v142

Single-Channel as RGB

The canonical use case from the spec issue thread: render a single-channel texture (e.g. an R8 heightmap, glyph atlas, or depth pre-pass) as if it were RGB grayscale, without a custom fragment shader. componentSwizzle: { r: "red", g: "red", b: "red" } tells the sampler to broadcast the red channel into all three colour outputs. Same texture, four views, four shader-free remaps.

no swizzle
r=R g=G b=B a=A — only red used
r=R g=R b=R
single-channel → grayscale
r=R g=1−R b=0
heatmap (red→green ramp)
r=R g=R b=R a=R
alpha-mask from the same channel
GPUTextureViewDescriptor.componentSwizzle
—
computed by
CPU fallback

Source texture is a 32×32 R-only heightmap (a noise field). The four canvases display the same underlying data viewed through different swizzle masks. With componentSwizzle this happens at sample time on the GPU — no extra shader permutation, no second texture allocation.

relevant API

const view = redTexture.createView({
  format: "rgba8unorm",
  componentSwizzle: { r: "red", g: "red", b: "red", a: "one" },
});
// sampling this view returns (R, R, R, 1) per texel — grayscale, free.

see also