Optimize rendering performance and scene management in main.js. Updated WebGLRenderer settings for lower power consumption, adjusted pixel ratio, and improved shadow map handling. Enhanced animation frame control for smoother transitions and reduced unnecessary computations in static scene objects.

frontend/main.js

@@ -11,11 +11,19 @@ import { initUI } from "/static/ui.js";
 // ---------------------------------------------------------------------------
 
 const canvas = document.getElementById("scene");
-const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
-renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+const renderer = new THREE.WebGLRenderer({
+  canvas,
+  antialias: true,
+  powerPreference: "low-power",
+});
+// 1.5x is visually identical to 2x at this flat-shaded art style, ~44% fewer pixels
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
 renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.shadowMap.enabled = true;
 renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+// nothing that casts shadows ever moves: bake the shadow map once
+renderer.shadowMap.autoUpdate = false;
+renderer.shadowMap.needsUpdate = true;
 
 const scene = new THREE.Scene();
 scene.fog = new THREE.Fog(0xbfe3ff, 90, 420);
@@ -106,6 +114,14 @@ scene.add(sun);
 
 const world = buildWorld(scene);
 
+// Freeze transform recomputation for the (almost entirely) static scene;
+// only the clouds and the camera move.
+scene.traverse((obj) => {
+  obj.updateMatrix();
+  obj.matrixAutoUpdate = false;
+});
+for (const cloud of world.clouds) cloud.matrixAutoUpdate = true;
+
 // ---------------------------------------------------------------------------
 // Vending machine interaction: hover outline + floating label, click hook
 // ---------------------------------------------------------------------------
@@ -299,6 +315,9 @@ window.lofinityDebug = {
   closeMachine() {
     closeMachineView();
   },
+  stats() {
+    return { ...renderer.info.render, ...renderer.info.memory };
+  },
 };
 
 // ---------------------------------------------------------------------------
@@ -307,12 +326,24 @@ window.lofinityDebug = {
 
 const clock = new THREE.Clock();
 
-function animate() {
+// Frame governor: a chill scene doesn't need 120fps. Idle runs at 30fps;
+// camera transitions get 60 so they stay silky.
+let lastRender = 0;
+
+function animate(now = 0) {
   requestAnimationFrame(animate);
+  const transitioning =
+    intro.phase === "descending" ||
+    view.mode === "zoom-in" ||
+    view.mode === "zoom-out";
+  const interval = transitioning ? 1000 / 60 : 1000 / 30;
+  if (now - lastRender < interval - 1) return;
+  const dt = Math.min((now - lastRender) / 1000, 0.1);
+  lastRender = now;
   const elapsed = clock.getElapsedTime();
 
   for (const cloud of world.clouds) {
-    cloud.position.x += cloud.userData.speed * 0.016;
+    cloud.position.x += cloud.userData.speed * dt;
     if (cloud.position.x > 170) cloud.position.x = -170;
   }