Typed shaders, and how to incorporate them into existing WebGPU codebases.

[iwoplaza]

We are currently experimenting with a couple ways of writing shaders in TypeGPU, but no matter which path we take, incorporating that API into existing WebGPU projects is essential.

Nowadays, WGSL shaders are either written in template strings or imported from a .wgsl file.

Use cases:

• A helpful TypeGPU library exists, and somebody wants to use it in their vanilla WebGPU project.
• Somebody wants to start writing their shaders in a type-safe way, incrementally.

const fullscreenTexturedQuadWGSL = `
@group(0) @binding(0) var mySampler : sampler;
@group(0) @binding(1) var myTexture : texture_2d<f32>;

struct VertexOutput {
  @builtin(position) Position : vec4f,
  @location(0) fragUV : vec2f,
}

@vertex
fn vert_main(@builtin(vertex_index) VertexIndex : u32) -> VertexOutput {
  const pos = array(
    vec2( 1.0,  1.0),
    vec2( 1.0, -1.0),
    vec2(-1.0, -1.0),
    vec2( 1.0,  1.0),
    vec2(-1.0, -1.0),
    vec2(-1.0,  1.0),
  );

  const uv = array(
    vec2(1.0, 0.0),
    vec2(1.0, 1.0),
    vec2(0.0, 1.0),
    vec2(1.0, 0.0),
    vec2(0.0, 1.0),
    vec2(0.0, 0.0),
  );

  var output : VertexOutput;
  output.Position = vec4(pos[VertexIndex], 0.0, 1.0);
  output.fragUV = uv[VertexIndex];
  return output;
}

@fragment
fn frag_main(@location(0) fragUV : vec2f) -> @location(0) vec4f {
  return textureSample(myTexture, mySampler, fragUV);
}
`;

const fullscreenQuadPipeline = device.createRenderPipeline({
  layout: 'auto',
  vertex: {
    module: device.createShaderModule({
      code: fullscreenTexturedQuadWGSL,
    }),
  },
  fragment: {
    module: device.createShaderModule({
      code: fullscreenTexturedQuadWGSL,
    }),
    targets: [
      {
        format: presentationFormat,
      },
    ],
  },
  primitive: {
    topology: 'triangle-list',
  },
});

Approach 1: Typing a whole module at once

// exporting resources from the shader
const { mySampler } = tgpu.parseShader(fullscreenTexturedQuadWGSL, {
  // importing external resources
  VertexOutput,
});

resources.mySampler; // any
resources.myTexture; // any
resources.VertexOutput; // any
resources.vert_main; // any
resources.frag_main; // any

Approach 2: Typing each function individually

const sampler = tgpu.createSampler({
  magFilter: 'linear',
  minFilter: 'linear',
});

const texture = tgpu.createTexture({
  size: [srcWidth, srcHeight, 1],
  format: 'rgba8unorm',
}).$usage(tgpu.TextureBinding, tgpu.RenderAttachment);

const VertexOutput = struct({
  Position: builtin.position,
  fragUV: vec2f,
});

export const vert_main = tgpu
  .vertexFn([], VertexOutput)
  .implement(/* wgsl */ `(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {
    const pos = array(
      vec2( 1.0,  1.0),
      vec2( 1.0, -1.0),
      vec2(-1.0, -1.0),
      vec2( 1.0,  1.0),
      vec2(-1.0, -1.0),
      vec2(-1.0,  1.0),
    );
  
    const uv = array(
      vec2(1.0, 0.0),
      vec2(1.0, 1.0),
      vec2(0.0, 1.0),
      vec2(1.0, 0.0),
      vec2(0.0, 1.0),
      vec2(0.0, 0.0),
    );
  
    var output: VertexOutput;
    output.Position = vec4(pos[VertexIndex], 0.0, 1.0);
    output.fragUV = uv[VertexIndex];
    return output;
  }`)
  .$uses({ VertexOutput });