Upload index.html

index.html

@@ -105,8 +105,8 @@ function waveH(x, z, t){
    shader is handed the nearby ones as data, so the two can never disagree about whether land
    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 = 25;   // a 170 m grid spans at most 5 island cells each way
-const LAND = { beach: 0.35, shelf: 1.2, deep: 6.0 };   // beach: how far up the shore the boat may sit   // beach: how far up the shore the boat may sit
+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
 let SEED = 1337;
 
 function ihash(n){
@@ -131,37 +131,56 @@ function lnoise(x, z){
   return u + (v-u)*sz;
 }
 
-/* code packs the three shape values as three 4-bit fields, because that is the part both sides
-   can decode identically: bits 0-3 peak, 4-7 profile, 8-11 roughness. Ranges come out as
-   radius 14-30 m and peak 1.2-4.5 m above the sea. */
+/* code packs four 4-bit fields, because that is the part both sides can decode identically:
+   bits 0-3 peak, 4-7 profile, 8-11 roughness, 12-15 type. Powers of two are exact in float32,
+   so the decode cannot drift between JS and the GPU.
+   type 0 is the common islet: radius 14-30 m, peak 1.2-4.5 m, about 36 cells in 256.
+   type 1 is a large flattish island: radius 50-70 m, peak 2-7.2 m, about 2 cells in 256.
+   type 2 is a tall narrow pinnacle: radius 9-18 m, peak 14-38 m, about 3 cells in 256. */
 function islandAt(cx, cz){
   const h = ihash((Math.imul(cx, 73856093) + Math.imul(cz, 19349153) + SEED) >>> 0);
-  if((h & 255) >= 96) return null;                       // most of the world is open sea
+  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
+  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 = type === 1 ? 50 + rb*0.31 : type === 2 ? 9 + rb*0.14 : 14 + rb*0.25;
   return {
     x: (cx + 0.5 + ((h >>> 8 & 255) - 127.5)/256) * ICELL,
     z: (cz + 0.5 + ((h >>> 16 & 255) - 127.5)/256) * ICELL,
-    r: 14 + (s & 63) * 0.25,
-    code: ((s >> 6) & 15) + ((s >> 10) & 15)*16 + ((s >> 14) & 15)*256
+    r, code: pk + sh*16 + rg*256 + type*4096
   };
 }
 function decode(code){
-  return { peak: 1.2 + (code & 15)*0.22, shape: 1.2 + ((code >> 4) & 15)*0.03, rough: (code >> 8)/15 };
+  const pk = code & 15, sh = (code >> 4) & 15, rg = (code >> 8) & 15, type = code >> 12;
+  let peak = 1.2 + pk*0.22, shape = 1.2 + sh*0.03, ramp = 0;
+  // shape is the exponent on the falloff, so a small shape is nearly flat: a pinnacle gets near
+  // vertical sides. A flat island instead uses a ramp - flat for most of the radius, then a
+  // straight fall over the last fraction of it, which is the beach the boat can actually sit on.
+  if(type === 1){ peak = 2.0 + pk*0.35; ramp = 0.10 + sh*0.04; }
+  else if(type === 2){ peak = 14.0 + pk*1.6; shape = 0.04 + sh*0.012; }
+  return { peak, shape, rough: rg/15, type, ramp };
 }
 
 function landH(x, z){
   const cx = Math.floor(x/ICELL), cz = Math.floor(z/ICELL);
   // starting below sea level is what makes the depth readable: outside an island there is no
   // seabed, so it reads as deep water, and the shallow band around one is the shelf.
+  // The search has to reach as far as the largest island, otherwise the boat could sit on water
+  // that the shader is drawing as land.
   let h = -LAND.deep;
-  for(let j=-1;j<=1;j++) for(let i=-1;i<=1;i++){
+  const span = Math.ceil(MAXR/ICELL);
+  for(let j=-span;j<=span;j++) for(let i=-span;i<=span;i++){
     const isl = islandAt(cx+i, cz+j);
     if(!isl) continue;
     const d = Math.hypot(x - isl.x, z - isl.z);
     if(d > isl.r) continue;
     const p = decode(isl.code);
     const k = 1 - d/isl.r;                  // monotone: downhill always leads back to the sea
-    const terr = Math.pow(k, p.shape) * (0.55 + 0.45*p.rough*lnoise(x, z));
+    const nz = 0.55 + 0.45*p.rough*lnoise(x, z);
+    const terr = (p.ramp > 0 ? Math.min(1, k/p.ramp) : Math.pow(k, p.shape)) * nz;
     h = Math.max(h, p.peak*terr - LAND.shelf);   // the shelf is the shallow ring around an island
   }
   return h;
@@ -170,11 +189,12 @@ function landGrad(x, z){
   const e = 0.30;
   return [(landH(x+e, z) - landH(x-e, z))/(2*e), (landH(x, z+e) - landH(x, z-e))/(2*e)];
 }
-// every island that can reach a vertex of the water grid
+// every island that can reach a vertex of the water grid, extended by the reach of the largest one
 function islandsNear(minX, maxX, minZ, maxZ){
   const out = [];
-  for(let cz = Math.floor(minZ/ICELL); cz <= Math.floor(maxZ/ICELL) && out.length < MAX_ISLANDS; cz++)
-    for(let cx = Math.floor(minX/ICELL); cx <= Math.floor(maxX/ICELL) && out.length < MAX_ISLANDS; cx++){
+  const a = minX - MAXR, b = maxX + MAXR, c = minZ - MAXR, d = maxZ + MAXR;
+  for(let cz = Math.floor(c/ICELL); cz <= Math.floor(d/ICELL) && out.length < MAX_ISLANDS; cz++)
+    for(let cx = Math.floor(a/ICELL); cx <= Math.floor(b/ICELL) && out.length < MAX_ISLANDS; cx++){
       const isl = islandAt(cx, cz);
       if(isl) out.push(isl);
     }
@@ -209,6 +229,7 @@ uint ihash(uint n){
 }
 float lhash(int x, int y){ return float(ihash(uint(x)*3419u + uint(y)*2147483647u) & 1023u) / 1023.0; }
 float lnoise(vec2 p){
+  p = p * 0.08;                                  // same lattice scale as the JS copy
   ivec2 i = ivec2(floor(p));
   vec2 f = p - vec2(float(i.x), float(i.y));
   f = f*f*(3.0-2.0*f);
@@ -222,11 +243,15 @@ float landH(vec2 p){
     float d = length(p - isl.xy);
     if(d > isl.z) continue;
     float code = isl.w;
-    float peak  = 1.2 + mod(code, 16.0) * 0.22;
-    float shape = 1.2 + floor(mod(code/16.0, 16.0)) * 0.03;
-    float rough = floor(code/256.0) / 15.0;
+    float pk = mod(code, 16.0), sh = floor(mod(code/16.0, 16.0)), rg = floor(mod(code/256.0, 16.0));
+    float type = floor(code/4096.0);
+    float peak = 1.2 + pk*0.22, shape = 1.2 + sh*0.03;
+    if(type == 1.0){ peak = 2.0 + pk*0.35; }
+    else if(type == 2.0){ peak = 14.0 + pk*1.6; shape = 0.04 + sh*0.012; }
+    float rough = rg/15.0;
     float k = 1.0 - d/isl.z;
-    float terr = pow(k, shape) * (0.55 + 0.45*rough*lnoise(p));
+    float nz = 0.55 + 0.45*rough*lnoise(p);
+    float terr = (type == 1.0) ? min(1.0, k/(0.10 + sh*0.04)) * nz : pow(k, shape) * nz;
     h = max(h, peak*terr - 1.2);
   }
   return h;
@@ -388,7 +413,14 @@ out vec4 frag;
 ${NOISE_GLSL}
 void main(){
   vec3 n = normalize(vNormal);
-  if(vLand > 0.0) n = normalize(cross(dFdy(vWorld), dFdx(vWorld)));   // land reads as flat facets
+  vec3 fn = normalize(cross(dFdy(vWorld), dFdx(vWorld)));   // the facet actually drawn
+  if(fn.y < 0.0) fn = -fn;
+  // A facet this steep can only be a cliff face - the sea surface never gets that steep. The land
+  // 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;
+  if(isLand) n = fn;
   if(n.y < 0.0) n = -n;
   vec3 L = normalize(vec3(0.5, 0.75, -0.45));
   float ndl = max(dot(n, L), 0.0);
@@ -398,13 +430,14 @@ void main(){
   float tone = mix(floor(q)/4.0, q/4.0, 0.40);
 
   vec3 col;
-  if(vLand > 0.0){
+  float lv = max(vLand, 0.0);
+  if(isLand){
     float flatness = clamp(n.y, 0.0, 1.0);        // "flat" is a reserved word in GLSL ES 3.0
-    col = mix(uSand * 0.62, uSand, smoothstep(0.0, 0.30, vLand));     // wet sand at the waterline
-    col = mix(col, uGrass, smoothstep(0.40, 1.10, vLand) * smoothstep(0.50, 0.75, flatness));
+    col = mix(uSand * 0.62, uSand, smoothstep(0.0, 0.30, lv));         // wet sand at the waterline
+    col = mix(col, uGrass, smoothstep(0.40, 1.10, lv) * smoothstep(0.50, 0.75, flatness));
     col = mix(col, uRock, smoothstep(0.55, 0.80, 1.0 - flatness));
     col = col * (0.55 + 0.70 * tone);
-    col = mix(col, col * 1.10, (vnoise(vWorld.xz * 2.2) - 0.5) * 0.35 * smoothstep(0.2, 1.0, vLand));
+    col = mix(col, col * 1.10, (vnoise(vWorld.xz * 2.2) - 0.5) * 0.35 * smoothstep(0.2, 1.0, lv));
   } else {
     vec3 deep = vec3(0.04,0.17,0.38);
     vec3 mid  = vec3(0.09,0.34,0.53);
@@ -436,8 +469,8 @@ void main(){
 
   // wispy foam, built the same way as the clouds, plus a band where shallow water meets the shore
   float wisps = smoothstep(0.42, 0.58, fbm(vWorld.xz * 1.2 + uTime * 0.02, 2));
-  float shore = (vLand <= 0.0) ? smoothstep(0.50, 0.02, vDepth) * 0.22 : 0.0;
-  float f = clamp(vFoam * (0.35 + 0.55 * wisps) + shore, 0.0, 1.0);
+  float shore = isLand ? 0.0 : smoothstep(0.50, 0.02, max(vDepth, 0.0)) * 0.22;
+  float f = clamp((isLand ? 0.0 : vFoam) * (0.35 + 0.55 * wisps) + shore, 0.0, 1.0);
   col = mix(col, vec3(0.93,0.98,1.0), f);
 
   float fog = smoothstep(14.0, 70.0, length(vWorld - uCam));
@@ -713,6 +746,27 @@ function buildBoat(rudder, t, heat){
   };
   const rod=(a,b,th,col,glow=0,mat=0)=>tube(a,b,th,6,col,glow,mat,true);
   const limb=(a,b,r,col,mat=0)=>tube(a,b,r,6,col,0,mat,true);
+  const ellipsoid=(cx,cy,cz,rx,ry,rz,col,mat=0,seg=10,rows=5)=>{
+    const P=(a,b)=>[cx+Math.cos(a)*Math.cos(b)*rx, cy+Math.sin(a)*ry, cz+Math.cos(a)*Math.sin(b)*rz];
+    for(let j=0;j<rows;j++) for(let i=0;i<seg;i++){
+      const a0=Math.PI*(-0.5+j/rows), a1=Math.PI*(-0.5+(j+1)/rows), b0=i/seg*TAU, b1=(i+1)/seg*TAU;
+      quad(P(a0,b0),P(a0,b1),P(a1,b1),P(a1,b0),col,0,mat,true);
+    }
+  };
+  const poly=(pts,r,col,glow=0,mat=0)=>{ for(let i=0;i<pts.length-1;i++) tube(pts[i], pts[i+1], r, 7, col, glow, mat, true); };
+  // a two link arm solved for where the hand has to be, so the elbow bends as the thing being
+  // held moves. Straight rods from shoulder to handle were what read as an awkward arm.
+  const arm=(sh, target, L1, L2, bendDir)=>{
+    const d = sub(target, sh), len = Math.max(1e-4, Math.hypot(d[0],d[1],d[2]));
+    const u = scl(d, 1/len);
+    const ca = Math.acos(clamp((L1*L1 + len*len - L2*L2)/(2*L1*len), -1, 1));
+    let b = sub(bendDir, scl(u, dot(bendDir, u)));
+    if(Math.hypot(b[0],b[1],b[2]) < 1e-4) b = [0,-1,0]; else b = norm(b);
+    const elbow = add(sh, add(scl(u, L1*Math.cos(ca)), scl(b, L1*Math.sin(ca))));
+    limb(sh, elbow, 0.05, PAL.jacket);
+    limb(elbow, target, 0.042, PAL.skin);
+    sphere(target[0], target[1], target[2], 0.045, PAL.skin, 0, 8, 4);
+  };
 
   // ---- hull ----
   // The profile is a function of position along the boat instead of a list of stations, so the
@@ -746,19 +800,26 @@ function buildBoat(rudder, t, heat){
   for(let i=0;i<rr.length;i++) tri(rr[i][0], rr[(i+1)%rr.length][0], tip, rr[i][1], 0, 0, true);
 
   // ---- boiler, candle, exhaust ----
-  const bz = 0.15;
-  tube([0,0.22,bz],[0,0.42,bz], 0.12, 9, PAL.brass, 0, 1, true);
-  cone(0, 0.42, bz, 0.12, 0.06, 9, PAL.brass, 0, 1);
-  rod([0,0.215,-0.40],[0,0.215,0.05], 0.012, [0.30,0.28,0.24], 0, 1);   // the rail the candle slides along
-  const cz = -0.34 + 0.37*heat;                       // W/S pushes the candle towards the boiler
-  const flame = 0.06 + 0.05*heat + 0.012*Math.sin(t*11.0) + 0.008*Math.sin(t*23.0);
-  tube([0,0.22,cz],[0,0.34,cz], 0.04, 7, PAL.wax, 0, 0, true);
-  cone(0, 0.34, cz, 0.04, flame, 7, PAL.flame, 1.0, 0);
+  const bz = 0.08, by = 0.36;
+  ellipsoid(0, by, bz, 0.16, 0.05, 0.16, PAL.brass, 1, 10, 4);
   for(const side of [-1, 1]){
-    tube([side*0.10,0.24,bz-0.10],[side*0.18,0.21,-1.35], 0.035, 7, PAL.metal, 0, 1, true);
-    tube([side*0.18,0.21,-1.35],[side*0.18,-0.05,-1.58], 0.035, 7, PAL.metal, 0, 1, true);
+    // 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);
   }
 
+  // the candle stands on the deck under the boiler and slides forward towards it, so at full
+  // throttle the flame is just under the boiler's underside, where the heat actually does something
+  const cz = -0.32 + 0.30*heat;
+  const cy = dAt(cz);                                   // on the deck, not floating above it
+  const flame = 0.03 + 0.02*heat + 0.008*Math.sin(t*11.0) + 0.005*Math.sin(t*23.0);
+  tube([0, cy, cz], [0, cy+0.035, cz], 0.035, 7, PAL.wax, 0, 0, true);
+  cone(0, cy+0.035, cz, 0.035, flame, 7, PAL.flame, 1.0, 0);
+  const knob = [-0.05, cy+0.022, cz];                  // the little handle on the candle's side
+  sphere(knob[0], knob[1], knob[2], 0.018, [0.30,0.28,0.24], 0, 6, 3);
+
   // ---- tiller and rudder ----
   const ang = -rudder * 0.45;
   const head = [0, 0.16, -1.58];
@@ -782,19 +843,11 @@ function buildBoat(rudder, t, heat){
   sphere(PX, 0.70, -0.55, 0.095, PAL.skin, 0, 10, 6);                        // head
   disc(PX, 0.79, -0.55, 0.15, 10, PAL.hat);                                  // brim
   cone(PX, 0.79, -0.55, 0.115, 0.10, 10, PAL.hat);                           // crown
-  // two links with an elbow, solved for the handle - a straight rod from shoulder to tiller is
-  // what read as an awkward arm before
-  const shoulder = [PX, 0.54, -0.50], hand = [hx, hy, hz];
-  const L1 = 0.24, L2 = 0.24;
-  const d = sub(hand, shoulder), len = Math.max(1e-4, Math.hypot(d[0],d[1],d[2]));
-  const u = scl(d, 1/len);
-  const ca = Math.acos(clamp((L1*L1 + len*len - L2*L2)/(2*L1*len), -1, 1));
-  let bend = sub([-0.55,-0.55,-0.1], scl(u, dot([-0.55,-0.55,-0.1], u)));
-  if(Math.hypot(bend[0],bend[1],bend[2]) < 1e-4) bend = [0,-1,0]; else bend = norm(bend);
-  const elbow = add(shoulder, add(scl(u, L1*Math.cos(ca)), scl(bend, L1*Math.sin(ca))));
-  limb(shoulder, elbow, 0.05, PAL.jacket);
-  limb(elbow, hand, 0.042, PAL.skin);
-  sphere(hand[0], hand[1], hand[2], 0.045, PAL.skin, 0, 8, 4);
+  // right hand on the tiller, left hand on the candle handle. Both are solved for wherever the
+  // thing being held currently is, so pushing the throttle straightens the left arm as the candle
+  // moves forward, and steering swings the right one.
+  arm([PX+0.06, 0.52, -0.48], [hx, hy, hz], 0.29, 0.29, [-0.55,-0.55,-0.1]);
+  arm([PX-0.06, 0.52, -0.44], knob, 0.29, 0.29, [-0.5,-0.6,0.05]);
 
   // ---- pennant ----
   // the pole starts at the deck, not above it
@@ -981,7 +1034,7 @@ function reset(){
 
 function spawnPuff(model, origin, fwd, side, heat){
   if(puffs.length > 160) return;
-  const lp = [side*0.18*BOAT_SCALE, -0.05*BOAT_SCALE, -1.58*BOAT_SCALE];   // the tube that just fired
+  const lp = [side*0.17*BOAT_SCALE, -0.14*BOAT_SCALE, -1.58*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],
@@ -1196,7 +1249,9 @@ function frame(nowMs){
     const decay = Math.exp(-dt*2.2);
     pf.v[0] *= decay; pf.v[2] *= decay;
     if(pf.kind === 1 && pf.life < pf.max*0.55 && landH(pf.p[0], pf.p[2]) <= 0.02){
-      pf.p[1] = waveH(pf.p[0], pf.p[2], t) + 0.02;   // the jet is still at the surface, so it reads as foam
+      const surf = waveH(pf.p[0], pf.p[2], t);
+      // the mouth is submerged now, so a bubble has to rise to the surface before it reads as foam
+      if(pf.p[1] >= surf - 0.02) pf.p[1] = surf + 0.02;
     } else {
       pf.v[1] *= decay;                               // then it lifts off as steam
       pf.p[1] += pf.v[1]*dt;