@operato/scene-storage 10.0.0-beta.43 → 10.0.0-beta.46

package/src/pallet-3d.ts

@@ -21,6 +21,57 @@ import * as THREE from 'three'
 import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { RealObjectGroup } from '@hatiolab/things-scene'
 
+// ── Material cache by bodyColor (shared across all Pallet3D instances) ──
+// 동일 bodyColor 의 pallet 수십~수백 개 → GPU material 인스턴스 *1개로 통합*.
+const woodBodyMaterials = new Map<string, THREE.MeshStandardMaterial>()
+const woodStringerMaterials = new Map<string, THREE.MeshStandardMaterial>()
+const plasticDeckMaterials = new Map<string, THREE.MeshStandardMaterial>()
+const plasticFootMaterials = new Map<string, THREE.MeshStandardMaterial>()
+
+function getWoodBodyMaterial(bodyColor: string): THREE.MeshStandardMaterial {
+  let m = woodBodyMaterials.get(bodyColor)
+  if (!m) {
+    m = new THREE.MeshStandardMaterial({ color: bodyColor, metalness: 0.0, roughness: 0.85 })
+    woodBodyMaterials.set(bodyColor, m)
+  }
+  return m
+}
+
+function getWoodStringerMaterial(bodyColor: string): THREE.MeshStandardMaterial {
+  let m = woodStringerMaterials.get(bodyColor)
+  if (!m) {
+    const tint = new THREE.Color(bodyColor).multiplyScalar(0.85)
+    m = new THREE.MeshStandardMaterial({ color: tint, metalness: 0.0, roughness: 0.9 })
+    woodStringerMaterials.set(bodyColor, m)
+  }
+  return m
+}
+
+function getPlasticDeckMaterial(bodyColor: string): THREE.MeshStandardMaterial {
+  let m = plasticDeckMaterials.get(bodyColor)
+  if (!m) {
+    m = new THREE.MeshStandardMaterial({ color: bodyColor, metalness: 0.1, roughness: 0.55 })
+    plasticDeckMaterials.set(bodyColor, m)
+  }
+  return m
+}
+
+function getPlasticFootMaterial(bodyColor: string): THREE.MeshStandardMaterial {
+  let m = plasticFootMaterials.get(bodyColor)
+  if (!m) {
+    const tint = new THREE.Color(bodyColor).multiplyScalar(0.85)
+    m = new THREE.MeshStandardMaterial({ color: tint, metalness: 0.1, roughness: 0.65 })
+    plasticFootMaterials.set(bodyColor, m)
+  }
+  return m
+}
+
+// ── Geometry cache by size (shared across all Pallet3D instances) ──
+// 동일 width × height × depth 의 pallet → merged geometry *1세트*만 GPU 에 업로드.
+// Translation / merge 비용도 동일 size pallet 끼리 *1회*만 발생.
+const woodGeoCache = new Map<string, { top: THREE.BufferGeometry; stringer: THREE.BufferGeometry; bottom: THREE.BufferGeometry }>()
+const plasticGeoCache = new Map<string, { deck: THREE.BufferGeometry; feet: THREE.BufferGeometry; brace: THREE.BufferGeometry }>()
+
 export class Pallet3D extends RealObjectGroup {
   build() {
     super.build()
@@ -38,28 +89,36 @@ export class Pallet3D extends RealObjectGroup {
 
   /** Wood EUR-style: 7 top slats + 3 stringers + 5 bottom slats. */
   private buildWood(width: number, height: number, depth: number, bodyColor: string) {
+    const { top, stringer, bottom } = this.getWoodGeometries(width, height, depth)
+
+    const woodMaterial = getWoodBodyMaterial(bodyColor)
+    const stringerMaterial = getWoodStringerMaterial(bodyColor)
+
+    const topSlatMesh = new THREE.Mesh(top, woodMaterial)
+    topSlatMesh.castShadow = true
+    topSlatMesh.receiveShadow = true
+    this.object3d.add(topSlatMesh)
+
+    const stringerMesh = new THREE.Mesh(stringer, stringerMaterial)
+    stringerMesh.castShadow = true
+    this.object3d.add(stringerMesh)
+
+    const botSlatMesh = new THREE.Mesh(bottom, woodMaterial)
+    botSlatMesh.receiveShadow = true
+    this.object3d.add(botSlatMesh)
+  }
+
+  private getWoodGeometries(width: number, height: number, depth: number) {
+    const key = `${width}|${height}|${depth}`
+    let cached = woodGeoCache.get(key)
+    if (cached) return cached
+
     const baseY = -depth / 2
     const slatThickness = depth * 0.15
     const stringerThickness = depth * 0.45
     const bottomSlatThickness = depth * 0.13
 
-    const woodMaterial = new THREE.MeshStandardMaterial({
-      color: bodyColor,
-      metalness: 0.0,
-      roughness: 0.85
-    })
-    const stringerColor = new THREE.Color(bodyColor).multiplyScalar(0.85)
-    const stringerMaterial = new THREE.MeshStandardMaterial({
-      color: stringerColor,
-      metalness: 0.0,
-      roughness: 0.9
-    })
-
-    // ── Top + bottom slats — same count, same z-positions, paired vertically ─
-    // EUR-pallet style: 5 boards on top, 5 below (under the same z ranges so
-    // they read as a single skeleton rather than two unrelated grids).
     const slatCount = 5
-    const slatW = width
     const slatD = (height * 0.92) / (slatCount + (slatCount - 1) * 0.4)
     const gapD = slatD * 0.4
     const totalSpan = slatCount * slatD + (slatCount - 1) * gapD
@@ -72,16 +131,12 @@ export class Pallet3D extends RealObjectGroup {
 
     const topSlatGeos: THREE.BufferGeometry[] = []
     for (const z of slatPositions) {
-      const slat = new THREE.BoxGeometry(slatW, slatThickness, slatD)
+      const slat = new THREE.BoxGeometry(width, slatThickness, slatD)
       slat.translate(0, baseY + depth - slatThickness / 2, z)
       topSlatGeos.push(slat)
     }
-    const topSlatMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(topSlatGeos), woodMaterial)
-    topSlatMesh.castShadow = true
-    topSlatMesh.receiveShadow = true
-    this.object3d.add(topSlatMesh)
+    const top = BufferGeometryUtils.mergeGeometries(topSlatGeos)
 
-    // ── Stringers (3 perpendicular blocks between top and bottom decks) ─
     const stringerCount = 3
     const stringerW = width * 0.07
     const stringerY = baseY + bottomSlatThickness + stringerThickness / 2
@@ -93,50 +148,59 @@ export class Pallet3D extends RealObjectGroup {
       stringer.translate(x, stringerY, 0)
       stringerGeos.push(stringer)
     }
-    const stringerMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(stringerGeos), stringerMaterial)
-    stringerMesh.castShadow = true
-    this.object3d.add(stringerMesh)
+    const stringer = BufferGeometryUtils.mergeGeometries(stringerGeos)
 
-    // ── Bottom slats — same z-positions as top so the deck reads as paired ─
     const botSlatGeos: THREE.BufferGeometry[] = []
     for (const z of slatPositions) {
       const slat = new THREE.BoxGeometry(width, bottomSlatThickness, slatD)
       slat.translate(0, baseY + bottomSlatThickness / 2, z)
       botSlatGeos.push(slat)
     }
-    const botSlatMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(botSlatGeos), woodMaterial)
-    botSlatMesh.receiveShadow = true
-    this.object3d.add(botSlatMesh)
+    const bottom = BufferGeometryUtils.mergeGeometries(botSlatGeos)
+
+    cached = { top, stringer, bottom }
+    woodGeoCache.set(key, cached)
+    return cached
   }
 
   /** Plastic molded: solid top deck + ribbed underside / feet. */
   private buildPlastic(width: number, height: number, depth: number, bodyColor: string) {
+    const { deck, feet, brace } = this.getPlasticGeometries(width, height, depth)
+
+    const deckMaterial = getPlasticDeckMaterial(bodyColor)
+    const footMaterial = getPlasticFootMaterial(bodyColor)
+
     const baseY = -depth / 2
     const deckThickness = depth * 0.30
-    const footH = depth * 0.55
-    const footW = width * 0.12
 
-    const deckMaterial = new THREE.MeshStandardMaterial({
-      color: bodyColor,
-      metalness: 0.1,
-      roughness: 0.55
-    })
-    const footColor = new THREE.Color(bodyColor).multiplyScalar(0.85)
-    const footMaterial = new THREE.MeshStandardMaterial({
-      color: footColor,
-      metalness: 0.1,
-      roughness: 0.65
-    })
-
-    // ── Solid top deck ───────────────────────────────────────────────
-    const deckGeo = new THREE.BoxGeometry(width * 0.98, deckThickness, height * 0.98)
-    const deckMesh = new THREE.Mesh(deckGeo, deckMaterial)
+    const deckMesh = new THREE.Mesh(deck, deckMaterial)
     deckMesh.position.set(0, baseY + depth - deckThickness / 2, 0)
     deckMesh.castShadow = true
     deckMesh.receiveShadow = true
     this.object3d.add(deckMesh)
 
-    // ── 9 feet (3×3 grid — typical plastic pallet underside) ─────────
+    const footMesh = new THREE.Mesh(feet, footMaterial)
+    footMesh.castShadow = true
+    this.object3d.add(footMesh)
+
+    const braceMesh = new THREE.Mesh(brace, footMaterial)
+    this.object3d.add(braceMesh)
+  }
+
+  private getPlasticGeometries(width: number, height: number, depth: number) {
+    const key = `${width}|${height}|${depth}`
+    let cached = plasticGeoCache.get(key)
+    if (cached) return cached
+
+    const baseY = -depth / 2
+    const deckThickness = depth * 0.30
+    const footH = depth * 0.55
+    const footW = width * 0.12
+
+    // Deck geo — local space; mesh position applied at instantiation.
+    const deck = new THREE.BoxGeometry(width * 0.98, deckThickness, height * 0.98)
+
+    // 9 feet (3×3 grid) → merged geometry with translations baked in.
     const footGeos: THREE.BufferGeometry[] = []
     for (let i = -1; i <= 1; i++) {
       for (let j = -1; j <= 1; j++) {
@@ -147,18 +211,21 @@ export class Pallet3D extends RealObjectGroup {
         footGeos.push(foot)
       }
     }
-    const footMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(footGeos), footMaterial)
-    footMesh.castShadow = true
-    this.object3d.add(footMesh)
+    const feet = BufferGeometryUtils.mergeGeometries(footGeos)
 
-    // ── Cross-bracing along underside (suggests molded reinforcement) ─
+    // 3 braces → merged into single mesh (이전에 mesh 3개 분리 = drawcall 3개).
     const braceH = depth * 0.10
-    const braceGeo = new THREE.BoxGeometry(width * 0.95, braceH, height * 0.04)
+    const braceGeos: THREE.BufferGeometry[] = []
     for (const zSign of [-1, 0, 1]) {
-      const brace = new THREE.Mesh(braceGeo.clone(), footMaterial)
-      brace.position.set(0, baseY + footH - braceH / 2, zSign * height * 0.4)
-      this.object3d.add(brace)
+      const b = new THREE.BoxGeometry(width * 0.95, braceH, height * 0.04)
+      b.translate(0, baseY + footH - braceH / 2, zSign * height * 0.4)
+      braceGeos.push(b)
     }
+    const brace = BufferGeometryUtils.mergeGeometries(braceGeos)
+
+    cached = { deck, feet, brace }
+    plasticGeoCache.set(key, cached)
+    return cached
   }
 
   updateDimension() {}

package/src/parcel-3d.ts

@@ -70,10 +70,28 @@ function _getLabelGeo(w: number, t: number, h: number): THREE.BoxGeometry {
 }
 
 export class Parcel3D extends RealObjectGroup {
+  // 처음 build 에서 finite size 받으면 cache. 이후 *NaN 으로 rebuild* 시 cache
+  // 값 사용 — *생성 직후 실제 크기 유지*. fallback (100x100x150) 은 *cache 도
+  // 없는 첫 호출에 NaN* 일 때만 사용.
+  private _cachedSize?: { w: number; h: number; d: number }
+
   build() {
     super.build()
 
-    const { width, height, depth = 150 } = this.component.state
+    // NaN guard + cache. carrier.state.height/width 가 *crane.receive 후
+    // bounds reflow* 시점에 NaN 으로 변할 수 있음 (cross-module state proxy
+    // 의 _state.h undefined + 계산 결과 NaN). 처음 build 의 finite 값을 instance
+    // 에 cache → 이후 NaN rebuild 에도 *실제 carrier 크기로 BoxGeometry* 유지.
+    const finite = (v: any) => typeof v === 'number' && Number.isFinite(v) && v > 0
+    const stateW = this.component.state.width
+    const stateH = this.component.state.height
+    const stateD = this.component.state.depth
+    if (this._cachedSize == null && finite(stateW) && finite(stateH) && finite(stateD)) {
+      this._cachedSize = { w: stateW, h: stateH, d: stateD }
+    }
+    const width = finite(stateW) ? stateW : (this._cachedSize?.w ?? 100)
+    const height = finite(stateH) ? stateH : (this._cachedSize?.h ?? 100)
+    const depth = finite(stateD) ? stateD : (this._cachedSize?.d ?? 150)
     const baseY = -depth / 2
 
     // ── Main body ────────────────────────────────────────────────────

package/src/rack-grid-3d.ts

@@ -60,13 +60,16 @@ export class RackGrid3D extends RealObjectGroup {
     this._frameGroup.add(this._beamGroup)
     this.object3d.add(this._frameGroup)
 
-    const width = (rs?.width as number) ?? 400        // 3D X
-    const height = (rs?.depth as number) ?? 2000      // 3D Y (floor → ceiling)
-    const depth = (rs?.height as number) ?? 200       // 3D Z (front → back)
+    // ?? 만 쓰면 NaN 통과 — finite + positive 검증 후 default fallback.
+    const finite = (v: any, fb: number) =>
+      typeof v === 'number' && Number.isFinite(v) && v > 0 ? v : fb
+    const width = finite(rs?.width, 400)               // 3D X
+    const height = finite(rs?.depth, 2000)             // 3D Y (floor → ceiling)
+    const depth = finite(rs?.height, 200)              // 3D Z (front → back)
     const cols = comp.columns
     const rows = comp.rackRows
     const shelves = comp.shelves
-    const shelfBase = Math.max(0, Math.min((rs?.shelfBaseHeight as number) || 0, height * 0.9))
+    const shelfBase = Math.max(0, Math.min(finite(rs?.shelfBaseHeight, 0), height * 0.9))
     const shelfZone = height - shelfBase
 
     const bayW = width / cols
@@ -313,10 +316,14 @@ export class RackGrid3D extends RealObjectGroup {
     const cols = comp.columns
     const rows = comp.rackRows
     const shelves = comp.shelves
-    const width = (rs?.width as number) ?? 400
-    const height = (rs?.depth as number) ?? 2000
-    const depth = (rs?.height as number) ?? 200
-    const shelfBase = Math.max(0, Math.min((rs?.shelfBaseHeight as number) || 0, height * 0.9))
+    // state.width/depth/height 가 NaN 인 경우 — ?? 는 nullish 만 fallback 이라 NaN 통과.
+    // 명시적 finite 검증 후 default 사용. NaN BoxGeometry 의 근본 원인.
+    const finite = (v: any, fb: number) =>
+      typeof v === 'number' && Number.isFinite(v) && v > 0 ? v : fb
+    const width = finite(rs?.width, 400)
+    const height = finite(rs?.depth, 2000)
+    const depth = finite(rs?.height, 200)
+    const shelfBase = Math.max(0, Math.min(finite(rs?.shelfBaseHeight, 0), height * 0.9))
     const shelfZone = height - shelfBase
     const bayW = width / cols
     const bayD = depth / rows
@@ -328,6 +335,22 @@ export class RackGrid3D extends RealObjectGroup {
     const stockD = cellY * 0.7
     const stockH = bayD * 0.85
 
+    // 최종 차원이 finite 한지 검증 — accessor + finite() 거쳤어도 *모든 입력이 0* 이거나
+    // 예상 못한 경로로 NaN/0 가능성. invalid 시 stock mesh 생성 자체를 skip + 진단 로그.
+    if (
+      !Number.isFinite(stockW) || stockW <= 0 ||
+      !Number.isFinite(stockD) || stockD <= 0 ||
+      !Number.isFinite(stockH) || stockH <= 0
+    ) {
+      console.error('[rack-grid-3d] rebuildStockMesh: invalid stock dims — mesh 생성 skip', {
+        stockW, stockD, stockH,
+        cols, rows, shelves,
+        width, height, depth, shelfBase, shelfZone, cellY, bayW, bayD,
+        stateW: rs?.width, stateDepth: rs?.depth, stateH: rs?.height, stateShelfBase: rs?.shelfBaseHeight
+      })
+      return
+    }
+
     const records = comp.records
     const recordsByCell = new Map<string, any>()
     for (const r of records) {