SHIP GAME: ARCHITECTING A REAL-TIME WATER WORLD
Mastering the waves: From custom Perlin noise shaders to a fully interactive 3D maritime simulation.
The problem worth engineering
Building a full 3D game in Three.js required diving headfirst into the complexities of shaders, vector math, and rendering pipelines. The 'Ship Game' is a technical demonstration of custom GLSL implementation, where waves aren't just textures but dynamic mathematical functions.
The project features a custom water shader combining Perlin noise (Gustavson) with wave interference, dynamic environment mapping for realistic sky reflections, and a custom physics engine for boat buoyancy and steering. Beyond the visuals, I engineered a hybrid camera system to provide smooth, cinematic perspectives that respond to movement inertia, creating a truly immersive maritime experience.
- Custom GLSL Water Shader: Engineered a vertex and fragment shader using Perlin noise and wave interference patterns. Used multiple octaves of noise for rippling 'micro-waves' and interpolated color depth based on elevation for a believable underwater fade.
- Dynamic Environment Mapping: Implemented a cube texture skybox (px, nx, py, ny, pz, nz) that reflects realistically on the water surface and ship hull, eliminating seams and ensuring perfect environmental immersion.
- Realistic Boat Buoyancy & Physics: Developed wave-synced vertical motion for GLTF boat models. Created a custom physics math layer (simulated drag and velocity dampening) to mimic water resistance and steering inertia.
How it was built, system by system

Interface documentation
Click any screen to inspect it full size.
Related Projects
Explore more of my work

Goods&U | Full-Stack Bilingual (Arabic-RTL) E-Commerce Platform

Polary | Cinematic 3D Narrative Landing Experience

Diagnostics Elite | Cinematic Bilingual MedTech Platform (WebGL + Sanity)

Fix Vision | Interactive High-Performance Creative Agency Platform

IQ Academy | Full-Stack Arabic EdTech Learning Platform

TMT Eye | Enterprise Intelligent Transport Operating System

Goods&U | Full-Stack Bilingual (Arabic-RTL) E-Commerce Platform

Polary | Cinematic 3D Narrative Landing Experience

Diagnostics Elite | Cinematic Bilingual MedTech Platform (WebGL + Sanity)

Fix Vision | Interactive High-Performance Creative Agency Platform

IQ Academy | Full-Stack Arabic EdTech Learning Platform

