@operato/scene-storage 10.0.0-beta.42 → 10.0.0-beta.44

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

@@ -41,6 +41,34 @@ const PARCEL_LABEL_MATERIAL = new THREE.MeshStandardMaterial({
   roughness: 0.4
 })
 
+// ── Geometry cache — 같은 (w,h,d) 인 parcel 들 BoxGeometry 공유. 수백 parcel 의
+//   GPU memory + setup cost 폭감.
+const _BODY_GEO_CACHE = new Map<string, THREE.BoxGeometry>()
+const _TAPE_GEO_CACHE = new Map<string, THREE.BoxGeometry>()
+const _LABEL_GEO_CACHE = new Map<string, THREE.BoxGeometry>()
+
+function _key3(a: number, b: number, c: number): string {
+  return `${a.toFixed(1)}-${b.toFixed(1)}-${c.toFixed(1)}`
+}
+function _getBodyGeo(w: number, d: number, h: number): THREE.BoxGeometry {
+  const k = _key3(w, d, h)
+  let g = _BODY_GEO_CACHE.get(k)
+  if (!g) { g = new THREE.BoxGeometry(w, d, h); _BODY_GEO_CACHE.set(k, g) }
+  return g
+}
+function _getTapeGeo(w: number, t: number, l: number): THREE.BoxGeometry {
+  const k = _key3(w, t, l)
+  let g = _TAPE_GEO_CACHE.get(k)
+  if (!g) { g = new THREE.BoxGeometry(w, t, l); _TAPE_GEO_CACHE.set(k, g) }
+  return g
+}
+function _getLabelGeo(w: number, t: number, h: number): THREE.BoxGeometry {
+  const k = _key3(w, t, h)
+  let g = _LABEL_GEO_CACHE.get(k)
+  if (!g) { g = new THREE.BoxGeometry(w, t, h); _LABEL_GEO_CACHE.set(k, g) }
+  return g
+}
+
 export class Parcel3D extends RealObjectGroup {
   build() {
     super.build()
@@ -49,8 +77,7 @@ export class Parcel3D extends RealObjectGroup {
     const baseY = -depth / 2
 
     // ── Main body ────────────────────────────────────────────────────
-    const bodyGeo = new THREE.BoxGeometry(width, depth, height)
-    const bodyMesh = new THREE.Mesh(bodyGeo, PARCEL_BODY_MATERIAL)
+    const bodyMesh = new THREE.Mesh(_getBodyGeo(width, depth, height), PARCEL_BODY_MATERIAL)
     bodyMesh.position.set(0, 0, 0)
     bodyMesh.castShadow = true
     bodyMesh.receiveShadow = true
@@ -60,24 +87,29 @@ export class Parcel3D extends RealObjectGroup {
     const tapeW = Math.min(width, height) * 0.10
     const tapeT = depth * 0.02
     const tapeAlongLong = width >= height
-    const tapeGeo = tapeAlongLong
-      ? new THREE.BoxGeometry(width * 1.005, tapeT, tapeW)
-      : new THREE.BoxGeometry(tapeW, tapeT, height * 1.005)
-    const tapeMesh = new THREE.Mesh(tapeGeo, PARCEL_TAPE_MATERIAL)
+    const tapeMesh = new THREE.Mesh(
+      tapeAlongLong
+        ? _getTapeGeo(width * 1.005, tapeT, tapeW)
+        : _getTapeGeo(tapeW, tapeT, height * 1.005),
+      PARCEL_TAPE_MATERIAL
+    )
     tapeMesh.position.set(0, baseY + depth + tapeT / 2 - 0.01, 0)
+    // shadow 부담 줄임 — tape 는 얇아 shadow 시각 영향 미미
     this.object3d.add(tapeMesh)
 
     // ── Shipping label (small white rectangle on top) ────────────────
     const labelW = Math.min(width, height) * 0.35
     const labelH = labelW * 0.6
-    const labelGeo = new THREE.BoxGeometry(labelW, depth * 0.005, labelH)
-    const labelMesh = new THREE.Mesh(labelGeo, PARCEL_LABEL_MATERIAL)
-    // Position on top, off-center by ~25% of long axis
+    const labelMesh = new THREE.Mesh(
+      _getLabelGeo(labelW, depth * 0.005, labelH),
+      PARCEL_LABEL_MATERIAL
+    )
     if (tapeAlongLong) {
       labelMesh.position.set(width * 0.2, baseY + depth + depth * 0.0025, -height * 0.15)
     } else {
       labelMesh.position.set(width * 0.15, baseY + depth + depth * 0.0025, height * 0.2)
     }
+    // shadow 부담 줄임 — label 도 얇아 shadow 시각 영향 미미
     this.object3d.add(labelMesh)
   }