import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'; import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'; import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js'; export default function sketch(ctx) { const { scene, renderer, gui, size, canvas } = ctx; const sfx = ctx.sfx; const params = { waveHeight: 1.0, speed: 1.0, foam: 1.0, splashRate: 1.0, sunAzimuth: 235, sunElevation: 20, deep: '#05293d', shallow: '#21b8ad', volume: 0.8, }; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.05; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; scene.background = new THREE.Color(params.deep); // ---------- camera (isometric orthographic) const camera = new THREE.OrthographicCamera(-6, 6, 6, -6, 0.1, 200); camera.position.set(22, 18, 22); camera.lookAt(0, 0, 0); function fitCamera(w, h) { const aspect = w / Math.max(1, h); const halfH = aspect < 1 ? 5.2 / aspect : 5.6; camera.left = -halfH * aspect; camera.right = halfH * aspect; camera.top = halfH; camera.bottom = -halfH; camera.updateProjectionMatrix(); } fitCamera(size.width, size.height); const orbit = new OrbitControls(camera, renderer.domElement); orbit.enableDamping = true; orbit.enablePan = false; orbit.minZoom = 0.6; orbit.maxZoom = 2.6; orbit.minPolarAngle = 0.75; orbit.maxPolarAngle = 1.15; orbit.autoRotate = true; orbit.autoRotateSpeed = 0.25; // ---------- shared island shape const smooth = (a, b, x) => { const t = Math.min(1, Math.max(0, (x - a) / (b - a))); return t * t * (3 - 2 * t); }; function islandH(x, z) { const a = Math.atan2(z, x + 1e-5); const R = 3.0 + 0.45 * Math.sin(3 * a + 1) + 0.25 * Math.sin(5 * a + 2) + 0.12 * Math.sin(9 * a + 0.5); const d = Math.hypot(x, z) / R; let h = 1.6 * Math.pow(Math.max(0, 1 - 0.8 * d * d), 1.5) - 0.17; const qx = x - 0.7, qz = z + 0.5; h += 0.9 * Math.exp(-(qx * qx + qz * qz) * 0.9); h -= 1.6 * smooth(0.95, 2.0, d); return h; } const ISLAND_GLSL = ` float islandH(vec2 p){ float a = atan(p.y, p.x + 1e-5); float R = 3.0 + 0.45*sin(3.0*a+1.0) + 0.25*sin(5.0*a+2.0) + 0.12*sin(9.0*a+0.5); float d = length(p)/R; float h = 1.6*pow(max(0.0, 1.0-0.8*d*d), 1.5) - 0.17; vec2 q = p - vec2(0.7, -0.5); h += 0.9*exp(-dot(q,q)*0.9); h -= 1.6*smoothstep(0.95, 2.0, d); return h; }`; const NOISE_GLSL = ` float hash21(vec2 p){ p = fract(p*vec2(123.34, 456.21)); p += dot(p, p+45.32); return fract(p.x*p.y); } float vnoise(vec2 p){ vec2 i=floor(p), f=fract(p); vec2 u=f*f*(3.0-2.0*f); return mix(mix(hash21(i),hash21(i+vec2(1,0)),u.x), mix(hash21(i+vec2(0,1)),hash21(i+vec2(1,1)),u.x), u.y); } float fbm(vec2 p){ float v=0.0,a=0.5; for(int i=0;i<5;i++){ v+=a*vnoise(p); p=p*2.03+11.7; a*=0.5; } return v; }`; const noise = new ImprovedNoise(); function nfbm(x, z) { let v = 0, a = 0.5, f = 1; for (let i = 0; i < 5; i++) { v += a * noise.noise(x * f, z * f, 1.7); f *= 2.03; a *= 0.5; } return v; } function heightAt(x, z) { const h = islandH(x, z); const land = smooth(0.05, 1.0, h); return h + nfbm(x * 0.7, z * 0.7) * 0.6 * land + Math.abs(noise.noise(x * 1.6, z * 1.6, 3.1)) * 0.25 * smooth(0.6, 1.6, h) + noise.noise(x * 3, z * 3, 4.2) * 0.03; } // ---------- lights const sun = new THREE.DirectionalLight('#ffd2a0', 3.4); sun.castShadow = true; sun.shadow.mapSize.set(2048, 2048); Object.assign(sun.shadow.camera, { left: -8, right: 8, top: 8, bottom: -8, near: 1, far: 60 }); sun.shadow.bias = -0.0004; sun.shadow.normalBias = 0.03; scene.add(sun, sun.target); const hemi = new THREE.HemisphereLight('#9fc4e8', '#3b3122', 0.9); scene.add(hemi); const sunDir = new THREE.Vector3(); const sunColor = new THREE.Color(); const shared = { uTime: { value: 0 }, uSunDir: { value: sunDir }, uSunColor: { value: sunColor } }; // ---------- terrain const tGeo = new THREE.PlaneGeometry(17, 17, 300, 300); tGeo.rotateX(-Math.PI / 2); const tp = tGeo.attributes.position; for (let i = 0; i < tp.count; i++) tp.setY(i, heightAt(tp.getX(i), tp.getZ(i))); tGeo.computeVertexNormals(); const tMat = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.92, metalness: 0 }); tMat.onBeforeCompile = (sh) => { sh.uniforms.uTime = shared.uTime; sh.vertexShader = sh.vertexShader .replace('#include ', '#include \nvarying vec3 vWP; varying vec3 vWN;') .replace('#include ', '#include \nvWP = (modelMatrix*vec4(transformed,1.0)).xyz; vWN = normalize(mat3(modelMatrix)*objectNormal);'); sh.fragmentShader = sh.fragmentShader .replace('#include ', `#include uniform float uTime; varying vec3 vWP; varying vec3 vWN; ${NOISE_GLSL} float causticF(vec2 uv, float t){ vec2 p = uv*6.28318 - 250.0; vec2 i = p; float c = 1.0; float inten = 0.005; for(int n=0;n<4;n++){ float tt = t*(1.0-(3.5/float(n+1))); i = p + vec2(cos(tt-i.x)+sin(tt+i.y), sin(tt-i.y)+cos(tt+i.x)); c += 1.0/length(vec2(p.x/(sin(i.x+tt)/inten), p.y/(cos(i.y+tt)/inten))); } c /= 4.0; c = 1.17 - pow(c, 1.4); return pow(abs(c), 8.0); }`) .replace('#include ', ` vec2 q = vWP.xz; float h = vWP.y; float slope = 1.0 - clamp(vWN.y, 0.0, 1.0); float n1 = fbm(q*2.5), n2 = fbm(q*9.0+3.1), n3 = vnoise(q*40.0); vec3 sand = mix(vec3(0.80,0.66,0.45), vec3(0.93,0.82,0.62), n1) * (0.9 + 0.2*n3); vec3 grass = mix(vec3(0.10,0.22,0.05), vec3(0.30,0.42,0.12), n2) * (0.75 + 0.5*n1); grass = mix(grass, vec3(0.06,0.14,0.04), smoothstep(0.55,0.75,fbm(q*1.3+7.0))); vec3 rock = mix(vec3(0.22,0.20,0.18), vec3(0.42,0.38,0.33), n2) * (0.8 + 0.4*n3); float g = smoothstep(0.28, 0.5, h + (n1-0.5)*0.3) * (1.0 - smoothstep(0.32, 0.5, slope)); float r = smoothstep(0.42, 0.62, slope + (n2-0.5)*0.2); vec3 c = mix(sand, grass, g); c = mix(c, rock, r); float wet = 1.0 - smoothstep(-0.05, 0.22, h); c *= mix(1.0, 0.55, wet); float uw = 1.0 - smoothstep(-0.35, 0.02, h); c *= mix(vec3(1.0), vec3(0.45,0.75,0.78), uw * smoothstep(0.0, 1.0, -h)); float ca = causticF(q*0.22, uTime*0.55) * uw * (1.0 - smoothstep(0.2, 1.6, -h)); c *= 1.0 + ca*1.6; diffuseColor.rgb *= c;`); }; const terrain = new THREE.Mesh(tGeo, tMat); terrain.castShadow = true; terrain.receiveShadow = true; scene.add(terrain); const floor = new THREE.Mesh(new THREE.PlaneGeometry(200, 200).rotateX(-Math.PI / 2), new THREE.MeshBasicMaterial({ color: '#03141f' })); floor.position.y = -1.9; scene.add(floor); // ---------- shoreline points const shore = []; for (let i = 0; i < 96; i++) { const a = (i / 96) * Math.PI * 2; let r = 1.5; while (r < 6 && islandH(Math.cos(a) * r, Math.sin(a) * r) > 0) r += 0.02; shore.push({ x: Math.cos(a) * r, z: Math.sin(a) * r, a }); } let seed = 7; const rnd = () => { seed = (seed * 16807) % 2147483647; return (seed - 1) / 2147483646; }; // ---------- rocks const rocks = []; const rockMat = new THREE.MeshStandardMaterial({ color: '#58514a', roughness: 0.85, flatShading: true }); for (let i = 0; i < 9; i++) { const g = new THREE.IcosahedronGeometry(0.32, 2); const p = g.attributes.position; const off = rnd() * 10; for (let j = 0; j < p.count; j++) { const v = new THREE.Vector3().fromBufferAttribute(p, j); const k = 1 + 0.35 * noise.noise(v.x * 3 + off, v.y * 3, v.z * 3); p.setXYZ(j, v.x * k, v.y * k * 0.7, v.z * k); } g.computeVertexNormals(); const s = shore[Math.floor(rnd() * shore.length)]; const push = 0.15 + rnd() * 0.5; const m = new THREE.Mesh(g, rockMat); const x = s.x + Math.cos(s.a) * push, z = s.z + Math.sin(s.a) * push; m.position.set(x, -0.08 + rnd() * 0.05, z); m.scale.setScalar(0.6 + rnd() * 0.9); m.rotation.set(rnd(), rnd() * 6, rnd()); m.castShadow = true; m.receiveShadow = true; scene.add(m); rocks.push({ x, z, a: s.a }); } // ---------- palms const trunkMat = new THREE.MeshStandardMaterial({ color: '#7a5c3e', roughness: 0.9 }); const frondMat = new THREE.MeshStandardMaterial({ color: '#3f6b22', roughness: 0.7, side: THREE.DoubleSide }); const palms = []; const frondGeo = (() => { const g = new THREE.PlaneGeometry(1.1, 0.26, 10, 2); const p = g.attributes.position; for (let j = 0; j < p.count; j++) { const x = p.getX(j) + 0.55, y = p.getY(j); const w = Math.sin(Math.PI * Math.min(1, x / 1.1)) * 0.9 + 0.1; p.setXYZ(j, x, -x * x * 0.45 + Math.abs(y) * 0.25, y * w); } g.computeVertexNormals(); return g; })(); for (let tries = 0; tries < 300 && palms.length < 9; tries++) { const x = (rnd() - 0.5) * 6, z = (rnd() - 0.5) * 6; const h = heightAt(x, z); if (h < 0.25 || h > 1.1) continue; if (palms.some((p) => Math.hypot(p.x - x, p.z - z) < 0.75)) continue; const grp = new THREE.Group(); const lean = new THREE.Vector3((rnd() - 0.5) * 0.6, 0, (rnd() - 0.5) * 0.6); const height = 0.9 + rnd() * 0.5; const curve = new THREE.QuadraticBezierCurve3(new THREE.Vector3(0, 0, 0), new THREE.Vector3(lean.x * 0.2, height * 0.5, lean.z * 0.2), new THREE.Vector3(lean.x, height, lean.z)); const trunk = new THREE.Mesh(new THREE.TubeGeometry(curve, 12, 0.035, 6, false), trunkMat); trunk.castShadow = true; grp.add(trunk); const crown = new THREE.Group(); crown.position.copy(curve.getPoint(1)); for (let f = 0; f < 8; f++) { const fr = new THREE.Mesh(frondGeo, frondMat); fr.rotation.y = (f / 8) * Math.PI * 2 + rnd() * 0.3; fr.rotation.z = 0.25 + rnd() * 0.25; fr.castShadow = true; crown.add(fr); } grp.add(crown); grp.position.set(x, h - 0.03, z); scene.add(grp); palms.push({ x, z, crown, ph: rnd() * 6 }); } // ---------- ocean const oceanMat = new THREE.ShaderMaterial({ transparent: true, uniforms: { ...shared, uAmp: { value: 1 }, uFoam: { value: 1 }, uDeep: { value: new THREE.Color(params.deep) }, uShallow: { value: new THREE.Color(params.shallow) }, uSkyTop: { value: new THREE.Color('#5f86b0') }, uSkyHorizon: { value: new THREE.Color('#f2c59a') }, uViewDir: { value: new THREE.Vector3() }, }, vertexShader: ` uniform float uTime; uniform float uAmp; varying vec3 vWP; varying vec3 vN; varying float vDepth; varying float vCrest; ${ISLAND_GLSL} vec3 gerstner(vec4 w, vec2 p, float t, inout vec3 T, inout vec3 B){ float steep = w.z; float k = 6.28318/w.w; float c = sqrt(9.8/k); vec2 d = normalize(w.xy); float f = k*(dot(d,p) - c*t); float a = steep/k; float s = sin(f), co = cos(f); T += vec3(-d.x*d.x*steep*s, d.x*steep*co, -d.x*d.y*steep*s); B += vec3(-d.x*d.y*steep*s, d.y*steep*co, -d.y*d.y*steep*s); return vec3(d.x*a*co, a*s, d.y*a*co); } void main(){ vec3 p0 = (modelMatrix*vec4(position,1.0)).xyz; vec2 xz = p0.xz; float depth = -islandH(xz); float A = uAmp * mix(0.25, 1.0, smoothstep(0.0, 1.4, depth)); vec3 T = vec3(1.0,0.0,0.0), B = vec3(0.0,0.0,1.0), disp = vec3(0.0); float t = uTime; disp += gerstner(vec4(1.0, 0.6, 0.16*A, 7.0), xz, t, T, B); disp += gerstner(vec4(0.8, 1.0, 0.14*A, 4.3), xz, t, T, B); disp += gerstner(vec4(-0.3, 1.0, 0.12*A, 2.9), xz, t, T, B); disp += gerstner(vec4(1.0, -0.4, 0.10*A, 1.9), xz, t, T, B); disp += gerstner(vec4(0.2, 0.9, 0.08*A, 1.2), xz, t, T, B); disp += gerstner(vec4(-0.7, 0.5, 0.06*A, 0.8), xz, t, T, B); float br = pow(0.5+0.5*sin(depth*7.0 + t*1.8), 4.0) * smoothstep(0.0, 0.12, depth) * (1.0 - smoothstep(0.3, 1.0, depth)); disp.y += br * 0.07 * uAmp; vec3 pos = p0 + disp; vN = normalize(cross(B, T)); vCrest = disp.y / (0.35*uAmp + 0.001); vDepth = depth; vWP = pos; gl_Position = projectionMatrix * viewMatrix * vec4(pos, 1.0); }`, fragmentShader: ` uniform vec3 uSunDir, uSunColor, uDeep, uShallow, uSkyTop, uSkyHorizon, uViewDir; uniform float uTime, uFoam; varying vec3 vWP; varying vec3 vN; varying float vDepth; varying float vCrest; ${NOISE_GLSL} float rip(vec2 p){ return vnoise(p*3.0 + vec2(uTime*0.6, uTime*0.3))*0.5 + vnoise(p*7.0 - vec2(uTime*0.9, -uTime*0.4))*0.25 + vnoise(p*16.0 + uTime)*0.12; } void main(){ vec2 q = vWP.xz; vec3 n = normalize(vN); float e = 0.03; float h0 = rip(q), hx = rip(q+vec2(e,0.0)), hz = rip(q+vec2(0.0,e)); n = normalize(n + vec3(-(hx-h0)/e, 0.0, -(hz-h0)/e) * 0.09); vec3 V = -uViewDir; float ndv = max(dot(n, V), 0.0); float fres = 0.02 + 0.98*pow(1.0 - ndv, 5.0); vec3 R = reflect(-V, n); R.y = abs(R.y); vec3 sky = mix(uSkyHorizon, uSkyTop, pow(clamp(R.y, 0.0, 1.0), 0.6)); float sunR = pow(max(dot(R, uSunDir), 0.0), 900.0) * 40.0; vec3 H = normalize(uSunDir + V); float nh = max(dot(n, H), 0.0); float spec = pow(nh, 300.0)*6.0 + pow(nh, 40.0)*0.25; float d = clamp(vDepth/1.6, 0.0, 1.0); vec3 water = mix(uShallow, uDeep, pow(d, 0.55)); float diff = 0.45 + 0.55*max(dot(n, uSunDir), 0.0); water *= diff * uSunColor * 0.9 + 0.15; float sss = pow(clamp(dot(V, -uSunDir)*0.5 + 0.5, 0.0, 1.0), 2.0) * smoothstep(0.1, 0.9, vCrest); water += uShallow * sss * 0.9; vec3 col = mix(water, sky, fres*0.8) + (spec + sunR) * uSunColor; float fn = vnoise(q*5.0 + vec2(uTime*0.15, -uTime*0.1))*0.6 + vnoise(q*13.0 - uTime*0.2)*0.4; float shoreF = 1.0 - smoothstep(0.0, 0.22, vDepth + (fn - 0.5)*0.15); float lines = pow(0.5+0.5*sin(vDepth*7.0 + uTime*1.8 + fn*1.5), 10.0) * (1.0 - smoothstep(0.05, 0.9, vDepth)); float crest = smoothstep(0.55, 1.1, vCrest + fn*0.3) * smoothstep(0.3, 1.0, vDepth); float foam = clamp((shoreF*1.3 + lines*0.9 + crest*0.7) * smoothstep(0.25, 0.65, fn + shoreF*0.3) * uFoam, 0.0, 1.0); vec3 foamCol = vec3(0.95) * (0.55 + 0.6*max(dot(n, uSunDir), 0.0)) * mix(vec3(1.0), uSunColor, 0.5); col = mix(col, foamCol, foam); float alpha = mix(0.25, 1.0, smoothstep(0.0, 1.3, vDepth)); alpha = clamp(max(alpha, max(foam, fres*0.9)), 0.0, 1.0); gl_FragColor = vec4(col, alpha); }`, }); const ocean = new THREE.Mesh(new THREE.PlaneGeometry(64, 64, 640, 640).rotateX(-Math.PI / 2), oceanMat); ocean.renderOrder = 2; ocean.frustumCulled = false; scene.add(ocean); // ---------- spray particles const N = 4000; const pPos = new Float32Array(N * 3), pVel = new Float32Array(N * 3), pLife = new Float32Array(N), pDecay = new Float32Array(N), pSize = new Float32Array(N); for (let i = 0; i < N; i++) pPos[i * 3 + 1] = -10; const sGeo = new THREE.BufferGeometry(); sGeo.setAttribute('position', new THREE.BufferAttribute(pPos, 3)); sGeo.setAttribute('aLife', new THREE.BufferAttribute(pLife, 1)); sGeo.setAttribute('aSize', new THREE.BufferAttribute(pSize, 1)); const sMat = new THREE.ShaderMaterial({ transparent: true, depthWrite: false, uniforms: { uScale: { value: 100 }, uSunColor: shared.uSunColor }, vertexShader: ` attribute float aLife; attribute float aSize; uniform float uScale; varying float vLife; void main(){ vLife = aLife; gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0); gl_PointSize = aLife > 0.0 ? aSize*uScale*(0.6 + 0.8*(1.0-aLife)) : 0.0; }`, fragmentShader: ` uniform vec3 uSunColor; varying float vLife; void main(){ vec2 c = gl_PointCoord - 0.5; float r = length(c); float a = smoothstep(0.5, 0.05, r) * min(1.0, vLife*2.5) * 0.75; if (a < 0.01) discard; gl_FragColor = vec4(mix(vec3(1.0), uSunColor, 0.4) * 1.25, a); }`, }); const spray = new THREE.Points(sGeo, sMat); spray.frustumCulled = false; spray.renderOrder = 3; scene.add(spray); let pIdx = 0; function burst(x, z, strength) { const len = Math.hypot(x, z) || 1; const ox = x / len, oz = z / len; const count = Math.floor(90 * strength); for (let k = 0; k < count; k++) { const i = pIdx; pIdx = (pIdx + 1) % N; pPos[i * 3] = x + (Math.random() - 0.5) * 0.35; pPos[i * 3 + 1] = 0.02 + Math.random() * 0.08; pPos[i * 3 + 2] = z + (Math.random() - 0.5) * 0.35; const out = (Math.random() - 0.3) * 1.2 * strength; pVel[i * 3] = -ox * out + (Math.random() - 0.5) * 0.9; pVel[i * 3 + 1] = (1.2 + Math.random() * 2.6) * strength; pVel[i * 3 + 2] = -oz * out + (Math.random() - 0.5) * 0.9; pLife[i] = 1; pDecay[i] = 0.55 + Math.random() * 0.8; pSize[i] = Math.random() < 0.15 ? 0.22 + Math.random() * 0.2 : 0.03 + Math.random() * 0.07; } } // ---------- sound const tmpV = new THREE.Vector3(); let lastSplash = -1, gullTimer = 6; if (sfx) { sfx.volume = params.volume; sfx.loop('sfx_RSoAYz31HfIl', { volume: 0.4 }); } function splashSound(x, z, strength, now) { if (!sfx || now - lastSplash < 0.25) return; lastSplash = now; tmpV.set(x, 0, z).project(camera); const pan = Math.max(-1, Math.min(1, tmpV.x * 0.8)); const big = strength > 1.3; sfx.play(big ? 'sfx_P4JrJDqnZSNV' : 'sfx_CIIhNhjHNZkd', { volume: (big ? 0.8 : 0.45) * (0.8 + Math.random() * 0.3), rate: 0.85 + Math.random() * 0.35, pan }); } // ---------- click to splash const raycaster = new THREE.Raycaster(); const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0); const ndc = new THREE.Vector2(), hit = new THREE.Vector3(); let down = null, clock = 0; const onDown = (e) => { down = { x: e.clientX, y: e.clientY, t: performance.now() }; }; const onUp = (e) => { if (!down) return; const moved = Math.hypot(e.clientX - down.x, e.clientY - down.y); const quick = performance.now() - down.t < 350; down = null; if (moved > 8 || !quick) return; const rect = canvas.getBoundingClientRect(); ndc.set(((e.clientX - rect.left) / rect.width) * 2 - 1, -((e.clientY - rect.top) / rect.height) * 2 + 1); raycaster.setFromCamera(ndc, camera); if (raycaster.ray.intersectPlane(plane, hit) && islandH(hit.x, hit.z) < 0.05) { burst(hit.x, hit.z, 1.8); lastSplash = -1; splashSound(hit.x, hit.z, 1.8, clock); } }; canvas.addEventListener('pointerdown', onDown); canvas.addEventListener('pointerup', onUp); // ---------- post const composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); const bloom = new UnrealBloomPass(new THREE.Vector2(size.width, size.height), 0.45, 0.6, 0.85); composer.addPass(bloom); composer.addPass(new OutputPass()); const grade = new ShaderPass({ uniforms: { tDiffuse: { value: null }, uTime: { value: 0 } }, vertexShader: `varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0); }`, fragmentShader: `uniform sampler2D tDiffuse; uniform float uTime; varying vec2 vUv; void main(){ vec4 c = texture2D(tDiffuse, vUv); vec2 d = vUv - 0.5; c.rgb *= 1.0 - dot(d, d)*0.85; c.rgb = mix(c.rgb, c.rgb*vec3(1.03,1.0,0.95), 0.6); float g = fract(sin(dot(gl_FragCoord.xy + fract(uTime)*313.0, vec2(12.9898,78.233)))*43758.5453); c.rgb += (g - 0.5)*0.03; gl_FragColor = c; }`, }); composer.addPass(grade); // ---------- gui const fO = gui.addFolder('Ocean'); fO.add(params, 'waveHeight', 0, 2.2).name('Wave Height'); fO.add(params, 'speed', 0, 2.5).name('Wave Speed'); fO.add(params, 'foam', 0, 2).name('Foam'); fO.add(params, 'splashRate', 0, 3).name('Splash Rate'); fO.addColor(params, 'deep').name('Deep Water').onChange((v) => { oceanMat.uniforms.uDeep.value.set(v); scene.background.set(v); }); fO.addColor(params, 'shallow').name('Shallows').onChange((v) => oceanMat.uniforms.uShallow.value.set(v)); const fL = gui.addFolder('Light'); fL.add(params, 'sunAzimuth', 0, 360).name('Sun Direction'); fL.add(params, 'sunElevation', 4, 70).name('Sun Height'); gui.add(params, 'volume', 0, 1).name('Sound Volume').onChange((v) => { if (sfx) sfx.volume = v; }); const viewDir = oceanMat.uniforms.uViewDir.value; const warm = new THREE.Color('#ff9a55'), noon = new THREE.Color('#fff1dc'); let oceanTime = 0, splashTimer = 0.5; return { camera, update({ delta }) { const dt = Math.min(delta, 0.05); clock += dt; oceanTime += dt * params.speed; shared.uTime.value = oceanTime; oceanMat.uniforms.uAmp.value = params.waveHeight; oceanMat.uniforms.uFoam.value = params.foam; grade.uniforms.uTime.value = clock; // sun const az = THREE.MathUtils.degToRad(params.sunAzimuth), el = THREE.MathUtils.degToRad(params.sunElevation); sunDir.set(Math.cos(el) * Math.cos(az), Math.sin(el), Math.cos(el) * Math.sin(az)).normalize(); sunColor.copy(warm).lerp(noon, Math.min(1, params.sunElevation / 55)); sun.color.copy(sunColor); sun.intensity = 1.6 + 2.2 * Math.min(1, Math.sin(el) * 2.5); sun.position.copy(sunDir).multiplyScalar(25); hemi.intensity = 0.55 + 0.6 * Math.sin(el); oceanMat.uniforms.uSkyHorizon.value.copy(sunColor).lerp(new THREE.Color('#bcd3e6'), Math.min(1, params.sunElevation / 70) * 0.7); camera.getWorldDirection(viewDir); // palms sway for (const p of palms) p.crown.rotation.z = Math.sin(clock * 1.3 + p.ph) * 0.05 * (0.5 + params.waveHeight * 0.5); // splashes splashTimer -= dt * params.splashRate * (0.5 + params.waveHeight * 0.5); if (splashTimer <= 0) { splashTimer = 0.5 + Math.random() * 1.2; const useRock = Math.random() < 0.55 && rocks.length; const s = useRock ? rocks[Math.floor(Math.random() * rocks.length)] : shore[Math.floor(Math.random() * shore.length)]; const strength = (useRock ? 0.9 + Math.random() * 0.7 : 0.4 + Math.random() * 0.5) * (0.4 + params.waveHeight * 0.6); if (strength > 0.15) { burst(s.x, s.z, strength); splashSound(s.x, s.z, strength, clock); } } for (let i = 0; i < N; i++) { if (pLife[i] <= 0) continue; const j = i * 3; pVel[j + 1] -= 6.5 * dt; const drag = 1 - 0.8 * dt; pVel[j] *= drag; pVel[j + 2] *= drag; pPos[j] += pVel[j] * dt; pPos[j + 1] += pVel[j + 1] * dt; pPos[j + 2] += pVel[j + 2] * dt; pLife[i] -= dt * pDecay[i] * (pPos[j + 1] < -0.02 ? 6 : 1); if (pLife[i] <= 0) { pLife[i] = 0; pPos[j + 1] = -10; } } sGeo.attributes.position.needsUpdate = true; sGeo.attributes.aLife.needsUpdate = true; sGeo.attributes.aSize.needsUpdate = true; sMat.uniforms.uScale.value = (size.height * size.pixelRatio / Math.max(0.001, camera.top - camera.bottom)) * camera.zoom; // gulls gullTimer -= dt; if (gullTimer <= 0) { gullTimer = 14 + Math.random() * 16; if (sfx) sfx.play('sfx_G2Fn1d9TpGmO', { volume: 0.18 + Math.random() * 0.1, rate: 0.9 + Math.random() * 0.2, pan: Math.random() * 1.4 - 0.7 }); } orbit.update(); }, render() { composer.render(); }, resize({ width, height }) { fitCamera(width, height); composer.setSize(width, height); bloom.setSize(width, height); }, dispose() { canvas.removeEventListener('pointerdown', onDown); canvas.removeEventListener('pointerup', onUp); orbit.dispose(); }, }; }