WebGPU

by wio_dude

HTML

<canvas id="canvas">Canvas feature not suported</canvas>

CSS

canvas {
  border: 1px solid green;
}

JavaScript

async function main(gpu, canvas, shaders) {
  const context = canvas.getContext('webgpu');

  const adapter = await gpu.requestAdapter();
  const device = await adapter.getDevice();

  const format = gpu.getPreferedPresentationFormat();

  context.configure({
    device,
    format,
    alphaMode: 'opaque',
  });

  const pipelne = device.createPipeline({
    layout: 'auto',
    vertex: {
      module: device.createShaderModule({
        code: shaders.main.vertex,
      }),
      entryPoint: 'main',
    },
    fragment: {
      module: device.createShaderModule({
        code: shaders.main.fragment,
      }),
      entryPoint: 'main',
      targets: [{
        format
      }],
    },
    primitive: {
      topology: 'triangle-list',
    },
  });


  function frame() {
    // Sample is no longer the active page.
    if (!pageState.active) return;
    console.log('frame');

    const commandEncoder = device.createCommandEncoder();
    const textureView = context.getCurrentTexture().createView();

    const renderPassDescriptor = {
      colorAttachments: [{
        view: textureView,
        clearValue: {
          r: 0.0,
          g: 0.0,
          b: 0.0,
          a: 1.0
        },
        loadOp: 'clear',
        storeOp: 'store',
      }],
    };

    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    passEncoder.setPipeline(pipeline);
    passEncoder.draw(3, 1, 0, 0);
    passEncoder.end();

    device.queue.submit([commandEncoder.finish()]);
    requestAnimationFrame(frame);
  }

  requestAnimationFrame(frame);
}

const gpu = navigator.gpu;
const canvas = document.getElementById('canvas');

const shaders = {
  main: {},
};

shaders.main.vertex = `
@vertex
fn main(
  @builtin(vertex_index) VertexIndex : u32
) -> @builtin(position) vec4<f32> {
  var pos = array<vec2<f32>, 3>(
    vec2(0.0, 0.5),
    vec2(-0.5, -0.5),
    vec2(0.5, -0.5)
  );

  return vec4<f32>(pos[VertexIndex], 0.0, 1.0);
}
`;

shaders.main.fragment =...