displacement
01/ 05
Click or press arrowsShader Transitions
GLSL Image-to-Image Transitions
A fullscreen image carousel where each transition between images uses a different GLSL shader effect. The four transitions — displacement, noise dissolve, morph distortion, and glitch — all run on the GPU, blending two textures simultaneously through a progress uniform.
Navigation via click or arrow keys triggers the next transition, cycling through the effects. Each shader receives both the current and next image as textures, giving it full control over how pixels blend.
Tech Stack
Three.jsReact Three FiberGLSLMulti-texture Blending
Key Learnings
- Passing two textures to a fragment shader lets you create transitions impossible with CSS — the shader controls every pixel's blend independently.
- Simplex noise is the backbone of organic-looking effects — displacement maps, dissolve patterns, and edge detection all derive from it.
- Recompiling shaders at runtime (swapping fragmentShader + needsUpdate) lets you cycle through effects without multiple materials.