demo · v143 · graphics

Channel router

A visual playground for the texture-component-swizzle mapping. Pick a source colour, pick a swizzle for each of the four output channels (r/g/b/a/zero/one), and watch the result re-render — without any shader code. Six preset swizzles capture the canonical use cases.

Optional WebGPU feature: texture-component-swizzle ships as an optional adapter feature in Chrome 143. The demo simulates the mapping in JS so the visual result is correct even when your adapter doesn't advertise it.

Source pixel

Each big rectangle below is a "pixel" sampled from a 4-channel texture. Each side shows the swizzle output.

Per-channel routing

output R ←

output G ←

output B ←

output A ←

Presets

Rendered (live preview of swizzle on a test image)

WebGPU snippet

const view = texture.createView({
  // available when adapter.features.has("texture-component-swizzle")
  swizzle: { r: "g", g: "r", b: "b", a: "one" }
});