WebGPU: Small Code Textured Quad

README.md

WebGPU: Small Code Textured Quad

view on jsgist

index.css

:root { color-scheme: light dark; }

index.html

<canvas></canvas>

index.js

async function main() {
  const device = await (await navigator.gpu.requestAdapter()).requestDevice();
  const format = navigator.gpu.getPreferredCanvasFormat();
  const context = document.querySelector('canvas').getContext('webgpu');
  context.configure({
    format,
    device,
  });
  const module = device.createShaderModule({ code: `
    struct Vertex {
      @builtin(position) p: vec4f,
      @location(0) uv: vec2f,
    };
    @vertex fn v(@builtin(vertex_index) i: u32) -> Vertex {
      let verts = array(
         vec2f(-1, -1), vec2f(1, -1), vec2f(-1, 1),
         vec2f(-1,  1), vec2f(1, -1), vec2f( 1, 1),
      );
      let v = verts[i];
      return Vertex(vec4f(v, 0, 1), v * 0.5 + 0.5);
    }
    @group(0) @binding(0) var tex: texture_2d<f32>;
    @group(0) @binding(1) var s: sampler;
    @fragment fn f(v: Vertex) -> @location(0) vec4f {
      return textureSample(tex, s, v.uv);
    }
  ` });
  const tex = device.createTexture({format: 'rgba8unorm', size: [2, 2], usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING});
  device.queue.writeTexture({ texture: tex },
    new Uint8Array([
      255, 255, 128, 255,
      128, 255, 255, 255,
      255, 128, 255, 255,
      255, 128, 128, 255,
    ]),
    { bytesPerRow: 8 }, [2, 2]);
  const s = device.createSampler({ magFilter: 'linear' });
  const pipeline = device.createRenderPipeline({
    layout: 'auto',
    vertex: { module },
    fragment: { module, targets: [{format}] },
  });
  const bindGroup = device.createBindGroup({
    layout: pipeline.getBindGroupLayout(0),
    entries: [
      { binding: 1, resource: s },
      { binding: 0, resource: tex.createView() },
    ],
  });

  const commandEncoder = device.createCommandEncoder();
  const passEncoder = commandEncoder.beginRenderPass({
    colorAttachments: [{
      view: context.getCurrentTexture().createView(),
      clearValue: [0, 0, 0, 0],
      loadOp: 'clear',
      storeOp: 'store',
    }],
  });
  passEncoder.setPipeline(pipeline);
  passEncoder.setBindGroup(0, bindGroup);
  passEncoder.draw(6);
  passEncoder.end();
  device.queue.submit([commandEncoder.finish()]);
}
main();

jsGist.json

{"name":"WebGPU: Small Code Textured Quad","settings":{},"filenames":["index.html","index.css","index.js"]}