La vidéo
Cette vidéo a des sous-titres en français.
J’ai lancé une chaîne YouTube ! Pour célébrer cet événement mémorable, j’ai décidé de créer une série de vidéos WebGPU où nous rendrons un triangle.
Vous ne pouvez pas attendre la fin de la série ?
Si vous souhaitez aller de l’avant sans attendre la prochaine vidéo de la série, je vous recommande de faire défiler jusqu’au code ci-dessous ou de consulter mon article : dessinons un triangle avec WebGPU.
Le code de la série vidéo WebGPU Triangle
Au cours de la série, nous étudierons ce code que j’ai déjà mis dans un GitHub Gist.
Comment accéder à WebGPU dans le navigateur
WebGPU n’est pas disponible dans la plupart des navigateurs, car il est en train d’être développé.
Donc, nous devrons télécharger un navigateur qui le supporte.
Télécharger Chrome Canary
Mon navigateur préféré est Chrome Canary.
Après l’avoir téléchargé et installé, nous devrons activer certains feature flags afin d’accéder à l’API WebGPU.
Activer les feature flags de WebGPU
Avant d’accéder à WebGPU, il faut activer quelques feature flags dans Chrome Canary. Pour ce faire, et ainsi pouvoir accéder à l’API WebGPU, il faut aller sur chrome://flags.
Une fois là-bas, je recommande de taper “WebGPU” dans la petite barre de recherche et d’activer les options suivantes :
- Unsafe WebGPU
- WebGPU Developer Features
Démarrage d’un document HTML vierge dans VS Code
Nous pouvons démarrer un projet dans VS Code en tapant html:5 dans un nouveau fichier nommé index.html, ce qui nous donnera automatiquement du boilerplate HTML… si vous n’utilisez pas VS Code, ou si ce raccourci ne fonctionne pas, vous pouvez utiliser ce boilerplate HTML :
<!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>
Création d’un Canvas WebGPU
Avec notre nouveau navigateur Chrome Canary et notre boilerplate HTML, il est temps de voir maintenant si nous pouvons accéder à l’API WebGPU.
Accéder à l’API Navigator
Si nous regardons la description de l’interface Navigator par MDN, il est défini comme suit :
L’interface Navigator représente l’état et l’identité de l’agent utilisateur courant. Elle permet aux scripts de consulter ces informations et de s’enregistrer en vue de certaines activités.
Nous pouvons accéder à l’interface Navigator en lisant simplement window.navigator ou navigator tout court.
Accéder à l’API GPU
En utilisant l’interface Navigator, nous pouvons accéder à notre API GPU en lisant navigator.gpu. Nous demanderons éventuellement un adaptateur au GPU dans un tutoriel ultérieur, mais pour l’instant, nous nous assurerons simplement que nous pouvons y accéder.
Ainsi, dans notre élément HTML <script>, nous pouvons écrire quelque chose comme suit :
const gpu = navigator.gpu
if(!gpu){
console.error("Hey I didn't find WebGPU in this browser.")
}
Création de l’élément HTML Canvas
Tout d’abord, nous devons créer un élément HTML <canvas>.
Donc, dans notre code HTML, ajoutons l’élément <canvas> dans l’élément HTML <body> comme ceci :
<body>
<canvas id="canvas-container"></canvas>
</body>
L’id, canvas-container, est arbitraire. Nous devons juste nous assurer que nous utilisons cet id lorsque nous accéder à cet élément dans notre code JavaScript.
Initialisation du contexte de Canvas WebGPU
Donc, maintenant dans notre JavaScript, nous pouvons accéder à notre élément <canvas> en utilisant document.getElementById('canvas-container').
Après cela, nous devons obtenir le contexte WebGPU de notre élément <canvas>. Afin de l’obtenir, nous avons juste besoin d’appeler la méthode canvas canvas.getContext('webgpu'). Notez que nous passons 'webgpu' comme argument.
Ainsi, dans notre élément <script>, nous pouvons ajouter le code suivant :
const canvas = document.getElementById("canvas-container")
const context = canvas.getContext("webgpu")
if(!context){
console.error("Hey NO CANVAS CONTEXT FOUND!")
}
Si vous voyez encore des erreurs, vous voudrez peut-être revoir les étapes ci-dessus où nous avons téléchargé Chrome Canary et activé les feature flags appropriés.
Le code de partie 1
Vous pouvez trouver le code de cette partie dans ce GitHub Gist.
La suite
Nous allons examiner deux composants que nous devrons configurer pour dessiner notre triangle sur un élément <canvas /> : l’Adaptateur GPU (GPUAdapter) et le Appareil GPU (GPUDevice).