Bien démarrer avec WebGPU pour les développeurs de jeux

WebGPU succède à WebGL. Il est de plus bas niveau, plus explicite et conçu pour les GPU modernes. Si vous démarrez un nouveau projet 3D en 2026, WebGPU mérite d'être appris.

Tutoriel WebGPU : 10 projets couvrant toutes les étapes, de la configuration au rendu 3D avec éclairage et animation

1) Vérifier la compatibilité du navigateur

if (!navigator.gpu) {
  console.error('WebGPU not supported')
}

En 2026, WebGPU est disponible dans Chrome, Edge, Firefox et Safari.

2) Obtenir un périphérique

const adapter = await navigator.gpu.requestAdapter()
const device = await adapter.requestDevice()

L'adaptateur représente le GPU physique. Le périphérique constitue votre interface avec celui-ci.

Les deux appels peuvent échouer. requestAdapter() renvoie null lorsque le système ne dispose d'aucun GPU utilisable, et requestDevice() peut rejeter la promesse. Prévoyez donc ces cas avant de poursuivre :

const adapter = await navigator.gpu.requestAdapter()
if (!adapter) throw new Error('No suitable GPU adapter found')
const device = await adapter.requestDevice()

L'adaptateur est également consommé dès que vous créez un périphérique à partir de celui-ci. Demandez donc un nouvel adaptateur si vous avez besoin d'un autre périphérique.

3) Configurer le canevas

const canvas = document.getElementById('game')
const context = canvas.getContext('webgpu')
const format = navigator.gpu.getPreferredCanvasFormat()

context.configure({
  device,
  format,
  alphaMode: 'premultiplied',
})

4) Écrire des shaders en WGSL

WebGPU utilise WGSL (WebGPU Shading Language), et non GLSL.

@vertex
fn vs_main(@builtin(vertex_index) idx: u32) -> @builtin(position) vec4f {
  var pos = array<vec2f, 3>(
    vec2f( 0.0,  0.5),
    vec2f(-0.5, -0.5),
    vec2f( 0.5, -0.5),
  );
  return vec4f(pos[idx], 0.0, 1.0);
}

@fragment
fn fs_main() -> @location(0) vec4f {
  return vec4f(1.0, 0.5, 0.2, 1.0); // orange
}

5) Créer un module de shader

const shaderModule = device.createShaderModule({
  code: wgslSource,
})

6) Créer un pipeline de rendu

const pipeline = device.createRenderPipeline({
  layout: 'auto',
  vertex: {
    module: shaderModule,
    entryPoint: 'vs_main',
  },
  fragment: {
    module: shaderModule,
    entryPoint: 'fs_main',
    targets: [{ format }],
  },
})

7) Effectuer le rendu d'une image

function render() {
  const commandEncoder = device.createCommandEncoder()
  const textureView = context.getCurrentTexture().createView()

  const renderPass = commandEncoder.beginRenderPass({
    colorAttachments: [{
      view: textureView,
      clearValue: { r: 0, g: 0, b: 0, a: 1 },
      loadOp: 'clear',
      storeOp: 'store',
    }],
  })

  renderPass.setPipeline(pipeline)
  renderPass.draw(3)
  renderPass.end()

  device.queue.submit([commandEncoder.finish()])
  requestAnimationFrame(render)
}
render()

8) Les tampons dans WebGPU

const vertices = new Float32Array([
  -0.5, -0.5,
   0.5, -0.5,
   0.0,  0.5,
])

const vertexBuffer = device.createBuffer({
  size: vertices.byteLength,
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
})

device.queue.writeBuffer(vertexBuffer, 0, vertices)

9) Groupes de liaison pour les variables uniformes

const uniformBuffer = device.createBuffer({
  size: 64,
  usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
})

const bindGroup = device.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [{
    binding: 0,
    resource: { buffer: uniformBuffer },
  }],
})

10) WebGPU ou WebGL

Aspect	WebGL	WebGPU
Style d'API	Similaire à OpenGL, avec état	Moderne, explicite
Shaders	GLSL	WGSL
Calcul	Limité (extensions)	Pris en charge nativement
Multithreading	Difficile	Conçu pour cela
Compatibilité des navigateurs	Universelle	Tous les principaux navigateurs (Chrome, Edge, Safari 26, Firefox)

Quand utiliser WebGPU

• Nouveaux projets ciblant les navigateurs modernes
• Charges de travail intensives en calcul (physique, IA, génération procédurale)
• Lorsque vous avez besoin d'un contrôle précis sur les ressources GPU

À lire aussi

• Principes fondamentaux de WebGL
• Web Workers pour la logique de jeu
• Publier un jeu web qui se charge rapidement
• Pile technologique des jeux web en 2026 — cadre de décision pour choisir entre WebGL, WebGPU et Wasm
• COOP/COEP et SharedArrayBuffer — en-têtes requis pour le multithreading Wasm avec les calculs WebGPU

Ressources externes

• Spécification WebGPU — spécification du W3C
• Spécification WGSL — spécification du langage WebGPU Shading Language
• Principes fondamentaux de WebGPU — série de tutoriels approfondis
• Votre première application WebGPU — tutoriel guidé Google Codelab