# Planifique que el contexto gráfico desaparezca

> Detecta un contexto WebGL perdido, conserva el estado del juego por separado de los objetos de GPU y prueba una ruta de recuperación deliberada del renderizador.

- URL: https://oneshotgems.ai/es/topics/webgl-context-loss
- Categoría: Para desarrolladores de juegos
- Tipo: Guía
- Actualizado: 5 de octubre de 2026

Un contexto WebGL se puede perder cuando el navegador o el sistema recupera recursos gráficos, cambia un controlador o el funcionamiento de la GPU se detiene. Los identificadores de GPU que alguna vez se referían a texturas, búferes y programas ya no son seguros de usar después de su pérdida. Un juego robusto mantiene el estado autoritativo del juego y el estado del jugador fuera de esos recursos, por lo que puede reconstruir el renderizador en lugar de requerir un reinicio completo del juego. La pérdida de contexto es un caso límite que vale la pena ejercitar deliberadamente, no un evento que deba dejarse sin probar.

## Detener el renderizado y mostrar un estado recuperable

Escuche webglcontextlost en el lienzo, evite el comportamiento predeterminado cuando pretenda admitir la restauración y deje de emitir llamadas de dibujo mientras el contexto no esté disponible. Dale al jugador un mensaje restringido si la recuperación puede llevar tiempo, pero conserva el estado actual del juego y evita tratar esto como un nuevo nivel o una partida guardada perdida.

Mantenga las descripciones de los recursos (como la imagen de origen, el texto del sombreador y los datos del búfer) disponibles independientemente de los identificadores de WebGL. Durante la restauración, cree un nuevo conjunto de objetos de GPU a partir de esas descripciones, vuelva a conectar atributos y uniformes, restaure la ventana gráfica y el estado de renderizado, luego reanude solo después de que una pequeña escena conocida se dibuje correctamente.

## Simular la pérdida durante una interacción real

Utilice la extensión WEBGL_lose_context durante el desarrollo para activar la pérdida después de cargar la escena. Pruebe perder contexto mientras se agrega una textura, mientras el jugador se mueve y después de regresar a una pestaña visible. Confirme que la ruta de restauración vuelva a crear todos los recursos necesarios y que cualquier carga asincrónica pendiente se vuelva a aplicar o se descarte de forma segura.

MDN documenta el evento de pérdida y la extensión de prueba. También verifique isContextLost() antes de interpretar una operación de gráficos fallida como un sombreador normal o un error de activo. Registre lo que sucedió en los diagnósticos de desarrollo para que se pueda distinguir un error de recuperación de una falla de renderizado normal.

## Preguntas

**¿La restauración del contexto recupera mis texturas?** No. Trate el nuevo contexto como si necesitara nuevos recursos de GPU. Conserve los datos de origen o una forma de recargarlos, luego vuelva a crear texturas y otros objetos cuando se restablezca el contexto.

**¿Cómo puedo probar la pérdida de contexto sin esperar a que se produzca un fallo real?** La documentación webglcontextlost de MDN demuestra la extensión WEBGL_lose_context, que puede desencadenar deliberadamente una pérdida para que puedas ejercer la ruta de recuperación.

## Sigue tu curiosidad

- [Localizar pérdidas de memoria en un juego de navegador](https://oneshotgems.ai/es/topics/game-memory-leaks): Utilice comprobaciones repetibles de reproducción y limpieza para encontrar escenas de juego, oyentes, temporizadores y recursos retenidos que se acumulan con el tiempo.
- [Encuentre cuellos de botella en el renderizado de lienzos](https://oneshotgems.ai/es/topics/canvas-game-performance): Cree un juego de lienzo en 2D con escenas repetibles y reduzca el costoso trabajo de dibujo solo después de medir dónde se gastan los fotogramas.

## Más información

- [MDN: evento webglcontextlost](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/webglcontextlost_event)
- [MDN: isContextLost()](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/isContextLost)

---
Página canónica: https://oneshotgems.ai/es/topics/webgl-context-loss