feat: Add catalog-based material presets across structural nodes (#231)

* Add catalog-based material presets across structural nodes * Fix material picker fallback and wall visible highlights * Preserve wall materials in selection highlights
2026-04-15 12:16:35 -04:00
parent f25806ee8f
commit 57df224948
67 changed files with 1458 additions and 151 deletions
@@ -38,6 +38,16 @@ export {
  wallTouchesOthers,
 } from './lib/space-detection'
 export { baseMaterial, glassMaterial } from './materials'
+export {
+  getCatalogMaterialById,
+  getLibraryMaterialIdFromRef,
+  getMaterialPresetByRef,
+  getMaterialsForTarget,
+  LIBRARY_MATERIAL_REF_PREFIX,
+  MATERIAL_CATALOG,
+  type MaterialCatalogItem,
+  toLibraryMaterialRef,
+} from './material-library'
 export * from './schema'
 export {
  type ControlValue,
@@ -0,0 +1,627 @@
+import {
+  type MaterialPresetPayload,
+  type MaterialTarget,
+  MaterialTarget as MaterialTargetSchema,
+} from './schema/material'
+
+export type MaterialCatalogItem = {
+  id: string
+  label: string
+  description?: string
+  targets: MaterialTarget[]
+  previewThumbnailUrl?: string
+  previewColor?: string
+  preset: MaterialPresetPayload
+}
+
+const WALL_TARGETS: MaterialTarget[] = [
+  MaterialTargetSchema.enum.wall,
+]
+
+const SLAB_TARGETS: MaterialTarget[] = [
+  MaterialTargetSchema.enum.slab,
+]
+
+const WALL_AND_SLAB_TARGETS: MaterialTarget[] = [
+  MaterialTargetSchema.enum.wall,
+  MaterialTargetSchema.enum.slab,
+]
+
+const STAIR_TARGETS: MaterialTarget[] = [
+  MaterialTargetSchema.enum.stair,
+  MaterialTargetSchema.enum['stair-segment'],
+]
+
+const STAIR_AND_FENCE_TARGETS: MaterialTarget[] = [
+  ...STAIR_TARGETS,
+  MaterialTargetSchema.enum.fence,
+]
+
+const ROOF_TARGETS: MaterialTarget[] = [
+  MaterialTargetSchema.enum.roof,
+  MaterialTargetSchema.enum['roof-segment'],
+]
+
+const CEILING_TARGETS: MaterialTarget[] = [
+  MaterialTargetSchema.enum.ceiling,
+]
+
+export const MATERIAL_CATALOG: MaterialCatalogItem[] = [
+  {
+    id: 'wall-wood1',
+    label: 'Wood',
+    description: 'Warm wood finish',
+    targets: [...WALL_TARGETS, ...SLAB_TARGETS, ...STAIR_AND_FENCE_TARGETS],
+    previewThumbnailUrl: '/material/wood1/wood1_thumbnail.webp',
+    preset: {
+      maps: {
+        albedoMap: '/material/wood1/albedoMap_basecolor.jpg',
+        normalMap: '/material/wood1/normalMap_normal.jpg',
+      },
+      mapProperties: {
+        color: '#ffffff',
+        roughness: 0.575,
+        metalness: 0,
+        repeatX: 1,
+        repeatY: 1,
+        rotation: 0,
+        wrapS: 'Repeat',
+        wrapT: 'Repeat',
+        normalScaleX: 1,
+        normalScaleY: 1,
+        emissiveIntensity: 1,
+        displacementScale: 0.02,
+        transparent: true,
+        flipY: true,
+        bumpScale: 1,
+        emissiveColor: '#000000',
+        aoMapIntensity: 1,
+        side: 0,
+        opacity: 1,
+        lightMapIntensity: 1,
+      },
+    },
+  },
+  {
+    id: 'wall-wood2',
+    label: 'Wood',
+    description: 'Textured wood finish',
+    targets: [...WALL_TARGETS, ...SLAB_TARGETS, ...STAIR_AND_FENCE_TARGETS],
+    previewThumbnailUrl: '/material/wood2/wood2_thumbnail.webp',
+    preset: {
+      maps: {
+        albedoMap: '/material/wood2/albedoMap_Wood.jpg',
+        normalMap: '/material/wood2/normalMap_Wood.jpg',
+        aoMap: '/material/wood2/aoMap_Wood.jpg',
+      },
+      mapProperties: {
+        color: '#ffffff',
+        roughness: 0.467,
+        metalness: 0,
+        repeatX: 1,
+        repeatY: 1,
+        rotation: 0,
+        wrapS: 'Repeat',
+        wrapT: 'Repeat',
+        normalScaleX: 2,
+        normalScaleY: 2,
+        emissiveIntensity: 1,
+        displacementScale: 0.02,
+        transparent: true,
+        flipY: true,
+        bumpScale: 1,
+        emissiveColor: '#000000',
+        aoMapIntensity: 2,
+        side: 0,
+        opacity: 1,
+        lightMapIntensity: 1,
+      },
+    },
+  },
+  {
+    id: 'wall-wood3',
+    label: 'Wood',
+    description: 'Knotted timber finish',
+    targets: [...WALL_TARGETS, ...SLAB_TARGETS, ...STAIR_AND_FENCE_TARGETS],
+    previewThumbnailUrl: '/material/wood3/wood3_thumbnail.webp',
+    preset: {
+      maps: {
+        albedoMap: '/material/wood3/albedoMap_knotted-timber.jpg',
+      },
+      mapProperties: {
+        color: '#ffffff',
+        roughness: 0.489,
+        metalness: 0,
+        repeatX: 1,
+        repeatY: 1,
+        rotation: 0,
+        wrapS: 'Repeat',
+        wrapT: 'Repeat',
+        normalScaleX: 0.2,
+        normalScaleY: 0.2,
+        emissiveIntensity: 1,
+        displacementScale: 0.02,
+        transparent: true,
+        flipY: true,
+        bumpScale: 1,
+        emissiveColor: '#000000',
+        aoMapIntensity: 2,
+        side: 0,
+        opacity: 1,
+        lightMapIntensity: 1,
+      },
+    },
+  },
+  {
+    id: 'wall-wood4',
+    label: 'Wood',
+    description: 'Oak stretcher finish',
+    targets: [...WALL_TARGETS, ...SLAB_TARGETS, ...STAIR_AND_FENCE_TARGETS],
+    previewThumbnailUrl: '/material/wood4/wood4_thumbnail.webp',
+    preset: {
+      maps: {
+        albedoMap: '/material/wood4/albedoMap_oak-stretcher.jpg',
+      },
+      mapProperties: {
+        color: '#ffffff',
+        roughness: 0.378,
+        metalness: 0,
+        repeatX: 1,
+        repeatY: 1,
+        rotation: 0,
+        wrapS: 'Repeat',
+        wrapT: 'Repeat',
+        normalScaleX: 1,
+        normalScaleY: 1,
+        emissiveIntensity: 1,
+        displacementScale: 0.02,
+        transparent: true,
+        flipY: true,
+        bumpScale: 1,
+        emissiveColor: '#000000',
+        aoMapIntensity: 1,
+        side: 0,
+        opacity: 1,
+        lightMapIntensity: 1,
+      },
+    },
+  },
+  {
+    id: 'wall-wood5',
+    label: 'Wood',
+    description: 'Rich grain wood finish',
+    targets: [...WALL_TARGETS, ...SLAB_TARGETS, ...STAIR_AND_FENCE_TARGETS],
+    previewThumbnailUrl: '/material/wood5/wood5_thumnail.webp',
+    preset: {
+      maps: {
+        albedoMap: '/material/wood5/albedoMap_3_base_color.webp',
+        normalMap: '/material/wood5/normalMap_3_normal.jpg',
+        aoMap: '/material/wood5/aoMap_3_ao.jpg',
+      },
+      mapProperties: {
+        color: '#ffffff',
+        roughness: 0.6,
+        metalness: 0,
+        repeatX: 1,
+        repeatY: 1,
+        rotation: 0,
+        wrapS: 'Repeat',
+        wrapT: 'Repeat',
+        normalScaleX: 1,
+        normalScaleY: 1,
+        emissiveIntensity: 1,
+        displacementScale: 0.02,
+        transparent: true,
+        flipY: true,
+        bumpScale: 1,
+        emissiveColor: '#000000',
+        aoMapIntensity: 10,
+        side: 0,
+        opacity: 1,
+        lightMapIntensity: 1,
+      },
+    },
+  },
+  {
+    id: 'wall-granite1',
+    label: 'Granite',
+    description: 'Polished granite finish',
+    targets: SLAB_TARGETS,
+    previewThumbnailUrl: '/material/granite1/granite_thumbnail.webp',
+    preset: {
+      maps: {
+        albedoMap: '/material/granite1/albedoMap_Granite.jpg',
+      },
+      mapProperties: {
+        color: '#ffffff',
+        roughness: 0.189,
+        metalness: 0,
+        repeatX: 1,
+        repeatY: 1,
+        rotation: 0,
+        wrapS: 'Repeat',
+        wrapT: 'Repeat',
+        normalScaleX: 1,
+        normalScaleY: 1,
+        emissiveIntensity: 1,
+        displacementScale: 0.02,
+        transparent: true,
+        flipY: true,
+        bumpScale: 1,
+        emissiveColor: '#000000',
+        aoMapIntensity: 1,
+        side: 0,
+        opacity: 1,
+        lightMapIntensity: 1,
+      },
+    },
+  },
+  {
+    id: 'wall-marble1',
+    label: 'Marble',
+    description: 'Smooth marble finish',
+    targets: [...SLAB_TARGETS, ...STAIR_AND_FENCE_TARGETS],
+    previewThumbnailUrl: '/material/marble1/marble1_thumbnail.webp',
+    preset: {
+      maps: {
+        albedoMap: '/material/marble1/albedoMap_marble.jpg',
+      },
+      mapProperties: {
+        color: '#ffffff',
+        roughness: 0.133,
+        metalness: 0,
+        repeatX: 1,
+        repeatY: 1,
+        rotation: 0,
+        wrapS: 'Repeat',
+        wrapT: 'Repeat',
+        normalScaleX: 1,
+        normalScaleY: 1,
+        emissiveIntensity: 1,
+        displacementScale: 0.02,
+        transparent: true,
+        flipY: true,
+        bumpScale: 1,
+        emissiveColor: '#000000',
+        aoMapIntensity: 1,
+        side: 0,
+        opacity: 1,
+        lightMapIntensity: 1,
+      },
+    },
+  },
+  {
+    id: 'wall-marble2',
+    label: 'Marble',
+    description: 'Soft marble finish',
+    targets: [...SLAB_TARGETS, ...STAIR_AND_FENCE_TARGETS],
+    previewThumbnailUrl: '/material/marble2/marble2_thumbnail.webp',
+    preset: {
+      maps: {
+        albedoMap: '/material/marble2/albedoMap_marble.jpg',
+      },
+      mapProperties: {
+        color: '#ffffff',
+        roughness: 0.122,
+        metalness: 0,
+        repeatX: 1,
+        repeatY: 1,
+        rotation: 0,
+        wrapS: 'Repeat',
+        wrapT: 'Repeat',
+        normalScaleX: 1,
+        normalScaleY: 1,
+        emissiveIntensity: 1,
+        displacementScale: 0.02,
+        transparent: true,
+        flipY: true,
+        bumpScale: 1,
+        emissiveColor: '#000000',
+        aoMapIntensity: 1,
+        side: 0,
+        opacity: 1,
+        lightMapIntensity: 1,
+      },
+    },
+  },
+  {
+    id: 'wall-parquet1',
+    label: 'Parquet',
+    description: 'Parquet wood finish',
+    targets: SLAB_TARGETS,
+    previewThumbnailUrl: '/material/parquet1/parquet_thumnail.webp',
+    preset: {
+      maps: {
+        albedoMap: '/material/parquet1/albedoMap_parquet.jpg',
+      },
+      mapProperties: {
+        color: '#ffffff',
+        roughness: 0.644,
+        metalness: 0.4,
+        repeatX: 1,
+        repeatY: 1,
+        rotation: 0,
+        wrapS: 'Repeat',
+        wrapT: 'Repeat',
+        normalScaleX: 1,
+        normalScaleY: 1,
+        emissiveIntensity: 1,
+        displacementScale: 0.02,
+        transparent: true,
+        flipY: true,
+        bumpScale: 1,
+        emissiveColor: '#000000',
+        aoMapIntensity: 1,
+        side: 0,
+        opacity: 1,
+        lightMapIntensity: 1,
+      },
+    },
+  },
+  {
+    id: 'wall-parquet2',
+    label: 'Parquet',
+    description: 'Soft parquet finish',
+    targets: SLAB_TARGETS,
+    previewThumbnailUrl: '/material/parquet2/parquet2_thumbnail.webp',
+    preset: {
+      maps: {
+        albedoMap: '/material/parquet2/albedoMap_parquet.jpg',
+      },
+      mapProperties: {
+        color: '#ffffff',
+        roughness: 0.6,
+        metalness: 0,
+        repeatX: 1,
+        repeatY: 1,
+        rotation: 0,
+        wrapS: 'Repeat',
+        wrapT: 'Repeat',
+        normalScaleX: 1,
+        normalScaleY: 1,
+        emissiveIntensity: 1,
+        displacementScale: 0.02,
+        transparent: true,
+        flipY: true,
+        bumpScale: 1,
+        emissiveColor: '#000000',
+        aoMapIntensity: 1,
+        side: 0,
+        opacity: 1,
+        lightMapIntensity: 1,
+      },
+    },
+  },
+  {
+    id: 'wall-wallpaper1',
+    label: 'Wallpaper',
+    description: 'Soft wallpaper finish',
+    targets: WALL_TARGETS,
+    previewThumbnailUrl: '/material/wallpaper1/wallpaper1_thumbnail.webp',
+    preset: {
+      maps: {
+        albedoMap: '/material/wallpaper1/albedoMap_1.webp',
+        normalMap: '/material/wallpaper1/normalMap_NormalMap.webp',
+      },
+      mapProperties: {
+        color: '#ffffff',
+        roughness: 0.911,
+        metalness: 0,
+        repeatX: 1,
+        repeatY: 1,
+        rotation: 0,
+        wrapS: 'Repeat',
+        wrapT: 'Repeat',
+        normalScaleX: 1,
+        normalScaleY: 1,
+        emissiveIntensity: 1,
+        displacementScale: 0.02,
+        transparent: true,
+        flipY: true,
+        bumpScale: 1,
+        emissiveColor: '#000000',
+        aoMapIntensity: 1,
+        side: 0,
+        opacity: 1,
+        lightMapIntensity: 1,
+      },
+    },
+  },
+  {
+    id: 'wall-wallpaper2',
+    label: 'Wallpaper',
+    description: 'Decorative wallpaper finish',
+    targets: WALL_TARGETS,
+    previewThumbnailUrl: '/material/wallpaper2/wallpaper2_thumnail.webp',
+    preset: {
+      maps: {
+        albedoMap: '/material/wallpaper2/albedoMap_5.webp',
+      },
+      mapProperties: {
+        color: '#ffffff',
+        roughness: 0.889,
+        metalness: 0.255,
+        repeatX: 1,
+        repeatY: 1,
+        rotation: 0,
+        wrapS: 'Repeat',
+        wrapT: 'Repeat',
+        normalScaleX: 1,
+        normalScaleY: 1,
+        emissiveIntensity: 1,
+        displacementScale: 0.02,
+        transparent: true,
+        flipY: true,
+        bumpScale: 1,
+        emissiveColor: '#000000',
+        aoMapIntensity: 1,
+        side: 0,
+        opacity: 1,
+        lightMapIntensity: 1,
+      },
+    },
+  },
+  {
+    id: 'wall-wallpaper3',
+    label: 'Wallpaper',
+    description: 'Patterned wallpaper finish',
+    targets: WALL_TARGETS,
+    previewThumbnailUrl: '/material/wallpaper3/wallpaper3_thumbnail.webp',
+    preset: {
+      maps: {
+        albedoMap: '/material/wallpaper3/albedoMap_wallpaper3.avif',
+      },
+      mapProperties: {
+        color: '#ffffff',
+        roughness: 0.887,
+        metalness: 0.35,
+        repeatX: 1,
+        repeatY: 1,
+        rotation: 0,
+        wrapS: 'Repeat',
+        wrapT: 'Repeat',
+        normalScaleX: 1,
+        normalScaleY: 1,
+        emissiveIntensity: 1,
+        displacementScale: 0.02,
+        transparent: true,
+        flipY: true,
+        bumpScale: 1,
+        emissiveColor: '#000000',
+        aoMapIntensity: 1,
+        side: 0,
+        opacity: 1,
+        lightMapIntensity: 1,
+      },
+    },
+  },
+  {
+    id: 'preset-white',
+    label: 'White',
+    description: 'Clean painted finish',
+    targets: [
+      ...WALL_TARGETS,
+      ...SLAB_TARGETS,
+      ...ROOF_TARGETS,
+      ...STAIR_AND_FENCE_TARGETS,
+      ...CEILING_TARGETS,
+    ],
+    previewColor: '#ffffff',
+    preset: {
+      maps: {},
+      mapProperties: {
+        color: '#ffffff',
+        roughness: 0.9,
+        metalness: 0,
+        repeatX: 1,
+        repeatY: 1,
+        rotation: 0,
+        wrapS: 'Repeat',
+        wrapT: 'Repeat',
+        normalScaleX: 1,
+        normalScaleY: 1,
+        emissiveIntensity: 1,
+        displacementScale: 0.02,
+        transparent: false,
+        flipY: true,
+        bumpScale: 1,
+        emissiveColor: '#000000',
+        aoMapIntensity: 1,
+        side: 0,
+        opacity: 1,
+        lightMapIntensity: 1,
+      },
+    },
+  },
+  {
+    id: 'preset-metal',
+    label: 'Metal',
+    description: 'Brushed metal finish',
+    targets: [...WALL_TARGETS, ...SLAB_TARGETS],
+    previewColor: '#c0c0c0',
+    preset: {
+      maps: {},
+      mapProperties: {
+        color: '#c7ccd2',
+        roughness: 0.26,
+        metalness: 0.82,
+        repeatX: 1,
+        repeatY: 1,
+        rotation: 0,
+        wrapS: 'Repeat',
+        wrapT: 'Repeat',
+        normalScaleX: 1,
+        normalScaleY: 1,
+        emissiveIntensity: 1,
+        displacementScale: 0.02,
+        transparent: false,
+        flipY: true,
+        bumpScale: 1,
+        emissiveColor: '#000000',
+        aoMapIntensity: 1,
+        side: 0,
+        opacity: 1,
+        lightMapIntensity: 1,
+      },
+    },
+  },
+  {
+    id: 'preset-glass',
+    label: 'Glass',
+    description: 'Light glass finish',
+    targets: [...WALL_TARGETS, ...SLAB_TARGETS],
+    previewColor: '#87ceeb',
+    preset: {
+      maps: {},
+      mapProperties: {
+        color: '#87ceeb',
+        roughness: 0.1,
+        metalness: 0.1,
+        repeatX: 1,
+        repeatY: 1,
+        rotation: 0,
+        wrapS: 'Repeat',
+        wrapT: 'Repeat',
+        normalScaleX: 1,
+        normalScaleY: 1,
+        emissiveIntensity: 1,
+        displacementScale: 0.02,
+        transparent: true,
+        flipY: true,
+        bumpScale: 1,
+        emissiveColor: '#000000',
+        aoMapIntensity: 1,
+        side: 2,
+        opacity: 0.3,
+        lightMapIntensity: 1,
+      },
+    },
+  },
+]
+
+export function getMaterialsForTarget(target: MaterialTarget): MaterialCatalogItem[] {
+  return MATERIAL_CATALOG.filter((item) => item.targets.includes(target))
+}
+
+export function getCatalogMaterialById(id?: string): MaterialCatalogItem | undefined {
+  if (!id) return undefined
+  return MATERIAL_CATALOG.find((item) => item.id === id)
+}
+
+export const LIBRARY_MATERIAL_REF_PREFIX = 'library:'
+
+export function toLibraryMaterialRef(id: string) {
+  return `${LIBRARY_MATERIAL_REF_PREFIX}${id}`
+}
+
+export function getLibraryMaterialIdFromRef(materialRef?: string | null) {
+  if (!materialRef) return null
+  if (!materialRef.startsWith(LIBRARY_MATERIAL_REF_PREFIX)) return null
+  return materialRef.slice(LIBRARY_MATERIAL_REF_PREFIX.length)
+}
+
+export function getMaterialPresetByRef(materialRef?: string | null): MaterialPresetPayload | null {
+  const materialId = getLibraryMaterialIdFromRef(materialRef)
+  if (!materialId) return null
+  return getCatalogMaterialById(materialId)?.preset ?? null
+}
@@ -7,11 +7,23 @@ export { type Collection, type CollectionId, generateCollectionId } from './coll
 // Material
 export {
  DEFAULT_MATERIALS,
+  MaterialMapPropertiesSchema,
+  MaterialMapsSchema,
  MaterialPreset,
+  MaterialPresetPayloadSchema,
  MaterialProperties,
  MaterialSchema,
+  MaterialTarget,
+  TextureWrapMode,
  resolveMaterial,
 } from './material'
+export type {
+  MaterialMapProperties,
+  MaterialMaps,
+  MaterialPresetPayload,
+  MaterialTarget as MaterialTargetValue,
+  TextureWrapMode as TextureWrapModeValue,
+} from './material'
 export { BuildingNode } from './nodes/building'
 export { CeilingNode } from './nodes/ceiling'
 export { DoorNode, DoorSegment } from './nodes/door'
@@ -25,6 +25,7 @@ export const MaterialProperties = z.object({
 export type MaterialProperties = z.infer<typeof MaterialProperties>

 export const MaterialSchema = z.object({
+  id: z.string().optional(),
  preset: MaterialPreset.optional(),
  properties: MaterialProperties.optional(),
  texture: z
@@ -37,6 +38,67 @@ export const MaterialSchema = z.object({
 })
 export type MaterialSchema = z.infer<typeof MaterialSchema>

+export const MaterialTarget = z.enum([
+  'wall',
+  'roof',
+  'roof-segment',
+  'stair',
+  'stair-segment',
+  'fence',
+  'slab',
+  'ceiling',
+  'door',
+  'window',
+])
+export type MaterialTarget = z.infer<typeof MaterialTarget>
+
+export const TextureWrapMode = z.enum(['Repeat', 'ClampToEdge', 'MirroredRepeat'])
+export type TextureWrapMode = z.infer<typeof TextureWrapMode>
+
+export const MaterialMapsSchema = z.object({
+  albedoMap: z.string().optional(),
+  metalnessMap: z.string().optional(),
+  roughnessMap: z.string().optional(),
+  normalMap: z.string().optional(),
+  displacementMap: z.string().optional(),
+  aoMap: z.string().optional(),
+  emissiveMap: z.string().optional(),
+  bumpMap: z.string().optional(),
+  alphaMap: z.string().optional(),
+  lightMap: z.string().optional(),
+})
+export type MaterialMaps = z.infer<typeof MaterialMapsSchema>
+
+export const MaterialMapPropertiesSchema = z.object({
+  color: z.string().default('#ffffff'),
+  roughness: z.number().min(0).max(1).default(0.5),
+  metalness: z.number().min(0).max(1).default(0),
+  repeatX: z.number().default(1),
+  repeatY: z.number().default(1),
+  rotation: z.number().default(0),
+  wrapS: TextureWrapMode.default('Repeat'),
+  wrapT: TextureWrapMode.default('Repeat'),
+  normalScaleX: z.number().default(1),
+  normalScaleY: z.number().default(1),
+  emissiveIntensity: z.number().default(1),
+  displacementScale: z.number().default(0.02),
+  transparent: z.boolean().default(false),
+  flipY: z.boolean().default(true),
+  bumpScale: z.number().default(1),
+  emissiveColor: z.string().default('#000000'),
+  aoMapIntensity: z.number().default(1),
+  side: z.number().default(0),
+  opacity: z.number().min(0).max(1).default(1),
+  lightMapIntensity: z.number().default(1),
+})
+export type MaterialMapProperties = z.infer<typeof MaterialMapPropertiesSchema>
+
+export const MaterialPresetPayloadSchema = z.object({
+  maps: MaterialMapsSchema,
+  mapProperties: MaterialMapPropertiesSchema,
+})
+export type MaterialPresetPayload = z.infer<typeof MaterialPresetPayloadSchema>
+
 export const DEFAULT_MATERIALS: Record<MaterialPreset, MaterialProperties> = {
  white: {
    color: '#ffffff',
@@ -9,6 +9,7 @@ export const CeilingNode = BaseNode.extend({
  type: nodeType('ceiling'),
  children: z.array(ItemNode.shape.id).default([]),
  material: MaterialSchema.optional(),
+  materialPreset: z.string().optional(),
  polygon: z.array(z.tuple([z.number(), z.number()])),
  holes: z.array(z.array(z.tuple([z.number(), z.number()]))).default([]),
  height: z.number().default(2.5), // Height in meters
@@ -1,6 +1,7 @@
 import dedent from 'dedent'
 import { z } from 'zod'
 import { BaseNode, nodeType, objectId } from '../base'
+import { MaterialSchema } from '../material'

 export const FenceStyle = z.enum(['slat', 'rail', 'privacy'])
 export const FenceBaseStyle = z.enum(['floating', 'grounded'])
@@ -8,6 +9,8 @@ export const FenceBaseStyle = z.enum(['floating', 'grounded'])
 export const FenceNode = BaseNode.extend({
  id: objectId('fence'),
  type: nodeType('fence'),
+  material: MaterialSchema.optional(),
+  materialPreset: z.string().optional(),
  start: z.tuple([z.number(), z.number()]),
  end: z.tuple([z.number(), z.number()]),
  height: z.number().default(1.8),
@@ -11,6 +11,7 @@ export const RoofSegmentNode = BaseNode.extend({
  id: objectId('rseg'),
  type: nodeType('roof-segment'),
  material: MaterialSchema.optional(),
+  materialPreset: z.string().optional(),
  position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
  // Rotation around Y axis in radians
  rotation: z.number().default(0),
@@ -8,6 +8,7 @@ export const RoofNode = BaseNode.extend({
  id: objectId('roof'),
  type: nodeType('roof'),
  material: MaterialSchema.optional(),
+  materialPreset: z.string().optional(),
  position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
  // Rotation around Y axis in radians
  rotation: z.number().default(0),
@@ -7,6 +7,7 @@ export const SlabNode = BaseNode.extend({
  id: objectId('slab'),
  type: nodeType('slab'),
  material: MaterialSchema.optional(),
+  materialPreset: z.string().optional(),
  polygon: z.array(z.tuple([z.number(), z.number()])),
  holes: z.array(z.array(z.tuple([z.number(), z.number()]))).default([]),
  elevation: z.number().default(0.05), // Elevation in meters
@@ -15,6 +15,7 @@ export const StairSegmentNode = BaseNode.extend({
  id: objectId('sseg'),
  type: nodeType('stair-segment'),
  material: MaterialSchema.optional(),
+  materialPreset: z.string().optional(),
  position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
  // Rotation around Y axis in radians
  rotation: z.number().default(0),
@@ -16,6 +16,7 @@ export const StairNode = BaseNode.extend({
  id: objectId('stair'),
  type: nodeType('stair'),
  material: MaterialSchema.optional(),
+  materialPreset: z.string().optional(),
  position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
  // Rotation around Y axis in radians
  rotation: z.number().default(0),
@@ -12,6 +12,7 @@ export const WallNode = BaseNode.extend({
  type: nodeType('wall'),
  children: z.array(ItemNode.shape.id).default([]),
  material: MaterialSchema.optional(),
+  materialPreset: z.string().optional(),
  thickness: z.number().optional(),
  height: z.number().optional(),
  // e.g., start/end points for path
@@ -10,6 +10,66 @@ type FencePart = {
  scale: [number, number, number]
 }

+function applyFenceUVs(geometry: THREE.BufferGeometry) {
+  const position = geometry.getAttribute('position')
+  const normal = geometry.getAttribute('normal')
+
+  if (!(position && normal)) return
+
+  const uvs = new Float32Array(position.count * 2)
+  let minX = Number.POSITIVE_INFINITY
+  let minY = Number.POSITIVE_INFINITY
+  let minZ = Number.POSITIVE_INFINITY
+  let maxX = Number.NEGATIVE_INFINITY
+  let maxY = Number.NEGATIVE_INFINITY
+  let maxZ = Number.NEGATIVE_INFINITY
+
+  for (let index = 0; index < position.count; index += 1) {
+    const px = position.getX(index)
+    const py = position.getY(index)
+    const pz = position.getZ(index)
+    minX = Math.min(minX, px)
+    minY = Math.min(minY, py)
+    minZ = Math.min(minZ, pz)
+    maxX = Math.max(maxX, px)
+    maxY = Math.max(maxY, py)
+    maxZ = Math.max(maxZ, pz)
+  }
+
+  const width = Math.max(maxX - minX, 0.001)
+  const height = Math.max(maxY - minY, 0.001)
+  const depth = Math.max(maxZ - minZ, 0.001)
+
+  for (let index = 0; index < position.count; index += 1) {
+    const px = position.getX(index)
+    const py = position.getY(index)
+    const pz = position.getZ(index)
+    const nx = Math.abs(normal.getX(index))
+    const ny = Math.abs(normal.getY(index))
+    const nz = Math.abs(normal.getZ(index))
+
+    let u = 0
+    let v = 0
+
+    if (ny >= nx && ny >= nz) {
+      u = (px - minX) / width
+      v = (pz - minZ) / depth
+    } else if (nx >= nz) {
+      u = (pz - minZ) / depth
+      v = (py - minY) / height
+    } else {
+      u = (px - minX) / width
+      v = (py - minY) / height
+    }
+
+    uvs[index * 2] = u
+    uvs[index * 2 + 1] = v
+  }
+
+  geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2))
+  geometry.setAttribute('uv2', new THREE.Float32BufferAttribute(uvs.slice(), 2))
+}
+
 function getStyleDefaults(style: FenceNode['style']) {
  if (style === 'privacy') {
    return { spacingFactor: 0.42, postFactor: 1.35, baseFactor: 1.2, topFactor: 1.2 }
@@ -103,6 +163,7 @@ function generateFenceGeometry(fence: FenceNode) {

  const merged = mergeGeometries(geometries, false) ?? new THREE.BufferGeometry()
  geometries.forEach((geometry) => geometry.dispose())
+  applyFenceUVs(merged)
  merged.computeVertexNormals()
  return merged
 }
@@ -18,6 +18,13 @@ import {
 // Reusable CSG evaluator for better performance
 const csgEvaluator = new Evaluator()

+function ensureUv2Attribute(geometry: THREE.BufferGeometry) {
+  const uv = geometry.getAttribute('uv')
+  if (!uv) return
+
+  geometry.setAttribute('uv2', new THREE.Float32BufferAttribute(Array.from(uv.array), 2))
+}
+
 // ============================================================================
 // WALL SYSTEM
 // ============================================================================
@@ -205,6 +212,7 @@ export function generateExtrudedWall(
  // Rotate so extrusion direction (Z) becomes height direction (Y)
  geometry.rotateX(-Math.PI / 2)
  geometry.computeVertexNormals()
+  ensureUv2Attribute(geometry)

  // Apply CSG subtraction for cutouts (doors/windows)
  const cutoutBrushes = collectCutoutBrushes(wallNode, childrenNodes, thickness)
@@ -239,6 +247,7 @@ export function generateExtrudedWall(

  const resultGeometry = resultBrush.geometry
  resultGeometry.computeVertexNormals()
+  ensureUv2Attribute(resultGeometry)

  return resultGeometry
 }