Upload index.html

index.html

@@ -1166,17 +1166,16 @@ function drawBackground(light) {
 // horizontal slices with the same undulation offsets as before — wobble + soft
 // edges, zero filters at runtime.
 const RAY_SEGS = 18;          // vertical resolution of each beam's spine (at build time)
-const RAY_SLICES = 24;        // horizontal slices per beam used for the wobble (per frame)
+const RAY_SLICES = 10;        // horizontal slices per beam used for the wobble (per frame) — reduced from 24
 const RAY_SPRITE_SCALE = 0.5; // sprites stored at half resolution → softer + cheaper
 const RAY_PAD = 60;           // room for the blur to spill past the beam edge
 let raySpritesBuiltFor = null;
-let tintCanvas = null, tctx = null;
+let rayTintRGB = null;        // the light.ray color used when building tinted sprites (perf: rebuild only on big shifts)
 
 function buildRaySprites() {
   const S = RAY_SPRITE_SCALE;
   const yTop0 = -10, ySpan = H * 0.95 + 10; // beam vertical extent (same as before)
 
-  let maxTw = 0, maxTh = 0;
   for (const r of rays) {
     const shift = r.tilt * H;
     const topW = r.w * 0.45, botW = r.w * 1.9;
@@ -1248,42 +1247,37 @@ function buildRaySprites() {
     const sc = spr.getContext("2d");
     sc.drawImage(full, 0, 0, bw, bh, 0, 0, spr.width, spr.height);
 
+    // PERF: pre-tint the sprite with the current light.ray color (no per-frame tinting)
+    if (rayTintRGB) {
+      const [tr, tg, tb] = rayTintRGB;
+      sc.globalCompositeOperation = "source-in";
+      sc.fillStyle = `rgb(${tr},${tg},${tb})`;
+      sc.fillRect(0, 0, spr.width, spr.height);
+    }
+
     r.sprite = spr;
     r.tw = spr.width; r.th = spr.height; // sprite pixel size
     r.bw = bw;                           // beam width in CSS px (dest size)
     r.xMinL = xMinL;                     // leftmost local x of the beam body
-    if (spr.width > maxTw) maxTw = spr.width;
-    if (spr.height > maxTh) maxTh = spr.height;
   }
 
-  // shared tint canvas: per frame we recolor each white sprite here with the current
-  // light.ray color, so beams still shift hue through day → dusk → night like before
-  tintCanvas = document.createElement("canvas");
-  tintCanvas.width = Math.max(1, maxTw);
-  tintCanvas.height = Math.max(1, maxTh);
-  tctx = tintCanvas.getContext("2d");
-
   raySpritesBuiltFor = W + "x" + H;
 }
 
 function drawRays(t, light) {
-  if (!tintCanvas || raySpritesBuiltFor !== W + "x" + H) buildRaySprites();
+  if (!raySpritesBuiltFor || raySpritesBuiltFor !== W + "x" + H) buildRaySprites();
   const [rr, rg, rb] = light.ray;
-  const tintRGB = `rgb(${rr},${rg},${rb})`;
   const yTop0 = -10, ySpan = H * 0.95 + 10;
 
+  // PERF: only rebuild tinted sprites when the light color shifts significantly (delta > 14)
+  if (!rayTintRGB || Math.abs(rayTintRGB[0] - rr) + Math.abs(rayTintRGB[1] - rg) + Math.abs(rayTintRGB[2] - rb) > 14) {
+    rayTintRGB = [rr, rg, rb];
+    buildRaySprites(); // rebuild with the new tint
+  }
+
   for (const r of rays) {
-    // 1) recolor the white sprite into the shared temp canvas — one blit + one fill,
-    //    GPU-cheap, and it keeps the beams' day/dusk/night hue shifting like before
-    tctx.clearRect(0, 0, r.tw, r.th);
-    tctx.globalCompositeOperation = "source-over";
-    tctx.drawImage(r.sprite, 0, 0);
-    tctx.globalCompositeOperation = "source-in";
-    tctx.fillStyle = tintRGB;
-    tctx.fillRect(0, 0, r.tw, r.th);
-
-    // 2) blit horizontal slices with the undulation offset at each depth — same wave
-    //    math as before, so the beams shimmer exactly like they always have
+    // blit horizontal slices with the undulation offset at each depth — same wave
+    // math as before, so the beams shimmer exactly like they always have
     const off = Math.sin(t * r.speed * 6 + r.x) * 55; // slow drift of the whole beam
     for (let i = 0; i < RAY_SLICES; i++) {
       const vT = i / RAY_SLICES, vB = (i + 1) / RAY_SLICES, vM = (vT + vB) / 2;
@@ -1293,7 +1287,7 @@ function drawRays(t, light) {
         Math.sin(vM * r.uLen + t * r.uSpd + r.uPh) * r.uAmp +
         Math.sin(vM * r.vLen - t * r.vSpd + r.vPh) * r.vAmp;
       const dx = r.x + off + wave * grow; // undulating center x at this depth
-      ctx.drawImage(tintCanvas,
+      ctx.drawImage(r.sprite,
         0, (ya + 10 + RAY_PAD) * RAY_SPRITE_SCALE, r.tw, (yb - ya) * RAY_SPRITE_SCALE,
         dx + r.xMinL - RAY_PAD, ya, r.bw, yb - ya);
     }