The Video
We continue this series by taking a look at two important components that we need when setting up a WebGPU project, the GPU Adapter and the GPU Device. These two interfaces manage the communication between our web application and our GPU.
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
During this series, we will study this code which you can find in this article where we begin the series.
Before being able to render this code, you need to download a browser that is able to run WebGPU code.
The WebGPU Adapter
The WebGPU Adapter (GPUAdapter) is the API implementation of WebGPU on our GPU.
One should request the adapter using navigator.gpu.requestAdapter() as follows:
const adapter = await navigator.gpu.requestAdapter(); // GPUAdapter
if (!adapter) {
console.error("WebGPU cannot be initialized - Adapter not found");
return null;
}
With this adapter, we can connect our GPU to our application by using the WebGPU device (GPUDevice).
The WebGPU Device
The WebGPU device (GPUDevice) is the interface our application uses to interact with the WebGPU API, which is provided by the WebGPU adapter.
The GPU Device is the logical connection between our application and the adapter. It is initialized by executing adapter.requestDevice() as follows:
const device = await adapter.requestDevice(); // GPUDevice
device.lost.then(() => {
console.error("WebGPU cannot be initialized - Device has been lost");
return null;
});
In our application, we connect the CanvasContext with the WebGPU device in order to draw onto it. _ We will see how this connection works in a later part._
Async / Await
As you can see, each request to access the WebGPU adapter and the WebGPU device requires an async execution - that’s why we use the await keyword at the beginning of each respective line of code where we initialize the device and the adapter.
To use await, wrap all the code in an async function as follows:
<script>
const init = async () => {
// ...code
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>
Notice that we execute the init() function at the end of our HTML.
The Code for Part 2
You can find the code for this part in this GitHub Gist.
Next Time
We’ll move forward with this project and aim to cover some more topics as we render a WebGPU Triangle together.