Unveiling the Magic of the Directional Warp Effect

Experience the Effect Live 🎉

• Using React Three Fiber

Behind the Scenes: The Vertex Shader

• The Vertex Shader provides the foundation for our effect
• It calculates the varying UV, normal, and position values for each vertex, readying them for the transformations that are about to happen in the Fragment Shader

varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vPosition;
uniform float uTime;

void main() {
     vUv = uv;
     vNormal = normal;
     vPosition = position;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(vPosition, 1.0);
}

The Real Magic: The Fragment Shader

• It smoothly blends between two textures, creating a mesmerizing warp transition effect
• This is achieved by using a time-based progress value and UV coordinates
• The result is a captivating visual experience that ebbs and flows with time

varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vPosition;
uniform float uTime;
uniform vec2 uScale;
uniform sampler2D uTexture1;
uniform sampler2D uTexture2;

void main() {
     float progress = abs(sin(uTime * 0.5));
     vec2 UV = vUv;
     UV = (UV - 0.5) / uScale + 0.5;
     float p = progress;
     p = smoothstep(0.0, 1.0, (p * 2.0 + UV.x - 1.0));
     vec2 a = (UV - 0.5) * (1.0 - p) + 0.5;
     vec2 b = (UV - 0.5) * p + 0.5;
     vec4 textureA = texture2D(uTexture1, a);
     vec4 textureB = texture2D(uTexture2, b);
     vec4 finalColor = mix(textureA, textureB, p);
     gl_FragColor = finalColor;
}