Skip to content

Instantly share code, notes, and snippets.

@ccincotti3
Last active January 9, 2023 02:08
Show Gist options
  • Save ccincotti3/e83656ca5459b6dda842589bd13e8443 to your computer and use it in GitHub Desktop.
Save ccincotti3/e83656ca5459b6dda842589bd13e8443 to your computer and use it in GitHub Desktop.
This is the code that we worked on in part two of the WebGPU YouTube Series. https://carmencincotti.com/2023-01-02/how-to-render-a-webgpu-triangle-series-part-four-video/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carmen's Fun WebGPU Triangle</title>
</head>
<body>
<canvas id="canvas-container"></canvas>
</body>
<script>
const init = async () => {
const gpu = navigator.gpu
if (!gpu) {
console.error("Hey I didn't find WebGPU in this browser.")
}
const canvas = document.getElementById("canvas-container")
const context = canvas.getContext("webgpu")
if (!context) {
console.error("Hey NO CANVAS CONTEXT FOUND!")
}
const adapter = await gpu.requestAdapter(); // GPUAdapter
if (!adapter) {
console.error("WebGPU cannot be initialized - Adapter not found");
return null;
}
const device = await adapter.requestDevice(); // GPUDevice
device.lost.then(() => {
console.error("WebGPU cannot be initialized - Device has been lost");
return null;
});
// ~~ CONFIGURE THE SWAP CHAIN ~~
// https://carmencincotti.com/2022-04-18/drawing-a-webgpu-triangle/#swap-chain
// https://www.w3.org/TR/webgpu/#dom-gpu-getpreferredcanvasformat
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({
device, // Create link between GPU and canvas.
format: presentationFormat,
alphaMode: "opaque"
});
// Each vertex has a position and a color packed in memory in X Y Z W R G B A order
const vertices = new Float32Array([
-1.0, -1.0, 0, 1, 1, 0, 0, 1, // Bottom left, red
-0.0, 1.0, 0, 1, 0, 1, 0, 1, // Top, green
1.0, -1.0, 0, 1, 0, 0, 1, 1, // Bottom right, blue
]);
const vertexBuffer = device.createBuffer({
size: vertices.byteLength,
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, // https://www.w3.org/TR/webgpu/#buffer-usage
mappedAtCreation: true,
});
// https://www.w3.org/TR/webgpu/#dom-gpubuffer-getmappedrange
new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
vertexBuffer.unmap();
const vertexBuffersDescriptors = [
{
attributes: [
{
// Position
shaderLocation: 0,
offset: 0,
format: "float32x4",
},
{
// Color
shaderLocation: 1,
offset: 16,
format: "float32x4",
},
],
arrayStride: 32,
stepMode: "vertex", // https://www.w3.org/TR/webgpu/#enumdef-gpuvertexstepmode
},
];
}
init()
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment