Cuando el HUD se puso de cabeza en el navegador 🙃

7 de noviembre de 2026

Con la versión 2026.10.10 dimos dos grandes pasos por dentro: el juego ahora funciona con Unity 6.6, y la versión para navegador arranca con WebGPU donde el navegador lo ofrece, por ejemplo en las versiones actuales de Chrome y Edge. Si no, funciona con WebGL 2 como antes. Las dos son formas de que una página web hable con la tarjeta gráfica. WebGL existe desde hace muchos años; WebGPU es su sucesor y se parece más a cómo funcionan las tarjetas gráficas de hoy. Poco después, mi HUD se puso de cabeza. 🙃

Visto una vez y nunca más. Había abierto el juego en Chrome en mi portátil y el HUD estaba al revés. Intentamos reproducirlo y no pudimos. Yo tampoco volví a verlo. Así que, por el momento, dimos el caso por cerrado.

Luego volvió, con pruebas fotográficas. El 19 de octubre pasó otra vez, en un mundo recién creado. Esta vez envié enseguida un informe de error con captura de pantalla. Solo que la captura en sí estaba rota: tres copias una al lado de otra, llenas de rayas. El trabajo de detective que había detrás: una imagen está hecha de píxeles, y cada píxel normalmente tiene tres valores, para rojo, verde y azul. El juego esperaba tres valores por píxel, pero WebGPU entregaba cuatro, con un valor extra para la transparencia. Lee los mismos datos con cuatro valores por píxel y la imagen se vuelve legible. El mundo está derecho, pero todo el HUD está reflejado: la barra de acceso rápido pegada arriba, y la pregunta de VEGA «¿Quieres que te enseñe lo básico?» boca abajo. De paso resultó que todas las capturas del navegador estaban rotas desde el cambio a WebGPU. Nadie lo había notado, porque hasta entonces ningún informe desde el navegador había traído una captura. 🔍

¿Por qué solo el HUD? Desde el nivel gráfico «Media», con el efecto del visor activado, una cámara aparte pinta el HUD en su propia imagen en la memoria gráfica. Los expertos lo llaman textura de renderizado. Luego el juego coloca esa imagen sobre el mundo con el efecto del visor y su resplandor. Lo difícil: los sistemas gráficos no se ponen de acuerdo sobre dónde está «arriba» en una imagen así. Unos cuentan las filas desde arriba, otros desde abajo. Normalmente el motor del juego lo compensa. En el navegador con WebGPU, a veces esto salía mal para la imagen del HUD. Por qué solo a veces, todavía no lo sabemos con certeza.

¿Reproducirlo? Sin suerte. Para encontrar errores del navegador por nuestra cuenta, montamos una pequeña pista de pruebas. Descargamos el paquete terminado del juego de una versión y lo iniciamos en nuestro propio ordenador. Luego un navegador controlado a distancia con WebGPU recorre el menú con clics, inicia un mundo y hace capturas que mira nuestra IA. Lo intentamos tres veces así, con exactamente mi enlace y en el mismo chip gráfico, y las tres veces el HUD estaba derecho. Solo mi Chrome de verdad tenía el error.

Si no puedes forzar el error, tienes que detectarlo. Así que ahora la cámara del HUD pinta un puntito magenta diminuto, de cuatro píxeles, en la esquina superior izquierda de su imagen. Antes de colocar el HUD sobre el mundo, el shader del visor mira en las dos esquinas izquierdas dónde acabó el punto. (Un shader es un programa pequeño que se ejecuta directamente en la tarjeta gráfica.) Si el punto está abajo, el shader da la vuelta al HUD. Al hacerlo enmascara las esquinas, así que nunca ves el punto. Pero mientras el error se esconde, una reparación así es difícil de probar. Por eso hay un interruptor de prueba que pone el punto a propósito en la esquina equivocada. Entonces el HUD tiene que ponerse de cabeza, y eso fue exactamente lo que hizo, igual que en mi captura. Eso demostró que la detección funciona. ✅

La solución obvia habría sido un error. «¡Pues dale la vuelta siempre en WebGPU!» Lo probamos en la pista de pruebas antes de integrarlo. Habría roto el HUD para todo el mundo, porque la mayoría de las veces estaba derecho.

Tres trampas por el camino. WebGPU nos jugó algunas malas pasadas más. Primero, un simple paso de copia puede reflejar una imagen en WebGPU por sí solo. Así que reproducir el error con una copia reflejada no funcionó. Segundo, un interruptor nuevo que queríamos pasarle al shader simplemente nunca llegó al navegador. Tercero, leímos píxeles de vuelta para comprobar el orden de las filas y obtuvimos respuestas contradictorias. Así que ahora el shader escribe su veredicto en un único píxel, y leemos ese. Un solo píxel no tiene arriba ni abajo. 😄

Qué ganas tú con esto. Desde la versión 2026.10.24 el HUD del navegador está derecho, y las capturas del navegador vuelven a ser imágenes de verdad. Los informes de error ahora también llevan una sección de gráficos que dice, entre otras cosas, hacia qué lado estaba el HUD. Así que la próxima vez lo sabremos incluso sin imagen. En el mismo paquete también arreglamos un error de los informes de Lyxette: un animal ya no flota sobre una zanja que has excavado. 🐾

Si algún día sigues viendo el HUD al revés: en el navegador, F2 abre el informe de error. Le echaremos un vistazo. 🙏