WebGL Gallery
About
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.
Category
Need help building something similar?
Three.js Web Development →Add Our Badge to Your Website
Place this badge on your site to show you're featured and get a verified checkmark. Use the horizontal version in a footer, or the vertical version, which floats fixed along the side of your page.
