Taotajima.jp WebGL deconstruction

Homepage effect

See the background transition effect
Surprise! 😮
I intentionally added more vertices and colored them as UV coordinates.
float colorProgress = uv.y + slideProgress;
Not so cool yet, just a moving gradient
smth like: slideProgress*X - uv.y*Y + uv.x*Z + W
gl_FragColor = mix(texture1,texture2,colorProgress);
Starting look good now! But misses “folding”, looks plain
texture1 = texture2D(sampler1, vec2(uv.x, uv.y + slideProgress));
texture2 = texture2D(sampler2, vec2(uv.x, uv.y + slideProgress - 1));
Because of the texture movement, fold line looks dynamic now.

Scroll-slide idea

Usually all kinds of those slide-section transitions work boringly like fullpage.js:

you start scroll, then scroll is hijacked, and you wait until animation finishes. You can’t scroll 3 sections.
try to scroll it yourself
let slides = [texture1,texture2,...]; // THREE.js texturescurrentSlide = Math.floor(progress); // integer part
nextSlide = Math.floor(progress + 1);
material.uniforms.texture1.value = slides[currentSlide];
material.uniforms.texture2.value = slides[nextSlide];
material.uniforms.scrollProgress.value = scrollProgress;
// fragment shader
float slideProgress = fract(scrollProgress); // fractional part
It works! Notice scale on the left, with actual values.
slideProgress += (closestInteger - slideProgress)*0.01;
The effect is now in place! 🎉🎉🎉

In the end

Of course, there is much more to this website than it’s homepage, and i highly recommend of going to the sources of websites you love. As we can see, one might always learn something new. I learned a lot from Yuichiroh’s project, even though we never met.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store