# L I Q U I D _ V O I D ### 001 // GPGPU MORPHOLOGY ENGINE []() []() []() **An abstract generative fluid simulation crafted with GLSL & React Three Fiber.** [ [LAUNCH EXPERIENCE](https://liquid-void.sujitkoji.com/) ]   •   [ [RESOURCES](https://github.com/Lumina-GL/liquid-void) ]
 --- ### / VISION **Liquid Void** is a high-end WebGL experiment focused on **organic motion, refractive aesthetics, and mathematical beauty**. The project explores the intersection of **Simplex Noise algorithms** and **Fresnel equations** to simulate a volatile, liquid-like core trapped in a digital vacuum. Every system is built with a **Performance-First** mindset, utilizing custom shaders to handle complex vertex displacement directly on the GPU. --- ### / CORE ARCHITECTURE

[ 01. VERTEX ] Simplex Distortion Dynamic noise-based displacement

[ 02. FRAGMENT ] Fresnel Shading View-dependent light reflection

[ 03. OPTICS ] Post-Processing Cinematic Bloom & Film Grain

--- ### / TECHNICAL SPECIFICATIONS #### // NOISE MORPHOLOGY The mesh utilizes **3D Simplex Noise** to calculate real-time vertex displacement. Unlike standard Perlin noise, Simplex provides a more organic, non-directional flow with lower computational overhead. $$P_{new} = P_{old} + \vec{n} \cdot \text{Snoise}(P_{old} \cdot \omega + t) \cdot A$$ #### // FRESNEL APPROXIMATION To achieve the "premium" liquid look, we implement a custom Fresnel effect in the fragment shader. This calculates the reflectance based on the angle between the view vector and the surface normal. $$F = \max(0.0, 1.0 - \vec{V} \cdot \vec{N})^{power}$$ --- ### / PERFORMANCE STRATEGY `GPU INSTANCING` • `DPR CLAMPING` • `MEMOIZED UNIFORMS` • `LERP INTERPOLATION` --- ### / PROJECT STRUCTURE

src/ ├─ LiquidVoid/ │ ├─ scene.tsx // R3F Canvas & Post-Process │ ├─ LiquidCore.tsx // Shader Logic & Uniform Updates │ ├─ Overlay.tsx // Cinematic HUD Overlay │ └─ shaders/ │ ├─ vertex.glsl // Displacement logic │ └─ fragment.glsl // Color & Fresnel math │ └─ hooks/ └─ useLerp.ts // Smooth interaction transitions

--- ### / SYSTEM DESIGN ```mermaid graph TD A[Leva Controls] -->|Uniforms| B[LiquidCore] B --> C[Vertex Shader: Noise] B --> D[Fragment Shader: Fresnel] C --> E[Geometry Displacement] D --> F[Color Composition] E & F --> G[EffectComposer] G --> H[Final Output: Bloom/Grain] style B fill:#111,stroke:#FF0055,stroke-width:2px style G fill:#111,stroke:#58a6ff,stroke-width:2px ``` --- ### / ARCHITECTURE AUTHORSHIP **SUJIT KOJI** Creative Technologist & WebGL Architect [ [PORTFOLIO](https://sujitkoji.com) ]   /   [ [LINKEDIN](https://www.linkedin.com/in/sujitkoji/) ] © 2026 - Open Source Creative Experiment