Refactor material catalog for roofing and flooring

2026-05-20 00:52:01 +00:00
parent a3378a666d
commit a9d26239b7
45 changed files with 118 additions and 191 deletions
@@ -40,14 +40,7 @@ const ROOF_TARGETS: MaterialTarget[] = [

 const CEILING_TARGETS: MaterialTarget[] = [MaterialTargetSchema.enum.ceiling]

-export const MATERIAL_CATEGORIES = [
-  'wood',
-  'wallpaper',
-  'parquet',
-  'granite',
-  'marble',
-  'other',
-] as const
+export const MATERIAL_CATEGORIES = ['wood', 'flooring', 'roof', 'other'] as const
 export type MaterialCategory = (typeof MATERIAL_CATEGORIES)[number]

 export const MATERIAL_CATALOG: MaterialCatalogItem[] = [
@@ -227,19 +220,23 @@ export const MATERIAL_CATALOG: MaterialCatalogItem[] = [
    },
  },
  {
-    id: 'wall-granite1',
-    label: 'Granite',
-    category: 'granite',
-    description: 'Polished granite finish',
-    previewThumbnailUrl: '/material/granite1/granite_thumbnail.webp',
+    id: 'roof-classicshingles',
+    label: 'Classic Shingles',
+    category: 'roof',
+    description: 'Classic roof shingle finish',
+    previewThumbnailUrl: '/material/roof_shingles_classic/roof_shingles_classic_basecolor.webp',
    preset: {
      maps: {
-        albedoMap: '/material/granite1/albedoMap_Granite.jpg',
+        albedoMap: '/material/roof_shingles_classic/roof_shingles_classic_basecolor.webp',
+        aoMap: '/material/roof_shingles_classic/roof_shingles_classic_ambientocclusion.webp',
+        metalnessMap: '/material/roof_shingles_classic/roof_shingles_classic_metallic.webp',
+        normalMap: '/material/roof_shingles_classic/roof_shingles_classic_normal.webp',
+        roughnessMap: '/material/roof_shingles_classic/roof_shingles_classic_roughness.webp',
      },
      mapProperties: {
        color: '#ffffff',
-        roughness: 0.189,
-        metalness: 0,
+        roughness: 1,
+        metalness: 0.15,
        repeatX: 1,
        repeatY: 1,
        rotation: 0,
@@ -248,8 +245,8 @@ export const MATERIAL_CATALOG: MaterialCatalogItem[] = [
        normalScaleX: 1,
        normalScaleY: 1,
        emissiveIntensity: 1,
-        displacementScale: 0.02,
-        transparent: true,
+        displacementScale: 0,
+        transparent: false,
        flipY: true,
        bumpScale: 1,
        emissiveColor: '#000000',
@@ -261,19 +258,23 @@ export const MATERIAL_CATALOG: MaterialCatalogItem[] = [
    },
  },
  {
-    id: 'wall-marble1',
-    label: 'Marble',
-    category: 'marble',
-    description: 'Smooth marble finish',
-    previewThumbnailUrl: '/material/marble1/marble1_thumbnail.webp',
+    id: 'roof-claytiles',
+    label: 'Clay Tiles',
+    category: 'roof',
+    description: 'Clay roof tile finish',
+    previewThumbnailUrl: '/material/roof_tiles_clay/roof_tiles_clay_basecolor.webp',
    preset: {
      maps: {
-        albedoMap: '/material/marble1/albedoMap_marble.jpg',
+        albedoMap: '/material/roof_tiles_clay/roof_tiles_clay_basecolor.webp',
+        aoMap: '/material/roof_tiles_clay/roof_tiles_clay_ambientocclusion.webp',
+        metalnessMap: '/material/roof_tiles_clay/roof_tiles_clay_metallic.png',
+        normalMap: '/material/roof_tiles_clay/roof_tiles_clay_normal.webp',
+        roughnessMap: '/material/roof_tiles_clay/roof_tiles_clay_roughness.webp',
      },
      mapProperties: {
        color: '#ffffff',
-        roughness: 0.133,
-        metalness: 0,
+        roughness: 1,
+        metalness: 0.1,
        repeatX: 1,
        repeatY: 1,
        rotation: 0,
@@ -282,8 +283,8 @@ export const MATERIAL_CATALOG: MaterialCatalogItem[] = [
        normalScaleX: 1,
        normalScaleY: 1,
        emissiveIntensity: 1,
-        displacementScale: 0.02,
-        transparent: true,
+        displacementScale: 0,
+        transparent: false,
        flipY: true,
        bumpScale: 1,
        emissiveColor: '#000000',
@@ -295,19 +296,23 @@ export const MATERIAL_CATALOG: MaterialCatalogItem[] = [
    },
  },
  {
-    id: 'wall-marble2',
-    label: 'Marble',
-    category: 'marble',
-    description: 'Soft marble finish',
-    previewThumbnailUrl: '/material/marble2/marble2_thumbnail.webp',
+    id: 'roof-terracottatiles',
+    label: 'Terracotta Tiles',
+    category: 'roof',
+    description: 'Terracotta roof tile finish',
+    previewThumbnailUrl: '/material/roof_tiles_terracotta/roof_tiles_terracotta_basecolor.webp',
    preset: {
      maps: {
-        albedoMap: '/material/marble2/albedoMap_marble.jpg',
+        albedoMap: '/material/roof_tiles_terracotta/roof_tiles_terracotta_basecolor.webp',
+        aoMap: '/material/roof_tiles_terracotta/roof_tiles_terracotta_ambientocclusion.webp',
+        metalnessMap: '/material/roof_tiles_terracotta/roof_tiles_terracotta_metallic.webp',
+        normalMap: '/material/roof_tiles_terracotta/roof_tiles_terracotta_normal.webp',
+        roughnessMap: '/material/roof_tiles_terracotta/roof_tiles_terracotta_roughness.webp',
      },
      mapProperties: {
        color: '#ffffff',
-        roughness: 0.122,
-        metalness: 0,
+        roughness: 1,
+        metalness: 0.1,
        repeatX: 1,
        repeatY: 1,
        rotation: 0,
@@ -316,8 +321,8 @@ export const MATERIAL_CATALOG: MaterialCatalogItem[] = [
        normalScaleX: 1,
        normalScaleY: 1,
        emissiveIntensity: 1,
-        displacementScale: 0.02,
-        transparent: true,
+        displacementScale: 0,
+        transparent: false,
        flipY: true,
        bumpScale: 1,
        emissiveColor: '#000000',
@@ -329,19 +334,23 @@ export const MATERIAL_CATALOG: MaterialCatalogItem[] = [
    },
  },
  {
-    id: 'wall-parquet1',
-    label: 'Parquet',
-    category: 'parquet',
-    description: 'Parquet wood finish',
-    previewThumbnailUrl: '/material/parquet1/parquet_thumnail.webp',
+    id: 'roof-weatheredshingles',
+    label: 'Weathered Shingles',
+    category: 'roof',
+    description: 'Weathered roof shingle finish',
+    previewThumbnailUrl: '/material/roof_shingles_weathered/roof_shingles_weathered_basecolor.webp',
    preset: {
      maps: {
-        albedoMap: '/material/parquet1/albedoMap_parquet.jpg',
+        albedoMap: '/material/roof_shingles_weathered/roof_shingles_weathered_basecolor.webp',
+        aoMap: '/material/roof_shingles_weathered/roof_shingles_weathered_ambientocclusion.webp',
+        metalnessMap: '/material/roof_shingles_weathered/roof_shingles_weathered_metallic.webp',
+        normalMap: '/material/roof_shingles_weathered/roof_shingles_weathered_normal.webp',
+        roughnessMap: '/material/roof_shingles_weathered/roof_shingles_weathered_roughness.webp',
      },
      mapProperties: {
        color: '#ffffff',
-        roughness: 0.644,
-        metalness: 0.4,
+        roughness: 1,
+        metalness: 0.1,
        repeatX: 1,
        repeatY: 1,
        rotation: 0,
@@ -350,145 +359,8 @@ export const MATERIAL_CATALOG: MaterialCatalogItem[] = [
        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',
-    category: 'parquet',
-    description: 'Soft parquet finish',
-    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',
-    category: 'wallpaper',
-    description: 'Soft wallpaper finish',
-    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',
-    category: 'wallpaper',
-    description: 'Decorative wallpaper finish',
-    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',
-    category: 'wallpaper',
-    description: 'Patterned wallpaper finish',
-    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,
+        displacementScale: 0,
+        transparent: false,
        flipY: true,
        bumpScale: 1,
        emissiveColor: '#000000',
@@ -22,6 +22,11 @@ type MaterialPickerProps = {
  hideSideControl?: boolean
 }

+function getCategoryLabel(category: (typeof MATERIAL_CATEGORIES)[number]) {
+  if (category === 'roof') return 'Roofing'
+  return category.charAt(0).toUpperCase() + category.slice(1)
+}
+
 export function MaterialPicker({
  value,
  selectedMaterialPreset,
@@ -156,7 +161,7 @@ export function MaterialPicker({
                  }}
                  type="button"
                >
-                  {category.charAt(0).toUpperCase() + category.slice(1)}
+                  {getCategoryLabel(category)}
                </button>
              ))}
            </div>
@@ -53,6 +53,14 @@ type TextureSlot =

 const SRGB_TEXTURE_SLOTS: TextureSlot[] = ['map', 'emissiveMap']

+function getTextureChannel(slot?: TextureSlot): number {
+  if (slot === 'aoMap' || slot === 'lightMap') {
+    return 2
+  }
+
+  return 0
+}
+
 function getCacheKey(props: MaterialProperties): string {
  return `${props.color}-${props.roughness}-${props.metalness}-${props.opacity}-${props.transparent}-${props.side}`
 }
@@ -102,6 +110,7 @@ function applyTextureProperties(
  texture.repeat.set(props.repeatX, props.repeatY)
  texture.rotation = props.rotation
  texture.flipY = props.flipY
+  texture.channel = getTextureChannel(slot)
  texture.colorSpace = SRGB_TEXTURE_SLOTS.includes(slot ?? 'map')
    ? THREE.SRGBColorSpace
    : THREE.NoColorSpace
@@ -44,6 +44,9 @@ const _quaternion = new THREE.Quaternion()
 const _scale = new THREE.Vector3(1, 1, 1)
 const _yAxis = new THREE.Vector3(0, 1, 0)
 const _uvFaceNormal = new THREE.Vector3()
+const _uvWorldDown = new THREE.Vector3(0, -1, 0)
+const _uvDownSlope = new THREE.Vector3()
+const _uvAcrossSlope = new THREE.Vector3()

 // Pending merged-roof updates carried across frames (for throttling)
 const pendingRoofUpdates = new Set<AnyNodeId>()
@@ -968,6 +971,28 @@ function createGeometryFromFaces(
    const vA = new THREE.Vector3().subVectors(p1, p0)
    const vB = new THREE.Vector3().subVectors(p2, p0)
    const normal = new THREE.Vector3().crossVectors(vA, vB).normalize()
+    let slopeAlignedDown: THREE.Vector3 | null = null
+    let slopeAlignedAcross: THREE.Vector3 | null = null
+    let slopeAlignedVOrigin = 0
+
+    if (normal.y > SHINGLE_SURFACE_EPSILON) {
+      _uvDownSlope.copy(_uvWorldDown).projectOnPlane(normal)
+      if (_uvDownSlope.lengthSq() > 1e-8) {
+        _uvDownSlope.normalize()
+        _uvAcrossSlope.crossVectors(_uvDownSlope, normal).normalize()
+
+        let highestPoint = face[0]!
+        for (const candidate of face) {
+          if (candidate.y > highestPoint.y) {
+            highestPoint = candidate
+          }
+        }
+
+        slopeAlignedDown = _uvDownSlope.clone()
+        slopeAlignedAcross = _uvAcrossSlope.clone()
+        slopeAlignedVOrigin = highestPoint.dot(slopeAlignedDown)
+      }
+    }

    let assignedMatIndex = 0
    if (typeof matRule === 'function') {
@@ -993,9 +1018,15 @@ function createGeometryFromFaces(
      normals.push(normal.x, normal.y, normal.z)
      normals.push(normal.x, normal.y, normal.z)

-      pushRoofUv(uvs, p0, normal)
-      pushRoofUv(uvs, fi, normal)
-      pushRoofUv(uvs, fi1, normal)
+      if (slopeAlignedDown && slopeAlignedAcross) {
+        uvs.push(p0.dot(slopeAlignedAcross), slopeAlignedVOrigin - p0.dot(slopeAlignedDown))
+        uvs.push(fi.dot(slopeAlignedAcross), slopeAlignedVOrigin - fi.dot(slopeAlignedDown))
+        uvs.push(fi1.dot(slopeAlignedAcross), slopeAlignedVOrigin - fi1.dot(slopeAlignedDown))
+      } else {
+        pushRoofUv(uvs, p0, normal)
+        pushRoofUv(uvs, fi, normal)
+        pushRoofUv(uvs, fi1, normal)
+      }

      indices.push(vertexCount, vertexCount + 1, vertexCount + 2)

@@ -1040,12 +1071,22 @@ function pushRoofUv(uvs: number[], point: THREE.Vector3, normal: THREE.Vector3)
    return
  }

+  if (_uvFaceNormal.y > SHINGLE_SURFACE_EPSILON) {
+    _uvDownSlope.copy(_uvWorldDown).projectOnPlane(_uvFaceNormal)
+    if (_uvDownSlope.lengthSq() > 1e-8) {
+      _uvDownSlope.normalize()
+      _uvAcrossSlope.crossVectors(_uvDownSlope, _uvFaceNormal).normalize()
+      uvs.push(point.dot(_uvAcrossSlope), point.dot(_uvDownSlope))
+      return
+    }
+  }
+
  if (absX >= absZ) {
-    uvs.push(point.z, point.y)
+    uvs.push(_uvFaceNormal.x >= 0 ? point.z : -point.z, -point.y)
    return
  }

-  uvs.push(point.x, point.y)
+  uvs.push(_uvFaceNormal.z >= 0 ? point.x : -point.x, -point.y)
 }

 function ensureUv2Attribute(geometry: THREE.BufferGeometry) {