Add two-sided wall material targeting

packages/core/src/events/bus.ts

@@ -38,6 +38,8 @@ export interface NodeEvent<T extends AnyNode = AnyNode> {
   position: [number, number, number]
   localPosition: [number, number, number]
   normal?: [number, number, number]
+  faceIndex?: number
+  materialIndex?: number
   stopPropagation: () => void
   nativeEvent: ThreeEvent<PointerEvent>
 }

packages/core/src/schema/index.ts

@@ -4,6 +4,13 @@ export { BaseNode, generateId, Material, nodeType, objectId } from './base'
 export { CameraSchema } from './camera'
 // Collections
 export { type Collection, type CollectionId, generateCollectionId } from './collections'
+export type {
+  MaterialMapProperties,
+  MaterialMaps,
+  MaterialPresetPayload,
+  MaterialTarget as MaterialTargetValue,
+  TextureWrapMode as TextureWrapModeValue,
+} from './material'
 // Material
 export {
   DEFAULT_MATERIALS,
@@ -14,15 +21,8 @@ export {
   MaterialProperties,
   MaterialSchema,
   MaterialTarget,
-  TextureWrapMode,
   resolveMaterial,
-} from './material'
-export type {
-  MaterialMapProperties,
-  MaterialMaps,
-  MaterialPresetPayload,
-  MaterialTarget as MaterialTargetValue,
-  TextureWrapMode as TextureWrapModeValue,
+  TextureWrapMode,
 } from './material'
 export { BuildingNode } from './nodes/building'
 export { CeilingNode } from './nodes/ceiling'
@@ -58,7 +58,12 @@ export {
 } from './nodes/stair'
 export { AttachmentSide, StairSegmentNode, StairSegmentType } from './nodes/stair-segment'
 export { SurfaceHoleMetadata } from './nodes/surface-hole-metadata'
-export { WallNode } from './nodes/wall'
+export type { WallSurfaceMaterialSpec, WallSurfaceSide } from './nodes/wall'
+export {
+  getEffectiveWallSurfaceMaterial,
+  getWallSurfaceMaterialSignature,
+  WallNode,
+} from './nodes/wall'
 export { WindowNode } from './nodes/window'
 export { ZoneNode } from './nodes/zone'
 export type { AnyNodeId, AnyNodeType } from './types'

packages/core/src/schema/nodes/wall.ts

@@ -12,8 +12,14 @@ export const WallNode = BaseNode.extend({
   children: z
     .array(z.union([ItemNode.shape.id, DoorNode.shape.id, WindowNode.shape.id]))
     .default([]),
+  // Legacy single-material wall finish. Read for backward compatibility only.
   material: MaterialSchema.optional(),
+  // Legacy single-material wall finish preset. Read for backward compatibility only.
   materialPreset: z.string().optional(),
+  interiorMaterial: MaterialSchema.optional(),
+  interiorMaterialPreset: z.string().optional(),
+  exteriorMaterial: MaterialSchema.optional(),
+  exteriorMaterialPreset: z.string().optional(),
   thickness: z.number().optional(),
   height: z.number().optional(),
   curveOffset: z.number().optional(),
@@ -37,3 +43,62 @@ export const WallNode = BaseNode.extend({
   `,
 )
 export type WallNode = z.infer<typeof WallNode>
+
+export type WallSurfaceSide = 'interior' | 'exterior'
+
+export type WallSurfaceMaterialSpec = {
+  material?: z.infer<typeof MaterialSchema>
+  materialPreset?: string
+}
+
+type WallSurfaceMaterialSource = {
+  material?: z.infer<typeof MaterialSchema>
+  materialPreset?: string
+  interiorMaterial?: z.infer<typeof MaterialSchema>
+  interiorMaterialPreset?: string
+  exteriorMaterial?: z.infer<typeof MaterialSchema>
+  exteriorMaterialPreset?: string
+}
+
+function getConfiguredWallSurfaceMaterial(
+  wall: WallSurfaceMaterialSource,
+  side: WallSurfaceSide,
+): WallSurfaceMaterialSpec {
+  if (side === 'interior') {
+    return {
+      material: wall.interiorMaterial,
+      materialPreset: wall.interiorMaterialPreset,
+    }
+  }
+
+  return {
+    material: wall.exteriorMaterial,
+    materialPreset: wall.exteriorMaterialPreset,
+  }
+}
+
+function hasSurfaceMaterial(spec: WallSurfaceMaterialSpec): boolean {
+  return spec.material !== undefined || typeof spec.materialPreset === 'string'
+}
+
+export function getEffectiveWallSurfaceMaterial(
+  wall: WallSurfaceMaterialSource,
+  side: WallSurfaceSide,
+): WallSurfaceMaterialSpec {
+  const configured = getConfiguredWallSurfaceMaterial(wall, side)
+  if (hasSurfaceMaterial(configured)) {
+    return configured
+  }
+
+  return {
+    material: wall.material,
+    materialPreset: wall.materialPreset,
+  }
+}
+
+export function getWallSurfaceMaterialSignature(spec: WallSurfaceMaterialSpec): string {
+  return JSON.stringify({
+    material: spec.material ?? null,
+    materialPreset: spec.materialPreset ?? null,
+  })
+}

packages/core/src/store/actions/node-actions.ts

@@ -1,4 +1,10 @@
-import type { AnyNode, AnyNodeId, WallNode } from '../../schema'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  getEffectiveWallSurfaceMaterial,
+  getWallSurfaceMaterialSignature,
+  type WallNode,
+} from '../../schema'
 import type { CollectionId } from '../../schema/collections'
 import type { SceneState } from '../use-scene'
 
@@ -17,11 +23,7 @@ type WallMergePlan = {
 let pendingRafId: number | null = null
 let pendingUpdates: Set<AnyNodeId> = new Set()
 
-function pointsEqual(
-  a: [number, number],
-  b: [number, number],
-  tolerance = 1e-6,
-) {
+function pointsEqual(a: [number, number], b: [number, number], tolerance = 1e-6) {
   const dx = a[0] - b[0]
   const dz = a[1] - b[1]
   return dx * dx + dz * dz <= tolerance * tolerance
@@ -40,32 +42,30 @@ function getWallEndpointAtPoint(
   return null
 }
 
-function getWallFreeEndpoint(
-  wall: Pick<WallNode, 'start' | 'end'>,
-  sharedPoint: [number, number],
-) {
+function getWallFreeEndpoint(wall: Pick<WallNode, 'start' | 'end'>, sharedPoint: [number, number]) {
   return pointsEqual(wall.start, sharedPoint) ? wall.end : wall.start
 }
 
 function areWallStylesCompatible(a: WallNode, b: WallNode) {
+  const aInterior = getWallSurfaceMaterialSignature(getEffectiveWallSurfaceMaterial(a, 'interior'))
+  const bInterior = getWallSurfaceMaterialSignature(getEffectiveWallSurfaceMaterial(b, 'interior'))
+  const aExterior = getWallSurfaceMaterialSignature(getEffectiveWallSurfaceMaterial(a, 'exterior'))
+  const bExterior = getWallSurfaceMaterialSignature(getEffectiveWallSurfaceMaterial(b, 'exterior'))
+
   return (
     (a.parentId ?? null) === (b.parentId ?? null) &&
     Math.abs((a.curveOffset ?? 0) - (b.curveOffset ?? 0)) <= 1e-6 &&
     Math.abs((a.thickness ?? 0.2) - (b.thickness ?? 0.2)) <= 1e-6 &&
     Math.abs((a.height ?? 2.5) - (b.height ?? 2.5)) <= 1e-6 &&
-    a.materialPreset === b.materialPreset &&
-    JSON.stringify(a.material ?? null) === JSON.stringify(b.material ?? null) &&
+    aInterior === bInterior &&
+    aExterior === bExterior &&
     a.frontSide === b.frontSide &&
     a.backSide === b.backSide &&
     a.visible === b.visible
   )
 }
 
-function areWallsCollinearAcrossPoint(
-  a: WallNode,
-  b: WallNode,
-  sharedPoint: [number, number],
-) {
+function areWallsCollinearAcrossPoint(a: WallNode, b: WallNode, sharedPoint: [number, number]) {
   const freeA = getWallFreeEndpoint(a, sharedPoint)
   const freeB = getWallFreeEndpoint(b, sharedPoint)
   const ax = freeA[0] - sharedPoint[0]
@@ -111,7 +111,10 @@ function buildMergedWallAttachmentUpdates(
   mergedEnd: [number, number],
   nodes: Record<AnyNodeId, AnyNode>,
 ): WallAttachmentUpdate[] {
-  const mergedLength = Math.max(Math.hypot(mergedEnd[0] - mergedStart[0], mergedEnd[1] - mergedStart[1]), 1e-6)
+  const mergedLength = Math.max(
+    Math.hypot(mergedEnd[0] - mergedStart[0], mergedEnd[1] - mergedStart[1]),
+    1e-6,
+  )
   const tangentX = (mergedEnd[0] - mergedStart[0]) / mergedLength
   const tangentZ = (mergedEnd[1] - mergedStart[1]) / mergedLength
   const updates: WallAttachmentUpdate[] = []
@@ -126,11 +129,16 @@ function buildMergedWallAttachmentUpdates(
     const sourceWall = child.parentId === secondary.id ? secondary : primary
     const sourceLength = Math.max(wallLength(sourceWall), 1e-6)
     const localX = typeof child.position[0] === 'number' ? child.position[0] : 0
-    const worldX = sourceWall.start[0] + ((sourceWall.end[0] - sourceWall.start[0]) * localX) / sourceLength
-    const worldZ = sourceWall.start[1] + ((sourceWall.end[1] - sourceWall.start[1]) * localX) / sourceLength
+    const worldX =
+      sourceWall.start[0] + ((sourceWall.end[0] - sourceWall.start[0]) * localX) / sourceLength
+    const worldZ =
+      sourceWall.start[1] + ((sourceWall.end[1] - sourceWall.start[1]) * localX) / sourceLength
     const nextLocalX = Math.max(
       0,
-      Math.min(mergedLength, (worldX - mergedStart[0]) * tangentX + (worldZ - mergedStart[1]) * tangentZ),
+      Math.min(
+        mergedLength,
+        (worldX - mergedStart[0]) * tangentX + (worldZ - mergedStart[1]) * tangentZ,
+      ),
     )
 
     updates.push({

packages/core/src/store/use-scene.ts

@@ -100,6 +100,49 @@ function normalizeStairSegmentNode(node: Record<string, unknown>) {
   return parsed.success ? parsed.data : null
 }
 
+function migrateWallSurfaceMaterials(node: Record<string, any>) {
+  const hasInterior =
+    node.interiorMaterial !== undefined || typeof node.interiorMaterialPreset === 'string'
+  const hasExterior =
+    node.exteriorMaterial !== undefined || typeof node.exteriorMaterialPreset === 'string'
+  const legacyFinish = {
+    material: node.material,
+    materialPreset: typeof node.materialPreset === 'string' ? node.materialPreset : undefined,
+  }
+
+  if (!hasInterior && !hasExterior) {
+    if (legacyFinish.material === undefined && legacyFinish.materialPreset === undefined) {
+      return node
+    }
+
+    return {
+      ...node,
+      interiorMaterial: legacyFinish.material,
+      interiorMaterialPreset: legacyFinish.materialPreset,
+      exteriorMaterial: legacyFinish.material,
+      exteriorMaterialPreset: legacyFinish.materialPreset,
+    }
+  }
+
+  if (!hasInterior) {
+    return {
+      ...node,
+      interiorMaterial: node.exteriorMaterial,
+      interiorMaterialPreset: node.exteriorMaterialPreset,
+    }
+  }
+
+  if (!hasExterior) {
+    return {
+      ...node,
+      exteriorMaterial: node.interiorMaterial,
+      exteriorMaterialPreset: node.interiorMaterialPreset,
+    }
+  }
+
+  return node
+}
+
 function migrateNodes(nodes: Record<string, any>): Record<string, AnyNode> {
   const patchedNodes = { ...nodes }
   for (const [id, node] of Object.entries(patchedNodes)) {
@@ -153,6 +196,10 @@ function migrateNodes(nodes: Record<string, any>): Record<string, AnyNode> {
         patchedNodes[id] = normalized
       }
     }
+
+    if (node.type === 'wall') {
+      patchedNodes[id] = migrateWallSurfaceMaterials(patchedNodes[id])
+    }
   }
   return patchedNodes as Record<string, AnyNode>
 }

packages/core/src/systems/wall/wall-system.tsx

@@ -7,20 +7,30 @@ import { spatialGridManager } from '../../hooks/spatial-grid/spatial-grid-manage
 import { resolveLevelId } from '../../hooks/spatial-grid/spatial-grid-sync'
 import type { AnyNode, AnyNodeId, WallNode } from '../../schema'
 import useScene from '../../store/use-scene'
-import { DEFAULT_WALL_HEIGHT, getWallPlanFootprint, getWallThickness } from './wall-footprint'
 import { getWallCurveFrameAt, getWallSurfacePolygon, isCurvedWall } from './wall-curve'
+import { DEFAULT_WALL_HEIGHT, getWallPlanFootprint, getWallThickness } from './wall-footprint'
 import {
   calculateLevelMiters,
   getAdjacentWallIds,
   getWallMiterBoundaryPoints,
   type Point2D,
-  type WallMiterData,
   pointToKey,
+  type WallMiterData,
 } from './wall-mitering'
 
 // Reusable CSG evaluator for better performance
 const csgEvaluator = new Evaluator()
 const CURVED_WALL_3D_ENDPOINT_INSET = 0.0015
+const WALL_FACE_NORMAL_Y_EPSILON = 0.6
+const WALL_FACE_EDGE_DISTANCE_EPSILON = 0.003
+
+type WallBoundaryEdgeTag = 'front' | 'back' | 'base'
+
+type TaggedWallBoundaryEdge = {
+  start: THREE.Vector2
+  end: THREE.Vector2
+  tag: WallBoundaryEdgeTag
+}
 
 function ensureUv2Attribute(geometry: THREE.BufferGeometry) {
   const uv = geometry.getAttribute('uv')
@@ -78,6 +88,207 @@ function insetCurvedWallBoundaryPointsFor3D(
   return next
 }
 
+function addTaggedWallBoundaryEdge(
+  edges: TaggedWallBoundaryEdge[],
+  points: { x: number; z: number }[],
+  startIndex: number,
+  endIndex: number,
+  tag: WallBoundaryEdgeTag,
+) {
+  const start = points[startIndex]
+  const end = points[endIndex]
+  if (!(start && end)) return
+  if (Math.hypot(end.x - start.x, end.z - start.z) < 1e-6) return
+
+  edges.push({
+    start: new THREE.Vector2(start.x, start.z),
+    end: new THREE.Vector2(end.x, end.z),
+    tag,
+  })
+}
+
+function buildTaggedWallBoundaryEdges(
+  wall: WallNode,
+  localPoints: { x: number; z: number }[],
+  miterData: WallMiterData,
+): TaggedWallBoundaryEdge[] {
+  if (localPoints.length < 2) return []
+
+  const edges: TaggedWallBoundaryEdge[] = []
+
+  if (isCurvedWall(wall)) {
+    const sidePointCount = Math.floor(localPoints.length / 2)
+    if (sidePointCount < 2) return edges
+
+    for (let index = 0; index < sidePointCount - 1; index += 1) {
+      addTaggedWallBoundaryEdge(edges, localPoints, index, index + 1, 'back')
+    }
+
+    addTaggedWallBoundaryEdge(edges, localPoints, sidePointCount - 1, sidePointCount, 'base')
+
+    for (let index = sidePointCount; index < localPoints.length - 1; index += 1) {
+      addTaggedWallBoundaryEdge(edges, localPoints, index, index + 1, 'front')
+    }
+
+    addTaggedWallBoundaryEdge(edges, localPoints, localPoints.length - 1, 0, 'base')
+    return edges
+  }
+
+  const startKey = pointToKey({ x: wall.start[0], y: wall.start[1] })
+  const startJunction = miterData.junctionData.get(startKey)?.get(wall.id)
+  const startLeftIndex = startJunction ? localPoints.length - 2 : localPoints.length - 1
+  const endLeftIndex = startJunction ? localPoints.length - 3 : localPoints.length - 2
+
+  addTaggedWallBoundaryEdge(edges, localPoints, 0, 1, 'back')
+
+  for (let index = 1; index < endLeftIndex; index += 1) {
+    addTaggedWallBoundaryEdge(edges, localPoints, index, index + 1, 'base')
+  }
+
+  addTaggedWallBoundaryEdge(edges, localPoints, endLeftIndex, startLeftIndex, 'front')
+
+  for (let index = startLeftIndex; index < localPoints.length - 1; index += 1) {
+    addTaggedWallBoundaryEdge(edges, localPoints, index, index + 1, 'base')
+  }
+
+  addTaggedWallBoundaryEdge(edges, localPoints, localPoints.length - 1, 0, 'base')
+
+  return edges
+}
+
+function distanceToWallBoundaryEdge(point: THREE.Vector2, edge: TaggedWallBoundaryEdge): number {
+  const edgeDx = edge.end.x - edge.start.x
+  const edgeDz = edge.end.y - edge.start.y
+  const pointDx = point.x - edge.start.x
+  const pointDz = point.y - edge.start.y
+  const edgeLengthSq = edgeDx * edgeDx + edgeDz * edgeDz
+
+  if (edgeLengthSq < 1e-12) {
+    return point.distanceTo(edge.start)
+  }
+
+  const t = THREE.MathUtils.clamp((pointDx * edgeDx + pointDz * edgeDz) / edgeLengthSq, 0, 1)
+  const closestX = edge.start.x + edgeDx * t
+  const closestZ = edge.start.y + edgeDz * t
+
+  return Math.hypot(point.x - closestX, point.y - closestZ)
+}
+
+function getWallFaceMaterialIndex(
+  wall: Pick<WallNode, 'frontSide' | 'backSide'>,
+  face: 'front' | 'back',
+): 0 | 1 | 2 {
+  const semantic = face === 'front' ? wall.frontSide : wall.backSide
+  const fallback = face === 'front' ? 1 : 2
+
+  if (semantic === 'interior') return 1
+  if (semantic === 'exterior') return 2
+  return fallback
+}
+
+function assignWallMaterialGroups(
+  geometry: THREE.BufferGeometry,
+  wall: WallNode,
+  boundaryEdges: TaggedWallBoundaryEdge[],
+) {
+  const position = geometry.getAttribute('position')
+  if (!position) return
+
+  const index = geometry.getIndex()
+  const triangleCount = index ? Math.floor(index.count / 3) : Math.floor(position.count / 3)
+  if (triangleCount === 0) {
+    geometry.clearGroups()
+    return
+  }
+
+  const triangleMaterials = new Array<number>(triangleCount).fill(0)
+  const a = new THREE.Vector3()
+  const b = new THREE.Vector3()
+  const c = new THREE.Vector3()
+  const ab = new THREE.Vector3()
+  const ac = new THREE.Vector3()
+  const normal = new THREE.Vector3()
+  const centroid = new THREE.Vector3()
+  const projectedCentroid = new THREE.Vector2()
+  const maxBoundaryDistance = Math.max(
+    getWallThickness(wall) * 0.02,
+    WALL_FACE_EDGE_DISTANCE_EPSILON,
+  )
+
+  for (let triangleIndex = 0; triangleIndex < triangleCount; triangleIndex += 1) {
+    const baseIndex = triangleIndex * 3
+    const ia = index ? index.getX(baseIndex) : baseIndex
+    const ib = index ? index.getX(baseIndex + 1) : baseIndex + 1
+    const ic = index ? index.getX(baseIndex + 2) : baseIndex + 2
+
+    a.fromBufferAttribute(position, ia)
+    b.fromBufferAttribute(position, ib)
+    c.fromBufferAttribute(position, ic)
+
+    ab.subVectors(b, a)
+    ac.subVectors(c, a)
+    normal.crossVectors(ab, ac)
+
+    if (normal.lengthSq() < 1e-12) {
+      triangleMaterials[triangleIndex] = 0
+      continue
+    }
+
+    normal.normalize()
+
+    if (Math.abs(normal.y) >= WALL_FACE_NORMAL_Y_EPSILON) {
+      triangleMaterials[triangleIndex] = 0
+      continue
+    }
+
+    centroid
+      .copy(a)
+      .add(b)
+      .add(c)
+      .multiplyScalar(1 / 3)
+    projectedCentroid.set(centroid.x, centroid.z)
+
+    let nearestTag: WallBoundaryEdgeTag | null = null
+    let nearestDistance = Number.POSITIVE_INFINITY
+
+    for (const edge of boundaryEdges) {
+      const distance = distanceToWallBoundaryEdge(projectedCentroid, edge)
+      if (distance < nearestDistance) {
+        nearestDistance = distance
+        nearestTag = edge.tag
+      }
+    }
+
+    if (!nearestTag || nearestDistance > maxBoundaryDistance) {
+      triangleMaterials[triangleIndex] = 0
+      continue
+    }
+
+    if (nearestTag === 'base') {
+      triangleMaterials[triangleIndex] = 0
+      continue
+    }
+
+    triangleMaterials[triangleIndex] = getWallFaceMaterialIndex(wall, nearestTag)
+  }
+
+  geometry.clearGroups()
+
+  let currentMaterial = triangleMaterials[0] ?? 0
+  let groupStart = 0
+
+  for (let triangleIndex = 1; triangleIndex < triangleCount; triangleIndex += 1) {
+    const materialIndex = triangleMaterials[triangleIndex] ?? 0
+    if (materialIndex === currentMaterial) continue
+
+    geometry.addGroup(groupStart * 3, (triangleIndex - groupStart) * 3, currentMaterial)
+    groupStart = triangleIndex
+    currentMaterial = materialIndex
+  }
+
+  geometry.addGroup(groupStart * 3, (triangleCount - groupStart) * 3, currentMaterial)
+}
+
 // ============================================================================
 // WALL SYSTEM
 // ============================================================================
@@ -252,6 +463,7 @@ export function generateExtrudedWall(
 
   // Convert polygon to local coordinates
   const localPoints = polyPoints.map(worldToLocal)
+  const boundaryEdges = buildTaggedWallBoundaryEdges(wallNode, localPoints, miterData)
 
   // Build THREE.js shape
   // Shape uses (x, y) where we map: shape.x = local.x, shape.y = -local.z
@@ -272,6 +484,7 @@ export function generateExtrudedWall(
   // Rotate so extrusion direction (Z) becomes height direction (Y)
   geometry.rotateX(-Math.PI / 2)
   geometry.computeVertexNormals()
+  assignWallMaterialGroups(geometry, wallNode, boundaryEdges)
   ensureUv2Attribute(geometry)
 
   // Apply CSG subtraction for cutouts (doors/windows)
@@ -307,6 +520,7 @@ export function generateExtrudedWall(
 
   const resultGeometry = resultBrush.geometry
   resultGeometry.computeVertexNormals()
+  assignWallMaterialGroups(resultGeometry, wallNode, boundaryEdges)
   ensureUv2Attribute(resultGeometry)
 
   return resultGeometry