Deconstrucción de Taotajima.jp WebGL

Me encanta descompilar cosas, recientemente hice eso para fotos 3D de Facebook, pero esta vez se tratará del maravilloso sitio web de Tao Tajima. Ve a verlo primero.

El sitio web ha sido realizado por Homunculus Studio de Japón, y el desarrollador del sitio web es Yuichiroh Arai. Quiero que este estudio de caso rinda homenaje a sus habilidades e ideas que implementó en este hermoso sitio web, así como a su equipo. Gracias a todos por crear una de las mejores y más fluidas experiencias de usuario con WebGL, あ り が と う. Espero que lo lean :-).

¡Veamos cómo funciona todo!

Efecto de página de inicio

So tu primer pensamiento podría ser: definitivamente es algo en 3D, una malla que se dobla y se despliega como un manuscrito. Alguna inteligente transformación de sombreadores de vértices. Investiguemos.

El sitio web aparece en la página de inicio de three.js, por lo que obviamente utiliza esta biblioteca. Mi primera idea fue revelar los vértices detrás de esta transición suave, para ver la magia. Eso funcionó bien en mi caso de Facebook.

Descargó el sitio web, encontró material de malla en JS, cambió su propiedad wireframe a true . (Tuve que cambiar la estructura alámbrica de todos los materiales en el sitio web, porque no sabes cuál es cuál)

Resulta que no hay 3D real. ¡Todo está hecho en un sombreador de fragmentos!

Veamos paso a paso cómo Yuichiroh logró esta ilusión. En primer lugar, creemos THREE.PlaneBufferGeometry (1,1) y colóquelo frente a la cámara para llenar todo el espacio visible:

Supongo que conoces los sombreadores, así que si aún no estás familiarizado con ellos, lee el increíble Libro de los sombreadores.

Primero, agreguemos un uniforme de slideProgress que se ejecutará de 0 a 1. Configuraremos este en nuestro javascript. Ahora podemos crear un degradado animado suave con el sombreador de fragmentos:

Pero si agrega el componente uv.x a colorProgress y juega con algunos números, puede obtener este mejor resultado:

Ahora, agreguemos algunas imágenes y mezclemos :

Siguiente paso: mover texturas verticalmente mientras las mezclamos:

Bueno, aquí estamos, ¡solo un par de sencillos pasos! Hay un poco más, un poco de distorsión, reflejo, buena función de suavizado, pero el efecto ya está en su lugar.

¿O no?

En realidad, solo la mitad, ¿qué pasa con la dinámica del pergamino? ¿Intentaste desplazarte por el sitio web con mucha dificultad?

Idea de desplazamiento y diapositiva

Por lo general, todos los tipos de transiciones de secciones de diapositivas funcionan de manera aburrida como fullpage.js:

Lo que vemos en taotajima.jp es diferente, más dinámico, realmente no importa cuánto te desplaces y qué tan rápido lo hagas, irá contigo infinitamente .

La idea es muy simple, pero brillante.

Imagínese, hay un número, que significa cuánto se desplazó hacia arriba o hacia abajo. En el caso habitual de la página, es solo la posición scrollTop. Pero digamos en nuestro caso, si se desplaza hacia abajo con fuerza, es +1.0 , si se desplaza un poco hacia arriba, es -0.5.

¿Qué pasa si simplemente tomamos fraccional part de este número como un slideProgress y parte entera como número de diapositiva actual.

En cuanto al código, se ve así:

Y en el sombreador de fragmentos podemos obtener una parte fraccional :

La razón por la que podemos salirse con la nuestra: solo puedes ver dos diapositivas en cualquier momento. No importa lo rápido que seas. Solo dos diapositivas. Con este código en su lugar, verá:

¡Ya casi estamos! Ahora solo necesitamos diapositivas para ceñirse a números enteros como 1, 2, 3. Eso se puede hacer encontrando el entero más cercano y esta fórmula:

Si lo ejecutamos en cada fotograma, slideProgress gravitará hacia números enteros. Vea esto ilustrado en mi demostración:

Esta idea no es específica de .glsl, también podríamos usarla para crear algunos controles deslizantes DOM geniales. ¡Avísame si lo usaste antes! Compartamos ideas.

Así que aquí estamos, dos ideas brillantes de un efecto de transición en el sitio web.

Al final

Por supuesto, hay mucho más en este sitio web que su página de inicio, y le recomiendo que visite las fuentes de los sitios web que le gustan. Como podemos ver, siempre se puede aprender algo nuevo. Aprendí mucho del proyecto de Yuichiroh, aunque nunca nos conocimos.

Espero que les haya gustado esta deconstrucción y les deseo un buen día. 🙂

P.D .: actualmente estoy abierto para proyectos WebGL o html / css / js / vuejs, ¡envíame un ping si tienes algo que codificar! 😉