feat: add playable actors and seamless journey state

src/assets/actors/crow.ts

@@ -38,7 +38,9 @@ export interface CrowRig extends ActorRigBase {
 
 export function createCrowMaterials(options: CrowBuildOptions = {}): CrowMaterials {
   return {
-    feather: new THREE.MeshStandardMaterial({ name: "crow.feather", color: options.featherColor ?? 0x111519, roughness: 0.62, metalness: 0.12 }),
+    // Wing sheets are intentionally thin. Both faces must render because a
+    // chase camera sees their backs while a flyover camera sees their fronts.
+    feather: new THREE.MeshStandardMaterial({ name: "crow.feather", color: options.featherColor ?? 0x111519, roughness: 0.62, metalness: 0.12, side: THREE.DoubleSide }),
     sheen: new THREE.MeshStandardMaterial({ name: "crow.sheen", color: options.sheenColor ?? 0x1f2c36, roughness: 0.4, metalness: 0.28 }),
     beak: new THREE.MeshStandardMaterial({ name: "crow.beak", color: 0x202327, roughness: 0.78 }),
     eye: new THREE.MeshBasicMaterial({ name: "crow.eye", color: 0xd4b168, toneMapped: false }),

src/assets/textures.ts

@@ -333,7 +333,11 @@ export class TextureBin {
     const canvas = document.createElement("canvas");
     canvas.width = size;
     canvas.height = size;
-    const ctx = canvas.getContext("2d");
+    // Every material passes through `grain()`, which reads the full canvas back
+    // before uploading it to Three.js. Declare that workload so Chromium keeps
+    // the 2D surface on its read-optimised path instead of warning once per
+    // generated office material.
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
     if (!ctx) return null;
 
     DRAW[kind](ctx, size);