Hello Triangle - WebGPU Utils

README.md

Hello Triangle - WebGPU Utils

view on jsgist

index.css

/*bug-in-github-api-content-can-not-be-empty*/

index.html

<script src="https://greggman.github.io./webgpu-utils/dist/1.x/webgpu-utils.js"></script>

index.js

async function main({adapter}) {
  const device = await adapter?.requestDevice();
  const { context, presentationFormat } = getContext(device, 640, 480);
  const { buffers, bufferLayouts, numElements } = webgpuUtils.createBuffersAndAttributesFromArrays(device, { position: [
      0, 0.5, 0, 
      -0.5, -0.5, 1,
      0.5, -0.5, 1
    ] });
  const module = device.createShaderModule({ code: `
    struct MyVSInput { @location(0) position: vec4f, };
    @vertex fn myVSMain(v: MyVSInput) -> @builtin(position) vec4f { return v.position; }
    @fragment fn myFSMain() -> @location(0) vec4f { return vec4f(1, 0, 0, 1); }
  `});
  const pipeline = device.createRenderPipeline({ layout: 'auto',
    vertex: { module, buffers: bufferLayouts },
    fragment: { module, targets: [ {format: presentationFormat} ] },
  });
  const commandEncoder = device.createCommandEncoder();
  const passEncoder = beginRenderPass(commandEncoder, [context.getCurrentTexture()]);
  passEncoder.setPipeline(pipeline);
  passEncoder.setVertexBuffer(0, buffers[0]);
  passEncoder.draw(numElements);
  passEncoder.end();
  device.queue.submit([commandEncoder.finish()]);
}

// below there doesn't count given Toucan hides this as well

function beginRenderPass(encoder, attachemnts, loadOp = 'clear') {
  return encoder.beginRenderPass({
    colorAttachments: attachemnts.map(a => ({ view: a.createView(), loadOp, storeOp: 'store' })),
  });
}

function getContext(device, width, height) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  document.body.appendChild(canvas);
  const context = canvas.getContext('webgpu');
  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
  context.configure({
    device,
    format: presentationFormat,
    alphaMode: 'opaque', //'premultiplied',
  });
  return {context, presentationFormat};
}

async function setup() {
  const adapter = await navigator.gpu?.requestAdapter();
  main({ adapter });
}

setup();

jsGist.json

{"name":"Hello Triangle - WebGPU Utils","settings":{},"filenames":["index.html","index.css","index.js"]}