ZERO: la ingeniería detrás de una narrativa web interactiva que desafía lo

ZERO es una experiencia web que combina arte digital, programación 3D y narrativa interactiva. Desarrollado con Three.js, GSAP y Vite, logra una ejecución visual fluida en desktop y móviles, con un peso total inferior a 10 MB y una tasa de 60 fps. Esta pieza, creada por el equipo de Atul Khola y difundida por Codrops, demuestra cómo una arquitectura pensada desde cero puede traducirse en una narrativa digital que rompe con la lógica habitual de scroll y navegación.

Al ingresar al sitio de ZERO, el visitante se encuentra con una pantalla bloqueada. No hay botones visibles ni un menú clásico: el acceso se habilita solo al dibujar un cero con el cursor o el dedo. Cuando el trazo se completa, una textura de escarcha se expande sobre la pantalla y revela el entorno digital. Ese gesto, tan simple como original, resume la filosofía del proyecto: interacción, recompensa inmediata y estética visual impecable.

Según Fuente original, la información se basa en ZERO: The Engineering Behind a Defiant Interactive Narrative.

narrativa interactiva WebGL: Una narrativa digital que se construye al desplazarse

La experiencia se desarrolla como un desplazamiento continuo dividido en seis etapas. Cada tramo está separado por portales interactivos donde el usuario debe ejecutar acciones precisas —dibujar, mantener pulsado, romper un vidrio o atravesar un túnel— para avanzar. El relato parte de la promesa del camino universitario tradicional para luego desmontarla: los títulos se queman, los certificados se desintegran y la historia se abre paso en una ciudad tridimensional formada por las sedes de grandes empresas.

El enfoque visual y temático busca reflejar la tensión entre educación formal, empleabilidad y creatividad independiente. Las transiciones entre escenas integran efectos de partículas, luces simuladas y shaders personalizados. La idea no es solo mostrar un entorno 3D, sino proponer una experiencia narrativa que obliga al usuario a participar físicamente de la historia.

Arquitectura técnica: un scroll virtual sin DOM extenso

Una de las decisiones más innovadoras del equipo fue prescindir del scroll nativo del navegador. En lugar de usar ScrollTrigger o grandes estructuras DOM, se optó por un control de desplazamiento virtual que interpreta los movimientos del mouse o del dedo y los traduce en valores internos. Ese valor único alimenta animaciones, tiempos de sombreado, textos y cargas de activos, lo que garantiza coherencia y estabilidad.

El proyecto se dividió en nueve segmentos autónomos, cada uno con su propio ciclo de vida. Esta modularidad simplificó la depuración y permitió reproducir cualquier fase sin alterar el flujo natural del relato. Durante la depuración, cada segmento podía reiniciarse como si el usuario hubiese llegado allí de manera orgánica, evitando errores de inicialización.

Optimización de recursos y rendimiento

El desarrollo duró aproximadamente cuatro meses, con un primer mes dedicado a preparar los recursos gráficos. Los archivos originales, provenientes de escenas de Blender, sumaban más de un gigabyte en geometrías y texturas. Para reducir tamaño y consumo de memoria se aplicó compresión DRACO en las geometrías y el formato KTX2 con compresión ETC1S en las texturas. Esto permitió mantener una carga inferior a 10 MB sin sacrificar calidad visual.

El equipo descubrió que la localización de los decodificadores era clave. Al alojarlos en el propio servidor, evitaron fallas por caídas de servicios externos. Además, integraron en su panel interno una herramienta que previsualiza imágenes comprimidas y sin comprimir, facilitando el ajuste de niveles de compresión según la importancia de cada textura. Las más visibles conservan alta fidelidad, mientras que las secundarias aceptan mayor pérdida sin impacto notable.

Consolidación y reducción de texturas

Para optimizar aún más, se agruparon texturas afines en atlas compartidos. Las manos, por ejemplo, se alojan en un atlas 4×4, y cada malla accede a su parte mediante desplazamientos UV. El mismo método se aplicó a textos, certificados, nubes y fragmentos de vidrio. Así, más de cincuenta imágenes individuales se redujeron a una docena de atlas, con varios degradados reemplazados directamente por código GLSL. Las primeras versiones del sitio pesaban alrededor de 40 MB; la final, menos de 10 MB.

Gestión de la carga y rendimiento adaptativo

La fluidez fue una prioridad. El sistema anticipa cuándo se necesita un nuevo conjunto de texturas y las sube al GPU antes de que aparezcan en pantalla, evitando congelamientos. Además, un monitor interno analiza el rendimiento en tiempo real y ajusta automáticamente la calidad gráfica según la capacidad del dispositivo. Si detecta caídas de cuadros, reduce resolución y complejidad; si mejora, restablece la calidad completa. Este control dinámico garantiza la misma experiencia narrativa en teléfonos de gama baja y en equipos de alto rendimiento.

El rol de la inteligencia artificial en el proceso

La IA tuvo un papel relevante en el desarrollo inicial. Sirvió para generar prototipos de shaders y efectos como el de billetes que se queman o vidrios que se rompen. Sin embargo, el resultado final requirió un intenso trabajo humano de ajuste y refinamiento. La IA aceleró las primeras pruebas, pero la calidad estética y la coherencia narrativa dependieron de decisiones artísticas y técnicas precisas.

Gracias a esta combinación de automatización y supervisión manual, la producción se concentró en evaluar resultados en lugar de escribir código desde cero. Este enfoque refleja una tendencia creciente en los estudios de diseño interactivo: usar IA como asistente técnico sin perder el control creativo.

Sombreados personalizados y efectos visuales distintivos

Cada momento clave de ZERO incorpora un shader único. El efecto de escarcha, por ejemplo, utiliza un búfer de ping pong en cuatro pasadas —horizontal, vertical y diagonales— para expandir el trazo y generar un patrón de crecimiento octogonal. La intensidad se modula con una textura que imita el brillo cristalino del hielo. Una vez completado el trazo, el punto central se convierte en el origen del deshielo radial.

La iluminación de las manos se resolvió mediante texturas horneadas que replican la luz original sin requerir cálculos en tiempo real. Dos texturas se mezclan suavemente para simular la transición lumínica, y las transparencias se premezclan para evitar halos oscuros. El efecto de billetes ardiendo depende de campos de distancia y ruido fractal, con fragmentos que se descartan antes de alcanzar el umbral de combustión, mejorando el rendimiento.

El túnel final se genera extruyendo la forma del logo ZERO. Un pulso luminoso recorre su eje longitudinal, creando una sensación de movimiento continuo. Cada shader fue probado y optimizado hasta lograr un equilibrio exacto entre impacto visual y estabilidad en distintos dispositivos.

Pruebas, depuración y control de precisión

Durante el último mes, el equipo se enfocó en probar y optimizar en teléfonos Android económicos. Se eliminaron saltos de más de 150 ms hasta lograr una ejecución estable. Uno de los problemas más complejos fue la precisión de los shaders: en varias GPU móviles mediump se comportaba como flotante de 16 bits, lo que generaba errores imperceptibles en escritorio pero visibles en portátil. La solución fue especificar highp float en puntos críticos para evitar movimientos erráticos y bandas de color.

La narrativa como experiencia sensorial

Más allá del despliegue técnico, ZERO propone una reflexión sobre el valor del conocimiento en la era digital. El usuario atraviesa escenarios simbólicos donde el título académico pierde peso frente a la creatividad y la experimentación. La interacción directa —dibujar, romper, avanzar— convierte el desplazamiento en una metáfora de transformación personal.

Esta integración de historia y tecnología acerca el concepto de “narrativa inmersiva” al entorno web, un terreno donde la interactividad suele estar limitada por el navegador. Con ZERO, el scroll deja de ser un simple gesto de desplazamiento para transformarse en motor narrativo.

Implicancias para el SEO y la visibilidad en proyectos web 3D

Si bien ZERO es una experiencia artística, su arquitectura ofrece lecciones claras para el SEO y la optimización de experiencias interactivas. Al mantener un peso total reducido y un rendimiento estable, mejora los indicadores Core Web Vitals, fundamentales para el posicionamiento. Además, al reemplazar imágenes por shaders y compresiones avanzadas, reduce tiempos de carga sin sacrificar experiencia visual, un punto clave para retención de usuarios.

Para sitios WordPress que integran entornos 3D o animaciones WebGL, estas técnicas —compresión KTX2, atlas compartidos, control adaptativo de calidad— pueden aplicarse para mantener la navegabilidad y mejorar métricas de interacción. La estrategia muestra que el arte digital y la ingeniería del rendimiento no son opuestos, sino complementarios para un posicionamiento orgánico sólido en proyectos de alto impacto visual.

ZERO confirma que el futuro del contenido web no solo depende del texto o la estructura HTML, sino de la capacidad técnica para sostener experiencias complejas que sigan siendo ligeras, rápidas y atractivas desde el punto de vista narrativo.