Pasted

Build a complete, highly polished, interactive ocean environment in Three.js using WebGPU and TSL.
 The goal is to create the most realistic ocean simulation and coastal environment reasonably achievable in a browser, targeting the visual quality, physical believability, atmosphere, interaction quality, and polish associated with modern AAA games and cinematic real-time rendering.
 Treat this as an integrated simulation and rendering project rather than a collection of disconnected effects. Research real-world references and relevant rendering/simulation techniques whenever useful. Iterate on the result visually and technically until the major systems work together convincingly.
 You may change specific implementation techniques described below if research shows a better approach. For example, a three-cascade FFT ocean is a starting suggestion, not a hard requirement. Choose the best practical technique for browser-based WebGPU rendering.
 Target approximately 60 FPS on a capable modern desktop GPU. Continuously consider performance, GPU memory, shader complexity, simulation resolution, texture sizes, geometry density, LODs, particle counts, overdraw, shadow cost, and temporal stability. Do not allow performance to collapse as features accumulate.
 ## Core ocean simulation
 Implement a physically convincing open-ocean surface capable of producing both calm seas and rough/choppy conditions.
 Start from a multi-scale spectral ocean approach such as a three-cascade FFT simulation, unless you determine another technique produces a better result.
 The ocean should have:
 - realistic multi-scale wave dynamics;
- large swells plus smaller capillary/detail waves;
- no obvious repeating tiling;
- stable motion while the camera and boat move;
- realistic wave normals and roughness;
- sun glints and specular breakup;
- irregular darker patches and broader low-frequency variation;
- persistent foam generated from physically meaningful wave compression/breaking;
- world-space patches and streaks of foam resembling real ocean surfaces;
- physically plausible reflection and refraction;
- subsurface scattering;
- broadband backscatter;
- Beer-Lambert attenuation;
- depth-dependent coloration;
- underwater fog;
- convincing shallow-water behavior;
- terrain and scene objects correctly shadowing the water.
 Avoid temporal flickering, jittering, smearing, swimming textures, unstable reflections, or artifacts caused by camera movement.
 Pay special attention to rendering through transparent surfaces or the boat windshield. If windows produce unstable ocean rendering, prefer a robust solution, including removing unnecessary boat windows if appropriate.
 ## Shoreline and breaking waves
 The shoreline is one of the most important parts of the project.
 Implement a shallow-water / near-shore simulation that couples convincingly with the open ocean.
 As waves enter shallower water, they should:
 - react to decreasing depth;
- slow and steepen appropriately;
- form realistic rolling crests;
- break at varying locations rather than producing one perfectly continuous roller;
- crash downward naturally;
- generate turbulent whitewater only after or during physical breaking;
- create realistic aerated water, foam and spray;
- wash water and foam up the beach;
- allow the water to recede naturally;
- leave wet sand behind.
 Avoid the appearance of foam climbing upward from the underside of a wave before the crest breaks. Avoid the “cannoli folding” look where foam wraps unnaturally through the curling wave.
 Study how real breaking waves form, overturn, entrain air, create whitewater, and generate spray. Base particle spawn locations, velocities, sizes, lifetimes, shading and density on physically plausible breaking behavior.
 Spray should consist of individual droplets and fine mist rather than large opaque sprite blobs or puffs.
 Do not exaggerate wind-blown spray coming continuously off the tops of waves unless environmental conditions justify it.
 Break the shoreline into multiple irregular breaking sections rather than one long uniform wave front. Waves should feel broad, but avoid excessively tall crests or oversized swells.
 There must be no visible gap between the shallow-water simulation and the water washing/lapping onto shore, including while water recedes.
 ## Beach interaction
 Water should lap naturally onto the beach.
 The leading edge should appear rounded and volumetric rather than as a razor-thin clipping boundary. Use appropriate surface normals, contact shading and shadows to make the waterline feel physical.
 Foam should:
 - advect with the water;
- stretch and break apart naturally;
- wash onto shore;
- fade into the wet sand;
- leave believable wetness behind.
 Implement beach wetness with realistic darkening, roughness changes and gradual drying.
 Add shoreline debris such as:
 - small rocks;
- pebbles;
- driftwood;
- logs;
- shells or similar subtle objects;
- organic debris.
 Place these naturally along the shoreline, approximately a couple of metres farther down the beach than the immediate water edge where appropriate.
 Use proper PBR materials and enough small-scale geometric and normal detail that these props do not look synthetic.
 ## Air/water transition
 The transition between above-water and underwater rendering must be seamless.
 Do not use a crude full-screen distortion effect when exiting the water.
 Correctly handle the camera crossing the water plane.
 When the camera is above water:
 - geometry and atmosphere above the water should render normally;
- the underwater portion of the scene should receive underwater shading;
- the region between the camera and the clipping/water interface must not generate incorrect underwater fog or duplicate rendering.
 When the camera is underwater:
 - underwater geometry should render with underwater lighting/fog;
- the sky and above-water world visible through the surface should render correctly;
- front/back surface orientation, depth information and clipping should be handled robustly.
 Use appropriate depth testing, clipping and water-surface face information to prevent a visible split between the ocean surface and underwater fog.
 When looking across the waterline, create a convincing rounded optical edge similar to looking through a curved sheet of glass.
 The swimming transition should be smooth rather than abrupt.
 Do not forcibly push the player to the water surface.
 ## Water droplets
 When the player emerges from the water, allow droplets to form on the camera/lens and roll or fade away naturally.
 Keep the effect subtle and localized rather than warping the entire frame.
 ## Underwater rendering
 Create a rich underwater environment.
 Include:
 - realistic underwater fog;
- depth-dependent scattering and attenuation;
- caustics;
- reef areas;
- rocks;
- coral;
- aquatic vegetation;
- schooling fish;
- small fish around larger animals;
- subtle particles and suspended matter;
- greater environmental density and variation than a few isolated props.
 The reef should be explorable by swimming.
 ## Caustics
 Implement high-quality underwater caustics.
 Do not use simple random noise, obvious streak textures or a visibly finite projected patch.
 Caustics should:
 - be driven by or correlated with surface wave activity;
- vary naturally in scale and intensity;
- respond to water depth where appropriate;
- avoid obvious tiling;
- avoid visible projection boundaries;
- remain temporally stable;
- avoid jitter or flickering while the camera moves;
- not be excessively bright.
 If the initial technique produces artifacts, replace it rather than layering fixes over a fundamentally weak solution.
 Aim for a physically motivated real-time caustic solution suitable for AAA-style visuals within the browser performance budget.
 ## Boat
 Create a detailed drivable boat initially docked at the fishing village.
 Allow the player to:
 - approach the boat while walking;
- enter it;
- drive it;
- switch between first-person and third-person boat views.
 Boat movement should respond convincingly to ocean waves.
 Improve the cockpit/interior with:
 - realistic geometry;
- small mechanical details;
- believable materials;
- proper PBR textures;
- normal and roughness detail;
- lighting appropriate to daytime and nighttime.
 Avoid z-fighting.
 At night, illuminate the cabin appropriately.
 If boat windows create rendering artifacts with the water, simplify or remove them rather than preserving them at the cost of temporal stability.
 ## Boat wake and bow spray
 Implement a complete wake system coupled to the surrounding water.
 The wake should include:
 - displaced water;
- turbulent aeration;
- foam;
- realistic trailing wake patterns;
- bow spray;
- stern disturbance.
 Do not create an unrealistically deep or persistent trough behind the boat.
 Use Three.js Water Pro or similar high-quality examples as references for bow spray, wake aeration and water interaction, but do not blindly copy their implementation.
 Preserve your own high-quality foam treatment while improving the physical placement and look of spray.
 Bow spray should emerge from plausible hull-water interaction regions and should respond to speed, hull motion and wave impact.
 ## Fishing village
 Build a small, atmospheric fishing village and pier where the boat is docked.
 The village should feel like a real inhabited place, not a procedural placeholder.
 Include environmental details such as:
 - crates;
- fishing equipment;
- nets;
- rocks;
- ropes;
- signs;
- boats;
- dock clutter;
- shoreline debris;
- vegetation;
- small architectural details.
 Use good PBR materials throughout.
 Village materials need:
 - convincing albedo variation;
- normal detail;
- roughness variation;
- weathering;
- dirt;
- edge wear where appropriate;
- material-specific response to lighting.
 Avoid weak, blurry or obviously generated-looking textures.
 Make the fishing sign sway subtly.
 Dock lights should:
 - visibly illuminate the environment;
- cast light onto nearby surfaces;
- be bright enough to contribute to the scene;
- hang from chains or similar supports;
- move/bob slightly in response to simulated motion or wind.
 All visible scene lights should meaningfully affect nearby geometry rather than simply appearing as emissive objects.
 ## Terrain
 Substantially develop the surrounding terrain.
 Avoid smooth procedural hills with simple textures.
 Use:
 - more organic landforms;
- improved tessellation or geometric detail;
- realistic rock formations;
- varied ground materials;
- proper PBR textures;
- fine normal/roughness detail;
- believable erosion and transitions;
- vegetation distribution based on terrain/environment.
 The hill to the left side of the environment should contain trees, shrubs and natural detail.
 Terrain must cast physically plausible shadows onto the water and other geometry.
 ## Vegetation
 Implement realistic vegetation including:
 - trees;
- bushes;
- grass;
- palm trees where appropriate;
- shrubs.
 Vegetation should move subtly with wind.
 Improve:
 - tree canopy structure;
- leaf density;
- trunk textures;
- distant tree appearance;
- palm tree trunk materials.
 Avoid shiny or plastic-looking foliage.
 Use LOD systems where useful, but transition between LODs with a Bayer/dithered fade or another smooth technique rather than hard popping.
 ## Wildlife and environmental life
 Make the scene feel alive.
 Add:
 - birds;
- bird sounds;
- fish;
- schooling fish;
- small creatures on the beach that move or scatter as the player approaches;
- subtle airborne particles;
- underwater particles;
- aquatic creatures.
 Avoid excessive density. These should support immersion rather than turn the scene into a zoo.
 ## Whale
 Include a large, highly detailed, realistic whale underwater.
 The whale should have:
 - refined anatomy;
- detailed skin;
- realistic roughness;
- bumps and skin variation;
- non-plastic/non-overly-shiny materials;
- smooth animation;
- natural fin/flipper movement;
- believable swimming motion.
 Move it reasonably close to shore so the player can discover it.
 Add smaller fish swimming around it.
 If the whale breaches or strongly interacts with the surface, generate appropriate foam churn, displaced water and spray.
 Add localized 3D whale vocalizations.
 Do not use jerky animation.
 ## Dynamic sky
 Implement a dynamic physically based sky with controllable:
 - sun elevation;
- sun azimuth;
- atmospheric conditions.
 Sky coloration should react realistically to time of day.
 ## Volumetric clouds
 Implement high-quality volumetric clouds.
 Avoid clouds that look:
 - grainy;
- pixelated;
- like tall marshmallows;
- like isolated little blobs;
- overly vertically stretched;
- obviously raymarched at insufficient quality.
 Clouds should be broad, layered and epic while remaining performant.
 Use lower-frequency density structure for large cloud masses and higher-frequency detail selectively, particularly around edges and upper structures.
 Improve temporal stability and reduce noise/grain.
 Include realistic broad cirrus coverage across the sky.
 Cirrus should be:
 - subtle;
- wispy;
- irregular;
- noisy at multiple scales;
- broadly distributed;
- not represented as obvious repeated lines.
 Remove unnecessary stratocumulus treatment if it hurts realism.
 ## Atmosphere
 Add atmospheric effects that help sell scale and depth:
 - atmospheric haze;
- aerial perspective;
- volumetric light / god rays;
- subtle fog where appropriate;
- tiny airborne particles;
- realistic horizon blending.
 Keep airborne particles extremely subtle.
 ## Lighting
 Use physically plausible lighting throughout the scene.
 Implement:
 - sunlight;
- bounced/indirect lighting approximation;
- contact shadows;
- screen-space contact shadows if useful;
- strong but natural environmental shadowing;
- proper night lighting.
 Objects under overturned boats and similar occluded areas must receive convincing shadowing.
 Avoid incorrect long shadows being cast across water when terrain should block the light source.
 ## Shadows
 Improve shadow quality substantially.
 Use cascaded shadow maps or another appropriate technique so that:
 - near-camera shadows contain fine detail;
- distant shadows remain stable at lower resolution;
- transitions between cascades are smoothly blended;
- there is no hard visible cutoff.
 Avoid temporal flickering.
 ## Ambient occlusion
 Implement ambient occlusion carefully.
 It should strengthen object contact and environmental depth without creating artifacts.
 In particular, fishing nets, thin geometry, foliage and the boat interior must not flicker or turn unnaturally dark because of AO.
 If screen-space AO causes unacceptable temporal instability, change the implementation or exclude problematic materials/objects.
 ## Contact shading
 Add subtle screen-space contact shadows or equivalent local shading where they provide useful grounding.
 Do not allow them to create visible noise or instability.
 ## Post-processing
 Use a modern cinematic post-processing pipeline.
 Include where appropriate:
 - ACES filmic tone mapping;
- high-quality anti-aliasing;
- subtle vignette;
- carefully tuned bloom if needed;
- atmospheric haze;
- god rays;
- motion blur;
- custom lens flare;
- exposure control.
 Write a polished custom lens flare rather than relying on a basic Three.js built-in flare.
 Motion blur should improve motion perception without smearing the ocean surface.
 Keep post effects restrained and physically plausible.
 Avoid making the overall image blurry.
 ## Anti-aliasing
 Implement effective anti-aliasing suitable for dense foliage, water highlights, thin geometry and particles.
 Do not simply soften the whole image.
 Preserve sharp detail.
 ## Player controls
 Allow the player to explore the environment in first person.
 The player should be able to:
 - walk around the beach and village;
- enter the water;
- transition naturally into swimming;
- swim underwater;
- approach and enter the boat;
- drive the boat;
- switch boat camera between first and third person.
 Also provide a free-fly/debug camera mode for inspection.
 When switching from free camera to walking mode, do not teleport the player somewhere else. Preserve the current position and let gravity naturally bring the player down to terrain if needed.
 ## Flashlight
 Give the player a flashlight that can be toggled with a keyboard shortcut.
 The flashlight should work:
 - above water;
- indoors or around the boat;
- underwater.
 Its beam should interact appropriately with underwater scattering/fog.
 ## UI
 Create a polished, visually attractive control UI.
 Allow adjustment of useful simulation and rendering parameters such as:
 - wave amplitude;
- wind strength/direction;
- sea state;
- swell parameters;
- foam settings;
- sun elevation;
- sun azimuth;
- time of day;
- cloud parameters;
- selected graphics/performance settings.
 Keep the UI coherent and pleasant rather than exposing every internal shader constant.
 Display FPS in the upper-left corner.
 Remove the default HTML body margin.
 ## Audio
 Implement believable environmental audio.
 Include:
 - ocean/wave sounds;
- surf;
- wind;
- subtle walking sounds;
- bird sounds;
- boat sounds;
- underwater ambience;
- localized whale sounds.
 Use high-quality natural recordings where licensing permits rather than obviously synthetic sound effects.
 Remove fake or distracting synthetic effects such as:
 - synthetic bubble sounds triggered while walking;
- exaggerated enter/exit-water sounds;
- unrealistic footsteps.
 Walking sounds should be subtle and surface-appropriate.
 Use spatial/3D audio where useful.
 ## Wind effects
 If visible wind streaks or airborne wind particles are used, base them on real visual references.
 Do not draw obvious stylized lines across the screen.
 Wind should primarily be communicated through:
 - vegetation movement;
- spray;
- particles;
- clouds;
- water response;
- sound.
 ## Performance and rendering architecture
 This must remain a practical browser application.
 Design around WebGPU.
 Use TSL for shader/material logic wherever reasonably possible.
 If low-level WGSL is necessary for a specific compute or rendering subsystem, use it intentionally and document why.
 Continuously profile likely bottlenecks.
 Optimize:
 - FFT/spectral simulation resolution;
- compute dispatches;
- render passes;
- shadow maps;
- volumetric cloud steps;
- caustics;
- particle simulations;
- reef geometry;
- fish counts;
- vegetation;
- whale rendering;
- post-processing;
- reflection/refraction rendering.
 Use instancing where appropriate.
 Use LOD systems.
 Fade LODs rather than hard switching.
 Avoid unnecessary overdraw.
 Avoid enormous texture sizes where they do not create visible value.
 Make expensive systems scalable through quality settings.
 ## Visual debugging and verification
 Do not judge quality from only one camera.
 Continuously inspect the scene from multiple viewpoints, including:
 - shore looking toward the ocean;
- ocean looking toward shore;
- standing at the waterline;
- partly submerged camera;
- fully underwater;
- reef;
- inside/around the boat;
- boat at speed;
- near breaking waves;
- village;
- distant landscape;
- sunrise/sunset;
- night;
- whale encounter.
 Capture or inspect additional views whenever needed to validate quality.
 Compare your result against real photographic/video references and high-quality game/film references.
 Specifically inspect for:
 - flickering;
- temporal instability;
- tiling;
- texture repetition;
- clipping;
- gaps;
- incorrect depth;
- overly shiny materials;
- low-resolution clouds;
- particle blobs;
- incorrect foam generation;
- shadow cascade boundaries;
- AO artifacts;
- water jitter;
- caustic jitter;
- smearing;
- z-fighting;
- LOD popping;
- unrealistic animation;
- weak texture detail.
 Fix root causes rather than hiding problems with extra post-processing.
 ## Quality philosophy
 Do not treat “AAA quality” as simply adding more effects.
 The scene should feel convincing because:
 - motion is physically coherent;
- scale is believable;
- materials respond correctly to light;
- water behaves consistently across deep ocean, shallow water and shoreline;
- foam and spray arise from plausible causes;
- atmospheric effects support depth;
- environmental detail exists at multiple scales;
- animation is temporally smooth;
- light and shadow are stable;
- there are subtle imperfections and natural irregularities;
- nothing obviously looks like a placeholder.
 Favor fewer well-integrated systems over many weak effects.
 Continually ask what specifically prevents the current result from resembling a high-quality modern real-time coastal scene, then address the highest-impact weaknesses.
 ## Iteration process
 Work iteratively.
 For each major subsystem:
 1. Research relevant real-world behavior and good real-time rendering references.
2. Implement the simplest physically plausible version.
3. Inspect it from appropriate camera angles.
4. Identify visual or technical failures.
5. Refine the model rather than simply adding noise or effects.
6. Profile performance.
7. Integrate it with adjacent systems.
8. Re-check for temporal artifacts.
 Do not allow long-running experiments or agents to continue indefinitely without a clear termination condition.
 If using multiple agents or parallel work streams, each should have:
 - a specific task;
- explicit success criteria;
- a termination condition;
- a bounded scope.
 Periodically verify that the actual browser build still runs and does not remain stuck indefinitely compiling shaders.
 As the project approaches completion, prioritize fixing visible defects, integration problems, temporal instability and obvious placeholders over introducing additional major systems.
 Finish the environment as a coherent, polished demo rather than leaving many partially implemented experiments.