The Video
Iāve started a YouTube Channel! To celebrate this momentous landmark, Iāve decided to create a WebGPU video series where weāll render a triangle.
Canāt Wait For The Series To End?
If you would like to move ahead without waiting for the next video in the series, I recommend scrolling down to the code below, or checking out my Rendering a Triangle in WebGPU article.
The WebGPU Triangle Video Series Code
Over the course of the series, weāll be going through this code here that Iāve thrown in a GitHub Gist.
How To Access WebGPU In The Browser
WebGPU is not supported in most browsers as itās in development.
So, weāll have to download a browser that supports it.
Download Chrome Canary
My browser of choice is Chrome Canary.
After downloading and installing it, weāll have to enable some feature flags in order to access the WebGPU API.
Turn on WebGPU Feature Flags
WebGPU is behind a feature flag in Chrome Canary. To turn on the flag, and thus be able to access the WebGPU API, we need to go to chrome://flags.
Once there, I recommend typing āWebGPUā in the small search bar and enabling the following options:
- Unsafe WebGPU
- WebGPU Developer Features
Starting a Blank HTML Document in VS Code
We can start a project in VS Code by typing html:5, which will automatically give us HTML boiler plateā¦ if you arenāt using VS Code, or your VS Code snippets arenāt working, you can use this boiler plate here:
<!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>
</body>
<script>
</script>
</html>
Creating a WebGPU Canvas
With our shiny new Chrome Canary browser and HTML boilerplate, itās time to now see if we can access the WebGPU API.
Accessing the Navigator API
If we look at MDNās description of the Navigator object, itās defined as:
The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.
We can access the Navigator interface by just reading window.navigator, or navigator for short.
Accessing the GPU API
Using the Navigator Interface, we can access our GPU API through navigator.gpu. Weāll eventually request an adapter to the GPU in a later tutorial, but for now weāll just make sure we can access it.
So in our script tag, we can write something like:
const gpu = navigator.gpu
if(!gpu){
console.error("Hey I didn't find WebGPU in this browser.")
}
Creating the HTML Canvas Element
First, we need to create a <canvas> HTML element. Weāll eventually write to this canvas object by using WebGPU.
So, in our HTML, letās go ahead and append the <canvas> element within our <body> tags like so:
<body>
<canvas id="canvas-container"></canvas>
</body>
The id, canvas-container, is arbitrary. We just need to make sure that we use this id when we query this element in our JavaScript code.
Initializing the WebGPU Canvas Context
So, now in our JavaScript, we can query for our canvas object through using document.getElementById('canvas-container').
After this, we need to get the drawing context. In order to get our WebGPU drawing context, we just need to call the canvas method canvas.getContext('webgpu'). Notice that weāre passing in 'webgpu' as an argument.
So, within our script tags we can append the following code:
const canvas = document.getElementById("canvas-container")
const context = canvas.getContext("webgpu")
if(!context){
console.error("Hey NO CANVAS CONTEXT FOUND!")
}
If you are still seeing errors, you may want to revisit the steps above where we downloaded Chrome Canary, and turned on the correct flags.
The Code From Part 1
You can find the code from the first part of this YouTube series in this GitHub Gist.
Next Time
Weāll take a look at two components that weāll need to configure in order to draw our triangle to a <canvas /> element: the GPU Adapter and the GPU Device.