// helmet-script.jsx import * as T from "https://esm.sh/three@0.185.1"; (async () => { const canvas = document.getElementById("pond"); const renderer = new T.WebGLRenderer({ canvas, antialias: true, powerPreference: "high-performance" }); renderer.setPixelRatio(Math.min(devicePixelRatio, 1.7)); renderer.outputColorSpace = T.SRGBColorSpace; renderer.toneMapping = T.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.05; const scene = new T.Scene(); const camera = new T.PerspectiveCamera(39, 1, 0.2, 450); camera.position.set(0, 3.8, 20); camera.lookAt(0, 1, -15); let seed = 927; const rand = () => { seed = seed * 16807 % 2147483647; return (seed - 1) / 2147483646; }; function makePaper(size, background) { const c = document.createElement("canvas"); c.width = c.height = size; const ctx = c.getContext("2d"), data = ctx.createImageData(size, size); for (let y = 0; y < size; y++) for (let x = 0; x < size; x++) { const i = (y * size + x) * 4, n = (rand() - 0.5) * (background ? 18 : 14) + Math.sin(x * 0.033 + Math.sin(y * 0.015)) * 1.8 + Math.sin(y * 0.052) * 1.2; data.data[i] = background ? 238 + n : 246 + n; data.data[i + 1] = background ? 235 + n : 241 + n; data.data[i + 2] = background ? 222 + n : 224 + n; data.data[i + 3] = 255; } ctx.putImageData(data, 0, 0); for (let i = 0; i < size * 5; i++) { const x = rand() * size, y = rand() * size; ctx.strokeStyle = i % 2 ? "rgba(106,92,70,.065)" : "rgba(255,255,246,.32)"; ctx.lineWidth = 0.3 + rand() * 0.65; ctx.beginPath(); ctx.moveTo(x, y); ctx.bezierCurveTo(x + 3, y - 1, x + 6, y + 3, x + 3 + rand() * 17, y + (rand() - 0.5) * 5); ctx.stroke(); } const texture = new T.CanvasTexture(c); texture.colorSpace = T.SRGBColorSpace; texture.wrapS = texture.wrapT = T.RepeatWrapping; texture.anisotropy = 4; return texture; } const paper = makePaper(1024, false), backPaper = makePaper(1024, true); scene.background = backPaper; scene.add(new T.HemisphereLight(16184292, 8885134, 2.1)); scene.add(new T.AmbientLight(16775400, 0.35)); const sun = new T.DirectionalLight(16773589, 2.8); sun.position.set(-12, 18, -16); scene.add(sun); let time = 5.1, wind = 1.05, targetWind = 1.05, last = 0, frame = 0, disposed = false, paused = matchMedia("(prefers-reduced-motion: reduce)").matches; const waves = [[0.31, 0.61, 0.98, 0.199, 1.37], [0.225, 0.91, 0.73, -0.683, 4.83]]; for (let i = 0; i < 12; i++) { const k = 0.48 * Math.pow(1.29, i) * (0.83 + rand() * 0.34); const angle = -1.22 + rand() * 2.65; waves.push([0.105 * Math.pow(0.84, i) * (0.75 + rand() * 0.5), k, Math.cos(angle), Math.sin(angle), rand() * Math.PI * 2]); } const waveVectors = waves.map((w) => new T.Vector4(w[0], w[1], w[2], w[3])); const phases = waves.map((w) => w[4]); const impulses = Array.from({ length: 5 }, () => new T.Vector4(0, 0, -100, 0)); let impulseIndex = 0; const uniforms = { uTime: { value: time }, uWind: { value: wind }, uWaves: { value: waveVectors }, uPhases: { value: phases }, uImpulses: { value: impulses }, uBoat: { value: new T.Vector3(0, 0, 3) }, uCamera: { value: camera.position }, uPaper: { value: backPaper }, uResolution: { value: new T.Vector2(1200, 700) } }; const waveGLSL = `uniform float uTime;uniform float uWind;uniform vec4 uWaves[14];uniform float uPhases[14];uniform vec4 uImpulses[5]; vec3 ocean(vec2 p){vec3 outp=vec3(p.x,0.,p.y);for(int i=0;i<14;i++){vec4 w=uWaves[i];float phase=w.y*dot(w.zw,p)-sqrt(9.81*w.y)*uTime*.65+uPhases[i];float group=.78+.22*sin(dot(vec2(-w.w,w.z),p)*.11+uPhases[i]*1.71-uTime*.09);float a=w.x*uWind*group;outp.y+=a*sin(phase);outp.xz+=w.zw*(.32*a*cos(phase));}for(int j=0;j<5;j++){vec4 r=uImpulses[j];float age=uTime-r.z;float d=length(p-r.xy);if(age>=0.)outp.y+=r.w*sin(d*5.-age*7.)*exp(-pow(d-age*2.7,2.)*1.4)*exp(-age*.8);}return outp;} `; const water = new T.ShaderMaterial({ uniforms, vertexShader: waveGLSL + ` varying vec3 vWorld;varying vec2 vBase;varying vec3 vNormal;varying float vCurve;void main(){vBase=position.xy;vWorld=ocean(position.xy);vec3 tx=vec3(1.,0.,0.),tz=vec3(0.,0.,1.);vCurve=0.;for(int i=0;i<14;i++){vec4 w=uWaves[i];float q=w.y*dot(w.zw,position.xy)-sqrt(9.81*w.y)*uTime*.65+uPhases[i];float group=.78+.22*sin(dot(vec2(-w.w,w.z),position.xy)*.11+uPhases[i]*1.71-uTime*.09);float ak=w.x*w.y*uWind*group;float sn=sin(q),cs=cos(q);tx+=vec3(-.32*ak*w.z*w.z*sn,ak*w.z*cs,-.32*ak*w.z*w.w*sn);tz+=vec3(-.32*ak*w.z*w.w*sn,ak*w.w*cs,-.32*ak*w.w*w.w*sn);vCurve+=ak*sn;}vNormal=normalize(cross(tz,tx));gl_Position=projectionMatrix*viewMatrix*vec4(vWorld,1.);}`, fragmentShader: waveGLSL + ` precision highp float;uniform sampler2D uPaper;uniform vec2 uResolution;uniform vec3 uBoat;uniform vec3 uCamera;varying vec3 vWorld;varying vec2 vBase;varying vec3 vNormal;varying float vCurve; float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);} float noise(vec2 p){vec2 i=floor(p),f=fract(p);f=f*f*(3.-2.*f);return mix(mix(hash(i),hash(i+vec2(1,0)),f.x),mix(hash(i+vec2(0,1)),hash(i+1.),f.x),f.y);} float fbm(vec2 p){return noise(p)*.55+noise(p*2.03)*.27+noise(p*4.17)*.12+noise(p*8.3)*.06;} vec3 sky(vec3 r){float h=max(r.y,0.);vec3 col=mix(vec3(.69,.76,.76),vec3(.91,.9,.82),pow(h,.35));float cloud=fbm(r.xz/(.18+h)*1.9);col=mix(col,vec3(.95,.94,.87),smoothstep(.48,.78,cloud)*.45);return col;} void main(){vec2 p=vBase;vec3 n=normalize(vNormal);vec3 eye=normalize(uCamera-vWorld);float dist=length(uCamera-vWorld); vec2 detail=p*10.+vec2(-uTime*1.2,uTime*.4);float micro=(noise(detail+vec2(.08,0.))-noise(detail-vec2(.08,0.)));float micro2=noise(detail+vec2(0.,.08))-noise(detail-vec2(0.,.08));float fine=sin(p.x*33.+p.y*21.-uTime*5.)*.018+sin(p.x*19.-p.y*37.+uTime*3.)*.012;n=normalize(n+vec3(micro+fine,0.,micro2-fine)*.38); float fres=.0204+.9796*pow(1.-max(dot(n,eye),0.),5.);vec3 refl=sky(reflect(-eye,n));vec3 sunDir=normalize(vec3(-.6,.72,-.5));float spec=pow(max(dot(n,normalize(sunDir+eye)),0.),220.);float broad=pow(max(dot(n,normalize(sunDir+eye)),0.),28.); // Transparent layers of blue pigment, with broad reflected washes instead of metallic glints. float crest=smoothstep(-.25,.75,vWorld.y);float facing=clamp(dot(n,normalize(vec3(-.4,.85,-.3)))*.5+.5,0.,1.); float wash=fbm(p*.62+vec2(-uTime*.045,uTime*.018));float pigment=fbm(p*5.5+vec2(-uTime*.10,0.)); vec3 ink=vec3(.105,.225,.335),blue=vec3(.25,.425,.54),pale=vec3(.51,.64,.66);float value=facing*.49+fres*.21+crest*.16+wash*.18; vec3 col=mix(ink,blue,smoothstep(.22,.67,value));col=mix(col,pale,smoothstep(.62,.91,value)*.62); col*=.88+pigment*.20;col+=vec3(.10,.12,.10)*broad*.16;col=mix(col,vec3(.83,.85,.76),smoothstep(.3,.9,spec)*.15); // Long, irregular pigment edges follow the wave faces like diluted brush marks. float strokePhase=vWorld.y*7.5+p.x*.16+sin(p.y*.42-uTime*.35)*.6+wash*.7; float stroke=pow(.5+.5*sin(strokePhase),24.)*(.35+.65*noise(p*2.8)); col=mix(col,ink,stroke*.18*(1.-fres*.6)); float curvature=vCurve; vec2 flow=p*3.+vec2(-uTime*.9,uTime*.18);float cells=fbm(flow);float breaking=smoothstep(.25,.62,curvature);float foam=breaking*smoothstep(.31,.65,cells);foam+=smoothstep(.47,.79,curvature)*.55; float fingers=pow(.5+.5*sin(p.x*13.+p.y*3.+noise(flow*.7)*5.-uTime*.9),6.);foam+=smoothstep(.24,.68,curvature)*fingers*.20; vec2 rel=vWorld.xz-uBoat.xz;float wake=exp(-abs(abs(rel.x)-max(-rel.y,0.)*.36)*5.)*exp(-abs(rel.y)*.22)*step(rel.y,0.)*smoothstep(.4,1.8,-rel.y);float contact=exp(-pow(length(rel/vec2(2.1,.67))-1.,2.)*35.);foam+=wake*smoothstep(.43,.68,fbm(flow*2.))* .62+contact*smoothstep(.44,.67,cells)*.45; float lace=noise(flow*7.);foam*=.68+lace*.5;float wetEdge=exp(-pow((foam-.24)*15.,2.));col=mix(col,ink,wetEdge*.23); float whiteWash=smoothstep(.12,.72,foam);vec3 foamPaper=vec3(.91,.90,.81);foamPaper-=vec3(.07,.065,.05)*(1.-pigment);col=mix(col,foamPaper,whiteWash*.94); float haze=1.-exp(-max(dist-35.,0.)*.018);col=mix(col,vec3(.68,.73,.70),haze*.72); vec3 paperGrain=texture2D(uPaper,gl_FragCoord.xy/uResolution).rgb;float tooth=(paperGrain.r-.85)*.48;float granules=hash(gl_FragCoord.xy*.71)-.5;col+=vec3(tooth)+granules*.035;col=mix(col,vec3(.91,.89,.80),smoothstep(.69,.9,noise(gl_FragCoord.xy*.45))*.045);gl_FragColor=vec4(col,1.); }` }); const geo = new T.PlaneGeometry(1, 1, 300, 220), pos = geo.attributes.position; for (let i = 0; i < pos.count; i++) { const u = pos.getX(i), v = pos.getY(i) + 0.5; pos.setXYZ(i, u * 40 + Math.pow(u, 3) * 640, 22 - Math.pow(v, 1.7) * 240, 0); } pos.needsUpdate = true; const sea = new T.Mesh(geo, water); sea.frustumCulled = false; scene.add(sea); function surface(x, z, t = time) { let px = x, pz = z; for (let it = 0; it < 3; it++) { let dx = 0, dz = 0; for (const w of waves) { const phase = w[1] * (w[2] * px + w[3] * pz) - Math.sqrt(9.81 * w[1]) * t * 0.65 + w[4]; const group = 0.78 + 0.22 * Math.sin((-w[3] * px + w[2] * pz) * 0.11 + w[4] * 1.71 - t * 0.09); const shift = 0.32 * w[0] * wind * group * Math.cos(phase); dx += w[2] * shift; dz += w[3] * shift; } px = x - dx; pz = z - dz; } let h = 0; for (const w of waves) { const q = w[1] * (w[2] * px + w[3] * pz) - Math.sqrt(9.81 * w[1]) * t * 0.65 + w[4]; const group = 0.78 + 0.22 * Math.sin((-w[3] * px + w[2] * pz) * 0.11 + w[4] * 1.71 - t * 0.09); h += w[0] * wind * group * Math.sin(q); } for (const r of impulses) { const age = t - r.z, d = Math.hypot(px - r.x, pz - r.y); if (age >= 0) h += r.w * Math.sin(d * 5 - age * 7) * Math.exp(-Math.pow(d - age * 2.7, 2) * 1.4) * Math.exp(-age * 0.8); } return h; } const boat = new T.Group(); scene.add(boat); boat.scale.setScalar(1.16); boat.position.set(0, 0.3, 3); boat.rotation.y = -0.16; const materials = {}; function material(color) { if (!materials[color]) materials[color] = new T.MeshStandardMaterial({ color, map: paper, bumpMap: paper, bumpScale: 0.014, roughness: 0.96, side: T.DoubleSide }); return materials[color]; } let boatTriangles = 0; function face(vertices, color) { const positions = [], uvs = [], backPositions = [], rim = []; const subdivisions = 36, thickness = 0.014; for (let f = 0; f < vertices.length; f += 3) { let point = function(i, j) { const u = i / subdivisions, v = j / subdivisions, w = 1 - u - v; const p = a.clone().multiplyScalar(w).addScaledVector(b, u).addScaledVector(c, v); const envelope = 27 * u * v * w; const bow = (0.032 + 7e-3 * Math.sin(p.x * 8 + p.y * 5)) * envelope * envelope; return p.addScaledVector(normal, bow); }, tri = function(a2, b2, c2) { for (const p of [a2, b2, c2]) { positions.push(p.x, p.y, p.z); uvs.push(p.x * 0.5, p.y * 0.65 + p.z * 0.32); const q = p.clone().addScaledVector(normal, -thickness); backPositions.push(q.x, q.y, q.z); } boatTriangles++; }; const a = new T.Vector3(...vertices[f]), b = new T.Vector3(...vertices[f + 1]), c = new T.Vector3(...vertices[f + 2]); const normal = new T.Vector3().crossVectors(b.clone().sub(a), c.clone().sub(a)).normalize(); for (let i = 0; i < subdivisions; i++) for (let j = 0; j < subdivisions - i; j++) { tri(point(i, j), point(i + 1, j), point(i, j + 1)); if (i + j < subdivisions - 1) tri(point(i + 1, j), point(i + 1, j + 1), point(i, j + 1)); } for (const [p, q] of [[a, b], [b, c], [c, a]]) { const pb = p.clone().addScaledVector(normal, -thickness), qb = q.clone().addScaledVector(normal, -thickness); for (const v of [p, q, pb, q, qb, pb]) rim.push(v.x, v.y, v.z); } } function panel(pos2, mat) { const g = new T.BufferGeometry(), unique = [], texcoords = [], indices = [], lookup = /* @__PURE__ */ new Map(); for (let i = 0; i < pos2.length; i += 3) { const key = pos2[i].toFixed(6) + "," + pos2[i + 1].toFixed(6) + "," + pos2[i + 2].toFixed(6); let index = lookup.get(key); if (index === void 0) { index = unique.length / 3; lookup.set(key, index); unique.push(pos2[i], pos2[i + 1], pos2[i + 2]); texcoords.push(uvs[i / 3 * 2], uvs[i / 3 * 2 + 1]); } indices.push(index); } g.setAttribute("position", new T.Float32BufferAttribute(unique, 3)); g.setAttribute("uv", new T.Float32BufferAttribute(texcoords, 2)); g.setIndex(indices); g.computeVertexNormals(); g.computeBoundingSphere(); const m = new T.Mesh(g, mat); boat.add(m); return m; } const front = panel(positions, material(color)); panel(backPositions, material("#d8cfb9")); const rg = new T.BufferGeometry(); rg.setAttribute("position", new T.Float32BufferAttribute(rim, 3)); rg.computeVertexNormals(); boat.add(new T.Mesh(rg, new T.MeshStandardMaterial({ color: "#ece2ca", roughness: 1, side: T.DoubleSide }))); return front; } const L = [-2, 0.65, 0], R = [2, 0.65, 0], FL = [-0.96, 0.5, 0.7], FR = [0.96, 0.5, 0.7], BL = [-0.96, 0.5, -0.7], BR = [0.96, 0.5, -0.7], KL = [-0.85, -0.23, 0], KR = [0.85, -0.23, 0]; face([L, KL, FL, FL, KL, KR, FL, KR, FR, FR, KR, R], "#e9e2ce"); face([L, BL, KL, BL, BR, KL, BR, KR, KL, BR, R, KR], "#ded6bf"); const IL = [-0.91, 0.43, 0.59], IR = [0.91, 0.43, 0.59], IBL = [-0.91, 0.43, -0.59], IBR = [0.91, 0.43, -0.59], FLOORL = [-0.7, 0.06, 0], FLOORR = [0.7, 0.06, 0]; face([L, FL, IL, IL, FL, FR, IL, FR, IR, IR, FR, R], "#fff9e8"); face([L, IBL, BL, IBL, IBR, BL, IBR, BR, BL, IBR, R, BR], "#faf5e5"); face([L, IL, FLOORL, IL, IR, FLOORL, IR, FLOORR, FLOORL, IR, R, FLOORR], "#c5bca7"); face([L, FLOORL, IBL, IBL, FLOORL, FLOORR, IBL, FLOORR, IBR, IBR, FLOORR, R], "#e4ddca"); const peak = [0.05, 1.62, -0.03], left = [-1.13, 0.31, 0], right = [1.13, 0.31, 0], crease = [0.03, 0.3, 0.32]; face([left, crease, peak], "#f7f1df"); face([crease, right, peak], "#e8dfc7"); face([left, peak, [0.02, 0.3, -0.25]], "#e0d6be"); face([[0.02, 0.3, -0.25], peak, right], "#eee7d5"); const edges = new T.BufferGeometry().setFromPoints([new T.Vector3(...L), new T.Vector3(...FL), new T.Vector3(...FL), new T.Vector3(...FR), new T.Vector3(...FR), new T.Vector3(...R), new T.Vector3(...left), new T.Vector3(...peak), new T.Vector3(...peak), new T.Vector3(...crease)]); boat.add(new T.LineSegments(edges, new T.LineBasicMaterial({ color: 11379339, transparent: true, opacity: 0.35 }))); function rolledEdge(points, r, color) { const curve = new T.CatmullRomCurve3(points.map((p) => new T.Vector3(...p))); const g = new T.TubeGeometry(curve, 180, r, 12, false); boat.add(new T.Mesh(g, material(color))); } rolledEdge([L, [-1.53, 0.58, 0.33], FL, [0, 0.505, 0.705], FR, [1.55, 0.58, 0.32], R], 0.016, "#faf3df"); rolledEdge([L, [-1.53, 0.58, -0.33], BL, [0, 0.505, -0.705], BR, [1.55, 0.58, -0.32], R], 0.013, "#e9e0ca"); rolledEdge([left, [-0.56, 0.965, -0.025], peak], 8e-3, "#fff8e6"); rolledEdge([peak, [0.57, 0.98, -0.025], right], 8e-3, "#e0d5bc"); face([[-1.98, 0.643, 0], [-1.18, 0.4, 0.29], [-1.56, 0.34, 0.065]], "#e2d8bf"); face([[1.98, 0.643, 0], [1.55, 0.33, 0.065], [1.18, 0.4, 0.29]], "#eee4cd"); face([[-1.5, 0.576, 0.34], [-0.96, 0.5, 0.7], [-0.92, 0.431, 0.707], [-1.5, 0.576, 0.34], [-0.92, 0.431, 0.707], [-1.46, 0.528, 0.365]], "#f2e9d2"); face([[-0.96, 0.5, 0.7], [0.96, 0.5, 0.7], [-0.92, 0.431, 0.707], [0.96, 0.5, 0.7], [0.92, 0.431, 0.707], [-0.92, 0.431, 0.707]], "#f7edd6"); face([[0.96, 0.5, 0.7], [1.5, 0.576, 0.34], [1.46, 0.528, 0.365], [0.96, 0.5, 0.7], [1.46, 0.528, 0.365], [0.92, 0.431, 0.707]], "#ebe1c8"); rolledEdge([[-1.52, 0.51, 0.32], [-1.15, 0.26, 0.29], [-0.87, -0.19, 0.03]], 45e-4, "#c9bfa7"); rolledEdge([[1.52, 0.51, 0.32], [1.15, 0.26, 0.29], [0.87, -0.19, 0.03]], 45e-4, "#c9bfa7"); rolledEdge([[0.025, 0.31, 0.321], [0.037, 0.71, 0.218], [0.048, 1.17, 0.093], peak], 6e-3, "#ede2ca"); boat.userData.triangleCount = 0; boat.traverse((o) => { if (o.geometry) boat.userData.triangleCount += (o.geometry.index ? o.geometry.index.count : o.geometry.attributes.position.count) / 3; }); let heave = surface(0, 3) + 0.2, heaveV = 0, pitch = 0, pitchV = 0, roll = 0, rollV = 0; const count = 1200, sprayPos = new Float32Array(count * 3), spraySize = new Float32Array(count), sprayAlpha = new Float32Array(count); const sprayGeo = new T.BufferGeometry(); sprayGeo.setAttribute("position", new T.BufferAttribute(sprayPos, 3).setUsage(T.DynamicDrawUsage)); sprayGeo.setAttribute("size", new T.BufferAttribute(spraySize, 1).setUsage(T.DynamicDrawUsage)); sprayGeo.setAttribute("alpha", new T.BufferAttribute(sprayAlpha, 1).setUsage(T.DynamicDrawUsage)); const sprayMaterial = new T.ShaderMaterial({ transparent: true, depthWrite: false, uniforms: { ratio: { value: renderer.getPixelRatio() } }, vertexShader: "attribute float size;attribute float alpha;varying float opacity;uniform float ratio;void main(){opacity=alpha;vec4 mv=modelViewMatrix*vec4(position,1.);gl_Position=projectionMatrix*mv;gl_PointSize=clamp(size*680.*ratio/-mv.z,1.,14.);}", fragmentShader: "varying float opacity;void main(){vec2 p=gl_PointCoord-.5;float r=length(p);if(r>.5)discard;float a=(1.-smoothstep(.2,.5,r))*opacity;gl_FragColor=vec4(.94,.93,.84,a);}" }); const spray = new T.Points(sprayGeo, sprayMaterial); spray.frustumCulled = false; scene.add(spray); const drops = Array.from({ length: count }, () => ({ life: 0, x: 0, y: 0, z: 0, vx: 0, vy: 0, vz: 0, size: 0, foam: false })); let dropCursor = 0, sprayClock = 0; function splash(x, z, strength = 1, amount = 30) { const y = surface(x, z); for (let j = 0; j < amount; j++) { const d = drops[dropCursor++ % count]; d.x = x + (rand() - 0.5) * 0.55; d.z = z + (rand() - 0.5) * 0.4; d.y = y + 0.06 + rand() * 0.06; const angle = rand() * Math.PI * 2; const v = (0.25 + rand()) * strength; d.vx = Math.cos(angle) * v + wind * 0.45; d.vz = Math.sin(angle) * v; d.vy = (0.6 + rand() * 2.5) * strength; d.life = 1.7 + rand(); d.size = 0.019 + rand() * 0.034; d.foam = false; } } function disturb(x, z) { if (paused) { paused = false; label(); } impulses[impulseIndex++ % 5].set(x, z, time, 0.55); splash(x, z, 1.5, 140); } const pause = document.getElementById("pause"); function label() { pause.textContent = paused ? "Play ocean" : "Pause"; pause.setAttribute("aria-pressed", String(paused)); } label(); pause.addEventListener("click", () => { paused = !paused; label(); }); document.getElementById("ripple").addEventListener("click", () => disturb(boat.position.x + 3, boat.position.z + 1)); document.getElementById("breeze").addEventListener("input", (e) => { targetWind = Number(e.target.value); document.getElementById("wind-label").textContent = targetWind < 0.75 ? "Long swell" : targetWind < 1.3 ? "Open ocean" : "Whitecaps"; }); const ray = new T.Raycaster(), pointer = new T.Vector2(), flat = new T.Plane(new T.Vector3(0, 1, 0), 0), hit = new T.Vector3(); canvas.addEventListener("pointerdown", (e) => { const r = canvas.getBoundingClientRect(); pointer.set((e.clientX - r.left) / r.width * 2 - 1, -(e.clientY - r.top) / r.height * 2 + 1); ray.setFromCamera(pointer, camera); if (ray.ray.intersectPlane(flat, hit) && hit.z > -50 && hit.z < 15) disturb(hit.x, hit.z); }); function resize() { const w = canvas.clientWidth, h = canvas.clientHeight; renderer.setSize(w, h, false); uniforms.uResolution.value.set(w * renderer.getPixelRatio(), h * renderer.getPixelRatio()); camera.aspect = w / h; camera.fov = w < h ? 52 : 39; camera.position.set(0, w < h ? 4.4 : 3.8, w < h ? 25 : 20); camera.lookAt(0, 1, -15); camera.updateProjectionMatrix(); } const observer = new ResizeObserver(resize); observer.observe(canvas); resize(); function advance(dt) { time += dt; wind += (targetWind - wind) * Math.min(1, dt * 1.5); const bx = Math.sin(time * 0.075) * 0.45, bz = 3; const probes = [surface(bx - 1.566, bz), surface(bx + 1.566, bz), surface(bx, bz - 0.499), surface(bx, bz + 0.499)]; const equilibrium = probes.reduce((s, v) => s + v, 0) / 4 + 0.16; const desiredPitch = Math.atan2(probes[1] - probes[0], 3.132); const desiredRoll = Math.atan2(probes[3] - probes[2], 0.998); heaveV += ((equilibrium - heave) * 30 - heaveV * 7.4) * dt; heave += heaveV * dt; pitchV += ((desiredPitch - pitch) * 19 - pitchV * 6) * dt; pitch += pitchV * dt; rollV += ((desiredRoll - roll) * 13 - rollV * 5) * dt; roll += rollV * dt; boat.position.set(bx, heave, bz); boat.rotation.set(roll * 0.38, -0.16, pitch * 0.85); uniforms.uBoat.value.copy(boat.position); sprayClock += dt; if (sprayClock > 0.055) { sprayClock = 0; for (let j = 0; j < 4; j++) { const x = (rand() - 0.5) * 36, z = -14 + rand() * 28; const h = surface(x, z), vertical = (surface(x, z, time + 0.04) - h) / 0.04; if (h > 0.23 && vertical > 0.15) splash(x, z, 0.65 + wind * 0.5, 20); } const contactSpeed = Math.abs(heaveV); if (contactSpeed > 0.45) splash(bx + (pitch > 0 ? -1.75 : 1.75), bz + 0.2, 0.35 + contactSpeed * 0.18, 12); } for (const d of drops) { if (d.life <= 0) continue; d.life -= dt; if (d.foam) { d.x += wind * 0.1 * dt; d.y = surface(d.x, d.z) + 0.025; } else { d.vy -= 9.81 * dt; d.vx += (wind * 0.7 - d.vx) * dt * 0.4; d.x += d.vx * dt; d.z += d.vz * dt; d.y += d.vy * dt; if (d.vy < 0 && d.y < surface(d.x, d.z)) { d.foam = true; d.life = 0.6 + rand() * 1.8; d.size *= 1.6; } } } } for (let i = 0; i < 45; i++) advance(1 / 30); function render(ms) { if (disposed) return; frame = requestAnimationFrame(render); const dt = last ? Math.min((ms - last) / 1e3, 0.05) : 0; last = ms; if (!paused && !document.hidden) { const steps = Math.max(1, Math.ceil(dt / 0.012)); for (let j = 0; j < steps; j++) advance(dt / steps); } uniforms.uTime.value = time; uniforms.uWind.value = wind; for (let i = 0; i < count; i++) { const d = drops[i]; sprayPos[i * 3] = d.x; sprayPos[i * 3 + 1] = d.y; sprayPos[i * 3 + 2] = d.z; spraySize[i] = d.size; sprayAlpha[i] = d.life > 0 ? Math.min(1, d.life * 2) * (d.foam ? 0.45 : 0.8) : 0; } sprayGeo.attributes.position.needsUpdate = true; sprayGeo.attributes.size.needsUpdate = true; sprayGeo.attributes.alpha.needsUpdate = true; renderer.render(scene, camera); } render(0); document.getElementById("scene-status").hidden = true; addEventListener("pagehide", () => { disposed = true; cancelAnimationFrame(frame); observer.disconnect(); scene.traverse((o) => { o.geometry?.dispose(); if (o.material) (Array.isArray(o.material) ? o.material : [o.material]).forEach((m) => m.dispose()); }); paper.dispose(); backPaper.dispose(); renderer.dispose(); }, { once: true }); })().catch((e) => { document.getElementById("scene-status").textContent = "The ocean could not open. Please try a WebGL-enabled browser. " + e.message; });