Reconstruimos nuestro propio sitio como un universo WebGL en vivo

Casi todos los estudios tienen un sitio que te muestra 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 misma población de partículas (110,000 en computadoras de escritorio) pasa por 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, y reacciona a tu posición en la página y a 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 más como un lugar que como una hoja. Si nuestro propio sitio lo hubiera fingido con un clip pregrabado, el argumento quedarí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.

También hay un beneficio práctico. La experiencia completa, con cada forma y 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 con limpieza. No apilan efectos hasta que algo impresione.

La nuestra fue un solo sistema de partículas, nunca interrumpido. No hay cortes de escena. Las partículas que ves en la portada son numéricamente las mismas que forman el portal del final. Cada una lleva una semilla aleatoria que escalona sus tiempos, así que no cambian todas a la vez y cada transformación llega como una ola.

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 el rendimiento tuvo que diseñarse desde la primera línea. No se podía dejar para optimizarlo al final.

El rendimiento es una función

Una experiencia rica no tiene por qué ser lenta. Unas cuantas decisiones hicieron casi todo el trabajo:

• Cada forma objetivo se genera una sola vez al cargar y se sube a la GPU. Cambiar de forma vuelve a enlazar un búfer y nunca transmite geometría cuadro por cuadro.
• Todo el movimiento (el campo de flujo, la suavización de la transformación, la repulsión del 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, si al dispositivo le cuesta, baja discretamente la resolución y los efectos.
• Los celulares reciben un nivel más ligero: 34,000 partículas y una cadena de post-procesamiento más delgada.

El resultado mantiene 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ó. Nos interesa menos saber si algo se puede construir que saber si la idea merece el oficio.

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