A curated laboratory of high-end image distortion techniques, exploring the boundaries of Chromatic Aberration, Fluid Dynamics, and Kinetic Momentum.
[ LAUNCH GALLERY ] • [ SOURCE CODE ]
LUMINS GL is a technical study in Creative Engineering. Unlike standard galleries, this project focuses on the "Physicality of Light"—simulating how glass, speed, and fluid medium distort digital imagery in real-time.
By offloading complex pixel-sorting and RGB shifting to custom GLSL Fragment Shaders, we achieve cinematic 60FPS interactions that react to user intent and velocity.
| MODULE | TECHNICAL FOCUS | DIRECT LINK |
|---|---|---|
| EXP 01 // Liquid Art Wave | Fluid Dynamics & Refractive Shaders. | [ VIEW DEMO ] |
| EXP 02 // RGB Displacement | Velocity-based RGB ghosting & procedural noise. | [ VIEW DEMO ] |
The system calculates the Euclidean distance between mouse coordinates across frames to derive a uVelocity uniform. This delta drives the intensity of the color split.
The distortion is achieved by sampling the texture three times with a progressive offset, simulating the way a physical lens fails to focus all colors to the same point.
src/lab/ ├─ RGB-Displacement/ │ ├─ scene.tsx // Refractive Mesh │ └─ shaders/ // Static Refraction GLSL │ ├─ Liquid-Art-Wave/ │ ├─ scene.tsx // Velocity Logic │ └─ shaders/ // RGB Shift GLSL │ └─ Core/ └─ Frame.tsx // Global Canvas & Post-Processing |
graph LR
A[Mouse Interaction] --> B{Velocity Calc}
B -->|Delta > 0| C[uVelocity Uniform]
C --> D[Fragment Shader]
D --> E[RGB Channel Offset]
E --> F[Chromatic Aberration]
style A fill:#000,stroke:#fff,stroke-width:1px
style D fill:#111,stroke:#FF3366,stroke-width:2px
LERP SMOOTHING • FRUSTUM CULLING • GPU POWER PREFERENCE • DPR MANAGEMENT
SUJIT KOJI Creative Technologist & Shader Architect [ PORTFOLIO ] / [ LINKEDIN ]
© 2026 // OPEN-SOURCE OPTICAL LAB