Skip to content

Instantly share code, notes, and snippets.

Last active December 18, 2022 15:38
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
This is the code that we worked on in part two of the WebGPU YouTube Series.
<!DOCTYPE html>
<html lang="en">
<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>
<canvas id="canvas-container"></canvas>
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment