RGBA Channel Mixer

Load an image (or use the built-in gradient), choose a swizzle mapping for each output channel, and see the result rendered side-by-side. Uses a WebGPU compute/render shader to remap rgba components — falling back to a WebGL shader when WebGPU is unavailable.

Drop an image here or click to browse — or use the built-in gradient below

R out

G out

B out

A out

Presets:

Load an image to start.

Original

Swizzled result

Generated WGSL shader

// Load an image to see the generated shader.

How it works

WebGPU texture component swizzle (Chrome 142) allows you to create a GPUTextureView that remaps channels without a copy or an extra render pass. The swizzle is declared when calling texture.createView():

const view = texture.createView({
  aspect: 'all',
  // Chrome 142+: component mapping
  component: {
    r: GPUComponentSwizzle.Green,
    g: GPUComponentSwizzle.Green,
    b: GPUComponentSwizzle.Green,
    a: GPUComponentSwizzle.One,
  },
});

When the component mapping API is not yet available, the same result can be achieved in WGSL by accessing textureSample() and manually selecting channels — that's exactly what the shader preview above shows.