Virtual Gulf
- A-Frame
- Three.js
- WebXR
- GLSL
- Web Audio API
A WebXR dive onto a Red Sea reef: schools of Red Sea fish, a green sea turtle, blue-spotted rays, clownfish in the coral, and now and then a blacktip reef shark or a rare whale shark passing through. Move your phone or slide a finger to look around, drag on desktop, or step in with a VR headset. Tap the water to feed the fish, hold to swim, and find the clam that keeps a secret. Alongside it sits a species atlas: 75 fish, sharks and rays of the Gulf of Eilat, each modeled from its researched body shape and colors.
Live SiteThe real site, running right here, not a picture. Click in to use it.
How-to
One static site with no build step and no image or audio files: every texture is painted on a canvas in code, and every sound is synthesized in Web Audio, down to the whale shark's call. A-Frame handles the VR, custom three.js components handle everything that moves. Fish school with boids on instanced meshes, their tails swaying in the vertex shader, and one curious fish per school swims past you side on, the way real fish check out a diver. The big animals are lofted from side-profile curves, and the coral follows reef research: boulders on the lee side, branching corals facing the current, soft corals in the shade.