Reconstruimos nuestro propio sitio como un universo WebGL en vivo

Casi todos los sitios de estudio te muestran el trabajo. Nosotros queríamos que el nuestro fuera el trabajo.

El nuevo rivluxmedia.com es una sola escena WebGL continua. Mientras te desplazas, una población de partículas — 110,000 en computadora de escritorio — se transforma a través de ocho formas distintas. El caos se convierte en nuestro monograma. El monograma se vuelve un nudo toroidal, luego un marciano de arcade, después una esfera neuronal, anillos orbitales, una curva infinita y al final un portal que la cámara atraviesa.

Nada de esa página es un video. Cada cuadro se calcula en tu navegador, en este momento, respondiendo a dónde estás en la página y dónde está tu cursor.

¿Por qué no simplemente un video?

Un video habría sido más fácil. También habría sido mentira.

Les decimos a nuestros clientes que la web puede sentirse como un lugar y no como una hoja. Si nuestro propio sitio hubiera fingido eso con un clip pregrabado, el argumento estaría hueco. Un render en vivo no se puede fingir: mueve el mouse y las partículas se apartan. Haz clic y una onda de choque sale disparada. Esa respuesta es la prueba.

Y hay un beneficio práctico. La experiencia completa — cada forma, cada transición — pesa menos que un solo segundo de video en 4K.

Una sola idea difícil

Los mejores sitios WebGL que estudiamos comparten una disciplina: se comprometen con una sola idea difícil y la ejecutan limpiamente, en lugar de apilar efectos hasta que algo impresione.

La nuestra fue un solo sistema de partículas, nunca interrumpido. Ninguna escena corta. Las partículas que ves en la portada son numéricamente las mismas que forman el portal del final. Cada una carga una semilla aleatoria que escalona su viaje, así que una transformación llega como una ola y no como un interruptor.

Esa restricción tomó muchas decisiones por nosotros. Descartó las escenas por sección. Obligó a que el sistema de color viviera dentro del shader. Y significó que el rendimiento tenía que diseñarse desde la primera línea, no optimizarse al final.

El rendimiento es una función, no un ajuste

Rico no tiene que significar lento. Unas cuantas decisiones hicieron casi todo el trabajo:

• Cada forma objetivo se genera una vez al cargar y se sube a la GPU. Cambiar de forma reconecta un búfer; nunca transmite geometría cuadro por cuadro.
• Todo el movimiento — el campo de flujo, la suavización de la transformación, el rechazo al cursor — ocurre en un vertex shader. El trabajo del procesador en cada cuadro es actualizar un puñado de números.
• El renderizador mide su propia tasa de cuadros y baja discretamente la resolución y los efectos si el dispositivo sufre.
• Los celulares reciben un nivel más ligero: 34,000 partículas y una cadena de post-procesamiento más delgada.

El resultado sostiene 60 cuadros por segundo en una laptop mientras hace algo que parece que no debería correr en una pestaña del navegador.

Qué significa esto para tu proyecto

No creemos que todo sitio deba ser una simulación de partículas. La mayoría no debería.

Lo que sí creemos es que el medio es capaz de mucho más que la plantilla que te han mostrado, y que "imposible" casi siempre es un presupuesto de atención que nadie gastó. La pregunta interesante no es si algo se puede construir, sino si la idea merece el oficio.

Si tienes una de esas ideas, nos gustaría escucharla.