Continue Azure Odyssey Demo Creation

The task says "Wake up and do as you please." This is a free-form task. My purpose is to create cool Three.js demos in my space under /space/demos/.

The last execution was "Azure Odyssey Demo Creation" — it created the initial HTML structure, CSS, UI elements, import map, and core JavaScript utilities for an 'Azure Odyssey' demo. It seems the demo was partially created — the foundational elements. Let me check the current state of the demos folder and continue building that demo, or finish it.

Let me first install shell tools and explore the current state.

Let me check the current state of the demos folder.

****************************************************************************************************************************************************************************************************************************************************ns.

The Azure Odyssey demo is partially built — it has the foundation (342 lines) but ends at bakeHeightmap. The file ends abruptly without closing script/body/html tags. The last task was working on this demo in chunks and completed the "foundation" chunk.

The task today says "Wake up and do as you please." So I can either continue/finish the Azure Odyssey demo or do something else. The most sensible thing: finish the Azure Odyssey demo since it's incomplete (it ends mid-script without closing tags). Let me read the full file to understand what exists, then complete it.

Let me read the whole file first.

I have a good picture of the foundation. The file ends at line 342 (343 total with trailing). It ends after bakeHeightmap. The file has no closing </script>, </body>, </html>.

I need to continue building the demo. This is a large task — the previous run laid the groundwork. Now I need to write the rest:

1. Renderer, scene, camera, composer setup
2. Sky dome (sun, moon, clouds, stars — procedural shader)
3. Ocean (Gerstner GLSL shader with depth-based color from heightmap, foam)
4. Terrain (islands from baked heightmap, textured)
5. Boat (sailboat model built from primitives, with sails, buoyancy physics)
6. Wake foam, bow spray particles
7. Seagulls
8. WebAudio synthesized ambience (waves, wind)
9. HUD updates, camera modes (Chase, Orbit, Cinematic)
10. Autopilot
11. GUI (lil-gui)
12. Input handling (keyboard, mouse drag, wheel, touch)
13. Snapshot button
14. Animation loop
15. Init sequence (bake heightmap with progress, then build)

This is a lot. I should write it in a clean, well-structured way. Let me write the remainder of the file as an append. Given the size, I'll write it in a few chunks appended to the file, then verify the whole thing.

Let me plan the architecture carefully.

Existing pieces:

• settings object
• utils: clamp, lerp, TAU, wrapAngle, sstep, mulberry32
• noise: hash2, vnoise, fbm
• WAVES, wavesA, wavesB, simTime, updateWavePhases(), waveHeight(x,z)
• ISLANDS array (9 islands + random ring placement)
• analyticHeight(x,z)
• hmap (Float32Array HM_RES*HM_RES), sampleHeight(x,z)
• bakeHeightmap(onProgress) async

Wait — there's a subtlety. waveHeight uses w.amp * settings.swell on CPU, but the shader also needs the swell multiplier. I'll pass a uSwell uniform.

Also the ocean needs the heightmap as a texture for depth-based color (shallow water near islands gets turquoise, deep is dark blue) and shore foam. I'll create a DataTexture from hmap.

Plan for the remaining code:

1. Globals / three.js setup

• renderer, scene, camera
• composer with RenderPass, UnrealBloomPass, custom vignette shader pass (ShaderPass), OutputPass
• Actually vignette can be done with a custom ShaderPass.

Let me structure:

2. Sky

A big sphere with a custom ShaderMaterial that renders:

• gradient based on sun elevation
• sun disc + glow
• moon disc
• procedural clouds (fbm in shader)
• stars (hash-based, visible at night)

Uniforms: uSunDir, uMoonDir? Actually moon opposite sun roughly. uClouds (coverage), uTime for cloud drift, uDayNight factor.

I'll compute sun direction from timeOfDay.

3. Ocean

PlaneGeometry (large, high segment count in center, or a big circle). Use a custom ShaderMaterial:

• Vertex shader: Gerstner displacement using uWavesA/uWavesB uniforms, compute normal analytically, world position, and sample height texture for depth.
• Fragment shader: depth-based color gradient (deep navy → turquoise), fresnel reflection of sky color (approx via sun dir / env gradient), specular sun glint, foam (whitecaps from wave crest + shore foam from depth), subtle subsurface.

I'll pass the heightmap DataTexture (R32F or luminance float) and sample in vertex shader to get depth = waterY - seabedY. Actually waterY at rest is 0. depth = 0 - h (h negative below sea). Where h > 0 is land; water plane only in ocean. But the ocean plane spans everywhere including under islands; that's fine because terrain mesh will cover it where above water. For depth color I sample seabed height.

For shore foam: where depth small (h near 0), add foam.

Ocean size: make it large, e.g. radius beyond WORLD_SIZE so horizon looks infinite. But Gerstner on a huge plane with few vertices = aliasing. Approach: use a radial grid centered on origin? Simpler: use a big plane sized ~ WORLD_SIZE*2 with high segments near camera?

Common approach: a "follow camera" ocean patch with a high-res center and low-res skirt. That's complex. Given constraints, I'll do a large circular plane (CircleGeometry or RingGeometry with many segments) centered on world origin (archipelago is around origin). WORLD_SIZE=3200 covers the islands. I'll make ocean radius ~ 4000 with enough segments. But uniform segments over 4000 radius with 512 segments → vertex spacing ~ 4000*2/512 = 15.6m — okay for the largest waves (len 92) but the small ones (len 6.3) will alias badly. However those small ones just add chop; aliasing is somewhat acceptable but can look noisy.

Better: use a high-res inner region. I'll construct a custom geometry: a radial "polar" grid with finer resolution near center. Actually simpler and robust: use a plane that follows the boat/camera quantized to a grid, with vertex density concentrated. That's the classic approach but more code.

Given time, I'll use a compromise: a big disk (radius ~ 3600) using a polar grid where radial segments increase outward (log spacing) so near-center (where boat sails) is dense. I'll generate BufferGeometry procedurally: rings with exponentially increasing radius, each ring with enough angular segments. This gives high density near center.

Actually, an even simpler and very effective approach used in many demos: a square grid centered on camera with fixed vertex spacing that "snaps" to follow the camera (vertices displaced by Gerstner so snapping artifacts minimal). But depth sampling and shore foam require world coords; fine.

I'll go with a camera-following grid for the water:

• A grid of N x N vertices (e.g. 220x220) spaced ~ s meters, covering the view around the camera. It follows camera x/z snapped to multiples of s to avoid swimming. Displacement in vertex shader.
• But then the ocean doesn't extend to horizon. Add a separate low-res far skirt ring out to ~8000 with flat shader (no Gerstner, just color gradient + fog) to reach horizon.

That's a robust approach. Let me implement:

• Water near: PlaneGeometry(size ~ 1200, seg 256) → vertex spacing ~4.7m. Good for waves down to ~10m wavelength. The 6.3m wave will alias a bit; I can reduce its amplitude influence or accept. Actually let me make near grid 2048 size with 320 segments → 6.4m spacing. Hmm. Let me do size 1400, seg 300 → 4.67m. Then the small waves alias. Alternatively reduce the smallest waves' amp in shader only (keep CPU buoyancy full). Eh.

Let me reconsider. The GPU vertex shader uses the same WAVES. If near grid spacing ~4.7m, wavelengths ≥ ~9.4m render ok (Nyquist 2 samples). Waves: 92, 51, 30, 17.5, 10.5, 6.3. The 6.3m wave aliases. I could just drop the smallest wave to len ~ 8 and keep spacing ~3.5m with size 1120 seg 320 (3.5m) → Nyquist 7m. That covers 10.5 up. The smallest at 6.3 would still alias.

Simplest robust fix: make the ocean near-field high enough resolution and keep far-field flat. Use size 1200, segments 400 → 3m spacing, Nyquist 6m, covers all waves ≥6.3. 400x400 = 160k verts, 320k tris — fine for a modern GPU, and this is the main visual. Mobile "Medium" quality can use 256 seg. I'll parameterize by quality.

Water follows camera. Far skirt: a big ring from ~600 to ~9000 radius, flat (no waves or tiny), colored to match, fades to horizon with fog.

Hmm, but matching near (displaced) to far (flat) at the boundary could seam. With fog and distance it should be fine. Also the near water follows camera so its edge is always ~600m away — far enough that fog + small size hides seam.

Actually, let me reconsider the whole ocean approach for robustness and simplicity. A widely-used clean method:

Single large camera-following grid with distance-based density falloff in the shader is overkill.

I'll implement the near-field following grid + far flat ring. Good.

Let me define:

• waterSeg based on quality: High=384, Medium=256, Low=160.
• waterSize = 1500 (square). spacing = 1500/384 = 3.9m → Nyquist 7.8m, covers 10.5+ but not 6.3. To cover 6.3 need spacing ≤3.15. Let me use size 1024, seg 384 → 2.67m spacing, Nyquist 5.3m — covers all. 1024m near-field radius (512 half) with fog starting ~ 800. Hmm half-size 512 means water edge 512m from camera. Far skirt from ~500 to 9000.

Wait, camera can be high (orbit) — need water to cover view. Let me set waterSize=1600 (half 800), seg 512 → spacing 3.125m, Nyquist 6.25m, covers 6.3 wave barely. 512x512=262k verts. That's heavy but ok on desktop High. Medium 320 seg → 5m spacing (drop 6.3 wave visually on medium — I can scale amp of small waves by quality). Low 200 seg.

This is getting complicated. Let me simplify: I'll accept spacing ~4m and reduce the two smallest waves' amplitude in the GPU only (they mainly add chop). CPU buoyancy uses full set (fine for boat motion). Actually buoyancy mismatch GPU vs CPU causes boat to clip visually. But small waves have tiny amp (0.09, 0.05) so mismatch is negligible visually.

Decision: near water grid follows camera, spacing ~4m, Nyquist ~8m. In shader I fade the smallest two waves by a uniform uDetailFade (High=1 full, Medium/Low reduce). But to keep GPU/CPU buoyancy consistent, I'll also apply the same detail fade on CPU waveHeight. Simplest: apply a waveDetail setting that multiplies amp of waves with len < 20 in BOTH waveHeight and shader. Default High detail=1, Medium=0.6, Low=0.35. This keeps them matched.

Actually, cleaner: keep waves identical everywhere; just pick grid resolution so Nyquist is fine, and rely on the fact that the 6.3m wave has amp 0.05 (5cm) — even if it aliases it's invisible. So I don't need detail fade at all! Aliasing of a 5cm wave produces sub-5cm artifacts — negligible.

So: near water follows camera, size 1500, seg High=400 (3.75m), Med=256 (5.86m), Low=160 (9.4m). The tiny waves alias slightly on lower settings but they're tiny.

Ocean shader details

Uniforms:

• uWavesA[6], uWavesB[6] (vec4 arrays)
• uSwell (global multiplier)
• uTime
• uSunDir, uSunColor
• uSkyColor, uHorizonColor (for reflection)
• uDeepColor, uShallowColor
• uHeightTex (DataTexture float), uWorldSize, uHalf
• uFoam (amount)
• uCameraPos
• fog uniforms (use THREE fog or manual)

Vertex shader:

Actually if the water mesh follows the camera, the plane's local coords are offset. I'll set mesh.position = (snapX, 0, snapZ) and the geometry is a plane centered at origin spanning [-size/2, size/2]. Then world x = mesh.position.x + position.x. I'll compute world position in shader: vec4 wp = modelMatrix * vec4(position,1.0); then displace wp.y by gerstner and also displace x/z (Gerstner horizontal displacement). Compute normal via partial derivatives.

Gerstner displacement for wave i:

Standard Gerstner:

θ_i = k*(d·(x,z)) - φ_i.

My CPU waveHeight uses amp * cos(k*(dx*x+dz*z) - phase). So shader should use cos for y to match: y += amp*cos(θ). For horizontal, the matching form: x += -steep... Let me just implement standard Gerstner with cos for y to match CPU height, and horizontal using sin or cos consistently. The horizontal displacement doesn't affect buoyancy height match (CPU only uses height). Actually Gerstner: y = A cos(θ), x = x0 - (steep/k)*d.x * sin? There are variants. I'll use:

Hmm. The classic: P.x = x0.x + Q A d.x cos(θ), P.z = z0.z + Q A d.z cos(θ), P.y = A sin(θ) where θ = k d·x0 - φ. To have y = A cos(θ) for CPU match, I can use cos for y and adjust horizontal phase: P.x = x0 + Q A d.x sin(θ)?

Honestly, the horizontal displacement just adds the characteristic sharp crests; exact phase relation to y matters little visually. I'll implement standard Gerstner with y = Acos(θ) and horizontal = QAdsin(θ) shifted. The important thing: CPU buoyancy uses only the vertical A*cos(θ) sum, which matches the shader's y. Good — boat will sit correctly.

For normals, compute analytic gradient of y: ∂y/∂x = Σ -A k d.x sin(θ), similarly z. Normal = normalize(-∂y/∂x, 1, -∂y/∂z). Good enough (ignores horizontal-displacement effect on normal but fine).

Fragment shader:

• sample depth: seabed = texture(uHeightTex, uv from world xz).r; depth = -seabed (positive down). If seabed > 0 (land), we're under terrain — but terrain mesh covers that; water fragment might still show at coastline intersection — good, that's where foam goes.
• base color: mix(shallow, deep, sstep(0, 18, depth)) — shallow turquoise near shore.
• reflection: compute view dir, reflect, approximate sky color by sampling a simple gradient function of reflect dir y and sun. Use fresnel (Schlick) to mix water color and sky reflection.
• sun specular: Blinn-Phong pow(dot(normal, halfVec)) * sunColor.
• foam:
  • whitecaps: based on wave crest height (displacement y relative) and a noise texture → break up. crest = smoothstep(threshold, ..., y). Use a foam noise texture (I'll generate a tileable noise DataTexture) sampled at world xz with time drift.
  • shore foam: where depth in [0, ~1.5], add foam band animated with a moving edge (use noise + sin(time)).
• output color with fog toward horizon.

I'll implement manual fog: mix(color, fogColor, fogFactor) where fogColor = horizon/sky color. Use standard exp or linear based on distance to camera. I'll pass uFogColor, uFogNear, uFogFar. Coordinate with scene.fog for other objects (terrain, boat). Use THREE.Fog and enable material.fog=false for custom shaders but implement manually. Simpler: use scene.fog = new THREE.Fog(color, near, far) and in custom shaders implement matching linear fog manually. For built-in materials (terrain MeshStandardMaterial etc.) fog works automatically if I update fog color.

Sky color changes with time of day → update fog color each frame to match horizon.

4. Terrain

From hmap, build a BufferGeometry: grid HM_RES? 640x640 = 409k verts — too many. Downsample to e.g. 256x256 or 320x320 for the mesh. I'll create a grid of T_RES x T_RES over WORLD_SIZE, sample hmap (bilinear via sampleHeight) for y, compute normals. Material: MeshStandardMaterial with vertex colors based on height/slope (sand, grass, rock, snow?) — archipelago: sand at shore, grass mid, rock high/steep. I'll compute vertex colors on CPU. Add a detail via a subtle noise.

Only include land where h > small? No — need seabed too for shallow areas visible through water. The terrain mesh covers whole WORLD_SIZE including seabed, colored sandy underwater. Water plane renders on top where ocean. Actually if terrain covers seabed and water plane is above seabed, we see water surface; the seabed is only visible if water is transparent — my water is opaque-ish. So seabed color matters little. But at coastline, terrain pokes above water. Good.

Terrain extent = WORLD_SIZE (3200). Beyond that, ocean to horizon. Fine. But camera following water — the boat might sail beyond 1600 from origin? The islands are within ~±1000. WORLD_SIZE 3200 half=1600. If boat sails past 1600, sampleHeight returns SEABED (deep) — fine, open ocean. Terrain mesh ends at 1600; beyond is just water to horizon. Good.

Terrain color underwater: sandy (shallow) → blends to dark.

I'll add slight emissive? No. Standard material with directional sun light + hemisphere. Update light colors/intensity with time of day. Shadows: DirectionalLight with shadow map. Terrain receives, boat casts. Might be heavy but ok. I'll enable shadows on High only.

5. Boat

Build a stylized sailboat from primitives:

• hull: use a LatheGeometry? Or an elongated, tapered box / extruded shape. Simpler nice look: build hull from a half-cylinder + taper via scaling, or use a "boat hull" from an extruded shape. I'll craft hull via a custom approach: take a capsule/cylinder scaled, or use THREE.Shape + ExtrudeGeometry for hull profile, then scale.

Simplest good-looking: hull = a stretched, slightly rounded box (BoxGeometry with bevel via multiple segments and vertex manipulation) — but easiest attractive: use CapsuleGeometry rotated, scaled (long, narrow, flat-ish bottom), plus a pointed bow by adding a cone. Or build from a few merged primitives:

• main hull: elongated sphere (SphereGeometry scaled: x=1.2, y=0.7, z=3.2) cut at waterline? We can just let it sit; lower half under water.
• deck: a flattened box on top.
• mast: cylinder.
• boom: cylinder.
• mainsail + jib: custom triangle cloth meshes with slight curve (parametric plane bent), double-sided standard material (white/cream). Animate sail "trim" angle with wind and a subtle flutter via vertex displacement in onBeforeCompile? Could be heavy. I'll animate sail mesh rotation and a cheap flutter by morphing geometry each frame? Too heavy. Instead: subtle rotation sway. Or a ShaderMaterial for sail with simple wave. I'll use MeshStandardMaterial with a custom onBeforeCompile to add a flutter vertex displacement — moderate. Alternatively build sail as a grid and update vertices CPU each frame (small grid 8x8=81 verts, cheap). I'll do CPU cloth flutter on the sail for a nice touch: each frame offset z by sin based on position and time, amount scaled by wind. Cheap and pretty.

Buoyancy physics:

• Boat state: position (x,z), y, heading (yaw), pitch, roll, speed, rudder, sailTrim.
• Sample waveHeight at boat position and a few points (bow, stern, port, starboard) to compute pitch/roll from wave slope + boat motion.
• Float: y = waveHeight(cx,cz) + small bob, plus smoothing.
• Movement: heading controlled by rudder (A/D), speed by sail trim (W/S) and wind alignment: speed = f(apparent wind angle). Sailing physics: max speed when wind ~ beam reach (90°), less when upwind/downwind (add simple polar). Autopilot: steer toward next island / waypoint.

Boat forward direction from heading. velocity = forward * speed. Add to position. Turn rate ∝ rudder * speed factor.

Collision with islands: sample sampleHeight at boat pos; if > -1.5 (too shallow/land), push back / stop (run aground warning). Simple: if seabed > -2, reduce speed and nudge away along gradient.

6. Wake & spray

• Wake: a ribbon trail behind boat — use a fading trail mesh (triangle strip following path) with foam texture, or a particle system. I'll do a particle pool: spawn foam particles at stern, drift & fade (Points with custom shader, size attenuation, alpha fade). Also bow spray when speed high: particles at bow with upward velocity, gravity, fade. Use one Points pool with attributes (pos, vel, birth, life, size, type). Update CPU, write to buffer. Custom ShaderMaterial for soft round sprites with foam color. This adds life.

7. Seagulls

A flock of gulls: simple model (two triangles as wings flapping) — instanced or a few groups. Animate: circle around islands/boat, flap by rotating wing meshes. I'll make ~12 gulls, each a small Group with body (cone) + 2 wing planes; flap via sin; fly along circular paths around island centers at some height, occasional dive. Cheap and lively.

Also maybe dolphins? Skip — scope. Gulls + maybe jumping fish? Keep gulls.

8. Sky details

Sky dome radius ~ 8000 (within far plane). ShaderMaterial (BackSide). Features:

• uSunDir: from timeOfDay.
• day sky gradient: zenith deep blue, horizon light blue.
• sunset: warm orange near horizon when sun low.
• night: dark, stars (hash on direction), milky-way-ish band? maybe simple stars.
• sun disc: smooth circle + glow; at night moon disc (opposite-ish or fixed offset) with glow.
• clouds: fbm over direction projected on a plane (dome uv) with coverage; color lit by sun (white day, orange sunset, dark night). Drift with time.

I'll write a decent sky shader. Stars via a hash grid on direction.

Lighting from sky: directional sun light follows uSunDir; intensity/color by elevation (warm when low). At night, dim bluish moon light. Hemisphere light for ambient, color/intensity by time.

9. Audio (WebAudio, synthesized)

• Master gain (muted/volume).
• Ocean: filtered noise (brown/pink) with slow LFO on filter/gain to emulate surf; gain tied to proximity to shore (more foam → louder) and wave height.
• Wind: white noise through bandpass, gain tied to windSpeed + gusts (slow random LFO).
• Maybe subtle creak? Skip.
• Start on first user gesture (click) to satisfy autoplay policies; a "click to enable sound" — the M button / sound toggle resumes AudioContext.

I'll implement a compact noise-based ambience.

10. Cameras

• Chase: behind & above boat, smoothed (lerp), look at boat. Wheel zoom adjusts distance. Drag orbits offset yaw/pitch around boat (OrbitControls-like custom) — I'll implement a simple orbital offset around boat for chase. Actually simpler: Chase uses damped follow; drag rotates an orbit offset; wheel zoom.
• Orbit: full OrbitControls around boat (target = boat), using OrbitControls addon.
• Cinematic: slow auto-orbit/drift around boat with varying radius/height over time.

I'll implement: mode 'Chase' custom follow with manual orbit offsets from drag/wheel; mode 'Orbit' uses OrbitControls (enabled only in that mode); 'Cinematic' procedural. Cycle with C or button. Update pill label.

11. GUI (lil-gui)

Folders: Ocean (swell, foam), Sky (timeOfDay slider, cycle, cycleSpeed, clouds), Wind (speed, dir), Boat (autopilot toggle), FX (bloom, vignette, quality dropdown → rebuild?), Audio (volume, mute). Quality change may rebuild water/terrain resolution — I'll make quality affect pixelRatio & water segments via rebuild function, or simpler: quality sets renderer pixel ratio and shadow on/off; water seg fixed at load. To avoid rebuild complexity, quality influences pixelRatio, shadows, and bloom resolution. Good enough.

Hidden on mobile via CSS (already).

12. HUD/stats

Update: speed (knots), heading (cardinal), wind, FPS, position? Show: SPD kn, HDG°, WIND, FPS. In #stats. Pill shows time (formatted from timeOfDay), camera mode, helm (Manual/Auto).

13. Snapshot

Render then canvas.toBlob → download PNG. Need preserveDrawingBuffer or render synchronously before capture. I'll call composer.render() then toDataURL in same frame. Simpler: set a flag to capture after next render.

14. Toast helper

showToast(msg) — used for camera changes, autopilot on/off, grounding warning, mute.

15. Input

• keydown/up: track keys (w/s/a/d, space). c camera, v autopilot, m mute.
• Space "ease sheets": quickly depower (reduce sail trim) while held — like luffing to slow.
• Pointer: drag to look (orbit offset in chase / orbit controls in orbit mode), wheel zoom.
• Touch: one finger drag look, pinch zoom (implement basic), buttons for actions. Keep moderate.

16. Init flow

bakeHeightmap is async with progress → update #bar. After done, build rest, then loader.classList.add('done').

HeightTex: create DataTexture from hmap: format RedFormat, type FloatType, size HM_RES. Sample in shader with linear filter. Note: DataTexture with RedFormat FloatType — sampling returns float in .r. Need to set minFilter/magFilter Linear, wrap Clamp. Works in WebGL2. Three r160 defaults to WebGL2 → R32F not filterable by default! OES_texture_float_linear needed for linear filtering of float textures; widely supported but not guaranteed. Safer: use HalfFloatType (R16F) which is filterable in WebGL2 core? Actually R16F is filterable in WebGL2? Float16 textures are filterable with OES_texture_half_float_linear in WebGL1; in WebGL2, R16F filtering requires EXT_color_buffer_float for rendering but sampling/filtering of half float IS supported? Let me recall: In WebGL2, OES_texture_half_float_linear is subsumed — half-float linear filtering is core? No. WebGL2 supports filtering of half-float textures natively?

From spec: WebGL2 supports texture filtering for R16F? The extension "OES_texture_float_linear" is for 32-bit. For 16-bit (half float), linear filtering IS supported in WebGL2 core (no extension needed). Yes — in WebGL2, textures with internal format R16F are texture-filterable (color-renderable requires EXT_color_buffer_float, but filterable is core for half float). So I'll use HalfFloatType DataTexture for heightmap. Convert float heights to half — THREE.DataTexture with HalfFloatType expects Uint16Array of half bits. Converting requires toHalfFloat. THREE has THREE.DataUtils.toHalfFloat. That's available. Or I can store as UnsignedByte normalized 0..1 mapping height range [-30, 50] → byte. Simpler & universally filterable: encode height into a single byte (256 levels over ~80m range = 0.31m precision — fine for depth color & shore foam, but not for precise). For water color/foam, 0.3m precision is plenty. But terrain uses sampleHeight (CPU float) — unaffected. So: create a Uint8Array height texture mapping [SEABED-? , maxPeak] → [0,255]. Water shader decodes.

Let me define height range for texture: MIN_H = SEABED - 4 = -30, MAX_H = 50. encode byte = clamp((h - MIN_H)/(MAX_H-MIN_H))255. Shader: h = MIN_H + texel (MAX_H-MIN_H). 0.31m steps could cause banding in shallow color gradient; I can add slight dither via noise in shader. Acceptable. Actually to be safe & smooth, use HalfFloat + DataUtils.toHalfFloat. Let me use half float (r160 has THREE.DataUtils). If unsure of support, byte fallback. I'll go with HalfFloatType — modern browsers support R16F filtering in WebGL2. I'll also set generateMipmaps false.

Hmm, to be safe across drivers (some mobile), maybe byte texture is safest with a smooth dither. But banding in depth-based color is a real risk. Compromise: use half float; it's broadly fine in WebGL2. I'll do half float.

Actually, I realize I can sidestep texture filtering support entirely: sample the heightmap with texelFetch (nearest, integer coords) + manual bilinear in shader. texelFetch on R32F requires no filtering support. But manual bilinear of 4 texelFetch on float texture works in WebGL2 (usampler/isampler/float sampler with texelFetch is fine; filtering not needed for texelFetch). That's robust! But more shader code.

Given robustness concerns, I'll use HalfFloatType with LinearFilter (WebGL2 core filterable). Fallback: if renderer doesn't support, still works? If not filterable, sampling returns incomplete texture (black) → depth 0 everywhere → all shallow color. Risky.

Safest broadly-compatible: 8-bit texture + in-shader dither/smoothstep for gradient (gradients over many meters won't band much since 0.31m steps over an 18m gradient = ~58 steps — smooth enough!). Great: byte texture it is. depth gradient 0..18m uses heights -18..0 → in byte that's range; mapping MIN_H=-30,MAX_H=50, step 0.3137; heights -18..0 → bytes 38..57 → ~19 distinct values over the shallow gradient. 19 steps over a color ramp → slight banding possible but with foam noise & waves, unnoticeable. And shore foam uses a narrow band (0..1.5m) → only ~5 byte steps → could look steppy. I'll smooth with noise. Fine.

Decision: Uint8 DataTexture, LinearFilter, ClampToEdge.

Sky sun direction from timeOfDay

timeOfDay hours: 0=midnight, 6=sunrise, 12=noon, 18=sunset. sunElevationAngle = ... Let me define:

Better:

Let me param: solar angle θ = (timeOfDay/24)*TAU - π/2 such that at noon θ=π/2? Eh. I'll do:

At noon ha=0 → cos=1 (max). At midnight ha=±π → cos=-1 (min). Sunrise/sunset at ha=±π/2 → cos=0. So elevation = sin? elevation = sin(alt) where alt = asin(cos(ha)*sin(lat-ish)). Simplify: elev = cos(ha) mapped: day when cos(ha)>0 (ha in (-π/2, π/2) → time 6..18).

So:

Let me just construct:

(timeOfDay-6)/12: 6→0,12→0.5,18→1 → sin(0)=0, sin(π/2)=1, sin(π)=0 → day positive hump. At 0 (midnight): (0-6)/12=-0.5 → sin(-π/2)=-1. At 3: (3-6)/12=-0.25→sin(-π/4)=-0.707. Good: sunAlt in [-1,1], positive during day.

Azimuth: rotate around: az = π * (timeOfDay - 6)/12 → east(0) at 6, south(π/2) at 12, west(π) at 18.

with cosAlt = sqrt(1-sunAlt²) (hemisphere). At night sunAlt negative → sun below horizon → it's night; we then use moon light. Moon = opposite: moonDir = -sunDir roughly, or fixed offset. I'll set moonDir = normalize(-sunDir.x, -sunDir.y, -sunDir.z) so moon is up when sun is down.

Define uniforms: uSunDir (points TOWARD sun). Dayness = sstep(-0.08, 0.12, sunAlt) → 1 day, 0 night. Dusk factor near horizon for warm colors.

Lighting:

• sunLight.position = sunDir * 1000, target origin (or follow boat for shadows near boat — I'll parent light target to boat area; simpler: light.position = boat.position + sunDir*600; target = boat.position. Keeps shadows crisp near boat.)
• sun intensity = dayness * (warm when low). color: lerp(orange, white, elevation).
• At night: moonLight = dim blue directional (reuse sunLight but switch to moonDir & blue color & low intensity). I'll use one directional "key" light that is sun by day, moon by night, plus hemisphere ambient always (color/intensity by time).

Fog color = horizon color (mix by time). Update scene.fog.color & water/sky uniforms consistently.

Boat polar (sailing)

windDir (deg, toward). Convert to radians vector. Apparent wind angle relative to boat heading:

Wind blows TOWARD windDir. Boat heading is direction of motion. Sailing efficiency:

• Dead downwind (heading == windDir): good (~0.8)
• Beam reach (90°): best (1.0)
• Upwind (heading toward where wind comes FROM, i.e., heading ≈ windDir+180): can't sail directly (no-go zone) → poor (~0.15) So efficiency = f(angle between heading and the wind's source direction). Let sourceDir = windDir + 180 (where wind comes from). angleToSource = |wrapAngle(heading - sourceRad)|. If angleToSource < ~30° → in irons (very slow). Efficiency rises to peak ~ at 90..135°.

I'll craft: eff = smoothstep from 0.2 at 25° to 1.0 at 100°, then slight decrease to 0.8 dead downwind (160..180). Then speed = sailTrim * windSpeed * 0.9 * eff, capped. Space eases sheets → sailTrim target 0.

Autopilot: pick target waypoint (cycle islands), steer heading toward it (set rudder automatically), manage sail trim full; when close, pick next. Also avoids shallows lightly (if ground ahead, steer along). Keep simple: steer to waypoint, trim full.

Rudder: A/D adjust rudderAngle (-1..1). Heading rate = rudder * turnRate * (0.3 + speed factor).

Heading (yaw) in radians; forward = (sin(yaw)? , cos). I'll define forward = (Math.sin(yaw), 0, Math.cos(yaw))? With three, heading 0 → +z? I'll set forward = (cos(yaw), 0, sin(yaw)) and yaw measured from +x. Just be consistent: pos += forwardspeeddt. Boat mesh rotation.y = -yaw + offset to face forward. I'll align by trial using rotation.y = yaw with forward = (sin(yaw),0,cos(yaw)) since three rotation.y=0 faces +z and model built facing +z. Let me build boat model facing +z (bow toward +z). Then mesh.rotation.y = yaw, forward = (sin(yaw), 0, cos(yaw)). Good, standard.

Buoyancy & orientation

Compute wave height & normal at boat:

Speed smoothing: accelerate toward targetSpeed.

Grounding: if sampleHeight(x,z) > -1.8 → too shallow: damp speed hard, push boat toward deeper (negative gradient). Compute gradient of sampleHeight to find deeper direction (downhill of seabed = -grad). Nudge.

Particles (wake/spray)

Pool size ~ 1500. Attributes: position(3), velocity(3), birth, life, size, seed. Each frame: age = time - birth; if age>life → dead (size 0 or alpha 0). Update positions CPU in a Float32Array; write needsUpdate. Spawn:

• wake: at stern left/right edges, spawn rate ∝ speed; small velocity outward + slight up, life ~ 2.5s, grows & fades.
• bow spray: when speed > threshold, at bow, velocity up+outward, gravity, life ~0.8s.
• Maybe occasional crest foam ambient? skip. Shader: point sprites, circular soft alpha, color near-white foam; alpha = (1-age/life)*intensity; size grows with age for wake.

Gulls

N gulls; each: target center = one of islands or boat; radius, angular speed, height, phase. Position = center + (cos(a)*r, h + sin bob, sin(a)r). Heading tangent. Wings flap: wing.rotation.z = ±sin(tflapSpeed)*amp. Build gull: body = small elongated cone or capsule (white), head? keep minimal: body + two wing planes (bent). Cheap.

Sky shader clouds

Project direction onto a plane: uv = dir.xz / (dir.y + 0.15) * scale + drift(time). fbm(uv) → density; coverage threshold from settings.clouds. Cloud color: mix by sun: base = mix(nightDark, dayWhite, dayness) + sun tint near sun & warm at dusk. Fade clouds near horizon. Only render for dir.y > -0.05.

Stars: only when night (dayness<0.3) and dir.y>0: hash grid: cell = floor(dir * 300); star = step(0.998, hash) * twinkle. Use direction quantization on a cube-ish mapping. Simple approach: use dir to seed hash → point stars.

Moon: disc at moonDir: m = smoothstep(cos(r_out), cos(r_in), dot(dir, moonDir)); color pale; glow.

Sun: disc + glow; at dusk big orange glow.

Sky gradient: zenith/horizon colors keyed by dayness & sun altitude; dusk band near horizon in sun azimuth.

I'll write the sky fragment carefully.

Performance & quality

• renderer.setPixelRatio(min(devicePixelRatio, 2)) High; 1.5 Medium; 1 Low? Actually Low=1, Medium=min(dpr,1.5), High=min(dpr,2).
• Shadows: High only (2048 map). Medium 1024? I'll do High on, others off.
• Bloom resolution default; adjustable strength.
• Water segments: High 400, Medium 288, Low 192.
• Terrain resolution: T_RES High 384, Medium 288, Low 224 (mesh verts). Terrain built once at load; quality change would need rebuild — I'll rebuild terrain & water on quality change via a rebuild function (dispose + recreate). Manageable: wrap terrain/water creation in functions.

To limit complexity, quality changes apply to: pixelRatio, shadows, bloom, and set a flag requiring reload for geometry density? Simpler: apply pixelRatio/shadow/bloom immediately; geometry density fixed from initial quality. That's fine; note in GUI tooltip.

Actually rebuilding water is easy (single mesh). Terrain rebuild also easy (single mesh) but expensive CPU (resample) — 384² ≈ 147k sampleHeight calls — fast (bilinear lookups). I can rebuild both on quality change. I'll implement buildTerrain(res) and buildWater(seg) that dispose old. Good.

Snapshot

flag captureNext; in loop after composer.render, if captureNext: canvas.toBlob → a.click download; reset. Need renderer preserveDrawingBuffer? If we capture synchronously right after render in same task, toBlob works without preserveDrawingBuffer? The drawing buffer is valid until compositing; calling toDataURL/toBlob synchronously after render within same frame generally works if before returning to event loop. Safer: renderer = new WebGLRenderer({preserveDrawingBuffer:true})? That has perf cost but small. I'll just render then immediately canvas.toBlob in the same rAF callback — reliable. Set preserveDrawingBuffer false. It works because the buffer isn't cleared until next frame's clear. Actually toBlob is async (callback) — by then buffer may be cleared. Use canvas.toDataURL (synchronous) → convert to blob → download. toDataURL sync right after render works. Fine.

Misc

• Prevent context menu on canvas? minor.
• Resize handler.
• FPS counter (EMA).
• Toast helper with timeout.

This is a big build. Let me now write the code appended to the file. I'll write it in several appended chunks to keep each write manageable, then validate (node syntax check of the module? It's browser ES module with imports from 'three' — node can't resolve, but I can at least check syntax by stripping? Hard. I'll instead carefully review). I can do a rough syntax validation using node --check on the extracted script with imports replaced? node --check doesn't resolve imports anyway (it just parses). ES module parse: node --check treats file as CommonJS by default; import statements fail. I can extract the module script to a .mjs and run node --check file.mjs? --check for ESM: node --check works for .mjs? Yes, node --check file.mjs parses as module. It won't run, just parse — imports of 'three' won't resolve but --check only parses, doesn't resolve. Good, I'll extract and parse-check.

Let me also double check the existing code for the water plane orientation etc. Existing: wavesA as Vector4(dx,dz,amp,len); wavesB as Vector4(speed, steep, phase, 0). Good — matches my shader plan (uWavesA[i] = (dx,dz,amp,len), uWavesB[i].x=speed, .y=steep, .z=phase).

waveHeight uses w.amp * settings.swell * cos(k*(dx*x+dz*z) - wavesB[i].z). Good.

Now write remaining code. I'll append:

Chunk A: renderer/scene/camera/lights/fog/composer + sky (build + update) + environment colors function.

Chunk B: height texture + terrain build + water build (shaders) + far skirt.

Chunk C: boat build + physics + sails cloth + wake/spray particles + gulls.

Chunk D: audio + input + cameras + GUI + HUD + snapshot + resize + init + loop + closing tags.

Let me be careful to reference existing symbols and keep consistent names.

Let me define shared uniform objects so materials update automatically:

Environment update function computes colors from timeOfDay:

Wait az from 0..π over day; at night az = π..2π? t-6 for t in 0..24 → -6..18 → /12 → -0.5..1.5 → π → -π/2..3π/2. cos/sin fine; at night sunAlt negative → sunDir.y<0 → below horizon. cosAlt uses sqrt(1-alt²) → positive; but for alt negative, cosAlt still positive — but then sunDir horizontal component sign from az: at t=0 az=-π/2 → cos=0,sin=-1 → sunDir=(0, alt, -cosAlt) with alt=-1 → (0,-1,0) good (midnight sun directly below). At t=12 az=π/2 → (0,1,0) noon overhead. At t=6 az=0 → (1cosAlt, 0, 0) with alt=0 cosAlt=1 → (1,0,0) sunrise east (+x). At t=18 az=π → (-1,0,0) sunset west.

moonDir = sunDir.clone().negate().

dayness = sstep(-0.06, 0.14, sunAlt). dusk = (1 - Math.abs(sunAlt)/0.35 clamped) * something: dusk = sstep(0.35, 0.0, Math.abs(sunAlt)) → high near horizon crossing. Multiply by (dayish) — used for warm tint.

Colors:

• zenithDay = #2a6fb8-ish (0.16,0.42,0.75), zenithNight (0.02,0.03,0.08). zenith = mix by dayness, plus dusk tint toward purple.
• horizonDay (0.65,0.82,0.92), horizonNight (0.03,0.05,0.10). horizon = mix; dusk adds orange near sun azimuth (sky shader handles directional warm). For fog & water reflection I'll use horizon color possibly warmed: fogColor = horizon warmed by dusk*warmth toward sun.
• sunColor: white (1,0.98,0.92) day; near horizon → (1,0.55,0.25). sunColor = mix(warm, white, sstep(0.02,0.4,sunAlt)). At night moon color pale blue (0.6,0.7,0.85).

Key light: if dayness>0.5 use sun else moon: Actually blend: keyLight.color = mix(moonBlue, sunColor, dayness); intensity = mix(0.25, 1.15, dayness) scaled by max(sunAlt,0)? At deep night sunAlt=-1, dayness=0 → intensity 0.25 (moon). Direction: use sunDir when day, moonDir when night: keyDir = dayness>0.5? I'll lerp direction: dir = normalize(mix(moonDir, sunDir, dayness)) — during transition weird but brief. Simpler: if (dayness > 0.5) use sun else moon, hard switch — causes pop at twilight. I'll lerp both color/intensity and direction continuously: dir = moonDir*(1-dayness)+sunDir*dayness normalized. During dusk both near opposite horizons → lerp passes through horizontal → fine, light sweeps across. Acceptable & smooth.

Hemisphere: sky color = horizon-ish, ground = dark blue; intensity mix(0.15 night, 0.5 day).

Fog: scene.fog = new THREE.Fog(fogColor, near, far); near ~ 200, far ~ 5200? Sky dome radius 8000; far plane camera 20000. Fog far should be < dome radius so dome mostly unfogged? Sky dome material fog=false (custom, no fog). Terrain/water get fog. Set fog near=300 far=6000. Water far skirt radius ~ 9000 fully fogged → blends to horizon color → matches sky horizon → seamless.

Also renderer.setClearColor(fogColor) as fallback.

Water reflection colors: pass uZenith/uHorizon/uSunColor/uSunDir/uDay.

Now environment depends on timeOfDay which advances if settings.cycle: timeOfDay = (timeOfDay + dtcycleSpeed/60) %24? cycleSpeed game-hours per real minute → dt seconds * (cycleSpeed/60) hours per second → hours += dtcycleSpeed/60.

Clock display: HH:MM from timeOfDay.

Now the sky shader:

vertex: pass world direction = normalize(position) (dome centered at camera? I'll keep dome centered at boat/camera: set dome.position = camera.position each frame so stars/sun fixed relative to viewer → infinite feel). vDir = normalize(vWorldPos - uCamPos)? If dome follows camera, direction = normalize(position) local. I'll center dome on camera and compute vDir = normalize(vLocalPos). Good.

fragment sky (simplified but rich):

Hmm keep it structured:

Stars via 3D grid cells on direction — cells warp near poles but acceptable. Actually projecting d*240 then fract within a 3D cell: the star shape via length(fract-0.5) gives a ball in 3D cell — but we're on a sphere shell, so each cell cuts the shell; using 3D cell works okay if cell size ~ star density. Common trick; fine.

fbm2 = 2D fbm in GLSL using hash. I'll write GLSL hash/vnoise/fbm.

Also dither stars hidden by clouds — I'll just draw stars before clouds so clouds overwrite. Good (already ordered).

Moon disc could get a subtle phase/crater via noise — skip, add slight darkening edge. Keep simple.

Now water shaders.

Water vertex:

vertex:

Careful: proper Gerstner horizontal displacement should use original position for phase of each wave, and accumulate displacement separately. Let me do:

The horizontal displacement that pairs with y=ampcos(th) in Gerstner: x = x0 + (Q/k)d... Standard: with y = A cos(k·x - ωt), horizontal = -QAdsin(k·x - ωt)? Let me not overthink: use disp += (qamp)d(-sin(th)). q steep 0..1. This sharpens crests. The exact factor (1/k normalization) affects look; I'll fold q to be the actual horizontal amplitude factor (qamp). Given amp small and q~0.6, horizontal disp ~0.5m max — subtle, fine.

world = vec3(xz0.x + disp.x, y, xz0.y + disp.y). normal = normalize(vec3(-dydx, 1.0, -dydz)). (ignores horizontal effect; ok) crest = y (used with noise for whitecaps in fragment).

vWorld = world; gl_Position = projectionMatrix * viewMatrix * vec4(world,1). (modelMatrix identity since I compute world manually and mesh at origin? But mesh follows camera — I'll NOT move the mesh; instead bake camera-follow into a uniform offset! Better: keep mesh at origin, and shift the GRID via uniform uGridOffset added to position.xz before displacement, and vertices are a fixed plane centered at origin spanning waterSize. Then world xz = position.xz + uGridOffset.xz. Update uGridOffset each frame = snapped camera pos. This avoids touching mesh matrix; geometry static.

So p.xz = position.xz + uGridOffset. Then displacement. world = vec3(...).

Fragment water:

Noise in fragment: use a small GLSL value-noise for foam breakup (2-3 octaves) sampled at vWorld.xz*scale + time drift. Fine.

I'll include a shared GLSL noise snippet string reused in sky & water.

Water far skirt: RingGeometry(inner ~ waterSize*0.48, outer 9000, thetaSeg 64, phiSeg 8)? A flat ring at y≈-0.15 (slightly below wave troughs to avoid z-fight) with simple shader = fog-colored gradient (mostly fog since far) → effectively just horizon blend. Could even use MeshBasicMaterial with fog color and fog enabled → it fogs to fogColor at distance, matching. But near inner edge (600m) partial fog → slight color mismatch with near water. Since it's at distance and low, acceptable. I'll give it a tiny shader: color = mix(deep, fogColor, fogF(dist)) — matches water far look. Simple ShaderMaterial.

Actually simplest: make the skirt part of the same water shader but with Gerstner disabled via uniform? No — separate mesh, simple material. I'll reuse a simplified fragment (deep color + fog). Good.

Terrain:

• geometry: PlaneGeometry(WORLD_SIZE, WORLD_SIZE, T_RES-1, T_RES-1), rotateX(-π/2) → XZ plane, then set each vertex y = sampleHeight(x,z). Compute vertex colors:
  • underwater (y<0): sand dark → deep: mix(sandDark, abyss, depth)
  • beach (0..2): sand light
  • grass (2..14): green with noise variation
  • rock (14+ or steep slope): grey-brown
  • snow? peaks up to ~44 → add light rock/snow at high alt (>28): pale Blend by height & slope with noise for natural look.
• normals: computeVertexNormals().
• material: MeshStandardMaterial({vertexColors:true, roughness:0.95, metalness:0}). receiveShadow true.
• Also add slight flat-shading? Keep smooth.

Terrain covers seabed so shallow water shows sand color under turquoise? Water is opaque (no transparency) so seabed only visible where pokes out. Hmm — then shallow turquoise color comes from water shader's depth tint (not seeing sand). That's fine — the tint implies shallows. Good, no transparency needed.

But wait: terrain at y between -2 and 0 near shores is under water surface plane (y~0). Water opaque → can't see it. The shoreline: terrain rises above 0 → visible beach. Water edge meets terrain — with depth-based foam at the intersection.

Boat: Build group boat:

• hull: I'll make a nice hull via LatheGeometry? A hull is not radially symmetric. Instead: use a stretched sphere for the under-hull + a shaped deck. Approach:
  • underHull: SphereGeometry(1, 24, 18) scaled (0.9, 0.55, 2.6) → ellipsoid; position y so top at deck. Dark blue/white? Paint: white topsides. Since it's an ellipsoid, looks like a rounded hull — okay stylized.
  • bow taper: the ellipsoid front is rounded; boats have pointy bow. Add a cone at bow (rotated) to sharpen: ConeGeometry scaled, pointing forward, same color. Or modify sphere vertices to pinch toward bow (z front): for vertices with z>0 scale x by (1 - z/zmax*0.7)? I'll pinch the ellipsoid procedurally: iterate positions, pinch x toward bow and stern (more toward bow). That gives a boat-ish hull. Let me do vertex pinch on sphere: Resulting hull ~ 6m long, 2.2m beam, 1.2m deep. Good size vs waves (92m swell) and islands (150-330m radius). Boat maybe slightly bigger for visibility: scale to length ~7m.
  • deck: a thin box/capsule on top (teak color #b08954) slightly inset.
  • cabin: small rounded box (white).
  • cockpit: skip detail.
  • mast: CylinderGeometry(0.06,0.08, 7) at ~ z+0.6, aluminum grey; position y deck+3.5.
  • boom: cylinder horizontal along -z from mast at deck+1.2.
  • forestay/backstay: thin cylinders (lines) — use Line2? plain cylinders thin, or THREE.Line with LineBasicMaterial. I'll use thin cylinders for stays (2).
  • sails:
    • mainsail: triangle from mast top to boom end. Build custom BufferGeometry: vertices at mast top (A), mast at boom height (B), boom end (C). Slight curvature: make it a small grid (segments) bounded by triangle? Simpler: use a triangular plane via Shape + ShapeGeometry with a few segments? ShapeGeometry has no segments for flutter. For flutter I need segments. I'll build mainsail as a parametric grid: for u,v in [0,1], point = barycentric interpolation of triangle (A,B,C) → grid mesh, then CPU flutter offset along sail normal by sin(u*π)*flutter. Indices: standard grid. Size ~ 9x7 grid = 63 verts — cheap per-frame update.
    • jib: triangle from mast top (or forestay top) to bow to a point on forestay — similar grid.
    • Sail material: MeshStandardMaterial doubleSide, color cream #f5f0e6, slight emissive to read at night? no. roughness 0.9.
  • flag at mast top: tiny triangle, flutter (skip flutter, static).
  • navigation light? skip.

Sail trim: sails rotate around mast by sailAngle = f(wind side). The mainsail+boom+jib group rotates about mast axis (y). Target sailAngle = clamp based on relative wind: sailAngle ≈ relativeWindAngle*0.5 clamped to [-1.2,1.2] rad on the leeward side. Sign = side wind comes from. Smooth lerp. Also flutter amount ∝ (1 - eff) (luffing when in irons) + speed.

Boat transform: group.position = (x, y, z); group.rotation.order='YXZ'; rotation.y=yaw; rotation.x=pitch; rotation.z=roll.

Gulls:

Gulls circle islands (pick 4 islands) + some follow boat (center = boat position, updating). ~14 gulls.

Audio:

Keep compact. Start on first pointerdown/keydown (resume). M toggles mute → master.gain.

Autopilot waypoints: islands centers; pick nearest-ish next different island. Steer: desiredHeading = atan2(tx-x, tz-z)... using forward=(sin(yaw),cos(yaw)): yaw = atan2(dx, dz). rudder auto = clamp(wrapAngle(desired - yaw)2, -1, 1). sailTrim auto = 1 (or ease near shore). When dist< isl.r0.9 → next waypoint. Toast "Autopilot engaged — bound for Isle N".

Camera modes:

• Chase: desired = boat.pos + offset rotated by (yaw + orbitYaw), where orbitYaw/orbitPitch/zoom from user drag/wheel. offset spherical: dist=zoom(14..40), pitch=orbitPitch(0.15..1.2). camPos = boat.pos + R_y(yaw+orbitYaw)R_x(pitch) (0,0,dist)? Build via spherical: camYaw default π? Behind boat means camera at -forward → a = yaw + π. I'll default camYaw=0 and formula uses a = yaw + π + camYaw so drag adjusts around. Also clamp camera y ≥ waveHeight+1.2 to avoid going under water.
• Orbit: OrbitControls with target=boat.pos (update target each frame to boat, smooth), enableDamping; user free orbit/zoom (min/max distance). On switch, set controls.target=boat.pos, camera stays.
• Cinematic: t param; camera slowly orbits boat: radius oscillates 16..34 via sin(t0.1), height 4..16, angle = t0.12; lookAt boat + slight lead. Smooth.

Manage lookAt each mode. In Orbit mode, controls.update().

Drag look (Chase): pointerdown on canvas → track; dx → camYaw -= dx*0.005; dy → camPitch clamp. In Orbit mode, OrbitControls handles it (don't also chase-drag). So attach my drag handlers only for Chase/Cinematic? Cinematic ignore drag (or allow minor). I'll enable manual drag only in Chase. Wheel: Chase → camDist = 1+dy0.001 clamp 10..60. Orbit → controls handles.

Touch: single touch drag = look (Chase); pinch = zoom. Implement minimal pinch.

GUI:

applyQuality: pixelRatio, shadows on/off (renderer.shadowMap.enabled + light.castShadow; needs material needsUpdate), bloom strength/resolution, rebuild water segments & terrain res? I'll implement water rebuild; terrain rebuild optional — I'll include both (functions exist). Careful disposal.

Actually to reduce risk, applyQuality will: set pixelRatio; toggle shadows (renderer.shadowMap.enabled, dirLight.castShadow, and set materials needsUpdate via traversing); set bloom strength; and rebuild water mesh with new segments (cheap) — terrain rebuild I'll also do (resample). Should be fine.

Shadow config: dirLight.shadow.camera ortho box ~ 60 around boat (light follows boat). mapSize 2048 High / 1024 Med. castShadow: boat (all meshes), gulls skip. receive: terrain, boat deck? Just terrain receive + boat receive self? enable boat castShadow, terrain receiveShadow, water receiveShadow? Water custom shader doesn't support three shadows (custom). Skip water shadows.

Boat shadow on water won't show (custom shader) — acceptable; shadow shows on... nothing much (boat over water). Hmm — shadows barely matter then. But terrain shadows (islands self-shadow at low sun) look great with sun low. Terrain casts & receives → nice relief at dawn/dusk. Keep terrain castShadow+receiveShadow. Boat casts onto terrain when near beach. OK worth it.

Water reflection of sun glint already gives sparkle.

HUD stats:

I'll show speed, heading cardinal, wind, depth, fps.

Toast messages on: camera cycle (name), autopilot on/off (+ destination), grounding "Ran aground! Ease off (Space) and turn away", mute on/off, snapshot saved.

Grounding detection: bedDepth = sampleHeight; if > -2.2: alarm toast (throttled), speed *= 0.4, push toward deeper: compute grad via finite diff of sampleHeight, nudge position along +grad of depth (i.e., toward more negative bed) — deeper = direction of decreasing bed height = -grad(bed).

Alright. Also boat must not sail off world: soft bound at ±3000: push back.

Time to write. I'll append in 4 chunks. Keep code clean & commented. Let me write Chunk A now (append to file). I'll use cat >> via execute_shell_command with heredoc? Heredoc with quotes to avoid interpolation. The file content includes backticks and ${} in template strings — heredoc with quoted delimiter 'EOF' is safe (no expansion). But writing via read_write_file_in_shell_environment (write mode) replaces content — I need append. I can use shell cat >> file <<'EOF'. That's fine for large content. Let me be careful the heredoc delimiter doesn't appear in content. Use 'AZ_EOF_9'.

Alternatively, build the rest in a separate file then concatenate. Simpler: write chunks to /tmp/chunkA.js etc via read_write_file (write mode creates file), then cat them onto the html. That avoids heredoc quoting pitfalls in shell (the write tool handles content directly). Then final cat /tmp/chunk_*.js >> index.html and append closing tags. Let me do that — cleaner.

Wait, but the closing tags </script></body></html> I'll include at end of chunk D.

Let me also double check existing variables I'll reference: settings, clamp, lerp, TAU, wrapAngle, sstep, mulberry32, hash2, vnoise, fbm (CPU), WAVES, wavesA, wavesB, NW, simTime, updateWavePhases, waveHeight, ISLANDS, analyticHeight, hmap, sampleHeight, bakeHeightmap, WORLD_SIZE, HM_RES, SEABED. Good.

Note: GLSL noise needs its own hash — I'll write GLSL snippet.

One more: wavesA/wavesB are arrays of Vector4 — passing to shader uniform as { value: wavesA } works (array of Vector4 → vec4 array uniform). Good.

uGridOffset: water world xz = position.xz + uGridOffset. Plane geometry: PlaneGeometry(size, size, seg, seg).rotateX(-π/2) → local positions x,z in [-size/2, size/2], y=0. mesh at origin, no rotation. uGridOffset = snapped camera (or boat) position: snap to waterSize/seg * 2? Snap step = gridSpacing to prevent vertex swimming: snap = spacing2? To be safe snap to spacing. spacing = size/seg. offset = (round(cam.x/spacing)spacing, round(cam.z/spacing)spacing). Because waves displace by phase of world coords, snapping by spacing keeps phase alignment (kdot(d,xz) changes by kdspacing*integer = multiple of 2π only if spacing multiple of wavelength — NOT true for all waves). Hmm — Gerstner phase at a given world point is fixed; as grid snaps, a world point previously at vertex i moves to vertex j — but each vertex computes displacement from its world pos (local + offset) → correct world displacement regardless of snap. Snapping just keeps vertices

Wait — I used ShaderPass in the vignette pass but never imported it! The import at the top only imports EffectComposer, RenderPass, UnrealBloomPass, OutputPass. I need ShaderPass. I have two options: add the import via a replace in the HTML file, or implement vignette differently. Best: add import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'; to the import block in the main file. I'll do that with replace_in_file later.

Also I should double-check: ShaderPass constructor takes a shader object {uniforms, vertexShader, fragmentShader} — yes, it supports a shader object. Good.

Now chunk 2: boat, particles, gulls, audio.