@marble.fun/track-catalog 3.0.0

package/src/three/theme-material-registry.ts

@@ -0,0 +1,1952 @@
+import * as THREE from 'three'
+
+import type {
+  MaterialPatternRecipe,
+  MaterialRecipe,
+  ThemeMaterialSlot,
+  TrackAppearanceCanopyStyle,
+  TrackAppearanceDetailStyle,
+  TrackAppearancePreset,
+  TrackAppearanceSupportStyle,
+  TrackAppearanceSurface,
+  TrackThemeDefinition,
+} from './track-theme'
+import {
+  createThemeMaterialTexture,
+  releaseThemeMaterialTexture,
+  themeMaterialRecipeUrls,
+} from './theme-material-assets'
+import { resolvedFloorMaterialIdForTheme } from './railroad-appearance'
+
+interface MaterialBinding {
+  mesh: THREE.Mesh
+  slot: ThemeMaterialSlot
+  materialIndex?: number
+}
+
+interface AppearanceMaterialBinding {
+  mesh: THREE.Mesh
+  presetId: string
+  fallbackSlot: ThemeMaterialSlot
+  materialIndex?: number
+  resolveFloorByTheme?: boolean
+}
+
+type ThemeVisualBinding = THREE.Object3D & {
+  userData: {
+    applySemanticTheme?: (theme: TrackThemeDefinition) => void
+  }
+}
+
+export class ThemeMaterialRegistry {
+  private readonly materials = new Map<ThemeMaterialSlot, THREE.Material>()
+  private readonly appearanceMaterials = new Map<string, THREE.Material>()
+  private readonly bindings = new Set<MaterialBinding>()
+  private readonly appearanceBindings = new Set<AppearanceMaterialBinding>()
+  private readonly bindingIndex = new WeakMap<THREE.Mesh, Map<number, MaterialBinding>>()
+  private readonly appearanceBindingIndex = new WeakMap<THREE.Mesh, Map<number, AppearanceMaterialBinding>>()
+  private readonly visibilityBindings = new Set<THREE.Object3D>()
+  private readonly semanticThemeBindings = new Set<ThemeVisualBinding>()
+  private disposed = false
+
+  constructor(private theme: TrackThemeDefinition) {}
+
+  get activeTheme(): TrackThemeDefinition {
+    return this.theme
+  }
+
+  get(slot: ThemeMaterialSlot): THREE.Material {
+    this.assertActive()
+    const current = this.materials.get(slot)
+    if (current) return current
+    const recipe = this.theme.materials[slot]
+    if (!recipe) throw new Error(`Theme "${this.theme.id}" does not define material slot "${slot}".`)
+    const material = createMaterial(slot, recipe)
+    this.materials.set(slot, material)
+    return material
+  }
+
+  requestedAssetUrls(theme: TrackThemeDefinition = this.theme): readonly string[] {
+    const urls = new Set<string>()
+    for (const slot of this.materials.keys()) {
+      themeMaterialRecipeUrls(theme.materials[slot]).forEach(url => urls.add(url))
+    }
+    for (const key of this.appearanceMaterials.keys()) {
+      const appearance = parseAppearanceMaterialKey(key)
+      const recipe = findAppearanceRecipe(theme, appearance.presetId) ?? theme.materials[appearance.fallbackSlot]
+      themeMaterialRecipeUrls(recipe).forEach(url => urls.add(url))
+    }
+    return [...urls]
+  }
+
+  get requestedTextures(): readonly THREE.Texture[] {
+    const textures = new Set<THREE.Texture>()
+    this.materials.forEach(material => collectTextures(material, textures))
+    this.appearanceMaterials.forEach(material => collectTextures(material, textures))
+    return [...textures]
+  }
+
+  async ready(): Promise<void> {
+    await Promise.all(
+      this.requestedTextures.map(texture =>
+        Promise.resolve(texture.userData.themeAssetReady as Promise<void> | undefined),
+      ),
+    )
+  }
+
+  async preUpload(renderer: THREE.WebGLRenderer, sliceMilliseconds = 4): Promise<void> {
+    await this.ready()
+    let sliceStartedAt = performance.now()
+    for (const texture of this.requestedTextures) {
+      renderer.initTexture(texture)
+      if (performance.now() - sliceStartedAt < sliceMilliseconds) continue
+      await new Promise<void>(resolve => requestAnimationFrame(() => resolve()))
+      sliceStartedAt = performance.now()
+    }
+  }
+
+  getAppearance(presetId: string | undefined, fallbackSlot: ThemeMaterialSlot): THREE.Material {
+    this.assertActive()
+    if (!presetId) return this.get(fallbackSlot)
+    const recipe = findAppearanceRecipe(this.theme, presetId)
+    const key = appearanceMaterialKey(presetId, fallbackSlot)
+    const current = this.appearanceMaterials.get(key)
+    if (current) return current
+    const material = createAppearanceMaterial(
+      presetId,
+      fallbackSlot,
+      recipe ?? this.theme.materials[fallbackSlot],
+      findAppearancePreset(this.theme, presetId)?.canopyStyle,
+      findAppearancePreset(this.theme, presetId)?.supportStyle,
+    )
+    this.appearanceMaterials.set(key, material)
+    return material
+  }
+
+  getAppearanceRecipe(presetId: string | undefined, fallbackSlot: ThemeMaterialSlot): MaterialRecipe {
+    this.assertActive()
+    return (presetId ? findAppearanceRecipe(this.theme, presetId) : undefined) ?? this.theme.materials[fallbackSlot]
+  }
+
+  getAppearancePresets(surface: TrackAppearanceSurface): readonly TrackAppearancePreset[] {
+    return this.theme.appearancePresets?.[surface] ?? []
+  }
+
+  getAppearanceDetailStyle(presetId: string | undefined): TrackAppearanceDetailStyle | undefined {
+    return presetId ? findAppearancePreset(this.theme, presetId)?.detailStyle : undefined
+  }
+
+  getAppearanceCanopyStyle(presetId: string | undefined): TrackAppearanceCanopyStyle | undefined {
+    return presetId ? findAppearancePreset(this.theme, presetId)?.canopyStyle : undefined
+  }
+
+  bind(mesh: THREE.Mesh, slot: ThemeMaterialSlot, materialIndex?: number): void {
+    this.assertActive()
+    assignMaterial(mesh, this.get(slot), materialIndex)
+    applyHolographicFloorShadowPolicy(mesh)
+    mesh.userData.materialSlot = slot
+    applyThemeVisibility(mesh, this.theme.id)
+    if (hasThemeVisibility(mesh)) this.visibilityBindings.add(mesh)
+    this.rememberBinding({ mesh, slot, materialIndex })
+  }
+
+  bindAppearance(
+    mesh: THREE.Mesh,
+    presetId: string | undefined,
+    fallbackSlot: ThemeMaterialSlot,
+    materialIndex?: number,
+  ): void {
+    if (!presetId) {
+      this.bind(mesh, fallbackSlot, materialIndex)
+      return
+    }
+    this.assertActive()
+    const appearanceMaterial = this.getAppearance(presetId, fallbackSlot)
+    if (appearanceMaterial === this.get(fallbackSlot)) {
+      this.bind(mesh, fallbackSlot, materialIndex)
+      return
+    }
+    assignMaterial(mesh, appearanceMaterial, materialIndex)
+    applyHolographicFloorShadowPolicy(mesh)
+    mesh.userData.appearanceMaterialId = presetId
+    // Appearance bindings still occupy a semantic fallback slot. Keeping the
+    // slot on the mesh makes editor selection, diagnostics, and material QA
+    // independent of whether a theme supplies a dedicated preset recipe.
+    mesh.userData.materialSlot = fallbackSlot
+    applyThemeVisibility(mesh, this.theme.id)
+    if (hasThemeVisibility(mesh)) this.visibilityBindings.add(mesh)
+    this.rememberAppearanceBinding({ mesh, presetId, fallbackSlot, materialIndex })
+  }
+
+  captureBindings(root: THREE.Object3D): void {
+    this.assertActive()
+    const slotsByMaterial = new Map([...this.materials.entries()].map(([slot, material]) => [material, slot]))
+    const appearancesByMaterial = new Map(
+      [...this.appearanceMaterials.entries()].map(([key, material]) => [material, parseAppearanceMaterialKey(key)]),
+    )
+
+    root.traverse(object => {
+      if (typeof object.userData.applySemanticTheme === 'function') {
+        this.semanticThemeBindings.add(object as ThemeVisualBinding)
+      }
+      applyThemeVisibility(object, this.theme.id)
+      if (hasThemeVisibility(object)) this.visibilityBindings.add(object)
+      if (!(object instanceof THREE.Mesh)) return
+      const meshMaterials = Array.isArray(object.material) ? object.material : [object.material]
+      meshMaterials.forEach((material, materialIndex) => {
+        const appearance = appearancesByMaterial.get(material)
+        if (appearance) {
+          object.userData.appearanceMaterialId ??= appearance.presetId
+          object.userData.materialSlot ??= appearance.fallbackSlot
+          this.rememberAppearanceBinding({
+            mesh: object,
+            ...appearance,
+            ...(Array.isArray(object.material) ? { materialIndex } : {}),
+          })
+          return
+        }
+        const slot = slotsByMaterial.get(material)
+        if (!slot) return
+        object.userData.materialSlot ??= slot
+        this.rememberBinding({
+          mesh: object,
+          slot,
+          ...(Array.isArray(object.material) ? { materialIndex } : {}),
+        })
+      })
+      applyHolographicFloorShadowPolicy(object)
+    })
+  }
+
+  /**
+   * Keeps an authored floor choice live across theme changes while assigning
+   * the current theme's matching geometry-family recipe. This lets a stale
+   * sand/plank id render coherently now and recover its exact authored recipe
+   * if that theme is selected later.
+   */
+  rebindFloorAppearanceForTheme(root: THREE.Object3D, authoredPresetId: string | undefined): void {
+    if (!authoredPresetId) return
+    this.assertActive()
+    const resolvedPresetId = resolvedFloorMaterialIdForTheme(this.theme, authoredPresetId)
+    const material = resolvedPresetId
+      ? this.getAppearance(resolvedPresetId, 'lane.surface')
+      : this.get('lane.surface')
+
+    root.traverse(object => {
+      if (!(object instanceof THREE.Mesh)) return
+      const meshMaterials = Array.isArray(object.material) ? object.material : [object.material]
+      meshMaterials.forEach((_meshMaterial, materialIndex) => {
+        const key = Array.isArray(object.material) ? materialIndex : -1
+        const slot = this.bindingIndex.get(object)?.get(key)?.slot
+        const appearanceSlot = this.appearanceBindingIndex.get(object)?.get(key)?.fallbackSlot
+        if (slot !== 'lane.surface' && appearanceSlot !== 'lane.surface') return
+        assignMaterial(object, material, Array.isArray(object.material) ? materialIndex : undefined)
+        object.userData.appearanceMaterialId = authoredPresetId
+        object.userData.materialSlot = 'lane.surface'
+        this.rememberAppearanceBinding({
+          mesh: object,
+          presetId: authoredPresetId,
+          fallbackSlot: 'lane.surface',
+          ...(Array.isArray(object.material) ? { materialIndex } : {}),
+          resolveFloorByTheme: true,
+        })
+      })
+      applyHolographicFloorShadowPolicy(object)
+    })
+  }
+
+  /**
+   * Releases every strong mesh reference captured below `root`.
+   *
+   * Track Lab recreates its preview meshes whenever the document changes. A
+   * registry is scene-scoped and outlives those previews, so leaving their
+   * bindings registered would retain every disposed document revision and
+   * continue rebinding dead meshes on later theme changes.
+   */
+  releaseBindings(root: THREE.Object3D): void {
+    root.traverse(object => {
+      this.visibilityBindings.delete(object)
+      this.semanticThemeBindings.delete(object as ThemeVisualBinding)
+      if (!(object instanceof THREE.Mesh)) return
+
+      const bindings = this.bindingIndex.get(object)
+      if (bindings) {
+        bindings.forEach(binding => this.bindings.delete(binding))
+        this.bindingIndex.delete(object)
+      }
+      const appearanceBindings = this.appearanceBindingIndex.get(object)
+      if (appearanceBindings) {
+        appearanceBindings.forEach(binding => this.appearanceBindings.delete(binding))
+        this.appearanceBindingIndex.delete(object)
+      }
+    })
+  }
+
+  /**
+   * Moves a detached visual from a short-lived preparation registry into this
+   * scene registry without rebuilding its geometry. Material objects are
+   * rebound to this registry's active theme before the source can be disposed.
+   */
+  adoptBindingsFrom(source: ThemeMaterialRegistry, root: THREE.Object3D): void {
+    this.assertActive()
+    source.assertActive()
+    const adoptedSemanticBindings: ThemeVisualBinding[] = []
+    root.traverse(object => {
+      if (source.semanticThemeBindings.delete(object as ThemeVisualBinding)) {
+        const semantic = object as ThemeVisualBinding
+        this.semanticThemeBindings.add(semantic)
+        adoptedSemanticBindings.push(semantic)
+      }
+      if (source.visibilityBindings.delete(object)) this.visibilityBindings.add(object)
+      applyThemeVisibility(object, this.theme.id)
+      if (!(object instanceof THREE.Mesh)) return
+
+      const bindings = source.bindingIndex.get(object)
+      if (bindings) {
+        for (const [key, binding] of bindings) {
+          source.bindings.delete(binding)
+          const materialIndex = key < 0 ? undefined : key
+          assignMaterial(object, this.get(binding.slot), materialIndex)
+          this.rememberBinding({ mesh: object, slot: binding.slot, materialIndex })
+        }
+        source.bindingIndex.delete(object)
+      }
+      const appearanceBindings = source.appearanceBindingIndex.get(object)
+      if (appearanceBindings) {
+        for (const [key, binding] of appearanceBindings) {
+          source.appearanceBindings.delete(binding)
+          const materialIndex = key < 0 ? undefined : key
+          const resolvedPresetId = binding.resolveFloorByTheme
+            ? resolvedFloorMaterialIdForTheme(this.theme, binding.presetId)
+            : binding.presetId
+          const material = resolvedPresetId
+            ? this.getAppearance(resolvedPresetId, binding.fallbackSlot)
+            : this.get(binding.fallbackSlot)
+          assignMaterial(object, material, materialIndex)
+          this.rememberAppearanceBinding({ ...binding, mesh: object, materialIndex })
+        }
+        source.appearanceBindingIndex.delete(object)
+      }
+      applyHolographicFloorShadowPolicy(object)
+    })
+    // Semantic treatments can configure the material currently assigned to a
+    // mesh (for example, the canonical floor shoulder feather shader). Run
+    // them only after every source material has been replaced by this
+    // registry's live material.
+    for (const semantic of adoptedSemanticBindings) {
+      semantic.userData.applySemanticTheme?.(this.theme)
+    }
+  }
+
+  applyTheme(theme: TrackThemeDefinition): void {
+    this.assertActive()
+    const obsoleteMaterials: THREE.Material[] = []
+
+    for (const [slot, current] of this.materials) {
+      const recipe = theme.materials[slot]
+      if (canUpdateInPlace(current, recipe)) {
+        applyRecipe(current, recipe)
+        continue
+      }
+
+      const replacement = createMaterial(slot, recipe)
+      this.materials.set(slot, replacement)
+      for (const binding of this.bindings) {
+        if (binding.slot === slot) {
+          assignMaterial(binding.mesh, replacement, binding.materialIndex)
+          applyHolographicFloorShadowPolicy(binding.mesh)
+        }
+      }
+      obsoleteMaterials.push(current)
+    }
+
+    for (const [key, current] of this.appearanceMaterials) {
+      const appearance = parseAppearanceMaterialKey(key)
+      const recipe = findAppearanceRecipe(theme, appearance.presetId) ?? theme.materials[appearance.fallbackSlot]
+      if (canUpdateInPlace(current, recipe)) {
+        applyRecipe(current, recipe)
+        const preset = findAppearancePreset(theme, appearance.presetId)
+        applyAppearanceMetadata(current, preset?.canopyStyle, preset?.supportStyle)
+        continue
+      }
+      const preset = findAppearancePreset(theme, appearance.presetId)
+      const replacement = createAppearanceMaterial(
+        appearance.presetId,
+        appearance.fallbackSlot,
+        recipe,
+        preset?.canopyStyle,
+        preset?.supportStyle,
+      )
+      this.appearanceMaterials.set(key, replacement)
+      for (const binding of this.appearanceBindings) {
+        if (
+          !binding.resolveFloorByTheme &&
+          binding.presetId === appearance.presetId &&
+          binding.fallbackSlot === appearance.fallbackSlot
+        ) {
+          assignMaterial(binding.mesh, replacement, binding.materialIndex)
+          applyHolographicFloorShadowPolicy(binding.mesh)
+        }
+      }
+      obsoleteMaterials.push(current)
+    }
+
+    this.theme = theme
+    for (const binding of this.appearanceBindings) {
+      if (!binding.resolveFloorByTheme) continue
+      const resolvedPresetId = resolvedFloorMaterialIdForTheme(theme, binding.presetId)
+      const material = resolvedPresetId
+        ? this.getAppearance(resolvedPresetId, binding.fallbackSlot)
+        : this.get(binding.fallbackSlot)
+      assignMaterial(binding.mesh, material, binding.materialIndex)
+      applyHolographicFloorShadowPolicy(binding.mesh)
+    }
+    for (const object of this.semanticThemeBindings) {
+      object.userData.applySemanticTheme?.(theme)
+    }
+    for (const object of this.visibilityBindings) {
+      applyThemeVisibility(object, theme.id)
+    }
+    for (const binding of this.bindings) {
+      if (!this.visibilityBindings.has(binding.mesh)) applyThemeVisibility(binding.mesh, theme.id)
+    }
+    obsoleteMaterials.forEach(disposeMaterial)
+  }
+
+  dispose(): void {
+    if (this.disposed) return
+    this.disposed = true
+    this.materials.forEach(disposeMaterial)
+    this.appearanceMaterials.forEach(disposeMaterial)
+    this.materials.clear()
+    this.appearanceMaterials.clear()
+    this.bindings.clear()
+    this.appearanceBindings.clear()
+    this.visibilityBindings.clear()
+    this.semanticThemeBindings.clear()
+  }
+
+  private assertActive(): void {
+    if (this.disposed) throw new Error('ThemeMaterialRegistry has been disposed.')
+  }
+
+  private rememberBinding(binding: MaterialBinding): void {
+    const key = binding.materialIndex ?? -1
+    const bindings = this.bindingIndex.get(binding.mesh) ?? new Map<number, MaterialBinding>()
+    const current = bindings.get(key)
+    if (current?.slot === binding.slot) return
+    if (current) this.bindings.delete(current)
+    this.forgetAppearanceBinding(binding.mesh, key)
+    bindings.set(key, binding)
+    this.bindingIndex.set(binding.mesh, bindings)
+    this.bindings.add(binding)
+  }
+
+  private rememberAppearanceBinding(binding: AppearanceMaterialBinding): void {
+    const key = binding.materialIndex ?? -1
+    const bindings = this.appearanceBindingIndex.get(binding.mesh) ?? new Map<number, AppearanceMaterialBinding>()
+    const current = bindings.get(key)
+    if (
+      current?.presetId === binding.presetId &&
+      current.fallbackSlot === binding.fallbackSlot &&
+      current.resolveFloorByTheme === binding.resolveFloorByTheme
+    ) {
+      return
+    }
+    if (current) this.appearanceBindings.delete(current)
+    this.forgetBinding(binding.mesh, key)
+    bindings.set(key, binding)
+    this.appearanceBindingIndex.set(binding.mesh, bindings)
+    this.appearanceBindings.add(binding)
+  }
+
+  private forgetBinding(mesh: THREE.Mesh, key: number): void {
+    const bindings = this.bindingIndex.get(mesh)
+    const current = bindings?.get(key)
+    if (!bindings || !current) return
+    this.bindings.delete(current)
+    bindings.delete(key)
+    if (bindings.size === 0) this.bindingIndex.delete(mesh)
+  }
+
+  private forgetAppearanceBinding(mesh: THREE.Mesh, key: number): void {
+    const bindings = this.appearanceBindingIndex.get(mesh)
+    const current = bindings?.get(key)
+    if (!bindings || !current) return
+    this.appearanceBindings.delete(current)
+    bindings.delete(key)
+    if (bindings.size === 0) this.appearanceBindingIndex.delete(mesh)
+  }
+}
+
+function applyHolographicFloorShadowPolicy(mesh: THREE.Mesh): void {
+  const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material]
+  const usesHolographicFloor = materials.some(material => material.userData.themeHolographicHoverGrid === true)
+  const originalKey = 'themeCastShadowBeforeHolographicFloor'
+  if (usesHolographicFloor) {
+    if (mesh.userData[originalKey] === undefined) mesh.userData[originalKey] = mesh.castShadow
+    mesh.castShadow = false
+    return
+  }
+  const original = mesh.userData[originalKey]
+  if (typeof original === 'boolean') mesh.castShadow = original
+  delete mesh.userData[originalKey]
+}
+
+function appearanceMaterialKey(presetId: string, fallbackSlot: ThemeMaterialSlot): string {
+  return `${fallbackSlot}\u0000${presetId}`
+}
+
+function parseAppearanceMaterialKey(key: string): { presetId: string; fallbackSlot: ThemeMaterialSlot } {
+  const separator = key.indexOf('\u0000')
+  return {
+    fallbackSlot: key.slice(0, separator) as ThemeMaterialSlot,
+    presetId: key.slice(separator + 1),
+  }
+}
+
+function findAppearancePreset(theme: TrackThemeDefinition, presetId: string): TrackAppearancePreset | undefined {
+  return [
+    ...(theme.appearancePresets?.floor ?? []),
+    ...(theme.appearancePresets?.wall ?? []),
+    ...(theme.appearancePresets?.rail ?? []),
+    ...(theme.appearancePresets?.support ?? []),
+  ].find(preset => preset.id === presetId)
+}
+
+function findAppearanceRecipe(theme: TrackThemeDefinition, presetId: string): MaterialRecipe | undefined {
+  return theme.detailMaterials?.[presetId] ?? findAppearancePreset(theme, presetId)?.material
+}
+
+function createMaterial(slot: ThemeMaterialSlot, recipe: MaterialRecipe): THREE.Material {
+  const material =
+    recipe.kind === 'physical'
+      ? new THREE.MeshPhysicalMaterial()
+      : recipe.kind === 'toon'
+        ? new THREE.MeshToonMaterial()
+        : new THREE.MeshStandardMaterial()
+  material.name = `theme:${slot}`
+  material.userData.themeRegistryManaged = true
+  applyRecipe(material, recipe)
+  return material
+}
+
+function createAppearanceMaterial(
+  presetId: string,
+  fallbackSlot: ThemeMaterialSlot,
+  recipe: MaterialRecipe,
+  canopyStyle?: TrackAppearanceCanopyStyle,
+  supportStyle?: TrackAppearanceSupportStyle,
+): THREE.Material {
+  const material = createMaterial(fallbackSlot, recipe)
+  material.name = `theme-appearance:${presetId}`
+  material.userData.themeAppearancePresetId = presetId
+  material.userData.themeAppearanceFallbackSlot = fallbackSlot
+  applyAppearanceMetadata(material, canopyStyle, supportStyle)
+  return material
+}
+
+function applyAppearanceMetadata(
+  material: THREE.Material,
+  canopyStyle?: TrackAppearanceCanopyStyle,
+  supportStyle?: TrackAppearanceSupportStyle,
+): void {
+  if (canopyStyle) material.userData.themeAppearanceCanopyStyle = canopyStyle
+  else delete material.userData.themeAppearanceCanopyStyle
+  if (supportStyle) {
+    material.userData.themeAppearanceSupportStyle = supportStyle
+    applyTransparentSupportFadeShader(material, true)
+  } else {
+    delete material.userData.themeAppearanceSupportStyle
+    delete material.userData.transparentSupportFadeShader
+  }
+}
+
+/**
+ * Applies the shared under-track alpha fade. Both direct and instanced support
+ * geometry use the same local-depth interval while retaining normal FrontSide
+ * culling. Visible transparent fragments do not write depth. Support builders
+ * pair them with a color-disabled prepass that seals the nearest exterior
+ * throughout the fade. The matching colour pass then uses EqualDepth so rear
+ * faces and overlapping internal courses cannot bleed through that exterior.
+ */
+export function applyTransparentSupportFadeShader(
+  material: THREE.Material,
+  force = false,
+  opaqueDepthPrepass = false,
+): void {
+  if (!force && material.userData.transparentSupportFadeShader === true) return
+  const compileBase = material.onBeforeCompile.bind(material)
+  const cacheKeyBase = material.customProgramCacheKey.bind(material)
+  const materialWithDefaults = material as THREE.Material & { defaultAttributeValues?: Record<string, number[]> }
+  materialWithDefaults.defaultAttributeValues = {
+    ...materialWithDefaults.defaultAttributeValues,
+    supportFade: [1],
+    supportFadeDepthMode: [0],
+    supportFadeDepth: [0],
+    supportFadeStart: [0],
+    supportFadeEnd: [1],
+    supportFadeBottom: [0],
+    supportFadeTop: [1],
+  }
+  material.onBeforeCompile = (shader, renderer) => {
+    compileBase(shader, renderer)
+    shader.vertexShader =
+      `attribute float supportFade;
+#ifndef USE_INSTANCING
+attribute float supportFadeDepthMode;
+attribute float supportFadeDepth;
+attribute float supportFadeStart;
+attribute float supportFadeEnd;
+#endif
+varying float vSupportFadeCoverage;
+varying float vSupportFadeHeight;
+varying vec2 vSupportFadeRange;
+#ifdef USE_INSTANCING
+attribute float supportFadeBottom;
+attribute float supportFadeTop;
+#endif
+` +
+      shader.vertexShader.replace(
+        '#include <project_vertex>',
+        `#include <project_vertex>
+         #ifdef USE_INSTANCING
+           vec3 supportFadePosition = (instanceMatrix * vec4(transformed, 1.0)).xyz;
+           vSupportFadeCoverage = 1.0;
+           vSupportFadeHeight = supportFadePosition.y;
+           vSupportFadeRange = vec2(supportFadeBottom, supportFadeTop);
+         #else
+           // Procedural meshes keep their established per-vertex coverage.
+           // Authored meshes with faces that cross a fade boundary explicitly
+           // opt into interpolating physical depth before fragment evaluation.
+           vSupportFadeCoverage = mix(supportFade, 1.0, supportFadeDepthMode);
+           vSupportFadeHeight = mix(1.0, -supportFadeDepth, supportFadeDepthMode);
+           vSupportFadeRange = mix(
+             vec2(0.0, 1.0),
+             vec2(-supportFadeEnd, -supportFadeStart),
+             supportFadeDepthMode
+           );
+         #endif`,
+      )
+    const fadeFragment = opaqueDepthPrepass
+      ? `if (supportMaskCoverage < 0.01) discard;
+         diffuseColor.a = 1.0;`
+      : `diffuseColor.a *= clamp(supportMaskCoverage, 0.0, 1.0);
+         if (diffuseColor.a < 0.01) discard;`
+    shader.fragmentShader =
+      `varying float vSupportFadeCoverage;
+varying float vSupportFadeHeight;
+varying vec2 vSupportFadeRange;
+` +
+      shader.fragmentShader.replace(
+        '#include <alphatest_fragment>',
+        `#include <alphatest_fragment>
+         float supportHeightCoverage = smoothstep(
+           vSupportFadeRange.x,
+           max(vSupportFadeRange.x + 0.001, vSupportFadeRange.y),
+           vSupportFadeHeight
+         );
+         float supportMaskCoverage = min(vSupportFadeCoverage, supportHeightCoverage);
+         ${fadeFragment}`,
+      )
+  }
+  material.customProgramCacheKey = () =>
+    `${cacheKeyBase()}:transparent-support-height-fade-v3:${opaqueDepthPrepass ? 'opaque-depth' : 'color'}`
+  material.userData.transparentSupportFadeShader = true
+  material.userData.supportFadeOpaqueDepthPrepass = opaqueDepthPrepass
+  delete material.userData.opaqueSupportFadeShader
+  material.transparent = true
+  material.depthWrite = false
+  material.needsUpdate = true
+}
+
+function canUpdateInPlace(material: THREE.Material, recipe: MaterialRecipe): boolean {
+  const currentPattern = material.userData.themePatternSignature
+  const nextPattern = patternSignature(recipe.pattern)
+  if (currentPattern !== nextPattern) return false
+
+  return (
+    (recipe.kind === 'standard' &&
+      material instanceof THREE.MeshStandardMaterial &&
+      !(material instanceof THREE.MeshPhysicalMaterial)) ||
+    (recipe.kind === 'physical' && material instanceof THREE.MeshPhysicalMaterial) ||
+    (recipe.kind === 'toon' && material instanceof THREE.MeshToonMaterial)
+  )
+}
+
+function applyRecipe(material: THREE.Material, recipe: MaterialRecipe): void {
+  if (!(material instanceof THREE.MeshStandardMaterial || material instanceof THREE.MeshToonMaterial)) return
+
+  material.color.set(recipe.color)
+  material.transparent = recipe.transparent ?? false
+  material.opacity = recipe.opacity ?? 1
+  material.alphaTest = recipe.alphaTest ?? 0
+  material.depthWrite = recipe.depthWrite ?? true
+  material.blending = THREE.NormalBlending
+  material.toneMapped = true
+  material.wireframe = false
+  const nextPatternSignature = patternSignature(recipe.pattern)
+  const nextMapSignature = mapSignature(recipe)
+  if (material.userData.themeMapSignature !== nextMapSignature) {
+    const previousMap = material.map
+    disposeTexture(previousMap)
+    disposeNeonNetTexture(material)
+    disposeWeatheredMetalResponseTextures(material)
+    if (material instanceof THREE.MeshStandardMaterial) {
+      for (const texture of new Set([
+        material.normalMap,
+        material.bumpMap,
+        material.displacementMap,
+        material.roughnessMap,
+        material.aoMap,
+        material.emissiveMap,
+      ])) {
+        if (texture && texture !== previousMap) disposeTexture(texture)
+      }
+      material.normalMap = null
+      material.bumpMap = null
+      material.displacementMap = null
+      material.roughnessMap = null
+      material.aoMap = null
+      material.emissiveMap = null
+    }
+    material.map = createRecipeTexture(recipe)
+    material.userData.themeMapSignature = nextMapSignature
+    material.userData.themePatternSignature = nextPatternSignature
+    if (recipe.pattern?.kind === 'weathered-sheet-metal' && material instanceof THREE.MeshStandardMaterial) {
+      const response = createWeatheredMetalResponseTextures(recipe.pattern)
+      material.bumpMap = response.height
+      material.roughnessMap = response.roughness
+      material.metalnessMap = response.metalness
+      material.userData.themeWeatheredMetalResponse = response
+    } else if (material instanceof THREE.MeshStandardMaterial) {
+      material.normalMap = createRecipeResponseTexture(recipe.normalTextureUrl, recipe, 'normal')
+      material.bumpMap = createRecipeResponseTexture(recipe.heightTextureUrl, recipe, 'height')
+      material.displacementMap = null
+      material.roughnessMap = createRecipeResponseTexture(recipe.roughnessTextureUrl, recipe, 'roughness')
+      material.aoMap = createRecipeResponseTexture(recipe.aoTextureUrl, recipe, 'ao')
+      material.emissiveMap = createRecipeResponseTexture(recipe.emissiveTextureUrl, recipe, 'emissive')
+    }
+  }
+  if (recipe.pattern?.kind !== 'weathered-sheet-metal' && material instanceof THREE.MeshStandardMaterial) {
+    if (!recipe.heightTextureUrl) material.bumpMap = null
+    material.metalnessMap = null
+    material.normalScale.set(...(recipe.normalScale ?? [1, 1]))
+    material.aoMapIntensity = recipe.aoMapIntensity ?? 1
+  }
+  material.bumpScale = recipe.bumpScale ?? 1
+  material.displacementMap = null
+  material.displacementScale = recipe.visualRelief?.scale ?? 0
+  material.displacementBias = recipe.visualRelief?.bias ?? 0
+  if (recipe.visualRelief) {
+    material.userData.themeVisualRelief = { ...recipe.visualRelief }
+  } else {
+    delete material.userData.themeVisualRelief
+  }
+
+  material.emissive.set(recipe.emissive ?? '#000000')
+  material.emissiveIntensity = recipe.emissiveIntensity ?? 0
+
+  if (material instanceof THREE.MeshStandardMaterial) {
+    material.roughness = recipe.roughness
+    material.metalness = recipe.metalness
+    material.envMapIntensity = recipe.envMapIntensity ?? 1
+    if (recipe.kind === 'physical' && material instanceof THREE.MeshPhysicalMaterial) {
+      material.clearcoat = recipe.clearcoat ?? 0
+      material.clearcoatRoughness = recipe.clearcoatRoughness ?? 0
+      material.transmission = recipe.transmission ?? 0
+      material.thickness = recipe.thickness ?? 0
+    }
+  }
+
+  if (recipe.kind === 'toon' && material instanceof THREE.MeshToonMaterial) {
+    const gradientSignature = `${recipe.gradientSteps ?? 4}`
+    if (material.userData.themeGradientSignature !== gradientSignature) {
+      material.gradientMap?.dispose()
+      material.gradientMap = createToonGradientTexture(recipe.gradientSteps ?? 4)
+      material.userData.themeGradientSignature = gradientSignature
+    }
+    applyToonInk(material, recipe, material.map ? activeMaterialTextureWorldSize(recipe) : undefined)
+  } else if (recipe.pattern?.kind === 'neon-net' && material instanceof THREE.MeshStandardMaterial) {
+    applyNeonNetShader(
+      material,
+      recipe.netSpacing ?? 0.82,
+      recipe.netLineWidth ?? 0.06,
+      recipe.netFillOpacity ?? 0,
+      recipe.pattern.primary,
+    )
+  } else if (recipe.pattern?.kind === 'holographic-hover-grid' && material instanceof THREE.MeshStandardMaterial) {
+    applyHolographicHoverGridShader(material, recipe)
+  } else if (material.map) {
+    applyMetricMapShader(material, activeMaterialTextureWorldSize(recipe), recipe.visualRelief, recipe.emissiveSurface)
+  } else {
+    material.onBeforeCompile = () => {}
+    material.customProgramCacheKey = () => ''
+  }
+  material.needsUpdate = true
+}
+
+function applyHolographicHoverGridShader(material: THREE.MeshStandardMaterial, recipe: MaterialRecipe): void {
+  const pattern = recipe.pattern
+  if (!pattern || pattern.kind !== 'holographic-hover-grid') return
+
+  const spacingX = Math.max(0.001, pattern.worldSize[0])
+  const spacingY = Math.max(0.001, pattern.worldSize[1])
+  const coreWidth = Math.max(0.0001, recipe.hoverGridCoreWidth ?? 0.0045)
+  const auraFalloff = Math.max(0.001, recipe.hoverGridAuraFalloff ?? 46)
+  const auraStrength = Math.max(0, recipe.hoverGridAuraStrength ?? 0.62)
+  const junctionStrength = Math.max(0, recipe.hoverGridJunctionStrength ?? 0.34)
+  const upwardOnly = recipe.emissiveSurface === 'upward'
+  configureThemeMetricAttribute(material)
+
+  material.onBeforeCompile = shader => {
+    shader.uniforms.themeHoverGridColor = { value: new THREE.Color(pattern.primary) }
+    shader.uniforms.themeHoverGridHotColor = { value: new THREE.Color(pattern.secondary) }
+    shader.vertexShader =
+      'varying vec3 vThemeHoverGridPosition;\nvarying vec3 vThemeHoverGridNormal;\n' +
+      shader.vertexShader.replace(
+        '#include <project_vertex>',
+        `#include <project_vertex>
+         vec3 themeHoverGridPosition = transformed;
+         vec3 themeHoverGridNormal = objectNormal;
+         #ifdef USE_INSTANCING
+           themeHoverGridPosition = (instanceMatrix * vec4(themeHoverGridPosition, 1.0)).xyz;
+           mat3 themeHoverGridInstanceNormalMatrix = mat3(instanceMatrix);
+           themeHoverGridNormal /= vec3(
+             dot(themeHoverGridInstanceNormalMatrix[0], themeHoverGridInstanceNormalMatrix[0]),
+             dot(themeHoverGridInstanceNormalMatrix[1], themeHoverGridInstanceNormalMatrix[1]),
+             dot(themeHoverGridInstanceNormalMatrix[2], themeHoverGridInstanceNormalMatrix[2])
+           );
+           themeHoverGridNormal = themeHoverGridInstanceNormalMatrix * themeHoverGridNormal;
+         #endif
+         vec3 themeHoverGridWorldPosition = (modelMatrix * vec4(themeHoverGridPosition, 1.0)).xyz;
+         // Track Lab uniformly scales its complete presentation root to fit
+         // the workspace. That is camera staging, not material scale: remove
+         // it so a 0.28-unit grid remains 0.28 track units in Lab and races.
+         float themeHoverGridPresentationScale = max(
+           0.000001,
+           (length(modelMatrix[0].xyz) + length(modelMatrix[1].xyz) + length(modelMatrix[2].xyz)) / 3.0
+         );
+         vThemeHoverGridPosition = themeHoverGridWorldPosition / themeHoverGridPresentationScale;
+         vThemeHoverGridNormal = normalize(mat3(modelMatrix) * themeHoverGridNormal);`,
+      )
+    shader.fragmentShader =
+      'uniform vec3 themeHoverGridColor;\nuniform vec3 themeHoverGridHotColor;\nvarying vec3 vThemeHoverGridPosition;\nvarying vec3 vThemeHoverGridNormal;\n' +
+      shader.fragmentShader
+        .replace(
+          '#include <alphatest_fragment>',
+          `vec3 themeHoverNormal = abs(normalize(vThemeHoverGridNormal));
+         // A holographic floor can reuse a closed physical shell without
+         // illuminating its vertical thickness or downward underside.
+         if (${upwardOnly ? 'vThemeHoverGridNormal.y <= 0.001' : 'false'}) discard;
+         // One world-metric field is the source of truth for this hologram.
+         // Clipping it with independent floor meshes cannot introduce a seam,
+         // including at branches, loops, rotations, or editor/runtime roots.
+         vec2 themeHoverCoordinate =
+           themeHoverNormal.y >= themeHoverNormal.x && themeHoverNormal.y >= themeHoverNormal.z
+             ? vThemeHoverGridPosition.xz
+             : themeHoverNormal.x >= themeHoverNormal.z
+               ? vThemeHoverGridPosition.zy
+               : vThemeHoverGridPosition.xy;
+         vec2 themeHoverSpacing = vec2(${spacingX.toFixed(6)}, ${spacingY.toFixed(6)});
+         vec2 themeHoverDistanceToLine = abs(fract(themeHoverCoordinate / themeHoverSpacing + 0.5) - 0.5) * themeHoverSpacing;
+         float themeHoverEdgeDistance = min(themeHoverDistanceToLine.x, themeHoverDistanceToLine.y);
+         float themeHoverAntialias = max(fwidth(themeHoverEdgeDistance) * 1.15, 0.0012);
+         float themeHoverCore = 1.0 - smoothstep(${coreWidth.toFixed(6)} - themeHoverAntialias, ${coreWidth.toFixed(6)} + themeHoverAntialias, themeHoverEdgeDistance);
+         float themeHoverAura = exp(-themeHoverEdgeDistance * ${auraFalloff.toFixed(6)}) * ${auraStrength.toFixed(6)};
+         float themeHoverJunction = (1.0 - smoothstep(0.013, 0.026, themeHoverDistanceToLine.x))
+           * (1.0 - smoothstep(0.013, 0.026, themeHoverDistanceToLine.y));
+         float themeHoverIntensity = themeHoverCore * 1.72 + themeHoverAura * 1.18 + themeHoverJunction * ${junctionStrength.toFixed(6)};
+         if (themeHoverIntensity < 0.014) discard;
+         vec3 themeHoverHotColor = mix(
+           themeHoverGridColor,
+           themeHoverGridHotColor,
+           clamp(themeHoverCore * 0.72 + themeHoverJunction * 0.3, 0.0, 0.84)
+         );
+         float themeHoverAlpha = min(0.98, themeHoverCore * 0.94 + themeHoverAura * 0.68 + themeHoverJunction * 0.2);
+         diffuseColor = vec4(themeHoverHotColor * themeHoverIntensity, themeHoverAlpha);
+         #include <alphatest_fragment>`,
+        )
+        .replace('#include <opaque_fragment>', 'gl_FragColor = vec4(diffuseColor.rgb, diffuseColor.a);')
+  }
+  material.customProgramCacheKey = () =>
+    `holographic-hover-grid-v5-track-metric:${upwardOnly ? 'upward' : 'all'}:${spacingX.toFixed(6)}:${spacingY.toFixed(6)}:${coreWidth.toFixed(6)}:${auraFalloff.toFixed(3)}:${auraStrength.toFixed(3)}:${junctionStrength.toFixed(3)}`
+  material.transparent = true
+  material.depthWrite = false
+  material.blending = THREE.AdditiveBlending
+  material.toneMapped = false
+  material.userData.themeHolographicHoverGrid = true
+  const materialWithAttributeDefaults = material as THREE.MeshStandardMaterial & {
+    defaultAttributeValues?: Record<string, number[]>
+  }
+  materialWithAttributeDefaults.defaultAttributeValues = {
+    ...materialWithAttributeDefaults.defaultAttributeValues,
+    themeHoverGridPhase: [0],
+  }
+}
+
+interface ThemeShaderSource {
+  uniforms: Record<string, { value: unknown }>
+  vertexShader: string
+  fragmentShader: string
+}
+
+function configureThemeMetricAttribute(material: THREE.Material): void {
+  const materialWithAttributeDefaults = material as THREE.Material & {
+    defaultAttributeValues?: Record<string, number[]>
+  }
+  materialWithAttributeDefaults.defaultAttributeValues = {
+    ...materialWithAttributeDefaults.defaultAttributeValues,
+    themeNetUv: [0, 0, 0, 0],
+    themeRelief: [0],
+    themeMaterialPhase: [0],
+    themeMaterialTransversePhase: [0],
+    themeMaterialLongitudinalAxis: [1],
+  }
+}
+
+function injectMetricMapShader(
+  shader: ThemeShaderSource,
+  worldSize: readonly [number, number],
+  visualRelief?: MaterialRecipe['visualRelief'],
+  reliefMap: THREE.Texture | null = null,
+  emissiveSurface: MaterialRecipe['emissiveSurface'] = 'all',
+): void {
+  const safeWorldSize: readonly [number, number] = [Math.max(0.001, worldSize[0]), Math.max(0.001, worldSize[1])]
+  shader.uniforms.themeTextureScale = {
+    value: new THREE.Vector2(1 / safeWorldSize[0], 1 / safeWorldSize[1]),
+  }
+  if (visualRelief) {
+    shader.uniforms.themeReliefMap = { value: reliefMap }
+    shader.uniforms.themeReliefScale = { value: visualRelief.scale }
+    shader.uniforms.themeReliefBias = { value: visualRelief.bias }
+  }
+  shader.vertexShader =
+    `${visualRelief ? 'attribute float themeRelief;\nuniform sampler2D themeReliefMap;\nuniform float themeReliefScale;\nuniform float themeReliefBias;\n' : ''}attribute vec4 themeNetUv;\nattribute float themeMaterialPhase;\nattribute float themeMaterialTransversePhase;\nattribute float themeMaterialLongitudinalAxis;\nuniform vec2 themeTextureScale;\nvarying vec4 vThemeMetricUv;\nvarying float vThemeMaterialPhase;\nvarying float vThemeMaterialTransversePhase;\nvarying float vThemeMaterialLongitudinalAxis;\nvarying vec3 vThemeMetricPosition;\nvarying vec3 vThemeMetricNormal;\n#ifdef USE_NORMALMAP\nvarying vec3 vThemeMetricAxisX;\nvarying vec3 vThemeMetricAxisY;\nvarying vec3 vThemeMetricAxisZ;\n#endif\n` +
+    shader.vertexShader
+      .replace(
+        '#include <begin_vertex>',
+        visualRelief
+          ? `#include <begin_vertex>
+             #ifdef USE_BUMPMAP
+               transformed += normalize(objectNormal) *
+                 (texture2D(
+                   themeReliefMap,
+                   vBumpMapUv + mix(
+                     vec2(themeMaterialPhase * themeTextureScale.x, themeMaterialTransversePhase * themeTextureScale.y),
+                     vec2(themeMaterialTransversePhase * themeTextureScale.x, themeMaterialPhase * themeTextureScale.y),
+                     themeMaterialLongitudinalAxis
+                   )
+                 ).x * themeReliefScale + themeReliefBias) *
+                 themeRelief;
+             #endif`
+          : '#include <begin_vertex>',
+      )
+      .replace(
+        '#include <project_vertex>',
+        `#include <project_vertex>
+       vThemeMetricUv = themeNetUv;
+       vThemeMaterialPhase = themeMaterialPhase;
+       vThemeMaterialTransversePhase = themeMaterialTransversePhase;
+       vThemeMaterialLongitudinalAxis = themeMaterialLongitudinalAxis;
+       vec3 themeMetricPosition = transformed;
+       vec3 themeMetricNormal = objectNormal;
+       #ifdef USE_NORMALMAP
+       vec3 themeMetricAxisX = vec3(1.0, 0.0, 0.0);
+       vec3 themeMetricAxisY = vec3(0.0, 1.0, 0.0);
+       vec3 themeMetricAxisZ = vec3(0.0, 0.0, 1.0);
+       #endif
+       #ifdef USE_INSTANCING
+         themeMetricPosition = (instanceMatrix * vec4(themeMetricPosition, 1.0)).xyz;
+         mat3 themeInstanceNormalMatrix = mat3(instanceMatrix);
+         vec3 themeInstanceScaleSquared = vec3(
+           dot(themeInstanceNormalMatrix[0], themeInstanceNormalMatrix[0]),
+           dot(themeInstanceNormalMatrix[1], themeInstanceNormalMatrix[1]),
+           dot(themeInstanceNormalMatrix[2], themeInstanceNormalMatrix[2])
+         );
+         themeMetricNormal /= themeInstanceScaleSquared;
+         themeMetricNormal = themeInstanceNormalMatrix * themeMetricNormal;
+         #ifdef USE_NORMALMAP
+         themeMetricAxisX = themeInstanceNormalMatrix * (themeMetricAxisX / themeInstanceScaleSquared);
+         themeMetricAxisY = themeInstanceNormalMatrix * (themeMetricAxisY / themeInstanceScaleSquared);
+         themeMetricAxisZ = themeInstanceNormalMatrix * (themeMetricAxisZ / themeInstanceScaleSquared);
+         #endif
+       #endif
+       vThemeMetricPosition = themeMetricPosition;
+       vThemeMetricNormal = normalize(themeMetricNormal);
+       #ifdef USE_NORMALMAP
+       vThemeMetricAxisX = normalize(normalMatrix * themeMetricAxisX);
+       vThemeMetricAxisY = normalize(normalMatrix * themeMetricAxisY);
+       vThemeMetricAxisZ = normalize(normalMatrix * themeMetricAxisZ);
+       #endif`,
+      )
+  shader.fragmentShader =
+    'uniform vec2 themeTextureScale;\nvarying vec4 vThemeMetricUv;\nvarying float vThemeMaterialPhase;\nvarying float vThemeMaterialTransversePhase;\nvarying float vThemeMaterialLongitudinalAxis;\nvarying vec3 vThemeMetricPosition;\nvarying vec3 vThemeMetricNormal;\n#ifdef USE_NORMALMAP\nvarying vec3 vThemeMetricAxisX;\nvarying vec3 vThemeMetricAxisY;\nvarying vec3 vThemeMetricAxisZ;\n#endif\n' +
+    `vec3 themeMetricBlendWeights() {
+       vec3 weights = pow(abs(normalize(vThemeMetricNormal)), vec3(6.0));
+       return weights / max(weights.x + weights.y + weights.z, 0.0001);
+     }
+     vec2 themeAuthoredPhaseOffset() {
+       return mix(
+         vec2(vThemeMaterialPhase * themeTextureScale.x, vThemeMaterialTransversePhase * themeTextureScale.y),
+         vec2(vThemeMaterialTransversePhase * themeTextureScale.x, vThemeMaterialPhase * themeTextureScale.y),
+         vThemeMaterialLongitudinalAxis
+       );
+     }
+     vec2 themeOrientedSurfaceUv(vec2 authoredUv) {
+       // vMapUv and the response-map UV varyings already include each
+       // texture's repeat transform. Directional metric geometry therefore
+       // supplies world-unit UVs directly; multiplying by themeTextureScale
+       // here would apply physical scale twice and enlarge the pattern.
+       return authoredUv + themeAuthoredPhaseOffset();
+     }
+     vec4 themeSampleSurfaceMap(sampler2D themeSampler, vec2 authoredUv) {
+       if (vThemeMetricUv.z > 0.5) {
+         return texture2D(themeSampler, themeOrientedSurfaceUv(authoredUv));
+       }
+       vec3 weights = themeMetricBlendWeights();
+       vec4 sampleX = texture2D(themeSampler, vThemeMetricPosition.zy * themeTextureScale);
+       vec4 sampleY = texture2D(themeSampler, vThemeMetricPosition.xz * themeTextureScale);
+       vec4 sampleZ = texture2D(themeSampler, vThemeMetricPosition.xy * themeTextureScale);
+       return sampleX * weights.x + sampleY * weights.y + sampleZ * weights.z;
+     }
+     vec4 themeSampleSurfaceResponseMap(sampler2D themeSampler, vec2 authoredUv) {
+       if (vThemeMetricUv.z > 0.5) {
+         return texture2D(themeSampler, themeOrientedSurfaceUv(authoredUv));
+       }
+       vec3 weights = themeMetricBlendWeights();
+       vec4 sampleX = texture2D(themeSampler, vThemeMetricPosition.zy * themeTextureScale);
+       vec4 sampleY = texture2D(themeSampler, vThemeMetricPosition.xz * themeTextureScale);
+       vec4 sampleZ = texture2D(themeSampler, vThemeMetricPosition.xy * themeTextureScale);
+       return sampleX * weights.x + sampleY * weights.y + sampleZ * weights.z;
+     }
+     #ifdef USE_NORMALMAP
+     vec3 themeSampleMetricNormal(sampler2D themeNormalSampler, vec2 themeNormalScale) {
+       vec3 weights = themeMetricBlendWeights();
+       vec3 axisSign = mix(vec3(-1.0), vec3(1.0), step(vec3(0.0), vThemeMetricNormal));
+       vec3 sampleX = texture2D(themeNormalSampler, vThemeMetricPosition.zy * themeTextureScale).xyz * 2.0 - 1.0;
+       vec3 sampleY = texture2D(themeNormalSampler, vThemeMetricPosition.xz * themeTextureScale).xyz * 2.0 - 1.0;
+       vec3 sampleZ = texture2D(themeNormalSampler, vThemeMetricPosition.xy * themeTextureScale).xyz * 2.0 - 1.0;
+       sampleX.xy *= themeNormalScale;
+       sampleY.xy *= themeNormalScale;
+       sampleZ.xy *= themeNormalScale;
+       vec3 normalX = normalize(vec3(sampleX.z * axisSign.x, sampleX.y, sampleX.x * axisSign.x));
+       vec3 normalY = normalize(vec3(sampleY.x, sampleY.z * axisSign.y, sampleY.y * axisSign.y));
+       vec3 normalZ = normalize(vec3(sampleZ.x * axisSign.z, sampleZ.y, sampleZ.z * axisSign.z));
+       return normalize(normalX * weights.x + normalY * weights.y + normalZ * weights.z);
+     }
+     #endif
+     ` +
+    shader.fragmentShader
+      .replace(
+        '#include <map_fragment>',
+        `#ifdef USE_MAP
+         diffuseColor *= themeSampleSurfaceMap(map, vMapUv);
+       #endif`,
+      )
+      .replace(
+        '#include <roughnessmap_fragment>',
+        `float roughnessFactor = roughness;
+         #ifdef USE_ROUGHNESSMAP
+           roughnessFactor *= themeSampleSurfaceResponseMap(roughnessMap, vRoughnessMapUv).g;
+         #endif`,
+      )
+      .replace(
+        '#include <metalnessmap_fragment>',
+        `float metalnessFactor = metalness;
+         #ifdef USE_METALNESSMAP
+           metalnessFactor *= themeSampleSurfaceResponseMap(metalnessMap, vMetalnessMapUv).b;
+         #endif`,
+      )
+      .replace(
+        '#include <normal_fragment_maps>',
+        `#ifdef USE_NORMALMAP_OBJECTSPACE
+           vec3 mapN = themeSampleSurfaceMap(normalMap, vNormalMapUv).xyz * 2.0 - 1.0;
+           #ifdef FLIP_SIDED
+             mapN = -mapN;
+           #endif
+           #ifdef DOUBLE_SIDED
+             mapN = mapN * faceDirection;
+           #endif
+           normal = normalize(normalMatrix * mapN);
+         #elif defined(USE_NORMALMAP_TANGENTSPACE)
+           if (vThemeMetricUv.z > 0.5) {
+             vec3 mapN = texture2D(normalMap, themeOrientedSurfaceUv(vNormalMapUv)).xyz * 2.0 - 1.0;
+             #if defined(USE_PACKED_NORMALMAP)
+               mapN = vec3(mapN.xy, sqrt(saturate(1.0 - dot(mapN.xy, mapN.xy))));
+             #endif
+             mapN.xy *= normalScale;
+             normal = normalize(tbn * mapN);
+           } else {
+             vec3 themeMetricNormalSample = themeSampleMetricNormal(normalMap, normalScale);
+             normal = normalize(
+               vThemeMetricAxisX * themeMetricNormalSample.x +
+               vThemeMetricAxisY * themeMetricNormalSample.y +
+               vThemeMetricAxisZ * themeMetricNormalSample.z
+             );
+           }
+         #elif defined(USE_BUMPMAP)
+           normal = perturbNormalArb(-vViewPosition, normal, dHdxy_fwd(), faceDirection);
+         #endif`,
+      )
+      .replace(
+        '#include <aomap_fragment>',
+        `#ifdef USE_AOMAP
+           float ambientOcclusion =
+             (themeSampleSurfaceResponseMap(aoMap, vAoMapUv).r - 1.0) * aoMapIntensity + 1.0;
+           reflectedLight.indirectDiffuse *= ambientOcclusion;
+           #if defined(USE_CLEARCOAT)
+             clearcoatSpecularIndirect *= ambientOcclusion;
+           #endif
+           #if defined(USE_SHEEN)
+             sheenSpecularIndirect *= ambientOcclusion;
+           #endif
+           #if defined(USE_ENVMAP) && defined(STANDARD)
+             float dotNV = saturate(dot(geometryNormal, geometryViewDir));
+             reflectedLight.indirectSpecular *=
+               computeSpecularOcclusion(dotNV, ambientOcclusion, material.roughness);
+           #endif
+         #endif`,
+      )
+      .replace(
+        '#include <emissivemap_fragment>',
+        `#ifdef USE_EMISSIVEMAP
+           vec4 emissiveColor = themeSampleSurfaceResponseMap(emissiveMap, vEmissiveMapUv);
+           // Ribbon floors are a single shell, so their top, sides, caps, and underside
+           // share one material. Keep guide-light artwork on the traversable face instead
+           // of wrapping it around the shell like a glowing net.
+           float themeEmissiveSurface = ${emissiveSurface === 'upward' ? 'smoothstep(0.08, 0.36, normalize(vThemeMetricNormal).y)' : '1.0'};
+           totalEmissiveRadiance *= emissiveColor.rgb * themeEmissiveSurface;
+         #endif`,
+      )
+      .replace(
+        '#include <bumpmap_pars_fragment>',
+        `#ifdef USE_BUMPMAP
+           uniform sampler2D bumpMap;
+           uniform float bumpScale;
+           vec2 dHdxy_fwd() {
+             if (vThemeMetricUv.z > 0.5) {
+               vec2 mappedUv = themeOrientedSurfaceUv(vBumpMapUv);
+               vec2 dSTdx = dFdx(mappedUv);
+               vec2 dSTdy = dFdy(mappedUv);
+               float Hll = bumpScale * texture2D(bumpMap, mappedUv).x;
+               float dBx = bumpScale * texture2D(bumpMap, mappedUv + dSTdx).x - Hll;
+               float dBy = bumpScale * texture2D(bumpMap, mappedUv + dSTdy).x - Hll;
+               return vec2(dBx, dBy);
+             }
+             float metricHeight = bumpScale * themeSampleSurfaceMap(bumpMap, vBumpMapUv).x;
+             return vec2(dFdx(metricHeight), dFdy(metricHeight));
+           }
+           vec3 perturbNormalArb(vec3 surf_pos, vec3 surf_norm, vec2 dHdxy, float faceDirection) {
+             vec3 vSigmaX = normalize(dFdx(surf_pos.xyz));
+             vec3 vSigmaY = normalize(dFdy(surf_pos.xyz));
+             vec3 R1 = cross(vSigmaY, surf_norm);
+             vec3 R2 = cross(surf_norm, vSigmaX);
+             float fDet = dot(vSigmaX, R1) * faceDirection;
+             vec3 vGrad = sign(fDet) * (dHdxy.x * R1 + dHdxy.y * R2);
+             return normalize(abs(fDet) * surf_norm - vGrad);
+           }
+         #endif`,
+      )
+}
+
+function applyMetricMapShader(
+  material: THREE.Material,
+  worldSize: readonly [number, number],
+  visualRelief?: MaterialRecipe['visualRelief'],
+  emissiveSurface: MaterialRecipe['emissiveSurface'] = 'all',
+): void {
+  configureThemeMetricAttribute(material)
+  material.onBeforeCompile = shader => {
+    injectMetricMapShader(
+      shader,
+      worldSize,
+      visualRelief,
+      material instanceof THREE.MeshStandardMaterial ? material.bumpMap : null,
+      emissiveSurface,
+    )
+  }
+  material.customProgramCacheKey = () =>
+    `metric-map-v5:${worldSize[0].toFixed(4)}:${worldSize[1].toFixed(4)}:${visualRelief ? 'relief' : 'flat'}:${emissiveSurface}`
+}
+
+function createToonGradientTexture(steps: number): THREE.DataTexture {
+  const clampedSteps = THREE.MathUtils.clamp(Math.round(steps), 2, 6)
+  const data = new Uint8Array(clampedSteps)
+  for (let index = 0; index < clampedSteps; index += 1) {
+    const progress = index / Math.max(1, clampedSteps - 1)
+    data[index] = Math.round(THREE.MathUtils.lerp(184, 255, Math.pow(progress, 0.82)))
+  }
+  const texture = new THREE.DataTexture(data, clampedSteps, 1, THREE.RedFormat)
+  texture.name = `theme-toon-gradient:${clampedSteps}`
+  texture.minFilter = THREE.NearestFilter
+  texture.magFilter = THREE.NearestFilter
+  texture.generateMipmaps = false
+  texture.needsUpdate = true
+  return texture
+}
+
+function applyToonInk(
+  material: THREE.MeshToonMaterial,
+  recipe: Extract<MaterialRecipe, { kind: 'toon' }>,
+  mapWorldSize?: readonly [number, number],
+): void {
+  const inkColor = recipe.inkColor ?? '#29352a'
+  const inkStrength = THREE.MathUtils.clamp(recipe.inkStrength ?? 0.18, 0, 0.45)
+  if (mapWorldSize) configureThemeMetricAttribute(material)
+  material.onBeforeCompile = shader => {
+    if (mapWorldSize) injectMetricMapShader(shader, mapWorldSize)
+    shader.uniforms.themeInkColor = { value: new THREE.Color(inkColor) }
+    shader.uniforms.themeInkStrength = { value: inkStrength }
+    shader.fragmentShader =
+      'uniform vec3 themeInkColor;\nuniform float themeInkStrength;\n' +
+      shader.fragmentShader.replace(
+        '#include <opaque_fragment>',
+        `float themeFacing = abs(dot(normalize(normal), normalize(vViewPosition)));
+         float themeInk = smoothstep(0.62, 0.96, 1.0 - themeFacing) * themeInkStrength;
+         outgoingLight = mix(outgoingLight, themeInkColor, themeInk);
+         #include <opaque_fragment>`,
+      )
+  }
+  material.customProgramCacheKey = () =>
+    `painted-toon:${inkColor}:${inkStrength.toFixed(3)}:${mapWorldSize?.join(':') ?? 'solid'}`
+}
+
+function applyNeonNetShader(
+  material: THREE.MeshStandardMaterial,
+  spacing: number,
+  lineWidth: number,
+  fillOpacity: number,
+  fillColor: string,
+): void {
+  const safeSpacing = Math.max(0.001, spacing)
+  const safeLineWidth = THREE.MathUtils.clamp(lineWidth, 0.015, 0.2)
+  const safeFillOpacity = THREE.MathUtils.clamp(fillOpacity, 0, 0.95)
+  const textureSignature = safeLineWidth.toFixed(4)
+  if (material.userData.themeNeonNetTextureSignature !== textureSignature) {
+    disposeNeonNetTexture(material)
+    material.userData.themeNeonNetTexture = createNeonNetTexture(safeLineWidth)
+    material.userData.themeNeonNetTextureSignature = textureSignature
+  }
+  const neonNetTexture = material.userData.themeNeonNetTexture as THREE.DataTexture
+  const materialWithAttributeDefaults = material as THREE.MeshStandardMaterial & {
+    defaultAttributeValues?: Record<string, number[]>
+  }
+  materialWithAttributeDefaults.defaultAttributeValues = {
+    ...materialWithAttributeDefaults.defaultAttributeValues,
+    themeNetUv: [0, 0, 0, 0],
+  }
+
+  material.onBeforeCompile = shader => {
+    shader.uniforms.themeNeonNetMap = { value: neonNetTexture }
+    shader.uniforms.themeNeonNetFillOpacity = { value: safeFillOpacity }
+    shader.uniforms.themeNeonNetFillColor = { value: new THREE.Color(fillColor) }
+    shader.vertexShader =
+      'attribute vec4 themeNetUv;\nvarying vec4 vThemeNetUv;\nvarying vec3 vThemeLocalPosition;\nvarying vec3 vThemeLocalNormal;\n' +
+      shader.vertexShader.replace(
+        '#include <project_vertex>',
+        `#include <project_vertex>
+         vThemeNetUv = themeNetUv;
+         vec3 themeNetPosition = transformed;
+         vec3 themeNetNormal = objectNormal;
+         #ifdef USE_INSTANCING
+           themeNetPosition = (instanceMatrix * vec4(themeNetPosition, 1.0)).xyz;
+           mat3 themeNetInstanceNormalMatrix = mat3(instanceMatrix);
+           themeNetNormal /= vec3(
+             dot(themeNetInstanceNormalMatrix[0], themeNetInstanceNormalMatrix[0]),
+             dot(themeNetInstanceNormalMatrix[1], themeNetInstanceNormalMatrix[1]),
+             dot(themeNetInstanceNormalMatrix[2], themeNetInstanceNormalMatrix[2])
+           );
+           themeNetNormal = themeNetInstanceNormalMatrix * themeNetNormal;
+         #endif
+         vThemeLocalPosition = themeNetPosition;
+         vThemeLocalNormal = normalize(themeNetNormal);`,
+      )
+    shader.fragmentShader =
+      'uniform sampler2D themeNeonNetMap;\nuniform float themeNeonNetFillOpacity;\nuniform vec3 themeNeonNetFillColor;\nvarying vec4 vThemeNetUv;\nvarying vec3 vThemeLocalPosition;\nvarying vec3 vThemeLocalNormal;\n' +
+      shader.fragmentShader
+        .replace(
+          '#include <alphatest_fragment>',
+          `vec3 themeNormal = abs(normalize(vThemeLocalNormal));
+         vec2 themeNetCoordinate;
+         if (vThemeNetUv.z > 0.5) {
+           float themeNetLength = max(vThemeNetUv.w, ${safeSpacing.toFixed(6)});
+           float themeNetCycles = max(1.0, floor(themeNetLength / ${safeSpacing.toFixed(6)} + 0.5));
+           float themeNetLockedLength = themeNetCycles * ${safeSpacing.toFixed(6)};
+           themeNetCoordinate = vec2(
+             vThemeNetUv.x,
+             vThemeNetUv.y * themeNetLockedLength / themeNetLength
+           );
+         } else {
+           themeNetCoordinate =
+             themeNormal.y >= themeNormal.x && themeNormal.y >= themeNormal.z
+               ? vThemeLocalPosition.xz
+               : themeNormal.x >= themeNormal.z
+                 ? vThemeLocalPosition.zy
+                 : vThemeLocalPosition.xy;
+         }
+         vec2 themeNetCycle = themeNetCoordinate / ${safeSpacing.toFixed(6)};
+         float themeNetMask = texture2D(themeNeonNetMap, themeNetCycle).a;
+         diffuseColor.rgb = mix(themeNeonNetFillColor, diffuseColor.rgb, themeNetMask);
+         diffuseColor.a *= mix(themeNeonNetFillOpacity, 1.0, themeNetMask);
+         #include <alphatest_fragment>`,
+        )
+        .replace(
+          '#include <emissivemap_fragment>',
+          `#include <emissivemap_fragment>
+           totalEmissiveRadiance *= themeNetMask;`,
+        )
+  }
+  material.customProgramCacheKey = () => `neon-net-v8:${safeSpacing.toFixed(6)}:${safeLineWidth.toFixed(4)}`
+}
+
+function createNeonNetTexture(lineWidth: number): THREE.DataTexture {
+  const size = 128
+  const samplesPerAxis = 4
+  const data = new Uint8Array(size * size * 4)
+
+  for (let y = 0; y < size; y += 1) {
+    for (let x = 0; x < size; x += 1) {
+      let coveredSamples = 0
+      for (let sampleY = 0; sampleY < samplesPerAxis; sampleY += 1) {
+        for (let sampleX = 0; sampleX < samplesPerAxis; sampleX += 1) {
+          const unitX = (x + (sampleX + 0.5) / samplesPerAxis) / size
+          const unitY = (y + (sampleY + 0.5) / samplesPerAxis) / size
+          const distanceToVerticalLine = Math.min(unitX, 1 - unitX)
+          const distanceToHorizontalLine = Math.min(unitY, 1 - unitY)
+          if (distanceToVerticalLine <= lineWidth / 2 || distanceToHorizontalLine <= lineWidth / 2) {
+            coveredSamples += 1
+          }
+        }
+      }
+
+      const offset = (y * size + x) * 4
+      data[offset] = 255
+      data[offset + 1] = 255
+      data[offset + 2] = 255
+      data[offset + 3] = Math.round((coveredSamples / (samplesPerAxis * samplesPerAxis)) * 255)
+    }
+  }
+
+  const texture = new THREE.DataTexture(data, size, size, THREE.RGBAFormat)
+  texture.name = `theme-pattern:neon-net:${lineWidth.toFixed(4)}`
+  texture.wrapS = THREE.RepeatWrapping
+  texture.wrapT = THREE.RepeatWrapping
+  texture.magFilter = THREE.LinearFilter
+  texture.minFilter = THREE.LinearMipmapLinearFilter
+  texture.generateMipmaps = true
+  texture.needsUpdate = true
+  return texture
+}
+
+function disposeNeonNetTexture(material: THREE.Material): void {
+  const texture = material.userData.themeNeonNetTexture
+  if (texture instanceof THREE.Texture) texture.dispose()
+  delete material.userData.themeNeonNetTexture
+  delete material.userData.themeNeonNetTextureSignature
+}
+
+function disposeWeatheredMetalResponseTextures(material: THREE.Material): void {
+  const response = material.userData.themeWeatheredMetalResponse as
+    { height?: THREE.Texture; roughness?: THREE.Texture; metalness?: THREE.Texture } | undefined
+  response?.height?.dispose()
+  response?.roughness?.dispose()
+  response?.metalness?.dispose()
+  if (material instanceof THREE.MeshStandardMaterial) {
+    material.bumpMap = null
+    material.roughnessMap = null
+    material.metalnessMap = null
+  }
+  delete material.userData.themeWeatheredMetalResponse
+}
+
+function assignMaterial(mesh: THREE.Mesh, material: THREE.Material, materialIndex?: number): void {
+  if (materialIndex === undefined) {
+    mesh.material = material
+    return
+  }
+  const materials = Array.isArray(mesh.material) ? [...mesh.material] : [mesh.material]
+  materials[materialIndex] = material
+  mesh.material = materials
+}
+
+function applyThemeVisibility(object: THREE.Object3D, themeId: string): void {
+  const themeHidden = object.userData.themeHidden
+  if (typeof themeHidden === 'string' && themeHidden === themeId) {
+    object.visible = false
+    return
+  }
+  if (Array.isArray(themeHidden) && themeHidden.includes(themeId)) {
+    object.visible = false
+    return
+  }
+  const themeOnly = object.userData.themeOnly
+  if (typeof themeOnly === 'string') {
+    object.visible = themeOnly === themeId
+    return
+  }
+  if (Array.isArray(themeOnly)) {
+    object.visible = themeOnly.includes(themeId)
+    return
+  }
+  object.visible = true
+}
+
+function hasThemeVisibility(object: THREE.Object3D): boolean {
+  return (
+    typeof object.userData.themeOnly === 'string' ||
+    Array.isArray(object.userData.themeOnly) ||
+    typeof object.userData.themeHidden === 'string' ||
+    Array.isArray(object.userData.themeHidden)
+  )
+}
+
+function collectTextures(material: THREE.Material, textures: Set<THREE.Texture>): void {
+  for (const value of Object.values(material)) {
+    if (value instanceof THREE.Texture) textures.add(value)
+  }
+  const neonNetTexture = material.userData.themeNeonNetTexture
+  if (neonNetTexture instanceof THREE.Texture) textures.add(neonNetTexture)
+}
+
+function patternSignature(pattern: MaterialPatternRecipe | undefined): string {
+  return pattern
+    ? `${pattern.kind}:${pattern.primary}:${pattern.secondary}:${pattern.worldSize[0]}:${pattern.worldSize[1]}`
+    : 'none'
+}
+
+function mapSignature(recipe: MaterialRecipe): string {
+  const worldSize = materialTextureWorldSize(recipe)
+  return [
+    patternSignature(recipe.pattern),
+    recipe.textureUrl ?? 'procedural',
+    recipe.emissiveTextureUrl ?? 'no-emissive',
+    recipe.emissiveSurface ?? 'all-emissive-surfaces',
+    recipe.normalTextureUrl ?? 'no-normal',
+    recipe.heightTextureUrl ?? 'no-height',
+    recipe.roughnessTextureUrl ?? 'no-roughness',
+    recipe.aoTextureUrl ?? 'no-ao',
+    worldSize[0],
+    worldSize[1],
+    recipe.visualRelief?.scale ?? 'no-relief',
+    recipe.visualRelief?.bias ?? 'no-relief-bias',
+    recipe.visualRelief?.targetEdgeLength ?? 'no-relief-edge',
+  ].join(':')
+}
+
+function materialTextureWorldSize(recipe: MaterialRecipe): readonly [number, number] {
+  return recipe.textureWorldSize ?? recipe.pattern?.worldSize ?? [2, 2]
+}
+
+/**
+ * The browser uses the authored image scale while server-side tests and other
+ * non-DOM renderers use the procedural pattern fallback. Keep the shader scale
+ * paired with the texture that was actually created; otherwise albedo repeats
+ * at one physical size while the metric shader samples it at another.
+ */
+function activeMaterialTextureWorldSize(recipe: MaterialRecipe): readonly [number, number] {
+  if (recipe.textureUrl && typeof document === 'undefined' && recipe.pattern) {
+    return recipe.pattern.worldSize
+  }
+  return materialTextureWorldSize(recipe)
+}
+
+function createRecipeTexture(recipe: MaterialRecipe): THREE.Texture | null {
+  if (recipe.textureUrl && typeof document !== 'undefined') {
+    const worldSize = materialTextureWorldSize(recipe)
+    const texture = createThemeMaterialTexture(
+      recipe.textureUrl,
+      `albedo:${worldSize[0]}:${worldSize[1]}`,
+    )
+    texture.name = `theme-texture:${recipe.textureUrl}`
+    texture.wrapS = THREE.RepeatWrapping
+    texture.wrapT = THREE.RepeatWrapping
+    texture.repeat.set(1 / Math.max(0.001, worldSize[0]), 1 / Math.max(0.001, worldSize[1]))
+    texture.colorSpace = THREE.SRGBColorSpace
+    texture.magFilter = THREE.LinearFilter
+    texture.minFilter = THREE.LinearMipmapLinearFilter
+    texture.generateMipmaps = true
+    texture.anisotropy = 4
+    return texture
+  }
+
+  return recipe.pattern && recipe.pattern.kind !== 'neon-net' && recipe.pattern.kind !== 'holographic-hover-grid'
+    ? createPatternTexture(recipe.pattern)
+    : null
+}
+
+function createRecipeResponseTexture(
+  url: string | undefined,
+  recipe: MaterialRecipe,
+  role: 'normal' | 'height' | 'roughness' | 'ao' | 'emissive',
+): THREE.Texture | null {
+  if (!url || typeof document === 'undefined') return null
+  const worldSize = materialTextureWorldSize(recipe)
+  const texture = createThemeMaterialTexture(
+    url,
+    `${role}:${worldSize[0]}:${worldSize[1]}`,
+  )
+  texture.name = `theme-${role}-texture:${url}`
+  texture.wrapS = THREE.RepeatWrapping
+  texture.wrapT = THREE.RepeatWrapping
+  texture.repeat.set(1 / Math.max(0.001, worldSize[0]), 1 / Math.max(0.001, worldSize[1]))
+  texture.colorSpace = role === 'emissive' ? THREE.SRGBColorSpace : THREE.NoColorSpace
+  texture.magFilter = THREE.LinearFilter
+  texture.minFilter = THREE.LinearMipmapLinearFilter
+  texture.generateMipmaps = true
+  texture.anisotropy = 4
+  if (role === 'ao') texture.channel = 0
+  return texture
+}
+
+function createPatternTexture(pattern: MaterialPatternRecipe): THREE.DataTexture {
+  const size =
+    pattern.kind === 'railroad-planks' || pattern.kind === 'bridge-planks' || pattern.kind === 'weathered-sheet-metal'
+      ? 256
+      : pattern.kind === 'fence-timber'
+        ? 128
+        : 64
+  const data = new Uint8Array(size * size * 4)
+  const primary = new THREE.Color(pattern.primary)
+  const secondary = new THREE.Color(pattern.secondary)
+  const iron = new THREE.Color('#343338')
+  const ironHighlight = new THREE.Color('#c0b7a6')
+
+  for (let y = 0; y < size; y += 1) {
+    for (let x = 0; x < size; x += 1) {
+      if (pattern.kind === 'railroad-planks' || pattern.kind === 'bridge-planks') {
+        writeBridgePlankPixel(
+          data,
+          (y * size + x) * 4,
+          x,
+          y,
+          size,
+          primary,
+          secondary,
+          iron,
+          ironHighlight,
+          pattern.kind === 'railroad-planks',
+        )
+        continue
+      }
+      if (pattern.kind === 'weathered-sheet-metal') {
+        writeWeatheredSheetMetalPixel(data, (y * size + x) * 4, x, y, size, primary, secondary)
+        continue
+      }
+      const value = patternValue(pattern.kind, x, y, size)
+      const color = primary.clone().lerp(secondary, value)
+      if (pattern.kind === 'fence-timber') color.convertLinearToSRGB()
+      const offset = (y * size + x) * 4
+      data[offset] = Math.round(color.r * 255)
+      data[offset + 1] = Math.round(color.g * 255)
+      data[offset + 2] = Math.round(color.b * 255)
+      data[offset + 3] = pattern.kind === 'neon-net' && value < 0.5 ? 0 : 255
+    }
+  }
+
+  const texture = new THREE.DataTexture(data, size, size, THREE.RGBAFormat)
+  texture.name = `theme-pattern:${pattern.kind}`
+  texture.wrapS = THREE.RepeatWrapping
+  texture.wrapT = THREE.RepeatWrapping
+  texture.repeat.set(1 / Math.max(0.001, pattern.worldSize[0]), 1 / Math.max(0.001, pattern.worldSize[1]))
+  texture.colorSpace = THREE.SRGBColorSpace
+  texture.magFilter = pattern.kind === 'neon-net' ? THREE.NearestFilter : THREE.LinearFilter
+  texture.minFilter = pattern.kind === 'neon-net' ? THREE.NearestFilter : THREE.LinearMipmapLinearFilter
+  texture.generateMipmaps = pattern.kind !== 'neon-net'
+  texture.needsUpdate = true
+  return texture
+}
+
+interface WeatheredMetalSample {
+  seam: number
+  rivet: number
+  rust: number
+  scratch: number
+  variation: number
+}
+
+function weatheredMetalSample(x: number, y: number, size: number): WeatheredMetalSample {
+  const unitX = x / size
+  const unitY = y / size
+  const edgeX = Math.min(unitX, 1 - unitX)
+  const edgeY = Math.min(unitY, 1 - unitY)
+  const seamDistance = Math.min(edgeX, edgeY)
+  const seam = 1 - THREE.MathUtils.smoothstep(seamDistance, 0.012, 0.036)
+  const rivetCenters = [0.075, 0.925]
+  let rivet = 0
+  for (const centerX of rivetCenters) {
+    for (const centerY of rivetCenters) {
+      const distance = Math.hypot(unitX - centerX, unitY - centerY)
+      rivet = Math.max(rivet, 1 - THREE.MathUtils.smoothstep(distance, 0.018, 0.035))
+    }
+  }
+  const coarse = pseudoNoise(Math.floor(x / 7) * 11 + 5, Math.floor(y / 7) * 13 + 9)
+  const fine = pseudoNoise(x * 5 + 19, y * 7 + 31)
+  const seamOxidation = seam * (0.24 + pseudoNoise(x * 3 + 7, y * 2 + 17) * 0.62)
+  const patch = coarse > 0.69 ? THREE.MathUtils.smoothstep(coarse, 0.69, 0.94) : 0
+  const rust = THREE.MathUtils.clamp(seamOxidation * 0.82 + patch * 0.76 + (fine > 0.975 ? 0.5 : 0), 0, 1)
+  const diagonal = Math.abs(((unitX * 2.7 + unitY * 0.42 + 0.21) % 1) - 0.5)
+  const scratch = diagonal < 0.006 || Math.abs(((unitX * 0.7 - unitY * 3.1 + 0.37) % 1) - 0.5) < 0.004 ? 1 : 0
+  return {
+    seam,
+    rivet,
+    rust,
+    scratch,
+    variation: pseudoNoise(x * 2 + 3, y * 5 + 11),
+  }
+}
+
+function writeWeatheredSheetMetalPixel(
+  data: Uint8Array,
+  offset: number,
+  x: number,
+  y: number,
+  size: number,
+  steel: THREE.Color,
+  oxide: THREE.Color,
+): void {
+  const sample = weatheredMetalSample(x, y, size)
+  const seamColor = new THREE.Color('#242728')
+  const rivetColor = new THREE.Color('#d4dad7')
+  const grime = 0.09 + sample.variation * 0.15
+  const color = steel.clone().multiplyScalar(1 - grime)
+  color.lerp(oxide, sample.rust * 0.88)
+  color.lerp(seamColor, sample.seam * 0.72)
+  color.lerp(rivetColor, sample.rivet * 0.94)
+  if (sample.scratch > 0 && sample.rust < 0.5) color.lerp(rivetColor, 0.44)
+  data[offset] = Math.round(THREE.MathUtils.clamp(color.r, 0, 1) * 255)
+  data[offset + 1] = Math.round(THREE.MathUtils.clamp(color.g, 0, 1) * 255)
+  data[offset + 2] = Math.round(THREE.MathUtils.clamp(color.b, 0, 1) * 255)
+  data[offset + 3] = 255
+}
+
+function createWeatheredMetalResponseTextures(pattern: MaterialPatternRecipe): {
+  height: THREE.DataTexture
+  roughness: THREE.DataTexture
+  metalness: THREE.DataTexture
+} {
+  const size = 256
+  const height = new Uint8Array(size * size * 4)
+  const roughness = new Uint8Array(size * size * 4)
+  const metalness = new Uint8Array(size * size * 4)
+  const writeScalar = (target: Uint8Array, pixel: number, value: number): void => {
+    const offset = pixel * 4
+    target[offset] = value
+    target[offset + 1] = value
+    target[offset + 2] = value
+    target[offset + 3] = 255
+  }
+  for (let y = 0; y < size; y += 1) {
+    for (let x = 0; x < size; x += 1) {
+      const sample = weatheredMetalSample(x, y, size)
+      const offset = y * size + x
+      writeScalar(
+        height,
+        offset,
+        Math.round(
+          THREE.MathUtils.clamp(0.52 - sample.seam * 0.38 + sample.rivet * 0.48 + sample.rust * 0.08, 0, 1) * 255,
+        ),
+      )
+      writeScalar(
+        roughness,
+        offset,
+        Math.round(
+          THREE.MathUtils.clamp(0.38 + sample.variation * 0.18 + sample.rust * 0.48 - sample.rivet * 0.2, 0.08, 1) *
+            255,
+        ),
+      )
+      writeScalar(
+        metalness,
+        offset,
+        Math.round(
+          THREE.MathUtils.clamp(0.96 - sample.rust * 0.9 - sample.seam * 0.12 + sample.rivet * 0.04, 0.03, 1) * 255,
+        ),
+      )
+    }
+  }
+  const makeTexture = (data: Uint8Array, name: string): THREE.DataTexture => {
+    // Three's roughness and metalness chunks read green and blue respectively,
+    // so repeat the scalar into every RGB channel instead of using RedFormat.
+    const texture = new THREE.DataTexture(data, size, size, THREE.RGBAFormat)
+    texture.name = name
+    texture.wrapS = THREE.RepeatWrapping
+    texture.wrapT = THREE.RepeatWrapping
+    texture.repeat.set(1 / Math.max(0.001, pattern.worldSize[0]), 1 / Math.max(0.001, pattern.worldSize[1]))
+    texture.magFilter = THREE.LinearFilter
+    texture.minFilter = THREE.LinearMipmapLinearFilter
+    texture.generateMipmaps = true
+    texture.needsUpdate = true
+    return texture
+  }
+  return {
+    height: makeTexture(height, 'theme-response:weathered-sheet-metal:height'),
+    roughness: makeTexture(roughness, 'theme-response:weathered-sheet-metal:roughness'),
+    metalness: makeTexture(metalness, 'theme-response:weathered-sheet-metal:metalness'),
+  }
+}
+
+function writeBridgePlankPixel(
+  data: Uint8Array,
+  offset: number,
+  x: number,
+  y: number,
+  size: number,
+  timber: THREE.Color,
+  darkTimber: THREE.Color,
+  iron: THREE.Color,
+  ironHighlight: THREE.Color,
+  includeRailroad: boolean,
+): void {
+  const unitX = x / size
+  const unitY = y / size
+  const rowCount = 8
+  const row = Math.floor(unitY * rowCount)
+  const rowProgress = (unitY * rowCount) % 1
+  const centeredX = Math.min(unitX, 1 - unitX)
+  const railDistance = Math.abs(centeredX - 0.15)
+  const boardVariation = (pseudoNoise(row * 31 + 7, 13) - 0.5) * 0.16
+  const broadGrain = Math.abs(Math.sin(unitX * 115 + Math.sin(unitY * 19) * 2.1))
+  const fineGrain = Math.abs(Math.sin(unitX * 280 + unitY * 11))
+  const seam = Math.min(rowProgress, 1 - rowProgress)
+  const plankGap = seam < 0.035
+  const edgeDarkening = seam < 0.075 ? 0.28 : 0
+  const timberMix = THREE.MathUtils.clamp(
+    0.08 + broadGrain * 0.13 + fineGrain * 0.045 + pseudoNoise(x, y) * 0.055 + boardVariation + edgeDarkening,
+    0,
+    0.92,
+  )
+
+  let red = THREE.MathUtils.lerp(timber.r, darkTimber.r, timberMix)
+  let green = THREE.MathUtils.lerp(timber.g, darkTimber.g, timberMix)
+  let blue = THREE.MathUtils.lerp(timber.b, darkTimber.b, timberMix)
+
+  if (includeRailroad && railDistance < 0.016) {
+    const highlight = 1 - railDistance / 0.016
+    const railColorMix = 0.14 + Math.pow(highlight, 2.4) * 0.86
+    red = THREE.MathUtils.lerp(iron.r, ironHighlight.r, railColorMix)
+    green = THREE.MathUtils.lerp(iron.g, ironHighlight.g, railColorMix)
+    blue = THREE.MathUtils.lerp(iron.b, ironHighlight.b, railColorMix)
+  } else if (includeRailroad && railDistance < 0.026) {
+    red *= 0.58
+    green *= 0.58
+    blue *= 0.58
+  }
+
+  const spikeRow = Math.min(Math.abs(rowProgress - 0.22), Math.abs(rowProgress - 0.78)) < 0.027
+  if (includeRailroad && spikeRow && railDistance >= 0.016 && railDistance < 0.045) {
+    red = ironHighlight.r * 0.72
+    green = ironHighlight.g * 0.72
+    blue = ironHighlight.b * 0.72
+  }
+
+  data[offset] = Math.round(THREE.MathUtils.clamp(red, 0, 1) * 255)
+  data[offset + 1] = Math.round(THREE.MathUtils.clamp(green, 0, 1) * 255)
+  data[offset + 2] = Math.round(THREE.MathUtils.clamp(blue, 0, 1) * 255)
+  data[offset + 3] = plankGap && (!includeRailroad || railDistance > 0.045) ? 0 : 255
+}
+
+function patternValue(kind: MaterialPatternRecipe['kind'], x: number, y: number, size: number): number {
+  const unitX = x / size
+  const unitY = y / size
+  const hash = pseudoNoise(x, y)
+
+  switch (kind) {
+    case 'wood': {
+      const grain = Math.sin(unitX * 46 + Math.sin(unitY * 12) * 2.2)
+      const plank = y % 16 < 1 || x % 31 < 1 ? 0.82 : 0
+      return THREE.MathUtils.clamp(0.12 + Math.abs(grain) * 0.18 + hash * 0.08 + plank, 0, 1)
+    }
+    case 'rough-wood': {
+      const longWarp = Math.sin(unitY * 11 + Math.sin(unitY * 4.5) * 1.8)
+      const broadGrain = Math.abs(Math.sin(unitX * 25 + longWarp * 2.8))
+      const fineGrain = Math.abs(Math.sin(unitX * 63 + unitY * 6 + Math.sin(unitY * 18) * 1.6))
+      const knotA = Math.hypot((unitX - 0.28) * 1.6, unitY - 0.3)
+      const knotB = Math.hypot((unitX - 0.74) * 1.8, unitY - 0.76)
+      const knotRings =
+        Math.exp(-knotA * 12) * Math.abs(Math.sin(knotA * 82)) + Math.exp(-knotB * 13) * Math.abs(Math.sin(knotB * 94))
+      const crackA = Math.abs(unitX - (0.16 + Math.sin(unitY * 17) * 0.022)) < 0.012 ? 0.58 : 0
+      const crackB =
+        unitY > 0.42 && unitY < 0.84 && Math.abs(unitX - (0.84 + Math.sin(unitY * 23 + 0.6) * 0.019)) < 0.01 ? 0.52 : 0
+      return THREE.MathUtils.clamp(
+        0.04 + broadGrain * 0.3 + fineGrain * 0.1 + knotRings * 0.62 + crackA + crackB + hash * 0.1,
+        0,
+        1,
+      )
+    }
+    case 'railroad-planks':
+    case 'bridge-planks':
+      return 0
+    case 'fence-timber': {
+      const longGrain = Math.abs(Math.sin(unitX * 33 + Math.sin(unitY * 7.5) * 2.2))
+      const fineGrain = Math.abs(Math.sin(unitX * 81 + unitY * 4.5))
+      const knotA = Math.hypot((unitX - 0.27) * 2.2, unitY - 0.34)
+      const knotB = Math.hypot((unitX - 0.73) * 2.4, unitY - 0.78)
+      const knots =
+        Math.exp(-knotA * 16) * Math.abs(Math.sin(knotA * 95)) + Math.exp(-knotB * 17) * Math.abs(Math.sin(knotB * 104))
+      const sawVariation = Math.abs(Math.sin(unitY * 17 + unitX * 3.2)) * 0.035
+      return THREE.MathUtils.clamp(
+        0.045 + longGrain * 0.34 + fineGrain * 0.075 + knots * 0.62 + sawVariation + hash * 0.045,
+        0,
+        0.94,
+      )
+    }
+    case 'braided-rope': {
+      const diagonalA = Math.sin((unitX * 7.5 + unitY * 25) * Math.PI)
+      const diagonalB = Math.sin((-unitX * 7.5 + unitY * 25) * Math.PI)
+      const braid = Math.pow(Math.max(diagonalA, diagonalB) * 0.5 + 0.5, 2.2)
+      const strandShadow = Math.abs(Math.sin(unitY * Math.PI * 50))
+      return THREE.MathUtils.clamp(0.08 + braid * 0.62 + strandShadow * 0.13 + hash * 0.07, 0, 0.96)
+    }
+    case 'sand': {
+      const dune = Math.sin(unitX * 8.5 + Math.sin(unitY * 5.2) * 1.7) * 0.5 + 0.5
+      const ripple = Math.abs(Math.sin(unitX * 39 + unitY * 8 + Math.sin(unitY * 14) * 1.2))
+      const grit = pseudoNoise(x * 7 + 3, y * 11 + 5)
+      const pebble = grit > 0.965 ? 0.48 : 0
+      return THREE.MathUtils.clamp(0.06 + dune * 0.2 + ripple * 0.075 + grit * 0.09 + pebble, 0, 1)
+    }
+    case 'rock': {
+      const ridgeA = Math.abs(Math.sin(unitX * 13 + unitY * 7 + Math.sin(unitY * 11) * 2.1))
+      const ridgeB = Math.abs(Math.sin(unitX * 29 - unitY * 17 + Math.sin(unitX * 9) * 1.3))
+      const strata = Math.abs(Math.sin(unitY * 22 + Math.sin(unitX * 5) * 2.4))
+      const fissure = ridgeB > 0.965 ? 0.54 : 0
+      return THREE.MathUtils.clamp(0.08 + ridgeA * 0.24 + strata * 0.16 + hash * 0.12 + fissure, 0, 1)
+    }
+    case 'gunmetal-silver': {
+      const brushed = Math.abs(Math.sin(unitX * 170 + Math.sin(unitY * 12) * 0.9))
+      const diagonalScratch = Math.abs(((unitX * 1.8 + unitY * 0.38 + 0.17) % 1) - 0.5)
+      const fineScratch = diagonalScratch < 0.009 ? 0.28 : 0
+      const weatherFleck = pseudoNoise(x * 13 + 17, y * 19 + 29) > 0.982 ? 0.34 : 0
+      const softPatina = Math.max(0, Math.sin(unitX * 9.3 + unitY * 7.1) - 0.84) * 0.22
+      return THREE.MathUtils.clamp(
+        0.035 + brushed * 0.085 + hash * 0.055 + fineScratch + weatherFleck + softPatina,
+        0,
+        0.52,
+      )
+    }
+    case 'weathered-sheet-metal':
+      return 0
+    case 'painted-wood': {
+      const plankSeam = y % 21 < 1 ? 0.72 : 0
+      const broadStroke = Math.abs(Math.sin(unitX * 18 + Math.sin(unitY * 8) * 2.4))
+      const fineStroke = Math.abs(Math.sin(unitX * 49 + unitY * 5.5))
+      const knot = Math.hypot((unitX - 0.68) * 1.9, unitY - 0.38)
+      const knotRing = Math.exp(-knot * 11) * Math.abs(Math.sin(knot * 66))
+      return THREE.MathUtils.clamp(
+        0.08 + broadStroke * 0.2 + fineStroke * 0.065 + knotRing * 0.42 + plankSeam + hash * 0.1,
+        0,
+        1,
+      )
+    }
+    case 'painted-stone': {
+      const cellX = Math.floor(x / 12)
+      const cellY = Math.floor(y / 10)
+      const mortar = x % 12 < 1 || (y % 10 < 1 && (cellX + cellY) % 2 === 0) ? 0.72 : 0
+      const wash = Math.abs(Math.sin(unitX * 7 + unitY * 9)) * 0.12
+      const moss = pseudoNoise(cellX * 5, cellY * 7) > 0.72 ? 0.24 : 0
+      return THREE.MathUtils.clamp(0.08 + mortar + wash + moss + hash * 0.08, 0, 1)
+    }
+    case 'watercolor': {
+      const cloudA = Math.sin(unitX * 7.2 + Math.sin(unitY * 4.1) * 1.6)
+      const cloudB = Math.sin(unitY * 9.4 + Math.sin(unitX * 5.7) * 1.4)
+      return THREE.MathUtils.clamp(0.22 + (cloudA + cloudB + 2) * 0.105 + hash * 0.06, 0, 1)
+    }
+    case 'panels': {
+      const seam = x % 16 < 1 || y % 16 < 1 ? 0.78 : 0
+      const inset = x % 16 === 3 && y % 16 === 3 ? 0.5 : 0
+      return THREE.MathUtils.clamp(0.06 + hash * 0.04 + seam + inset, 0, 1)
+    }
+    case 'grid': {
+      const line = x % 16 < 1 || y % 16 < 1 ? 0.9 : 0
+      return THREE.MathUtils.clamp(0.05 + line + hash * 0.03, 0, 1)
+    }
+    case 'neon-net':
+      return x % 16 < 2 || y % 16 < 2 ? 1 : 0
+    case 'holographic-hover-grid':
+      return 0
+    case 'waves': {
+      const wave = Math.abs(Math.sin(unitX * Math.PI * 5 + Math.sin(unitY * Math.PI * 3)))
+      return 0.08 + wave * 0.3
+    }
+    case 'bark': {
+      const ridge = Math.abs(Math.sin(unitX * 24 + Math.sin(unitY * 10) * 1.7))
+      return THREE.MathUtils.clamp(0.12 + ridge * 0.3 + hash * 0.14, 0, 1)
+    }
+    case 'jungle-vines': {
+      const diagonalA = Math.abs(((x + y * 0.62) % 22) - 11)
+      const diagonalB = Math.abs(((x - y * 0.54 + 96) % 29) - 14.5)
+      const vine = diagonalA < 1.15 || diagonalB < 0.9 ? 0.78 : 0
+      const nodeX = (x + Math.floor(y / 12) * 7) % 24
+      const nodeY = y % 12
+      const leaf = Math.pow((nodeX - 12) / 5.2, 2) + Math.pow((nodeY - 6) / 2.7, 2) < 1 ? 0.52 : 0
+      const vein = leaf > 0 && Math.abs(nodeY - 6) < 0.7 ? 0.18 : 0
+      return THREE.MathUtils.clamp(0.035 + hash * 0.045 + vine + leaf + vein, 0, 1)
+    }
+    case 'leaf-canopy': {
+      const cellSize = 12
+      const cellX = Math.floor(x / cellSize)
+      const cellY = Math.floor(y / cellSize)
+      const localX = (x % cellSize) / cellSize
+      const localY = (y % cellSize) / cellSize
+      const centerX = 0.24 + pseudoNoise(cellX * 19 + 5, cellY * 7 + 3) * 0.52
+      const centerY = 0.2 + pseudoNoise(cellX * 11 + 13, cellY * 17 + 9) * 0.58
+      const angle = pseudoNoise(cellX * 23 + 1, cellY * 29 + 4) * Math.PI
+      const deltaX = localX - centerX
+      const deltaY = localY - centerY
+      const rotatedX = deltaX * Math.cos(angle) - deltaY * Math.sin(angle)
+      const rotatedY = deltaX * Math.sin(angle) + deltaY * Math.cos(angle)
+      const leafShape = Math.abs(rotatedX) * 1.45 + Math.abs(rotatedY) * 3.4
+      const leaf = leafShape < 0.72 ? 0.58 : 0
+      const vein = leaf > 0 && Math.abs(rotatedX) < 0.035 ? 0.24 : 0
+      const overlap = Math.max(0, Math.sin(unitX * 13 + unitY * 17)) * 0.16
+      return THREE.MathUtils.clamp(0.08 + hash * 0.08 + overlap + leaf + vein, 0, 1)
+    }
+    case 'moss-bark': {
+      const ridge = Math.abs(Math.sin(unitX * 25 + Math.sin(unitY * 8.5) * 2.1))
+      const broadWarp = Math.sin(unitX * 6.5 + unitY * 4.2) + Math.sin(unitY * 7.4 - unitX * 3.8)
+      const mossPatch = broadWarp > 0.72 ? 0.58 : broadWarp > 0.32 ? 0.28 : 0
+      return THREE.MathUtils.clamp(0.06 + ridge * 0.22 + mossPatch + hash * 0.1, 0, 1)
+    }
+    case 'ancient-bricks': {
+      const brickHeight = 10
+      const brickWidth = 22
+      const row = Math.floor(y / brickHeight)
+      const shiftedX = (x + (row % 2) * (brickWidth / 2)) % brickWidth
+      const mortar = shiftedX < 1.4 || y % brickHeight < 1.4 ? 0.9 : 0
+      const chippedEdge =
+        (shiftedX < 3 || shiftedX > brickWidth - 3 || y % brickHeight < 3) && pseudoNoise(x * 3 + row, y * 5) > 0.72
+          ? 0.28
+          : 0
+      const sunWash = Math.abs(Math.sin(unitX * 8.5 + unitY * 5.2)) * 0.11
+      return THREE.MathUtils.clamp(0.06 + mortar + chippedEdge + sunWash + hash * 0.07, 0, 1)
+    }
+    case 'stick-fence': {
+      const stickWidth = 7
+      const stickOffset = Math.floor(x / stickWidth)
+      const localX = x % stickWidth
+      const seam = localX === 0 || localX === stickWidth - 1 ? 0.78 : 0
+      const irregularEdge = (y + stickOffset * 3) % size < (stickOffset % 3) + 1 ? 0.26 : 0
+      const ropeBand = (y >= 17 && y <= 20) || (y >= 43 && y <= 46) ? 0.34 : 0
+      const grain = Math.abs(Math.sin(unitY * 42 + stickOffset * 1.7)) * 0.12
+      return THREE.MathUtils.clamp(0.08 + seam + irregularEdge + ropeBand + grain + hash * 0.08, 0, 1)
+    }
+    case 'debug':
+      return (x + y) % 8 < 4 ? 0.1 : 0.85
+  }
+}
+
+function pseudoNoise(x: number, y: number): number {
+  const value = Math.sin(x * 12.9898 + y * 78.233) * 43_758.5453
+  return value - Math.floor(value)
+}
+
+function disposeMaterial(material: THREE.Material): void {
+  const textures = new Set<THREE.Texture>()
+  collectTextures(material, textures)
+  material.dispose()
+  textures.forEach(disposeTexture)
+}
+
+function disposeTexture(texture: THREE.Texture | null | undefined): void {
+  if (!texture) return
+  if (releaseThemeMaterialTexture(texture)) texture.dispose()
+}