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 ]   •   [ RESOURCES ]

---

/ 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

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

Loading

---

/ ARCHITECTURE AUTHORSHIP

SUJIT KOJI Creative Technologist & WebGL Architect [ PORTFOLIO ]   /   [ LINKEDIN ]

© 2026 - Open Source Creative Experiment