WebGL Gallery
WebGL Gallery is a Three.js experiment exploring how far a single interactive image grid can go with custom shaders and layout choreography.
Three view modes — infinite grid, curved carousel, and vertical list — morph into each other with staggered exits/enters, fisheye exaggeration, and inertia-based drag/scroll.
Built with Three.js and custom GLSL (no EffectComposer):
* Vertex path bending for the carousel (sin³ curve with normal-aligned planes)
* Fragment shaders with UV parallax, dual-layer “ghost” blending, and displacement-map select transitions
* Ping-pong render targets that paint a mouse trail
* Full-screen post pass: fisheye distortion, chromatic aberration, and blur driven by that trail
Interaction includes raycasted image selection, camera + texture parallax, and mobile-tuned scales. Textures load via ImageBitmapLoader with capped DPR and downscaled post targets for performance.
A focused study in shader-driven UI, layout transitions, and tactile WebGL interaction — not a drop-in library.
Three.jsVite.js
