Add paint hover previews to viewer

packages/viewer/src/systems/roof/roof-materials.ts

@@ -8,6 +8,17 @@ import { createMaterial, createMaterialFromPresetRef } from '../../lib/materials
 
 export type RoofMaterialArray = [THREE.Material, THREE.Material, THREE.Material, THREE.Material]
 
+const roofMaterialArrayCache = new Map<string, RoofMaterialArray>()
+
+function getSurfaceMaterialSignature(
+  spec: ReturnType<typeof getEffectiveRoofSurfaceMaterial>,
+): string {
+  return JSON.stringify({
+    material: spec.material ?? null,
+    materialPreset: spec.materialPreset ?? null,
+  })
+}
+
 function createResolvedMaterial(
   material: RoofNode['material'] | RoofSegmentNode['material'] | undefined,
   materialPreset: string | undefined,
@@ -27,6 +38,14 @@ export function getRoofMaterialArray(node: RoofNode): RoofMaterialArray | null {
   const top = getEffectiveRoofSurfaceMaterial(node, 'top')
   const edge = getEffectiveRoofSurfaceMaterial(node, 'edge')
   const wall = getEffectiveRoofSurfaceMaterial(node, 'wall')
+  const cacheKey = JSON.stringify({
+    top: getSurfaceMaterialSignature(top),
+    edge: getSurfaceMaterialSignature(edge),
+    wall: getSurfaceMaterialSignature(wall),
+  })
+
+  const cached = roofMaterialArrayCache.get(cacheKey)
+  if (cached) return cached
 
   const topMaterial = createResolvedMaterial(top.material, top.materialPreset)
   const edgeMaterial = createResolvedMaterial(edge.material, edge.materialPreset)
@@ -36,11 +55,13 @@ export function getRoofMaterialArray(node: RoofNode): RoofMaterialArray | null {
     return null
   }
 
-  return [
+  const materialArray: RoofMaterialArray = [
     edgeMaterial ?? wallMaterial ?? topMaterial ?? new THREE.MeshStandardMaterial(),
     wallMaterial ?? edgeMaterial ?? topMaterial ?? new THREE.MeshStandardMaterial(),
     wallMaterial ?? edgeMaterial ?? topMaterial ?? new THREE.MeshStandardMaterial(),
     topMaterial ?? wallMaterial ?? edgeMaterial ?? new THREE.MeshStandardMaterial(),
   ]
-}
 
+  roofMaterialArrayCache.set(cacheKey, materialArray)
+  return materialArray
+}

packages/viewer/src/systems/stair/stair-materials.ts

@@ -12,6 +12,18 @@ import {
 
 export type StairBodyMaterials = [THREE.Material, THREE.Material]
 
+const stairBodyMaterialCache = new Map<string, StairBodyMaterials>()
+const stairRailingMaterialCache = new Map<string, THREE.Material>()
+
+function getSurfaceMaterialSignature(
+  spec: ReturnType<typeof getEffectiveStairSurfaceMaterial>,
+): string {
+  return JSON.stringify({
+    material: spec.material ?? null,
+    materialPreset: spec.materialPreset ?? null,
+  })
+}
+
 function createResolvedMaterial(
   material: StairNode['material'] | StairSegmentNode['material'] | undefined,
   materialPreset: string | undefined,
@@ -30,16 +42,32 @@ function createResolvedMaterial(
 export function getStairBodyMaterials(stair: StairNode): StairBodyMaterials {
   const tread = getEffectiveStairSurfaceMaterial(stair, 'tread')
   const side = getEffectiveStairSurfaceMaterial(stair, 'side')
+  const cacheKey = JSON.stringify({
+    tread: getSurfaceMaterialSignature(tread),
+    side: getSurfaceMaterialSignature(side),
+  })
 
-  return [
+  const cached = stairBodyMaterialCache.get(cacheKey)
+  if (cached) return cached
+
+  const materials: StairBodyMaterials = [
     createResolvedMaterial(tread.material, tread.materialPreset),
     createResolvedMaterial(side.material, side.materialPreset),
   ]
+
+  stairBodyMaterialCache.set(cacheKey, materials)
+  return materials
 }
 
 export function getStairRailingMaterial(stair: StairNode): THREE.Material {
   const railing = getEffectiveStairSurfaceMaterial(stair, 'railing')
-  return createResolvedMaterial(railing.material, railing.materialPreset)
+  const cacheKey = getSurfaceMaterialSignature(railing)
+  const cached = stairRailingMaterialCache.get(cacheKey)
+  if (cached) return cached
+
+  const material = createResolvedMaterial(railing.material, railing.materialPreset)
+  stairRailingMaterialCache.set(cacheKey, material)
+  return material
 }
 
 export function getStraightStairSegmentBodyMaterials(