Upload index.html

index.html

@@ -51,7 +51,7 @@ const scl = (a,s)=>[a[0]*s,a[1]*s,a[2]*s];
 const cross = (a,b)=>[a[1]*b[2]-a[2]*b[1], a[2]*b[0]-a[0]*b[2], a[0]*b[1]-a[1]*b[0]];
 const dot = (a,b)=>a[0]*b[0]+a[1]*b[1]+a[2]*b[2];
 const norm = v=>{const l=Math.hypot(v[0],v[1],v[2])||1;return [v[0]/l,v[1]/l,v[2]/l];};
-const clamp = (v,a,b)=>v<a?a:v>b?b:v;
+function clamp(v, a, b){ return Math.min(b, Math.max(a, v)); }
 
 function perspective(fov, aspect, near, far){
   const f = 1/Math.tan(fov/2);
@@ -103,7 +103,7 @@ function waveH(x, z, t){
    is there at all. The profile below is mirrored in the shader, so the boat sits on the same
    ground it is drawn on. */
 const ICELL = 48, MAX_ISLANDS = 48, MAXR = 70;   // a 170 m grid plus the reach of the largest island
-const LAND = { beach: 0.35, shelf: 1.2, deep: 6.0 };   // beach: how far up the shore the boat may sit
+const LAND = { beach: 0.02, shelf: 1.2, deep: 6.0 };   // beach: how far up the shore the boat may sit
 let SEED = 1337;
 
 function ihash(n){
@@ -137,12 +137,13 @@ function islandAt(cx, cz){
   const h = ihash((Math.imul(cx, 73856093) + Math.imul(cz, 19349153) + SEED) >>> 0);
   const low = h & 255;
   let type = 0;
-  if(low < 2) type = 1;                                 // rare: a large flattish island
-  else if(low < 5) type = 2;                            // rarer: a tall narrow pinnacle
+  if(low < 3) type = 1;                                 // rare: a large flattish island
+  else if(low < 6) return null;                         // pinnacles removed; these cells stay open sea
   else if(low >= 96) return null;                       // most of the world is open sea
   const s = ihash(h) & 0xFFFFFF;
   const rb = s & 63, pk = (s >> 6) & 15, sh = (s >> 10) & 15, rg = (s >> 14) & 15;
-  const r = F32(type === 1 ? 50 + rb*0.31 : type === 2 ? 9 + rb*0.14 : 14 + rb*0.25);
+  let r = F32(14 + rb*0.25);                                  // common islet
+  if(type === 1) r = F32(50 + rb*0.31);                       // large flattish island
   return {
     // x, z and r are stored as float32 values because that is what the shader receives. Otherwise
     // the two sides can land on different lattice cells and disagree about the island's shape.
@@ -280,14 +281,18 @@ float landH(vec2 p){
 const LOA = 4.06, BEAM = 1.15;          // hull footprint, in world units
 const SIT = 0.06;                        // how high the boat sits on the waterline
 const DRAFT = 0.625;                     // keel depth below the origin - the boat must stay wet
-// Heave: slow enough to bridge the small ripples, but not so slow that the boat
-// visibly floats above the water it is supposed to be sitting in. A little ringing
-// (zeta < 1) is what gives the settle you were missing.
-const HEAVE = {period: 1.2, zeta: 0.7};
-const TILT  = {period: 3.0, zeta: 0.9};  // lags the water: rides the swell, ignores the chop
+// Heave: a light 4 m hull has a natural heave period well under a second, so it should follow the
+// surface closely. The hull-averaged waterplane is already what removes the chop - the spring should
+// not have to do it as well, which is why the period is short and the damping only moderate. A
+// critically damped spring cannot overshoot, so it can never settle onto a crest the way a real
+// light boat does; zeta under 1 is what lets it ring once or twice and come to rest.
+const HEAVE = {period: 0.45, zeta: 0.40};
+// Pitch and roll have different natural periods on a small hull. Roll is quick: the waterplane slope
+// across a 1.15 m beam changes faster than the slope along the length. Pitch lags more.
+const TILT = {roll:{period:0.6, zeta:0.40}, pitch:{period:1.2, zeta:0.45}};
 // On land there is nothing to ring. Both springs go critically damped, and the tilt comes from the
 // ground under the hull instead of from the waterplane.
-const GROUND = {heave:{period:0.5, zeta:1.0}, tilt:{period:1.2, zeta:1.0}};
+const GROUND = {heave:{period:0.4, zeta:1.0}, tilt:{roll:{period:1.0, zeta:1.0}, pitch:{period:1.2, zeta:1.0}}};
 
 const STATIONS = [];
 (function(){
@@ -297,14 +302,34 @@ const STATIONS = [];
 
 // what is actually under a point: the ground if it is above sea level, otherwise the sea.
 // Same rule the mesh draws with, which is what keeps the boat on the surface it is sitting on.
-function surfaceH(x, z, t){ const g = landH(x, z); return g > 0 ? g : waveH(x, z, t); }
+// Land only counts where the ground is above the water, because that is the land you can see.
+function surfaceH(x, z, t){ const g = landH(x, z), w = waveH(x, z, t); return Math.max(g, w); }
 
 // average height under the footprint. u runs along the keel, v across the beam.
+// The average is weighted towards the middle of the waterplane. A flat average over the whole
+// footprint is what a rigid hull would do for long swell, but it cancels nearly everything for a wave
+// about the length of the boat - that is what was making it read as half-buoyant. A real hull is not
+// rigid: the middle carries the motion and the ends ride over the top of it, so the weight falls off
+// towards the ends. Long swell still averages to the local height, so that part is unchanged.
 function hullH(x, z, heading, t){
   const ax = Math.sin(heading), az = Math.cos(heading);
-  let sum = 0;
-  for(const s of STATIONS) sum += surfaceH(x + ax*s[0] + az*s[1], z + az*s[0] - ax*s[1], t);
-  return sum / STATIONS.length;
+  let sum = 0, wsum = 0;
+  for(const s of STATIONS){
+    const w = (1 - (s[0]/(LOA/2))**2) * (1 - (s[1]/(BEAM/2))**2);
+    if(w <= 0) continue;
+    sum += w * surfaceH(x + ax*s[0] + az*s[1], z + az*s[0] - ax*s[1], t);
+    wsum += w;
+  }
+  return sum / wsum;
+}
+// The highest water over the footprint. A rigid hull rides the mean of the waterplane, but the deck
+// is not allowed to be under the sea, so the heave target is pulled a little towards the high point
+// instead of being the pure mean. That is what stops a crest under the stern swallowing the deck.
+function hullTop(x, z, heading, t){
+  const ax = Math.sin(heading), az = Math.cos(heading);
+  let m = -1e9;
+  for(const s of STATIONS) m = Math.max(m, waveH(x + ax*s[0] + az*s[1], z + az*s[0] - ax*s[1], t));
+  return m;
 }
 // highest ground under the footprint. A rigid flat-bottomed hull rests on the high point of a
 // slope rather than on the average of it, so grounding has to use the max, not the mean.
@@ -314,14 +339,35 @@ function hullLand(x, z, heading){
   for(const s of STATIONS) m = Math.max(m, landH(x + ax*s[0] + az*s[1], z + az*s[0] - ax*s[1]));
   return m;
 }
+// Is there land above the water at a point? Same test the mesh uses to decide what to draw, so the
+// boat only meets land it can see. It is checked at the boat itself rather than as the highest point
+// over the whole footprint - that stopped a 4 m hull about two metres before the water's edge. The
+// boat can now nose onto the beach and slide back off.
+function shoreAt(x, z, t){ return landH(x, z) - waveH(x, z, t); }
+
+// same window, water only. A floating boat is tipped by the waterplane, not by ground under it - the
+// version above mixes land into the average, so a corner that sees land pulls the whole tilt up. When
+// the boat is actually aground the ground slope is used instead.
+function hullWater(x, z, heading, t){
+  const ax = Math.sin(heading), az = Math.cos(heading);
+  let sum = 0, wsum = 0;
+  for(const s of STATIONS){
+    const w = (1 - (s[0]/(LOA/2))**2) * (1 - (s[1]/(BEAM/2))**2);
+    if(w <= 0) continue;
+    const px = x + ax*s[0] + az*s[1], pz = z + az*s[0] - ax*s[1];
+    sum += w * waveH(px, pz, t);
+    wsum += w;
+  }
+  return sum / wsum;
+}
 
 // slope of that averaged water: the boat tips by the difference across its own length/beam
 function hullSlope(x, z, heading, t){
   const ax = Math.sin(heading), az = Math.cos(heading);
-  const fore  = hullH(x + ax*LOA/2, z + az*LOA/2, heading, t);
-  const aft   = hullH(x - ax*LOA/2, z - az*LOA/2, heading, t);
-  const star  = hullH(x + az*BEAM/2, z - ax*BEAM/2, heading, t);
-  const port  = hullH(x - az*BEAM/2, z + ax*BEAM/2, heading, t);
+  const fore  = hullWater(x + ax*LOA/2, z + az*LOA/2, heading, t);
+  const aft   = hullWater(x - ax*LOA/2, z - az*LOA/2, heading, t);
+  const star  = hullWater(x + az*BEAM/2, z - ax*BEAM/2, heading, t);
+  const port  = hullWater(x - az*BEAM/2, z + ax*BEAM/2, heading, t);
   return [(fore - aft) / LOA, (star - port) / BEAM];
 }
 
@@ -374,7 +420,7 @@ uniform mat4 uProj, uView;
 uniform vec2 uOrigin;
 uniform float uTime, uSpeed, uPopAge;
 uniform vec3 uBoat, uFwd, uPopPos;
-out vec3 vWorld; out vec3 vNormal; out float vFoam; out float vLand, vDepth;
+out vec3 vWorld; out vec3 vNormal; out float vFoam; out float vLand, vDepth; flat out int vIsLand;
 ${WAVES_GLSL}
 ${NOISE_GLSL}
 ${ISLANDS_GLSL}
@@ -407,19 +453,24 @@ void main(){
   // The sea and the ground are not the same kind of surface. The wave only exists where there is
   // water: once the ground is above sea level it is solid and does not move with the swell. Using
   // max(land, water) here made low land near the shore ride the waves like a liquid.
+  // Land only where the ground is above the water. Below the surface the ground is not drawn at all,
+  // so the boat must not be stopped by it, and the coastline becomes where the water actually meets
+  // the land rather than where a fixed height is crossed.
   float land = landH(w);
   float water = waveH(w, uTime) - dip + ripple;
-  float h = land > 0.0 ? land : water;
+  bool isLand = land > water;
+  float h = isLand ? land : water;
   vec3 wp = vec3(w.x, h, w.y);
   vWorld = wp;
   vLand = land;
   vDepth = water - land;                 // depth of water over the seabed
+  vIsLand = isLand ? 1 : 0;
   vNormal = waveN(w, uTime);             // land normals come from the facets in the fragment stage
-  vFoam = clamp((wake + hullFoam + popFoam) * (land > 0.0 ? 0.0 : 1.0), 0.0, 1.0);
+  vFoam = clamp((wake + hullFoam + popFoam) * (isLand ? 0.0 : 1.0), 0.0, 1.0);
   gl_Position = uProj * uView * vec4(wp, 1.0);
 }`, `#version 300 es
 precision highp float;
-in vec3 vWorld; in vec3 vNormal; in float vFoam; in float vLand, vDepth;
+in vec3 vWorld; in vec3 vNormal; in float vFoam; in float vLand, vDepth; flat in int vIsLand;
 uniform vec3 uCam;
 uniform float uTime;
 uniform vec3 uSand, uGrass, uRock;
@@ -433,7 +484,7 @@ void main(){
   // or water decision is made per fragment from interpolated values, so a triangle that straddles
   // the shoreline is split diagonally between the two materials, and on a tall island that split
   // runs most of the way up the cliff. Deciding from the facet keeps a cliff one material.
-  bool isLand = vLand > 0.0 || fn.y < 0.12;
+  bool isLand = vIsLand > 0 || fn.y < 0.12;
   if(isLand) n = fn;
   if(n.y < 0.0) n = -n;
   vec3 L = normalize(vec3(0.5, 0.75, -0.45));
@@ -652,7 +703,7 @@ for(let i=0;i<MAX_ISLANDS;i++) islLoc.push(gl.getUniformLocation(waterP.p, "uIsl
 const puffBuf = gl.createBuffer();
 const skyBuf = gl.createBuffer();
 const maxIndex = (N+1)*(N+1) - 1;
-if (maxIndex > 65535) console.log("index buffer too big for Uint16");
+if (maxIndex > 65535) console.error("index buffer too big for Uint16");
 
 // attribute state is applied per draw instead of cached in a VAO
 function setAttribs(pr, layout, stride){
@@ -789,7 +840,7 @@ function buildBoat(rudder, t, heat){
   // the rub rail, which is what the plain stripe quad used to be standing in for.
   const wAt = z => z < 0 ? 0.42 + 0.04*Math.sin(clamp((z+1.55)/1.55,0,1)*1.5708)
                          : 0.46*Math.pow(1 - clamp(z/1.45,0,1), 1.35);
-  const dAt = z => 0.14 + 0.22*Math.pow(clamp((z+1.55)/3.2,0,1), 1.7);
+  const dAt = z => 0.22 + 0.14*Math.pow(clamp((z+1.55)/3.2,0,1), 1.7);   // freeboard at the transom raised
   const bAt = z => -0.50 + 0.34*Math.pow(clamp((z+1.55)/3.2,0,1), 2.2);
   const ring = z => {
     const w = wAt(z), d = dAt(z), b = bAt(z), sy = d - 0.07, by = b + 0.16*(d-b);
@@ -820,8 +871,8 @@ function buildBoat(rudder, t, heat){
     // the pipes are what hold the boiler up: they come out of its underside, dip below the
     // waterline just aft of it - that dip is the U bend the water sits in - and the mouth
     // stays submerged at the back.
-    poly([[side*0.12, by-0.01, bz-0.02], [side*0.15, 0.18, -0.08], [side*0.17, -0.02, -0.45],
-          [side*0.17, -0.06, -1.25], [side*0.17, -0.14, -1.58]], 0.035, PAL.metal, 0, 1);
+    poly([[side*0.12, by-0.01, bz-0.02], [side*0.15, 0.10, -0.14], [side*0.19, -0.16, -0.62],
+          [side*0.22, -0.26, -1.42], [side*0.24, -0.34, -1.82]], 0.035, PAL.metal, 0, 1);
   }
 
   // the candle stands on the deck under the boiler and slides forward towards it, so at full
@@ -1059,7 +1110,7 @@ function reset(){
 
 function spawnPuff(model, origin, fwd, side, heat){
   if(puffs.length > 160) return;
-  const lp = [side*0.17*BOAT_SCALE, -0.14*BOAT_SCALE, -1.58*BOAT_SCALE];   // the submerged tube mouth
+  const lp = [side*0.24*BOAT_SCALE, -0.34*BOAT_SCALE, -1.82*BOAT_SCALE];   // the submerged tube mouth
   const wp = [
     origin[0] + model[0]*lp[0] + model[4]*lp[1] + model[8]*lp[2],
     origin[1] + model[1]*lp[0] + model[5]*lp[1] + model[9]*lp[2],
@@ -1097,10 +1148,16 @@ function frame(nowMs){
   const maxSpeed = 6.0, idleThrust = 0.35;   // the candle is always heating, so it always pulls a little
 
   /* --- what is under the hull --- */
-  const ground = hullLand(boat.x, boat.z, boat.heading);              // highest ground under the footprint
-  const surf = hullH(boat.x, boat.z, boat.heading, t);                // the same surface the mesh draws
-  const wetted = clamp((surf - ground) / DRAFT, 0, 1);                // 1 = floating, 0 = hull sitting on the bottom
-  boat.aground = ground > 0.02;                                       // dry land: nothing to hiss against
+  const landAt = landH(boat.x, boat.z);                               // ground under the boat itself
+  const surf = hullWater(boat.x, boat.z, boat.heading, t);            // the waterplane, not the ground under it
+  // The boat only meets ground that is above the water, because that is the land the mesh draws. Under
+  // the surface the seabed is invisible, so it must neither stop the boat nor tip it. A hull in half a
+  // metre of water over an unseen bottom was being treated as aground, and the tilt came from the slope
+  // of ground you cannot see - which is the lean you are seeing close to shores.
+  const shore = shoreAt(boat.x, boat.z, t);
+  const grounded = shore > LAND.beach;
+  const wetted = grounded ? 0 : 1;
+  boat.aground = grounded;                                            // dry land: nothing to hiss against
 
   // A putt-putt pushes against water. Out of the water it only spins, so the engine is scaled by how
   // much of the hull is still wet. What moves a grounded boat is gravity along the hull - and since
@@ -1121,7 +1178,7 @@ function frame(nowMs){
   let nz = boat.z + Math.cos(boat.heading) * boat.speed * dt;
   // It may sit on the beach, but it cannot climb. The motion into the land is removed and the rest
   // slides along the contour, which is what stops it sticking fast in a cove.
-  if(hullLand(nx, nz, boat.heading) > LAND.beach){
+  if(shoreAt(nx, nz, t) > LAND.beach){
     const g = norm([landGrad(nx, nz)[0], 0, landGrad(nx, nz)[1]]);
     const mv = [nx - boat.x, 0, nz - boat.z];
     const into = dot(mv, g);
@@ -1134,14 +1191,16 @@ function frame(nowMs){
 
   /* --- float: the hull feels the average surface over its footprint, not one point --- */
   // The boat cannot sink through the bottom, so the target is the higher of normal buoyancy and the
-  // ground plus the draft. On open water the second term is far below the first and this is exactly
-  // the old buoyancy; it only bites when the water is shallower than the draft.
-  const floatTarget = Math.max(surf + SIT, ground + DRAFT);
+  // ground plus the draft - but only where the ground is above sea level. The seabed is never drawn:
+  // the water is opaque and the surface mesh follows the waves, not the bottom, so a hull that grounds
+  // on a seabed a metre below the surface reads as floating above invisible ground. Only land the mesh
+  // actually draws is physical.
+  const floatTarget = Math.max(surf + 0.12*(hullTop(boat.x, boat.z, boat.heading, t) - surf) + SIT, grounded ? landAt + DRAFT : -1e9);
   const hs = wetted < 0.5 ? GROUND.heave : HEAVE;
   const ts = wetted < 0.5 ? GROUND.tilt : TILT;
   [boat.bob, boat.bobV] = spring(boat.bob, boat.bobV, floatTarget, dt, hs.period, hs.zeta);
-  [boat.tiltX, boat.tiltXV] = spring(boat.tiltX, boat.tiltXV, sx, dt, ts.period, ts.zeta);
-  [boat.tiltZ, boat.tiltZV] = spring(boat.tiltZ, boat.tiltZV, sz, dt, ts.period, ts.zeta);
+  [boat.tiltX, boat.tiltXV] = spring(boat.tiltX, boat.tiltXV, sx, dt, ts.roll.period, ts.roll.zeta);
+  [boat.tiltZ, boat.tiltZV] = spring(boat.tiltZ, boat.tiltZV, sz, dt, ts.pitch.period, ts.pitch.zeta);
   const up = norm([-boat.tiltX, 1, -boat.tiltZ]);
   const heading = [Math.sin(boat.heading), 0, Math.cos(boat.heading)];
   const fwd = norm(sub(heading, scl(up, dot(heading, up))));