An immersive maritime environment crafted with WebGL & React Three Fiber.
[ LAUNCH EXPERIENCE ] • [ RESOURCES ]
LightHouse is a cinematic WebGL experiment focused on atmosphere, scale, and motion.
The project simulates a stormy maritime scene where ocean dynamics, volumetric clouds, lightning, and lighting choreography work together to create a believable digital landscape — entirely inside the browser.
Every system is designed to run GPU-first, keeping React out of the render loop while maintaining declarative structure.
[ 01. HYDROS ]Custom Ocean Surface Shader-driven water + caustics |
[ 02. ATMOS ]Dynamic Sky & Clouds Volumetric + instanced motion |
[ 03. SIGNAL ]Lighthouse & Signal Rotating beam + stochastic flashes |
The ocean is built using three-stdlib’s Water shader, extended via onBeforeCompile to introduce animated caustics. Wave motion is driven by time-based uniforms.
- Lightning: Probabilistic point-light system with temporal decay.
- Lighthouse beam: Spotlight with high penumbra for cinematic softness.
IMPERATIVE UPDATES • DPR CLAMPING • GLTF OPTIMIZATION • SUSPENSE PIPELINE
app/ ├─ lighthouse/ │ ├─ scene.tsx // Main R3F canvas │ ├─ ocean.tsx // Water + shader extensions │ ├─ MovingClouds.tsx // Volumetric cloud system │ ├─ Lightning.tsx // Lightning flashes │ └─ lighthouseGLB.tsx // Lighthouse model & beam │ └─ Loader/ └─ loader.tsx // Cinematic loading screen |
graph LR
A[Canvas] --> B[Sky & Fog]
A --> C[Ocean Shader]
A --> D[Cloud System]
A --> E[Lighthouse]
E --> F[Rotating Beam]
E --> G[Warm Glow]
A --> H[Lightning System]
style A fill:#111,stroke:#58a6ff,stroke-width:2px
style E fill:#111,stroke:#8b949e,stroke-width:2px
This project is a Technical Study and is intended for Educational Purposes only.
[ 01. LOGIC ] The source code is licensed under the MIT License. You are free to explore, fork, and adapt the engine for your own experiments. [ 02. ASSETS ] The 3D models, textures, and environment maps remain the intellectual property of their respective creators. No commercial usage is permitted for the assets contained within this repository. [ 03. ATTRIBUTION ] This is a non-commercial laboratory. If the shader logic or atmospheric systems are integrated into your projects, a credit back to Sujit Koji is required to maintain the spirit of open-source authorship.
SUJIT KOJI Creative Technologist & WebGL Architect [ PORTFOLIO ] / [ LINKEDIN ]
© 2026 - Open Source Creative Experiment