Render a WebGPU Triangle - Kickoff | Video

We'll take a look at how to download and setup Chrome Canary in order to access the WebGPU API, and set up a WebGPU project in order to render a triangle.

Keywords: WebGPU, rendering pipeline, real-time rendering, transformations, tutorial

By Carmen Cincotti  

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.

WebGPU 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

Chrome Canary WebGPU Feature Flags

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.

Resources


Comments for Render a WebGPU Triangle - Kickoff | Video



Written by Carmen Cincotti, computer graphics enthusiast, language learner, and improv actor currently living in San Francisco, CA.  Follow @CarmenCincotti

Contribute

Interested in contributing to Carmen's Graphics Blog? Click here for details!