Upload index.html

index.html

@@ -170,6 +170,8 @@ function decode(code){
   return { peak, shape, rough: F32(F32(rg)/F32(15)), type, ramp, pk, sh, rg };
 }
 
+// smoothstep on [0,1], every step rounded to float32 so the shader and the boat get the same number
+function smooth01(u){ return F32(F32(F32(u)*F32(u))*F32(F32(3.0)-F32(F32(2.0)*u))); }
 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
@@ -198,7 +200,13 @@ function landH(x, z){
     if(d > rr) continue;
     const k = F32(F32(1.0) - F32(F32(d)/F32(rr)));
     const nz = F32(F32(0.55) + F32(F32(0.45)*F32(p.rough)*lnoise(F32(F32(dx*f2) + F32((p.pk+p.sh+1)%16)), F32(F32(dz*f2) + F32((p.pk+p.sh+7)%16)))));
-    const terr = (p.ramp > 0 ? Math.min(1, k/p.ramp) : Math.pow(k, p.shape)) * nz;
+    // A hard min at k = ramp is a crease, and where that crease meets the shoreline it reads as a
+    // corner. Easing it keeps the flat top - u is clamped to 1 over most of the radius - but rounds the
+    // shoulder. The shader does the same thing, so the boat still sits on the ground it is drawn on.
+    const u = F32(F32(k)/F32(p.ramp));
+    let s = 1.0;
+    if(u <= 0.0) s = 0.0; else if(u >= 1.0) s = 1.0; else s = smooth01(u);
+    const terr = F32(F32(p.ramp > 0 ? s : Math.pow(k, p.shape)) * F32(nz));
     h = Math.max(h, p.peak*terr - LAND.shelf);   // the shelf is the shallow ring around an island
   }
   return h;
@@ -281,11 +289,21 @@ float landH(vec2 p){
     float rough = rg/15.0;
     float k = 1.0 - d/rr;
     float nz = 0.55 + 0.45*rough*lnoise(r*f2 + vec2(mod(pk+sh+1.0, 16.0), mod(pk+sh+7.0, 16.0)));
-    float terr = (ramp > 0.0) ? min(1.0, k/ramp) * nz : pow(k, shape) * nz;
+    float terr = (ramp > 0.0) ? smoothstep(0.0, 1.0, k/ramp) * nz : pow(k, shape) * nz;   // eased shoulder, mirrored in the JS copy
     h = max(h, peak*terr - 1.2);
   }
   return h;
 }
+// Land normal from the height field itself rather than from the facet drawn. Bilinear interpolation
+// between lattice points is planar, so each cell is a flat sheet and the facet normal makes every quad
+// read as its own tile. Sampling the field either side of the point gives a normal that varies
+// continuously, which is what stops the islands looking like polygons.
+vec3 landN(vec2 p){
+  float e = 0.25;
+  float hx = (landH(p + vec2(e, 0.0)) - landH(p - vec2(e, 0.0))) / (2.0*e);
+  float hz = (landH(p + vec2(0.0, e)) - landH(p - vec2(0.0, e))) / (2.0*e);
+  return normalize(vec3(-hx, 1.0, -hz));
+}
 `;
 
 /* ================= hull =================
@@ -481,7 +499,7 @@ void main(){
   vLand = land;
   vDepth = water - land;                 // depth of water over the seabed
   vEdge = edge;
-  vNormal = waveN(w, uTime);             // land normals come from the facets in the fragment stage
+  vNormal = isLand ? landN(w) : waveN(w, uTime);   // only land vertices pay for the extra samples
   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
@@ -538,9 +556,12 @@ void main(){
   // mesh - a staircase on a 1 m grid. It is now an interpolated value, so the crossing is a line across
   // each facet that joins with its neighbours, and the narrow band between the two is blended instead of
   // switched.
+  // The normal comes from the height field, not from the facet, so land shades continuously across the
+  // mesh instead of one flat tile per quad. fn is still used, but only to decide which material a facet
+  // is - a facet this steep can only be a cliff face, and the sea surface never gets that steep.
   float t = clamp(smoothstep(-0.12, 0.12, vEdge), 0.0, 1.0);
-  if(fn.y < 0.12) t = 1.0;      // a facet this steep can only be a cliff face - the sea never gets that steep
-  vec3 n = mix(wn, fn, t);
+  if(fn.y < 0.12) t = 1.0;
+  vec3 n = mix(wn, normalize(vNormal), t);
   if(n.y < 0.0) n = -n;
   vec3 col = mix(waterCol(wn), landCol(fn, max(vLand, 0.0)), t);
   float ndl = max(dot(n, LDIR), 0.0);