Rendre un triangle WebGPU - Coup d'envoi | Vidéo

Nous verrons comment télécharger et configurer Chrome Canary afin d'accéder à l'API WebGPU, et configurer un projet WebGPU afin de rendre un triangle.

Keywords: WebGPU, le pipeline de rendu, le rendu en temps réel, tutoriel

By Carmen Cincotti  

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.

WebGPU 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

Chrome Canary WebGPU Feature Flags

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).

Des ressources (en français et anglais)


Comments for Rendre un triangle WebGPU - Coup d'envoi | Vidéo



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!