feat(voxel): ACES tone mapping, studio rig, contrast-aware bg + contact shadow

src/buddy_fusion/voxel_embed.py

@@ -283,29 +283,63 @@ function voxelThumbRenderer(THREE) {
   if (!window.__voxelThumbRenderer) {
     const r = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
     r.setPixelRatio(Math.min(2, window.devicePixelRatio || 1));
+    r.toneMapping = THREE.ACESFilmicToneMapping;
+    r.toneMappingExposure = 1.0;
+    if (THREE.SRGBColorSpace) r.outputColorSpace = THREE.SRGBColorSpace;
     window.__voxelThumbRenderer = r;
   }
   return window.__voxelThumbRenderer;
 }
 
-// Crossy-Road style daytime sky: a vertical gradient (deep blue up top, light at
-// the horizon) baked into a CanvasTexture. Assigned to scene.background so the
-// shared offscreen thumbnail renderer captures the SAME sky as live stages — a
-// CSS gradient on the stage div would not appear in the toDataURL snapshot.
-function voxelSkyTexture(THREE) {
-  if (!window.__voxelSky) {
-    const c = document.createElement("canvas");
-    c.width = 4; c.height = 256;
-    const ctx = c.getContext("2d");
+
+// Dominant hue of the creature -> a soft pastel background hue rotated AWAY from
+// it, so the body never sits on a same-hue wash (e.g. a red body never gets a red
+// bg). Low saturation, high lightness; vertical gradient. Cached by hue bucket.
+function voxelDominantHueDeg(THREE, cells) {
+  const tally = new Map();
+  for (const cell of cells) tally.set(cell.color, (tally.get(cell.color) || 0) + 1);
+  let best = null, bestN = -1;
+  for (const [hex, n] of tally) { if (n > bestN) { bestN = n; best = hex; } }
+  const c = new THREE.Color(); c.set(best || "#caa06f");
+  const hsl = {}; c.getHSL(hsl);
+  return hsl.h * 360;
+}
+
+function voxelBgTexture(THREE, cells) {
+  const hue = voxelDominantHueDeg(THREE, cells);
+  const bgHue = ((hue + 150) % 360) / 360;     // rotate away from the body hue
+  const bucket = Math.round(bgHue * 24);        // quantise for caching
+  window.__voxelBg = window.__voxelBg || {};
+  if (!window.__voxelBg[bucket]) {
+    const top = new THREE.Color().setHSL(bgHue, 0.32, 0.90);
+    const bot = new THREE.Color().setHSL(bgHue, 0.38, 0.80);
+    const cv = document.createElement("canvas"); cv.width = 4; cv.height = 256;
+    const ctx = cv.getContext("2d");
     const g = ctx.createLinearGradient(0, 0, 0, 256);
-    g.addColorStop(0, "#62b6f0"); // top
-    g.addColorStop(1, "#bfe6ff"); // horizon
+    g.addColorStop(0, "#" + top.getHexString());
+    g.addColorStop(1, "#" + bot.getHexString());
     ctx.fillStyle = g; ctx.fillRect(0, 0, 4, 256);
-    const tex = new THREE.CanvasTexture(c);
+    const tex = new THREE.CanvasTexture(cv);
     if (THREE.SRGBColorSpace) tex.colorSpace = THREE.SRGBColorSpace;
-    window.__voxelSky = tex;
+    window.__voxelBg[bucket] = tex;
+  }
+  return window.__voxelBg[bucket];
+}
+
+// A soft round contact-shadow blob (dark centre -> transparent edge). Cheaper
+// than a shadow map and matches the reference (no visible ground, just a blob).
+function voxelShadowTexture(THREE) {
+  if (!window.__voxelShadowTex) {
+    const cv = document.createElement("canvas"); cv.width = 128; cv.height = 128;
+    const ctx = cv.getContext("2d");
+    const g = ctx.createRadialGradient(64, 64, 4, 64, 64, 62);
+    g.addColorStop(0, "rgba(0,0,0,0.42)");
+    g.addColorStop(0.6, "rgba(0,0,0,0.20)");
+    g.addColorStop(1, "rgba(0,0,0,0)");
+    ctx.fillStyle = g; ctx.fillRect(0, 0, 128, 128);
+    window.__voxelShadowTex = new THREE.CanvasTexture(cv);
   }
-  return window.__voxelSky;
+  return window.__voxelShadowTex;
 }
 
 
@@ -325,10 +359,13 @@ async function setupVoxel(root) {
   const THREE = await voxelLoadThree();
   const W = stage.clientWidth || 320, H = stage.clientHeight || 300;
   const scene = new THREE.Scene();
-  scene.background = voxelSkyTexture(THREE);
   const cam = new THREE.PerspectiveCamera(42, W/H, 0.1, 100);
-  scene.add(new THREE.HemisphereLight(0xffffff, 0xbfe6ff, 1.05)); // soft sky bounce
-  const key = new THREE.DirectionalLight(0xffffff, 1.3); key.position.set(6, 12, 8); scene.add(key);
+  // Studio rig: warm key from upper-front, cool fill from the opposite lower
+  // side, gentle hemisphere bounce. Tuned for ACES tone mapping (set on renderer).
+  scene.add(new THREE.HemisphereLight(0xffffff, 0xcdb89a, 0.55));
+  const key = new THREE.DirectionalLight(0xfff2e0, 2.2); key.position.set(6, 12, 8); scene.add(key);
+  const fill = new THREE.DirectionalLight(0xbfe6ff, 0.7); fill.position.set(-7, 4, -6); scene.add(fill);
+  let __bgCells = null;
 
   // Just the creature against the gradient sky background — no ground, podium, or
   // props. The renderer still accepts a multi-creature config (cfg.creatures),
@@ -339,6 +376,7 @@ async function setupVoxel(root) {
   const sceneBox = new THREE.Box3();
   genomes.forEach((g, i) => {
     const cells = (cfg.boxes && cfg.boxes.length) ? voxelsFromBoxes(cfg.boxes) : voxelsFromGenome(g);
+    if (i === 0) __bgCells = cells;
     const mesh = voxelBuildMesh(THREE, cells);
     const bb = new THREE.Box3().setFromObject(mesh);
     const c = bb.getCenter(new THREE.Vector3());
@@ -351,10 +389,25 @@ async function setupVoxel(root) {
     pivot.add(mesh);
     scene.add(pivot);
     pivots.push(pivot);
+
+    // Soft contact shadow blob at the creature's base. In the scene (not the
+    // pivot) so the reveal pop / turntable does not scale or spin it.
+    const shadow = new THREE.Mesh(
+      new THREE.PlaneGeometry(1, 1),
+      new THREE.MeshBasicMaterial({ map: voxelShadowTexture(THREE), transparent: true,
+                                    depthWrite: false, opacity: 0.9 }));
+    shadow.rotation.x = -Math.PI / 2;
+    shadow.position.set(offX, (c.y - s.y / 2) + 0.02, 0);
+    shadow.scale.set(s.x * 1.7 + 1, s.z * 1.7 + 1, 1);
+    scene.add(shadow);
     sceneBox.expandByPoint(new THREE.Vector3(offX - s.x / 2, c.y - s.y / 2, -s.z / 2));
     sceneBox.expandByPoint(new THREE.Vector3(offX + s.x / 2, c.y + s.y / 2, s.z / 2));
   });
 
+  // Per-creature pastel background, hue-rotated away from the body so it frames
+  // without colliding (a red body never sits on a red wash).
+  scene.background = voxelBgTexture(THREE, __bgCells || []);
+
   const sCenter = sceneBox.getCenter(new THREE.Vector3());
   const radius = sceneBox.getSize(new THREE.Vector3()).length() * 0.7 + 3;
 
@@ -383,6 +436,9 @@ async function setupVoxel(root) {
 
   const renderer = new THREE.WebGLRenderer({ antialias: true });
   renderer.setSize(W, H); renderer.setPixelRatio(Math.min(2, window.devicePixelRatio || 1));
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1.0;
+  if (THREE.SRGBColorSpace) renderer.outputColorSpace = THREE.SRGBColorSpace;
   stage.appendChild(renderer.domElement);
   const { OrbitControls } = await voxelLoadOC();
   const controls = new OrbitControls(cam, renderer.domElement);