
Three.js Water Pro is making Subnautica in the browser a real possibility. Rewrote the lighting model so light reflecting off the ocean floor is now refracted and attenuated based on real-world phy…
The Hook
“(No spoken dialogue — The audio begins with a low, sustained drone and subtle, shimmering synth pads, creating an atmospheric and expansive feel.)”
Product Reveal
“(No spoken dialogue — The ambient drone and synth pads continue, maintaining an expansive atmosphere.)”
Feature Teaser
“(No spoken dialogue — A distinct underwater gurgling sound effect is introduced, accompanied by a deep, resonant sub-bass pulse, suggesting a transition or reveal. This underwater sound continues.)”
Product Reveal
“(No spoken dialogue — The underwater sound fades out, returning to the initial ambient drone and synth pads, maintaining a minimalist, atmospheric texture.)”
Synthesizable in Remotion · key components of the realistic-3d-environment-showcase template.
The water surface exhibits realistic wave patterns, reflections, and refractions, dynamically responding to light and camera perspective. It seamlessly transitions between calm and turbulent states.
Utilize WebGL shaders for real-time water rendering, incorporating noise textures for wave displacement, Fresnel effects for reflections, and a custom refraction shader for underwater distortion. Interpolate wave parameters (amplitude, frequency) to transition between states.
Light penetrating the water is visibly attenuated and refracted, creating realistic caustics on the ocean floor and volumetric light rays. Objects underwater appear appropriately lit and colored based on depth.
Implement a custom fragment shader for underwater rendering that calculates light absorption and scattering based on depth and water color. Use a post-processing effect for volumetric light shafts and a texture-based caustics projection on the seabed.
The camera smoothly transitions between aerial, surface, and underwater perspectives without abrupt cuts, creating a continuous and immersive viewing experience.
Animate camera position and rotation using a smooth easing function (e.g., easeInOutQuad) over a defined duration. For the underwater transition, blend between an above-water and underwater post-processing stack (e.g., fog, color grading, distortion) using an interpolated alpha value.
Purpose. To immediately captivate the viewer with the product's visual fidelity and interactive capabilities.
Execution. Opening with a high-angle view of a beautiful water scene, demonstrating real-time UI manipulation of water properties.
Purpose. To showcase the advanced physics and visual complexity of the water simulation, particularly its underwater capabilities.
Execution. Smooth camera dives from above to below the water surface, highlighting light refraction, caustics, and underwater environments.
Purpose. To demonstrate how the water interacts realistically with various elements like shorelines, boats, and distant horizons.
Execution. Camera movements that pan along coastlines, show waves breaking, and reveal the water's behavior in open sea conditions.
Purpose. To provide a holistic view of the product's capabilities across different scenarios and perspectives.
Execution. A montage of diverse camera angles and movements, emphasizing the product's versatility and realism in various marine settings.
Objective
Launch a new real-time 3D architectural visualization tool for interior design.How the recipe adapts
The continuous camera movement will smoothly navigate through various photorealistic interior spaces, highlighting dynamic lighting changes, material reflections on surfaces like polished floors and glass, and the interaction of light with different textures. Instead of water physics, the focus will be on realistic material rendering and global illumination. The UI interaction will show changing furniture or wall colors in real-time. The ambient score will be adapted to evoke a sense of modern elegance and calm.Scene durations (4 scenes, 74s)
Key Remotion components
To ensure that artificial general intelligence benefits all of humanity

Gopuff introduces Go, an AI shopping assistant built with SpaceXAI: say what you need and the order is placed.

Iliad (Troy) trailer made by Grok Imagine 1.5, which was just released