Skip to content

Instantly share code, notes, and snippets.

@ccincotti3
Last active August 25, 2023 12:35
Show Gist options
  • Save ccincotti3/74c0d15623204aa03a2baa78b0513fac to your computer and use it in GitHub Desktop.
Save ccincotti3/74c0d15623204aa03a2baa78b0513fac to your computer and use it in GitHub Desktop.
This is the code that we worked on in part three of the WebGPU YouTube Series. https://carmencincotti.com/2022-12-19/how-to-render-a-webgpu-triangle-series-part-three-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"
});
}
init()
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment