La vidéo
Cette vidéo a des sous-titres en français.
Nous poursuivons cette série en examinant deux composants importants dont nous avons besoin lors de la configuration d’un projet WebGPU, l’adaptateur du GPU (GPU Adapter) et l’appareil du GPU (GPU Device). Ces deux interfaces gèrent la communication entre notre application web et notre GPU.
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
Au cours de cette série, nous étudierons ce code que vous pouvez retrouver dans cet article où on commence la série.
Avant de pouvoir rendre ce code, vous devez télécharger un navigateur capable d’exécuter du code WebGPU.
L’adaptateur WebGPU
L’Adaptateur WebGPU (GPUAdapter) est l’implémentation de l’API de WebGPU sur notre GPU.
On doit demander l’adaptateur en utilisant navigator.gpu.requestAdapter() comme suit :
const adapter = await navigator.gpu.requestAdapter(); // GPUAdapter
if (!adapter) {
console.error("WebGPU cannot be initialized - Adapter not found");
return null;
}
Avec cet adaptateur, nous pouvons connecter notre GPU à notre application en utilisant l’appareil WebGPU (GPUDevice).
L’Appareil WebGPU
L’**appareil WebGPU (GPUDevice)**est l’interface que notre application utilise pour interagir avec l’API WebGPU, qui est fournie par l’adaptateur WebGPU.
L’appareil WebGPU est la connexion logique entre notre application et l’adaptateur. Il est initialisé en exécutant adapter.requestDevice() comme suit :
const device = await adapter.requestDevice(); // GPUDevice
device.lost.then(() => {
console.error("WebGPU cannot be initialized - Device has been lost");
return null;
});
Dans notre application, on connecte le CanvasContext avec l’appareil de WebGPU afin de dessiner dessus. On verra comment cette connexion fonctionne dans une partie ultérieure.
Async / Await
Comme vous pouvez le voir, chaque demande pour accéder à l’adaptateur WebGPU et à l’appareil WebGPU nécessite une exécution async - c’est pour cela qu’on utilise le mot-clé await au début de la ligne de code respective où nous initialisons l’appareil et l’adaptateur.
Pour utiliser await, il faut encapsuler tout le code dans une fonction asynccomme suit :
<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>
Remarquez que nous exécutons la fonction init() à la fin de notre HTML.
Le code de la partie 2
Vous pouvez trouver le code de cette partie dans ce GitHub Gist.
La suite
Nous continuerons ce projet sur YouTube ! À la prochaine !