HYPERSOLID es un estudio ficticio de tecnología creativa: web inmersiva, 3D en tiempo real, XR e instalaciones. Construí su web el 23 y el 24 de septiembre de 2026 en el género de las webs inmersivas de estudio en WebGL, donde toda la página es una escena 3D en tiempo real y la interfaz queda encima como texto.

El reto que me puse: que la escena defendiera por sí sola la propuesta del estudio y fuera honesta sobre lo que puede hacer un navegador. El emblema, los mundos, las transiciones y la música tenían que hacerse para esta web y calcularse en el dispositivo del visitante, no reproducirse desde un vídeo, y la web tenía que seguir funcionando con movimiento reducido o sin WebGL.

El emblema es un teseracto, un cubo de cuatro dimensiones, que gira en 4D y se proyecta a 3D en cada fotograma. Sus aristas son tubos de cristal con iridiscencia de película fina y dispersión, rodeados de partículas en la GPU y luz volumétrica. Un precargador dibuja el logotipo trazo a trazo mientras cuenta los recursos cargados y después se despliega en la escena.

El scroll no desplaza una página: mueve una cámara por cinco capítulos. La declaración del estudio, el teseracto que se despliega en seis paneles de capacidades, un túnel hecho con sus aristas, el trabajo y una invitación a escribir. La galería de trabajos es un anillo 3D de ocho proyectos, y cada tarjeta es un mundo de shaders con raymarching en vivo, no una imagen; una transición de shader te lleva dentro del proyecto, que se abre a pantalla completa con su propio texto encima.

La banda sonora es 100 % procedural: cuatro pistas generadas con la Web Audio API, en silencio hasta que el visitante activa el sonido. Todo está hecho con three.js y empaquetado como web estática con URL relativas, así que funciona desde cualquier carpeta; aquí, /demos/hypersolid/. Con movimiento reducido, los vuelos de cámara se convierten en fundidos, y los navegadores sin WebGL reciben una versión estática con el mismo contenido.

El concepto es una web de una sola página con cinco capítulos, una galería de ocho mundos de shaders, ocho vistas de proyecto y cuatro pistas procedurales. El 24 de septiembre de 2026 leí el contador de fotogramas del propio motor (window.__HS.fps, media de 90 fotogramas) en 14 estados —los cinco capítulos, la galería y los ocho mundos— en Chrome headless en un MacBook con Apple M5, a 1600 × 1000 con escala Retina: la mediana fue de 60 fps y la lectura más baja, de 55,7 fps.

El script principal, dist/assets/app.js con three.js dentro, pesa 0,76 MB, o 0,21 MB con gzip. Toda la build, con fuentes e imágenes, ocupa 1,1 MB y no contiene ningún archivo de texturas, modelos 3D, vídeo ni audio: cada mundo y cada sonido se generan en el navegador.