Upload index.html

index.html

@@ -1489,8 +1489,8 @@ function stalkCurveX(w, f) {
 // rigid sprite rotation. Far stalks get a soft low-alpha halo pass to keep their
 // "far away" look without any runtime blur filters (no slowdown).
 function drawBackSeaweeds(t) {
-  ctx.save();
-  ctx.filter = 'blur(2px)'; // v5.1: added softness to nearer background seaweed
+  // v6: no runtime canvas filter — blur() forces a CPU re-rasterize every frame
+  // and was the main FPS cost. Softness now comes from the halo pass below instead.
   for (const w of backSeaweeds) {
     const baseY = sandAt(w.x) + 10;
     const n = w.segs;
@@ -1503,8 +1503,9 @@ function drawBackSeaweeds(t) {
       Math.sin(t * w.waveF2 + w.wavePh2 + f * 3.8) * w.waveA2 * f * f +
       Math.sin(t * w.waveF3 + w.wavePh3 + f * 5.4) * w.waveA3 * f;
 
-    for (let pass = 0; pass < (w.near ? 1 : 2); pass++) {
-      const isHalo = !w.near && pass === 0;
+    // v6: near stalks also get a halo pass (replaces the old blur(2px) filter)
+    for (let pass = 0; pass < 2; pass++) {
+      const isHalo = pass === 0; // v6: every stalk gets a halo pass (replaces the old blur filter)
       ctx.strokeStyle = isHalo ? haloStyle : coreStyle;
       ctx.lineCap = 'round';
       ctx.lineJoin = 'round';
@@ -1576,7 +1577,6 @@ function drawBackSeaweeds(t) {
       }
     }
   }
-  ctx.restore();
 }
 
 // v5: pre-render ultra-far seaweed sprites with heavy blur baked in at build time
@@ -2009,12 +2009,24 @@ function drawFgGrass(t) {
   }
 }
 
-function drawVignette() {
-  const g = ctx.createRadialGradient(W / 2, H * 0.45, Math.min(W, H) * 0.35, W / 2, H * 0.55, Math.max(W, H) * 0.78);
+// v6: vignette is static -> pre-render once per resize, blit each frame
+// (cheaper than recreating the radial gradient + full-screen fill every frame)
+let vignetteLayer = null;
+function buildVignette() {
+  vignetteLayer = document.createElement("canvas");
+  vignetteLayer.width = canvas.width;
+  vignetteLayer.height = canvas.height;
+  const c2 = vignetteLayer.getContext("2d");
+  c2.setTransform(ctx.getTransform());
+  const g = c2.createRadialGradient(W / 2, H * 0.45, Math.min(W, H) * 0.35, W / 2, H * 0.55, Math.max(W, H) * 0.78);
   g.addColorStop(0, "rgba(0,0,0,0)");
   g.addColorStop(1, "rgba(0,10,20,0.45)");
-  ctx.fillStyle = g;
-  ctx.fillRect(0, 0, W, H);
+  c2.fillStyle = g;
+  c2.fillRect(0, 0, W, H);
+}
+function drawVignette() {
+  if (!vignetteLayer) return;
+  ctx.drawImage(vignetteLayer, 0, 0, W, H);
 }
 
 // --- v8: mild film grain over the whole scene.
@@ -2047,7 +2059,9 @@ function drawGrain() {
     grainOx = (Math.random() * GRAIN_TILE) | 0;
     grainOy = (Math.random() * GRAIN_TILE) | 0;
     lastGrainTime = now;
+    lastGrainDrawn = false; // offset changed -> must repaint
   }
+  if (lastGrainDrawn) return; // v6: skip the full-screen overlay blend when nothing changed
   const ox = grainOx, oy = grainOy;
   ctx.save();
   ctx.globalCompositeOperation = "overlay";
@@ -2056,7 +2070,9 @@ function drawGrain() {
   ctx.fillStyle = grainPattern;
   ctx.fillRect(0, 0, W + GRAIN_TILE, H + GRAIN_TILE); // cover full screen even with offset
   ctx.restore();
+  lastGrainDrawn = true;
 }
+let lastGrainDrawn = false;
 
 // Precomputed static layers — the sand and rocks never move, so they are
 // rendered once to an offscreen canvas and blitted each frame (v6) instead of
@@ -2163,6 +2179,7 @@ function doResize() {
   resize();
   buildRaySprites(); // v23: rebuild the pre-blurred beam sprites for the new size
   buildFarSeaweedSprites(); // v5: rebuild ultra-far seaweed sprites for new size
+  buildVignette(); // v6: rebuild the static vignette layer
   buildStaticLayer();
   if (!grainPattern) buildGrainTile(); // v8: grain tile is size-independent, build once
 }