HYPERSOLID: web conceptual de un estudio, hecha como una sola escena 3D en tiempo real

VITON¹³ crea sitios conceptuales para mostrar su alcance en sectores donde aún no tiene un proyecto de cliente que enseñar. HYPERSOLID es el más técnico de ellos: la web de un estudio ficticio de tecnología creativa que hace web inmersiva, 3D en tiempo real, XR e instalaciones, en el género en el que toda la página es una escena 3D y la interfaz es texto colocado encima. El estudio, sus proyectos y su dirección son inventados, y la web está en inglés.

El encargo que nos pusimos tenía dos mitades. La escena tenía que defender por sí sola la propuesta del estudio: un emblema, mundos, transiciones y música hechos para esta web y calculados en el dispositivo de quien la visita, no reproducidos desde un vídeo. Y aun así tenía que ser una web utilizable: texto real sobre el lienzo, navegación con teclado, una versión más tranquila para quien pide menos movimiento y una versión estática para los navegadores sin WebGL.

Una sola dirección con 12 vistas: un relato de scroll en cinco capítulos, la galería de trabajos, ocho páginas de proyecto, About y Contact, cada una con su propia ruta hash (#/work, #/work/aurora-dome, etc.) para poder enlazarla y abrirla directamente. 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, rodeados de partículas en la GPU (7000 en escritorio, 2400 en móvil) y haces de luz volumétrica.

Los cinco capítulos son 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 es un anillo 3D de ocho proyectos inventados: una aurora para un planetario, un juego de arena para el lanzamiento de unas zapatillas, un museo WebXR de sonidos perdidos, una identidad generativa para un festival, una escultura del tiempo, un configurador de perfumes, un océano de datos y un menú holográfico. Cada tarjeta es un mundo de shaders con raymarching en vivo. Una transición de shader lleva la tarjeta al proyecto a pantalla completa, con la idea, el rol, el stack, tres párrafos, tres imágenes capturadas del propio mundo y un enlace al siguiente proyecto.

La banda sonora son cuatro pistas procedurales generadas con la Web Audio API. El sonido está apagado hasta que el visitante lo activa, y solo entonces se carga el código de audio. About reúne un manifiesto de cinco líneas y cuatro pasos de trabajo; Contact muestra una dirección de ejemplo marcada como no atendida y un enlace al portafolio del autor para las consultas reales.

La web está escrita con three.js 0.186 y empaquetada con esbuild en una carpeta estática con URL relativas, así que funciona desde cualquier ruta: en el portafolio vive en /demos/hypersolid/. El posprocesado añade bloom, aberración cromática, profundidad de campo, rayos de luz, mapeo de tonos, viñeta y grano. El dispositivo determina uno de tres niveles de calidad: la escena completa en escritorio, una escena más ligera en móviles y equipos modestos, y una página estática con el mismo contenido cuando no hay WebGL. Cuando los fotogramas se ralentizan, el motor baja la resolución de los mundos más pesados en lugar de saltarse fotogramas, y el renderizado se pausa mientras la pestaña está oculta.

Cada vista tiene texto HTML real sobre el lienzo: títulos, enlaces y textos de proyecto que un lector de pantalla puede leer y un teclado puede alcanzar, con Tab, Enter, Esc y las flechas en la galería. Con movimiento reducido, los vuelos de cámara se convierten en fundidos. Lo primero que se pinta es un precargador escrito en el propio HTML, antes de que llegue cualquier script u hoja de estilos; dibuja el logotipo arista a arista mientras cuenta los archivos cargados. La build no contiene ningún archivo de texturas, modelos 3D, vídeo ni audio: solo código, dos fuentes variables, los iconos y una imagen para redes sociales.

Hoy existe un concepto que funciona en tarasovvitalii.com/demos/hypersolid/: una dirección con 12 vistas, ocho mundos de shaders y cuatro pistas procedurales, construido el 23 y el 24 de septiembre de 2026. El 24 de septiembre se leyó el contador de fotogramas del propio motor 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. El script principal, con three.js dentro, pesa 0,77 MB, o 0,21 MB con gzip; toda la carpeta publicada ocupa 1,1 MB.

Lighthouse, ejecutado tres veces por dispositivo sobre la dirección real ese mismo día, dio accesibilidad 100 y buenas prácticas 100 en móvil y escritorio, y un rendimiento de 91 en móvil y 94 en escritorio (medianas). La página transfiere 0,4 MB al cargar, el CLS es 0 y el LCP es de 2,8 s en móvil y 0,9 s en escritorio. El SEO es 63 a propósito: la demo lleva noindex, porque la página que debe aparecer en los buscadores es la ficha del caso en el portafolio.

HYPERSOLID es un concepto que VITON¹³ creó para mostrar su alcance, no un encargo. El estudio, sus ocho proyectos y su dirección de ejemplo son ficticios: la web no tiene cliente, ni dominio propio, ni usuarios, ni tráfico, ni consultas, y no se atribuye clientes, premios ni prensa. No tiene formulario de contacto ni analítica, así que no demuestra nada sobre conversión, ni que hayamos lanzado WebXR, una instalación o cualquiera de los otros proyectos inventados: solo existen como mundos de shaders en esta web.

La tasa de fotogramas procede de una sola máquina con un chip de Apple reciente, en Chrome headless y en un solo día. No dice nada de portátiles antiguos ni de móviles, y se mantiene en parte porque el motor baja la resolución de los mundos pesados. Lighthouse mide la carga, no la fluidez de la escena 3D, y su prueba móvil ralentiza el procesador y la red, pero no la tarjeta gráfica. La demo está fuera de los buscadores a propósito, así que no tiene resultados de búsqueda que mostrar.

Cómo revisar el portafolio de un estudio web →