Skip to content

Instantly share code, notes, and snippets.

@ccincotti3
Last active December 18, 2022 15:38
Show Gist options
  • Save ccincotti3/eedb8a9d6b8b94965d2c48aa49f99933 to your computer and use it in GitHub Desktop.
Save ccincotti3/eedb8a9d6b8b94965d2c48aa49f99933 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/2022-12-12/how-to-render-a-webgpu-triangle-series-part-two-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;
});
}
init()
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment