Explorer
KNOW-PAT-238

Cycle de vie WebGL : libération GPU et restauration du contexte

Domaine
performance
Type
pattern
Priorité
P1

Cycle de vie WebGL : libération GPU et restauration du contexte

Problème

Retirer un objet de la scène ne libère pas automatiquement les buffers, textures et programmes GPU. Un contexte peut aussi être perdu par pression mémoire, changement de GPU, veille ou limite de contextes, laissant un canvas figé si l'application ne sait pas se reconstruire.

Nettoyage explicite

  • Appeler .dispose() sur BufferGeometry, chaque Material, Texture, WebGLRenderTarget et Skeleton possédé par la scène.
  • Fermer séparément les ImageBitmap lorsque l'application en est propriétaire.
  • Annuler requestAnimationFrame, timers, observers et écouteurs au démontage.
  • Centraliser la propriété des ressources dans un registre : suivre à la création, parcourir et disposer à la destruction.
  • Utiliser renderer.info avant/après plusieurs changements de vue pour détecter une croissance anormale.

Perte et restauration du contexte

canvas.addEventListener('webglcontextlost', (event) => {
  event.preventDefault() // autorise la restauration
  cancelAnimationFrame(rafId)
  state = 'lost'
})

canvas.addEventListener('webglcontextrestored', () => {
  recreateGpuResources() // buffers, textures, FBO, shaders et état
  state = 'ready'
  rafId = requestAnimationFrame(render)
})
  • Conserver côté CPU les données ou fonctions nécessaires pour recréer les ressources GPU.
  • Ignorer/annuler les callbacks asynchrones d'un ancien contexte ; ne pas réutiliser des handles devenus invalides.
  • Réinitialiser aussi l'état implicite : viewport, blending, depth, bindings et uniforms.
  • Tester volontairement avec WEBGL_lose_context ou un simulateur de perte de contexte.

Multi-vues

Éviter un canvas WebGL par carte ou vignette. Les navigateurs limitent le nombre de contextes et peuvent perdre le plus ancien. Préférer un canvas partagé avec plusieurs scènes/viewport, ou une image statique jusqu'à interaction.

UX de repli

La perte de contexte ne doit pas masquer le texte ou le CTA. Afficher un état calme (« rendu 3D indisponible »), proposer une nouvelle tentative et conserver une illustration statique accessible.

Références