@marble.fun/track-catalog 3.0.0

package/src/pages/play/race/track-appearance-support.ts

@@ -0,0 +1,983 @@
+import type { MaterialSlot, TrackPieceCategory } from '@marble.fun/physics-engine'
+import * as THREE from 'three'
+
+import { applyTransparentSupportFadeShader } from '../../../three/theme-material-registry'
+import {
+  JAPANESE_SAKURA_DRAGON_STONE_SUPPORT_ID,
+  JAPANESE_SAKURA_VERMILION_UNDERBRIDGE_SUPPORT_ID,
+} from '../../../three/japanese-sakura-appearance'
+import { addJapaneseSakuraCastleSupportModel } from './japanese-sakura-castle-support-blender'
+import {
+  createUnderTrackSupportLayout,
+  UNDER_TRACK_SUPPORT_BAY_LENGTH,
+  UNDER_TRACK_SUPPORT_DEPTH,
+  UNDER_TRACK_SUPPORT_FADE_DEPTH,
+  UNDER_TRACK_SUPPORT_FADE_START_DEPTH,
+  UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE,
+  UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+  underTrackSupportFadeAtDepth,
+  underTrackSupportHalfSpan,
+  underTrackSupportStationClearance,
+} from './under-track-support-architecture'
+
+export const WILD_WEST_TIMBER_TRESTLE_SUPPORT_ID = 'wild-west.timber-trestle-support'
+export const WILD_WEST_CANYON_BUTTRESS_SUPPORT_ID = 'wild-west.canyon-buttress-support'
+export const WILD_WEST_TRESTLE_METAL_MATERIAL_ID = 'wild-west.trestle-iron'
+
+const WILD_WEST_THEME_ID = 'rocky-mountain-wild-west'
+const JAPANESE_SAKURA_THEME_ID = 'japanese-sakura-lake'
+const WORLD_UP = new THREE.Vector3(0, 1, 0)
+const UNSUPPORTED_RUNTIME_KINDS = new Set(['conveyor', 'elevator', 'vortex'])
+const SUPPORT_DECK_UNDERSIDE_OFFSET = 0.32
+const CANYON_SLOPE_TRANSITION_DEPTH_FRACTION = 0.36
+const CANYON_COURSE_SCHEDULE = [
+  [0, 0.055, 1.05, 1.02, false],
+  [0.058, 0.11, 0.88, 0.96, true],
+  [0.113, 0.17, 0.82, 0.93, false],
+  [0.173, 0.23, 0.78, 0.91, true],
+  [0.233, 0.295, 0.7, 0.88, false],
+  [0.298, 0.36, 0.64, 0.84, true],
+  [0.363, 0.43, 0.78, 0.88, false],
+  [0.433, 0.5, 0.74, 0.85, false],
+  [0.503, 0.57, 0.68, 0.82, true],
+  [0.573, 0.64, 0.7, 0.82, false],
+  [0.643, 0.71, 0.76, 0.84, true],
+  [0.713, 0.78, 0.82, 0.85, false],
+  [0.783, 0.85, 0.86, 0.86, true],
+  [0.853, 0.925, 0.9, 0.88, false],
+  [0.928, 1, 0.94, 0.9, true],
+] as const
+
+export interface TrackAppearanceSupportFrame {
+  point: THREE.Vector3
+  tangent: THREE.Vector3
+  right: THREE.Vector3
+  up: THREE.Vector3
+  width: number
+}
+
+export interface TrackAppearanceSupportMaterials {
+  support: THREE.Material
+  timber: THREE.Material
+  metal: THREE.Material
+}
+
+export interface TrackAppearanceSupportOptions {
+  capStart?: boolean
+  capEnd?: boolean
+  /** Cumulative path length at the input connector, shared with material continuity. */
+  connectionPhase?: number
+  /** Existing topology-owned stations which this lower-priority route must not overlap. */
+  excludedStationPoints?: readonly THREE.Vector3[]
+}
+
+interface SampledSupportLayout {
+  stations: TrackAppearanceSupportFrame[]
+  ownedBays: readonly {
+    start: TrackAppearanceSupportFrame
+    end: TrackAppearanceSupportFrame
+    startDistance: number
+    endDistance: number
+  }[]
+}
+
+interface Beam {
+  start: THREE.Vector3
+  end: THREE.Vector3
+  width: number
+  depth: number
+  fadeAnchorY: number
+}
+
+export function supportsTrackAppearanceSupport(
+  _category: TrackPieceCategory,
+  runtimeKind: string,
+  materialSlots: readonly MaterialSlot[],
+): boolean {
+  return materialSlots.includes('lane.surface') && !UNSUPPORTED_RUNTIME_KINDS.has(runtimeKind)
+}
+
+export function addTrackAppearanceSupport(
+  root: THREE.Group,
+  pieceId: string,
+  frames: readonly TrackAppearanceSupportFrame[],
+  supportAppearanceId: string | undefined,
+  materials: TrackAppearanceSupportMaterials,
+  options: TrackAppearanceSupportOptions = {},
+): THREE.Group | undefined {
+  if (frames.length < 2) return undefined
+  if (
+    supportAppearanceId !== WILD_WEST_TIMBER_TRESTLE_SUPPORT_ID &&
+    supportAppearanceId !== WILD_WEST_CANYON_BUTTRESS_SUPPORT_ID &&
+    supportAppearanceId !== JAPANESE_SAKURA_VERMILION_UNDERBRIDGE_SUPPORT_ID &&
+    supportAppearanceId !== JAPANESE_SAKURA_DRAGON_STONE_SUPPORT_ID
+  ) {
+    return undefined
+  }
+
+  applyTransparentSupportFadeShader(materials.support)
+  applyTransparentSupportFadeShader(materials.metal)
+  const group = new THREE.Group()
+  group.name = `${pieceId}-under-track-support`
+  const themeOnly = supportAppearanceId.startsWith('japanese-sakura.') ? JAPANESE_SAKURA_THEME_ID : WILD_WEST_THEME_ID
+  group.userData.themeOnly = themeOnly
+  group.userData.decorative = true
+  group.userData.visualOnly = true
+  group.userData.supportAppearanceId = supportAppearanceId
+  group.userData.depthFadeTechnique = 'transparent-height-fade-with-exterior-depth-prepass'
+  group.userData.supportDepth = UNDER_TRACK_SUPPORT_DEPTH
+  group.userData.supportFadeStartDepth = UNDER_TRACK_SUPPORT_FADE_START_DEPTH
+  group.userData.supportFadeEndDepth = UNDER_TRACK_SUPPORT_DEPTH
+  group.userData.supportBayLength = UNDER_TRACK_SUPPORT_BAY_LENGTH
+  group.userData.supportArchitecture = 'fixed-depth-continuous-metric-bays-v2'
+  group.userData.supportFootprintScale = UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE
+  group.userData.supportMemberScale = UNDER_TRACK_SUPPORT_MEMBER_SCALE
+  root.add(group)
+
+  let content: THREE.Group | undefined
+  const renderAtConnectionPhase = (connectionPhase: number) => {
+    if (!Number.isFinite(connectionPhase)) return
+    if (content && Math.abs((group.userData.supportConnectionPhase as number) - connectionPhase) < 0.000_001) return
+    if (content) {
+      group.remove(content)
+      disposeSupportContent(content)
+    }
+    content = new THREE.Group()
+    content.name = `${pieceId}-under-track-support-content`
+    group.add(content)
+    const excludedStationPoints: THREE.Vector3[] = [...(options.excludedStationPoints ?? [])]
+    root.traverse(object => {
+      if (!Array.isArray(object.userData.supportStationPoints)) return
+      for (const point of object.userData.supportStationPoints as [number, number, number][]) {
+        excludedStationPoints.push(new THREE.Vector3(...point))
+      }
+    })
+    const resolvedOptions = { ...options, connectionPhase, excludedStationPoints }
+    if (supportAppearanceId === WILD_WEST_TIMBER_TRESTLE_SUPPORT_ID) {
+      addTimberTrestle(content, pieceId, frames, materials, resolvedOptions)
+    } else if (supportAppearanceId === WILD_WEST_CANYON_BUTTRESS_SUPPORT_ID) {
+      addStackedCanyonButtresses(content, pieceId, frames, materials.support, resolvedOptions)
+    } else if (supportAppearanceId === JAPANESE_SAKURA_VERMILION_UNDERBRIDGE_SUPPORT_ID) {
+      addSakuraVermilionUnderbridge(content, pieceId, frames, materials, resolvedOptions)
+    } else {
+      addSakuraDragonStoneSupport(content, pieceId, frames, materials.support, resolvedOptions)
+    }
+    Object.assign(group.userData, content.userData)
+    group.userData.supportConnectionPhase = connectionPhase
+    content.traverse(object => {
+      object.userData.themeOnly = themeOnly
+      object.userData.decorative = true
+      object.userData.visualOnly = true
+      object.castShadow = true
+      object.receiveShadow = true
+    })
+    addSupportDepthPrepasses(content)
+  }
+  group.userData.setSupportConnectionPhase = renderAtConnectionPhase
+  renderAtConnectionPhase(options.connectionPhase ?? 0)
+  return group
+}
+
+function disposeSupportContent(content: THREE.Object3D): void {
+  content.userData.supportDisposed = true
+  content.traverse(object => {
+    if (!(object instanceof THREE.Mesh)) return
+    object.geometry.dispose()
+    const materials = Array.isArray(object.material) ? object.material : [object.material]
+    for (const material of materials) {
+      if (material.userData.supportDepthPrepassMaterial === true) material.dispose()
+    }
+  })
+}
+
+function addSupportDepthPrepasses(group: THREE.Group): void {
+  const meshes: THREE.Mesh[] = []
+  group.traverse(object => {
+    if (
+      object instanceof THREE.Mesh &&
+      object.userData.supportDepthPrepass !== true &&
+      object.userData.supportSkipDepthPrepass !== true
+    ) {
+      meshes.push(object)
+    }
+  })
+
+  for (const mesh of meshes) {
+    const visibleMaterials = Array.isArray(mesh.material) ? mesh.material : [mesh.material]
+    visibleMaterials.forEach(material => {
+      material.depthFunc = THREE.EqualDepth
+    })
+    const depthMaterials = visibleMaterials.map(material => {
+      const depthMaterial = material.clone()
+      depthMaterial.onBeforeCompile = THREE.Material.prototype.onBeforeCompile
+      depthMaterial.customProgramCacheKey = THREE.Material.prototype.customProgramCacheKey
+      delete depthMaterial.userData.transparentSupportFadeShader
+      applyTransparentSupportFadeShader(depthMaterial, true, true)
+      depthMaterial.name = `${material.name || 'support'}:exterior-depth-prepass`
+      depthMaterial.transparent = false
+      depthMaterial.depthWrite = true
+      depthMaterial.colorWrite = false
+      depthMaterial.blending = THREE.NoBlending
+      depthMaterial.depthFunc = THREE.LessEqualDepth
+      depthMaterial.userData.supportDepthPrepassMaterial = true
+      depthMaterial.userData.supportDepthCoverage = 'complete-fade-exterior'
+      depthMaterial.needsUpdate = true
+      return depthMaterial
+    })
+    const depthMesh = mesh.clone(false)
+    depthMesh.name = `${mesh.name}-exterior-depth-prepass`
+    depthMesh.material = Array.isArray(mesh.material) ? depthMaterials : depthMaterials[0]!
+    depthMesh.userData = {
+      ...mesh.userData,
+      supportDepthPrepass: true,
+      decorative: true,
+      visualOnly: true,
+    }
+    depthMesh.castShadow = false
+    depthMesh.receiveShadow = false
+    const parent = mesh.parent ?? group
+    parent.add(depthMesh)
+  }
+}
+
+function trestleBentAtFrame(frame: TrackAppearanceSupportFrame) {
+  const halfSpan = underTrackSupportHalfSpan(frame.width)
+  const topCenter = frame.point.clone().addScaledVector(frame.up, -0.39)
+  const left = topCenter.clone().addScaledVector(frame.right, -halfSpan)
+  const right = topCenter.clone().addScaledVector(frame.right, halfSpan)
+  return {
+    left,
+    right,
+    bottomLeft: left.clone().addScaledVector(WORLD_UP, -UNDER_TRACK_SUPPORT_DEPTH),
+    bottomRight: right.clone().addScaledVector(WORLD_UP, -UNDER_TRACK_SUPPORT_DEPTH),
+    fadeAnchorY: Math.max(left.y, right.y),
+  }
+}
+
+function sakuraBentAtFrame(frame: TrackAppearanceSupportFrame) {
+  const halfSpan = underTrackSupportHalfSpan(frame.width)
+  const topCenter = frame.point.clone().addScaledVector(frame.up, -0.43)
+  const left = topCenter.clone().addScaledVector(frame.right, -halfSpan)
+  const right = topCenter.clone().addScaledVector(frame.right, halfSpan)
+  return { left, right, fadeAnchorY: Math.max(left.y, right.y) }
+}
+
+function addTimberTrestle(
+  root: THREE.Group,
+  pieceId: string,
+  pathFrames: readonly TrackAppearanceSupportFrame[],
+  materials: TrackAppearanceSupportMaterials,
+  options: TrackAppearanceSupportOptions,
+): void {
+  const layout = sampleContinuousSupportLayout(pathFrames, options)
+  const sampled = layout.stations
+  const posts: Beam[] = []
+  const ties: Beam[] = []
+  const braces: Beam[] = []
+  const straps: Beam[] = []
+
+  for (const [index, frame] of sampled.entries()) {
+    const halfSpan = underTrackSupportHalfSpan(frame.width)
+    const topCenter = frame.point.clone().addScaledVector(frame.up, -0.39)
+    const topLeft = topCenter.clone().addScaledVector(frame.right, -halfSpan)
+    const topRight = topCenter.clone().addScaledVector(frame.right, halfSpan)
+    const fadeAnchorY = Math.max(topLeft.y, topRight.y)
+    const bottomLeft = topLeft.clone().addScaledVector(WORLD_UP, -UNDER_TRACK_SUPPORT_DEPTH)
+    const bottomRight = topRight.clone().addScaledVector(WORLD_UP, -UNDER_TRACK_SUPPORT_DEPTH)
+    const postWidth = (0.3 + deterministic(`${pieceId}:post:${index}`) * 0.055) * UNDER_TRACK_SUPPORT_MEMBER_SCALE
+    posts.push(
+      beam(bottomLeft, topLeft, postWidth, postWidth * 0.92, fadeAnchorY),
+      beam(bottomRight, topRight, postWidth * 0.96, postWidth, fadeAnchorY),
+    )
+    ties.push(
+      beam(
+        topLeft,
+        topRight,
+        0.27 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        0.21 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        fadeAnchorY,
+      ),
+      beam(
+        bottomLeft.clone().lerp(topLeft, 0.38),
+        bottomRight.clone().lerp(topRight, 0.38),
+        0.18 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        0.15 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        fadeAnchorY,
+      ),
+    )
+    braces.push(
+      beam(
+        bottomLeft,
+        topRight,
+        0.14 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        0.11 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        fadeAnchorY,
+      ),
+      beam(
+        bottomRight,
+        topLeft,
+        0.14 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        0.11 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        fadeAnchorY,
+      ),
+    )
+    for (const top of [topLeft, topRight]) {
+      straps.push(
+        beam(
+          top.clone().addScaledVector(frame.right, -0.055),
+          top.clone().addScaledVector(frame.right, 0.055),
+          postWidth + 0.1 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+          0.075 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+          fadeAnchorY,
+        ),
+      )
+    }
+  }
+
+  // Load-bearing stringers and the evenly distributed bent schedule both
+  // meet the exact connector planes, matching a space-between layout.
+  for (let index = 0; index < pathFrames.length - 1; index += 1) {
+    const current = pathFrames[index]!
+    const next = pathFrames[index + 1]!
+    for (const side of [-1, 1] as const) {
+      ties.push(
+        beam(
+          supportContact(current, side),
+          supportContact(next, side),
+          0.21 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+          0.18 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        ),
+      )
+    }
+  }
+  for (const ownedBay of layout.ownedBays) {
+    const current = trestleBentAtFrame(ownedBay.start)
+    const next = trestleBentAtFrame(ownedBay.end)
+    const fadeAnchorY = Math.max(current.fadeAnchorY, next.fadeAnchorY)
+    braces.push(
+      beam(
+        current.bottomLeft,
+        next.left,
+        0.14 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        0.11 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        fadeAnchorY,
+      ),
+      beam(
+        current.left,
+        next.bottomLeft,
+        0.14 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        0.11 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        fadeAnchorY,
+      ),
+      beam(
+        current.bottomRight,
+        next.right,
+        0.14 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        0.11 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        fadeAnchorY,
+      ),
+      beam(
+        current.right,
+        next.bottomRight,
+        0.14 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        0.11 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        fadeAnchorY,
+      ),
+    )
+  }
+
+  addBeamBatch(root, `${pieceId}-trestle-posts`, posts, materials.support, 'trestle-post')
+  addBeamBatch(root, `${pieceId}-trestle-ties`, ties, materials.support, 'trestle-tie')
+  addBeamBatch(root, `${pieceId}-trestle-braces`, braces, materials.support, 'trestle-brace')
+  addBeamBatch(root, `${pieceId}-trestle-iron-straps`, straps, materials.metal, 'trestle-strap')
+  root.userData.supportBentCount = sampled.length
+  root.userData.supportBentLayout = 'continuous-metric-grid'
+  root.userData.supportBentPoints = sampled.map(frame => frame.point.toArray())
+  root.userData.supportStationPoints = sampled.map(frame => frame.point.toArray())
+  root.userData.supportOwnedBayCount = layout.ownedBays.length
+  const pathLength = cumulativeDistances(pathFrames).at(-1) ?? 0
+  root.userData.openStartInset = sampled[0]?.point.distanceTo(pathFrames[0]!.point) ?? pathLength
+  root.userData.openEndInset = sampled.at(-1)?.point.distanceTo(pathFrames.at(-1)!.point) ?? pathLength
+  root.userData.stringersMeetConnectorPlanes = true
+  root.userData.everyAdjacentBentConnected = true
+}
+
+function addSakuraVermilionUnderbridge(
+  root: THREE.Group,
+  pieceId: string,
+  pathFrames: readonly TrackAppearanceSupportFrame[],
+  materials: TrackAppearanceSupportMaterials,
+  options: TrackAppearanceSupportOptions,
+): void {
+  const layout = sampleContinuousSupportLayout(pathFrames, options)
+  const sampled = layout.stations
+  const timber: Beam[] = []
+  const hardware: Beam[] = []
+
+  for (const frame of sampled) {
+    const halfSpan = underTrackSupportHalfSpan(frame.width)
+    const topCenter = frame.point.clone().addScaledVector(frame.up, -0.43)
+    const left = topCenter.clone().addScaledVector(frame.right, -halfSpan)
+    const right = topCenter.clone().addScaledVector(frame.right, halfSpan)
+    const fadeAnchorY = Math.max(left.y, right.y)
+    const leftBottom = left.clone().addScaledVector(WORLD_UP, -UNDER_TRACK_SUPPORT_DEPTH)
+    const rightBottom = right.clone().addScaledVector(WORLD_UP, -UNDER_TRACK_SUPPORT_DEPTH)
+    timber.push(
+      beam(
+        leftBottom,
+        left,
+        0.72 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        0.66 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        fadeAnchorY,
+      ),
+      beam(
+        rightBottom,
+        right,
+        0.72 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        0.66 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        fadeAnchorY,
+      ),
+      beam(
+        left.clone().addScaledVector(frame.right, -0.28 * UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE),
+        right.clone().addScaledVector(frame.right, 0.28 * UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE),
+        0.82 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        0.52 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        fadeAnchorY,
+      ),
+    )
+    for (const depth of [0.65, 1.15].map(value => value * UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE)) {
+      for (const post of [left, right]) {
+        hardware.push(
+          beam(
+            post
+              .clone()
+              .addScaledVector(frame.right, -0.41 * UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE)
+              .addScaledVector(WORLD_UP, -depth),
+            post
+              .clone()
+              .addScaledVector(frame.right, 0.41 * UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE)
+              .addScaledVector(WORLD_UP, -depth),
+            0.15 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+            0.78 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+            fadeAnchorY,
+          ),
+        )
+      }
+    }
+    for (const side of [-1, 1] as const) {
+      const post = side < 0 ? left : right
+      for (const [step, width] of [
+        [0.55, 1.28],
+        [0.91, 1.82],
+        [1.27, 2.32],
+      ] as const) {
+        timber.push(
+          beam(
+            post
+              .clone()
+              .addScaledVector(frame.right, -side * width * 0.5 * UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE)
+              .addScaledVector(WORLD_UP, -step * UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE),
+            post
+              .clone()
+              .addScaledVector(frame.right, side * width * 0.5 * UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE)
+              .addScaledVector(WORLD_UP, -step * UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE),
+            0.31 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+            0.38 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+            fadeAnchorY,
+          ),
+        )
+      }
+    }
+  }
+
+  for (let index = 0; index < pathFrames.length - 1; index += 1) {
+    for (const side of [-1, 1] as const) {
+      const current = supportContact(pathFrames[index]!, side)
+      const next = supportContact(pathFrames[index + 1]!, side)
+      timber.push(
+        beam(current, next, 0.5 * UNDER_TRACK_SUPPORT_MEMBER_SCALE, 0.42 * UNDER_TRACK_SUPPORT_MEMBER_SCALE),
+        beam(
+          current.clone().addScaledVector(WORLD_UP, -0.52 * UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE),
+          next.clone().addScaledVector(WORLD_UP, -0.52 * UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE),
+          0.42 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+          0.38 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+        ),
+      )
+    }
+  }
+  for (const ownedBay of layout.ownedBays) {
+    const current = sakuraBentAtFrame(ownedBay.start)
+    const next = sakuraBentAtFrame(ownedBay.end)
+    const fadeAnchorY = Math.max(current.fadeAnchorY, next.fadeAnchorY)
+    for (const side of ['left', 'right'] as const) {
+      timber.push(
+        beam(
+          current[side].clone().addScaledVector(WORLD_UP, -UNDER_TRACK_SUPPORT_FADE_START_DEPTH),
+          next[side].clone().addScaledVector(WORLD_UP, -1.65 * UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE),
+          0.28 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+          0.34 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+          fadeAnchorY,
+        ),
+        beam(
+          current[side].clone().addScaledVector(WORLD_UP, -1.65 * UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE),
+          next[side].clone().addScaledVector(WORLD_UP, -UNDER_TRACK_SUPPORT_FADE_START_DEPTH),
+          0.28 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+          0.34 * UNDER_TRACK_SUPPORT_MEMBER_SCALE,
+          fadeAnchorY,
+        ),
+      )
+    }
+  }
+
+  addBeamBatch(root, `${pieceId}-sakura-underbridge-timber`, timber, materials.support, 'sakura-underbridge-timber')
+  addBeamBatch(root, `${pieceId}-sakura-underbridge-hardware`, hardware, materials.metal, 'sakura-underbridge-hardware')
+  root.userData.supportBentCount = sampled.length
+  root.userData.supportBentLayout = 'continuous-metric-grid'
+  root.userData.stringersMeetConnectorPlanes = true
+  root.userData.supportStationPoints = sampled.map(frame => frame.point.toArray())
+  root.userData.supportOwnedBayCount = layout.ownedBays.length
+}
+
+function addSakuraDragonStoneSupport(
+  root: THREE.Group,
+  pieceId: string,
+  pathFrames: readonly TrackAppearanceSupportFrame[],
+  material: THREE.Material,
+  options: TrackAppearanceSupportOptions,
+): void {
+  const layout = sampleContinuousSupportLayout(pathFrames, options)
+  const sampled = layout.stations
+  void addJapaneseSakuraCastleSupportModel(root, pieceId, pathFrames, sampled, material, {
+    ...options,
+    ownedBayDistances: layout.ownedBays.map(bay => [bay.startDistance, bay.endDistance]),
+  }).then(() => {
+    if (root.userData.supportDisposed !== true) addSupportDepthPrepasses(root)
+  })
+  root.userData.supportBentCount = sampled.length
+  root.userData.supportBentLayout = 'continuous-metric-grid-approved-blender-modules'
+  root.userData.hasDragonHero = false
+  root.userData.dragonSideCoverage = 'none'
+  root.userData.supportStationPoints = sampled.map(frame => frame.point.toArray())
+  root.userData.supportOwnedBayCount = layout.ownedBays.length
+}
+
+function supportContact(frame: TrackAppearanceSupportFrame, side: -1 | 1): THREE.Vector3 {
+  return frame.point
+    .clone()
+    .addScaledVector(frame.up, -0.39)
+    .addScaledVector(frame.right, side * underTrackSupportHalfSpan(frame.width))
+}
+
+function sampleContinuousSupportLayout(
+  frames: readonly TrackAppearanceSupportFrame[],
+  options: TrackAppearanceSupportOptions,
+): SampledSupportLayout {
+  const distances = cumulativeDistances(frames)
+  const length = distances.at(-1) ?? 0
+  const layout = createUnderTrackSupportLayout(
+    length,
+    options.connectionPhase,
+    options.capStart === false,
+    options.capEnd === false,
+  )
+  const excluded = options.excludedStationPoints ?? []
+  const allowed = (frame: TrackAppearanceSupportFrame) =>
+    excluded.every(point => point.distanceTo(frame.point) >= underTrackSupportStationClearance(frame.width))
+  const stations = layout.centers.map(center => frameAtDistance(frames, distances, center)).filter(allowed)
+  const ownedBays = layout.ownedBays
+    .map(bay => ({
+      start: frameAtDistance(frames, distances, bay.start),
+      end: frameAtDistance(frames, distances, bay.end),
+      startDistance: bay.start,
+      endDistance: bay.end,
+    }))
+    .filter(bay => allowed(bay.start) && allowed(bay.end))
+  return { stations, ownedBays }
+}
+
+function addStackedCanyonButtresses(
+  root: THREE.Group,
+  pieceId: string,
+  pathFrames: readonly TrackAppearanceSupportFrame[],
+  material: THREE.Material,
+  options: TrackAppearanceSupportOptions,
+): void {
+  const layout = sampleContinuousSupportLayout(pathFrames, options)
+  const frames = layout.stations
+  const geometry = createStackedCanyonGeometry(pieceId, frames)
+  const buttresses = new THREE.Mesh(geometry, material)
+  buttresses.name = `${pieceId}-stacked-canyon-buttresses`
+  buttresses.userData.supportRole = 'stacked-canyon-buttresses'
+  buttresses.userData.supportCourseCount = CANYON_COURSE_SCHEDULE.length
+  buttresses.userData.supportFadeAttribute = 'supportFade'
+  root.userData.supportBentCount = frames.length
+  root.userData.supportStationPoints = frames.map(frame => frame.point.toArray())
+  root.userData.supportOwnedBayCount = layout.ownedBays.length
+  const pathLength = cumulativeDistances(pathFrames).at(-1) ?? 0
+  root.userData.openStartInset =
+    options.capStart === false ? (frames[0]?.point.distanceTo(pathFrames[0]!.point) ?? pathLength) : 0
+  root.userData.openEndInset =
+    options.capEnd === false ? (frames.at(-1)?.point.distanceTo(pathFrames.at(-1)!.point) ?? pathLength) : 0
+  root.add(buttresses)
+}
+
+function createStackedCanyonGeometry(
+  pieceId: string,
+  frames: readonly TrackAppearanceSupportFrame[],
+): THREE.BufferGeometry {
+  const vertices: number[] = []
+  const uvs: number[] = []
+  const fades: number[] = []
+  const indices: number[] = []
+  const topContactVertexIndices: number[] = []
+
+  for (const [buttressIndex, frame] of frames.entries()) {
+    const contactPlanePoint = frame.point.clone().addScaledVector(frame.up, -SUPPORT_DECK_UNDERSIDE_OFFSET)
+    const topY = contactPlanePoint.y
+    const right = frame.right.clone().setY(0)
+    if (right.lengthSq() < 0.000_001) right.set(frame.tangent.z, 0, -frame.tangent.x)
+    right.normalize()
+    const tangent = new THREE.Vector3().crossVectors(right, WORLD_UP).normalize()
+    if (tangent.dot(frame.tangent) < 0) tangent.negate()
+    const baseWidth = Math.max(2.9, frame.width * 0.9) * UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE
+    const baseDepth = 2.9 * UNDER_TRACK_SUPPORT_FOOTPRINT_SCALE
+    const moduleWidth = 0.96 + deterministic(`${pieceId}:${buttressIndex}:stack-width`) * 0.08
+    const moduleDepth = 0.96 + deterministic(`${pieceId}:${buttressIndex}:stack-depth`) * 0.08
+
+    for (const [
+      courseIndex,
+      [topFraction, bottomFraction, widthScale, depthScale, split],
+    ] of CANYON_COURSE_SCHEDULE.entries()) {
+      const courseWidth = baseWidth * widthScale * moduleWidth
+      const courseDepth = baseDepth * depthScale * moduleDepth
+      const seed = `${pieceId}:${buttressIndex}:${courseIndex}`
+      const centerRight = (deterministic(`${seed}:stack-x`) - 0.5) * baseWidth * 0.09
+      const centerTangent = (deterministic(`${seed}:stack-z`) - 0.5) * baseDepth * 0.055
+      const inset = UNDER_TRACK_SUPPORT_DEPTH * 0.000_35
+      const courseTopY = topY - topFraction * UNDER_TRACK_SUPPORT_DEPTH - inset
+      const courseBottomY = topY - bottomFraction * UNDER_TRACK_SUPPORT_DEPTH + inset
+      const topContactBlend = Math.max(0, 1 - topFraction / CANYON_SLOPE_TRANSITION_DEPTH_FRACTION)
+      const bottomContactBlend = Math.max(0, 1 - bottomFraction / CANYON_SLOPE_TRANSITION_DEPTH_FRACTION)
+      const splitThisCourse = split && deterministic(`${seed}:split`) > 0.52
+      const blocks: { width: number; centerRight: number }[] = []
+      if (splitThisCourse) {
+        const joint = baseWidth * 0.025
+        const leftShare = 0.46 + deterministic(`${seed}:split-share`) * 0.1
+        const leftWidth = courseWidth * leftShare - joint / 2
+        const rightWidth = courseWidth * (1 - leftShare) - joint / 2
+        blocks.push(
+          { width: leftWidth, centerRight: centerRight - courseWidth / 2 + leftWidth / 2 },
+          { width: rightWidth, centerRight: centerRight + courseWidth / 2 - rightWidth / 2 },
+        )
+      } else {
+        blocks.push({ width: courseWidth, centerRight })
+      }
+      for (const [blockIndex, block] of blocks.entries()) {
+        appendCanyonCourse(
+          { vertices, uvs, fades, indices, topContactVertexIndices },
+          {
+            topY: courseTopY,
+            bottomY: courseBottomY,
+            width: block.width,
+            depth: courseDepth,
+            center: frame.point
+              .clone()
+              .addScaledVector(right, block.centerRight)
+              .addScaledVector(tangent, centerTangent),
+            right,
+            tangent,
+            fadeAnchorY: topY,
+            seed: `${seed}:${blockIndex}`,
+            topContactPlane: topContactBlend > 0 ? { point: contactPlanePoint, normal: frame.up } : undefined,
+            topContactBlendRange: [bottomContactBlend, topContactBlend],
+          },
+        )
+      }
+    }
+  }
+
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3))
+  geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2))
+  geometry.setAttribute('uv1', new THREE.Float32BufferAttribute(uvs, 2))
+  const themeNetUvs = new Float32Array((uvs.length / 2) * 4)
+  for (let index = 0; index < uvs.length; index += 2) {
+    const target = index * 2
+    themeNetUvs[target] = uvs[index] ?? 0
+    themeNetUvs[target + 1] = uvs[index + 1] ?? 0
+    themeNetUvs[target + 2] = 1
+    themeNetUvs[target + 3] = 1
+  }
+  geometry.setAttribute('themeNetUv', new THREE.BufferAttribute(themeNetUvs, 4))
+  geometry.setAttribute('supportFade', new THREE.Float32BufferAttribute(fades, 1))
+  geometry.setIndex(indices)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingBox()
+  geometry.computeBoundingSphere()
+  geometry.userData.supportGeometry = 'spaced-stacked-canyon-buttresses'
+  geometry.userData.supportCourseCount = CANYON_COURSE_SCHEDULE.length
+  geometry.userData.supportButtressCount = frames.length
+  geometry.userData.supportDepth = UNDER_TRACK_SUPPORT_DEPTH
+  geometry.userData.supportFadeDepth = UNDER_TRACK_SUPPORT_FADE_DEPTH
+  geometry.userData.supportCapSlopeMatched = true
+  geometry.userData.supportTopContactVertexIndices = topContactVertexIndices
+  return geometry
+}
+
+interface CanyonGeometryBuffers {
+  vertices: number[]
+  uvs: number[]
+  fades: number[]
+  indices: number[]
+  topContactVertexIndices: number[]
+}
+
+interface CanyonCourseOptions {
+  topY: number
+  bottomY: number
+  width: number
+  depth: number
+  center: THREE.Vector3
+  right: THREE.Vector3
+  tangent: THREE.Vector3
+  fadeAnchorY: number
+  seed: string
+  topContactPlane?: {
+    point: THREE.Vector3
+    normal: THREE.Vector3
+  }
+  topContactBlendRange: readonly [bottom: number, top: number]
+}
+
+function appendCanyonCourse(buffers: CanyonGeometryBuffers, options: CanyonCourseOptions): void {
+  const {
+    topY,
+    bottomY,
+    width,
+    depth,
+    center,
+    right,
+    tangent,
+    fadeAnchorY,
+    seed,
+    topContactPlane,
+    topContactBlendRange,
+  } = options
+  const courseHeight = topY - bottomY
+  const bevel = Math.min(
+    courseHeight * (0.12 + deterministic(`${seed}:bevel-height`) * 0.13),
+    Math.min(width, depth) * 0.07,
+  )
+  const ringSchedule = [
+    [bottomY, 0.93 + deterministic(`${seed}:bottom-inset`) * 0.045],
+    [bottomY + bevel, 0.96 + deterministic(`${seed}:lower-shoulder`) * 0.08],
+    [topY - bevel, 0.97 + deterministic(`${seed}:upper-shoulder`) * 0.09],
+    [topY, 0.93 + deterministic(`${seed}:top-inset`) * 0.045],
+  ] as const
+  const rings = ringSchedule.map(([y, scale], ringIndex) => ({
+    y,
+    topContactBlend: topContactPlane
+      ? THREE.MathUtils.lerp(
+          topContactBlendRange[0],
+          topContactBlendRange[1],
+          THREE.MathUtils.clamp((y - bottomY) / courseHeight, 0, 1),
+        )
+      : 0,
+    points: createCanyonCourseContour((width * scale) / 2, (depth * scale) / 2, seed, ringIndex),
+  }))
+
+  const worldPoint = (point: THREE.Vector2, y: number, topContactBlend = 0) => {
+    const world = center.clone().addScaledVector(right, point.x).addScaledVector(tangent, point.y).setY(y)
+    if (!topContactPlane || topContactBlend <= 0 || Math.abs(topContactPlane.normal.y) <= 0.000_001) return world
+    const contactY =
+      topContactPlane.point.y -
+      (topContactPlane.normal.x * (world.x - topContactPlane.point.x) +
+        topContactPlane.normal.z * (world.z - topContactPlane.point.z)) /
+        topContactPlane.normal.y
+    world.y += (contactY - topY) * topContactBlend
+    return world
+  }
+  const fadeAt = (y: number) => underTrackSupportFadeAtDepth(fadeAnchorY - y)
+
+  for (let ringIndex = 0; ringIndex < rings.length - 1; ringIndex += 1) {
+    const lower = rings[ringIndex]!
+    const upper = rings[ringIndex + 1]!
+    let lowerU = 0
+    let upperU = 0
+    for (let side = 0; side < lower.points.length; side += 1) {
+      const next = (side + 1) % lower.points.length
+      const a = lower.points[side]!
+      const b = lower.points[next]!
+      const c = upper.points[side]!
+      const d = upper.points[next]!
+      const base = buffers.vertices.length / 3
+      const world = [
+        worldPoint(a, lower.y, lower.topContactBlend),
+        worldPoint(b, lower.y, lower.topContactBlend),
+        worldPoint(c, upper.y, upper.topContactBlend),
+        worldPoint(d, upper.y, upper.topContactBlend),
+      ]
+      world.forEach(point => buffers.vertices.push(point.x, point.y, point.z))
+      if (topContactPlane && upper.topContactBlend === 1) {
+        buffers.topContactVertexIndices.push(base + 2, base + 3)
+      }
+      const lowerNextU = lowerU + a.distanceTo(b)
+      const upperNextU = upperU + c.distanceTo(d)
+      buffers.uvs.push(lowerU, -lower.y, lowerNextU, -lower.y, upperU, -upper.y, upperNextU, -upper.y)
+      buffers.fades.push(fadeAt(lower.y), fadeAt(lower.y), fadeAt(upper.y), fadeAt(upper.y))
+      buffers.indices.push(base, base + 2, base + 1, base + 1, base + 2, base + 3)
+      lowerU = lowerNextU
+      upperU = upperNextU
+    }
+  }
+
+  for (const [ring, isTop] of [
+    [rings[0]!, false],
+    [rings.at(-1)!, true],
+  ] as const) {
+    const centerIndex = buffers.vertices.length / 3
+    const capCenter = worldPoint(new THREE.Vector2(), ring.y, ring.topContactBlend)
+    buffers.vertices.push(capCenter.x, capCenter.y, capCenter.z)
+    if (topContactPlane && isTop && ring.topContactBlend === 1) {
+      buffers.topContactVertexIndices.push(centerIndex)
+    }
+    buffers.uvs.push(center.x, center.z)
+    buffers.fades.push(fadeAt(ring.y))
+    for (let side = 0; side < ring.points.length; side += 1) {
+      const next = (side + 1) % ring.points.length
+      const base = buffers.vertices.length / 3
+      const a = worldPoint(ring.points[side]!, ring.y, ring.topContactBlend)
+      const b = worldPoint(ring.points[next]!, ring.y, ring.topContactBlend)
+      buffers.vertices.push(a.x, a.y, a.z, b.x, b.y, b.z)
+      if (topContactPlane && isTop && ring.topContactBlend === 1) {
+        buffers.topContactVertexIndices.push(base, base + 1)
+      }
+      buffers.uvs.push(a.x, a.z, b.x, b.z)
+      buffers.fades.push(fadeAt(ring.y), fadeAt(ring.y))
+      buffers.indices.push(...(isTop ? [centerIndex, base + 1, base] : [centerIndex, base, base + 1]))
+    }
+  }
+}
+
+function createCanyonCourseContour(
+  halfWidth: number,
+  halfDepth: number,
+  seed: string,
+  ringIndex: number,
+): THREE.Vector2[] {
+  const pointCount = 20
+  const exponent = 4.6 + deterministic(`${seed}:course-boxiness`) * 1.8
+  const phase = deterministic(`${seed}:course-phase`) * Math.PI * 2
+  return Array.from({ length: pointCount }, (_, index) => {
+    const angle = -Math.PI * 0.75 + (index / pointCount) * Math.PI * 2
+    const cosine = Math.cos(angle)
+    const sine = Math.sin(angle)
+    const x = Math.sign(cosine) * Math.pow(Math.abs(cosine), 2 / exponent) * halfWidth
+    const z = Math.sign(sine) * Math.pow(Math.abs(sine), 2 / exponent) * halfDepth
+    const broadChip = Math.sin(angle * 3 + phase) * 0.052 + Math.sin(angle * 5 - phase) * 0.028
+    const cornerLoss = (deterministic(`${seed}:course-chip:${index}`) - 0.5) * 0.105
+    const ringVariation = (deterministic(`${seed}:course-ring:${ringIndex}:${index}`) - 0.5) * 0.05
+    const displacement = Math.min(halfWidth, halfDepth) * (broadChip + cornerLoss + ringVariation)
+    const length = Math.hypot(x, z) || 1
+    return new THREE.Vector2(x + (x / length) * displacement, z + (z / length) * displacement)
+  })
+}
+
+function beam(
+  start: THREE.Vector3,
+  end: THREE.Vector3,
+  width: number,
+  depth: number,
+  fadeAnchorY = Math.max(start.y, end.y),
+): Beam {
+  return { start, end, width, depth, fadeAnchorY }
+}
+
+function addBeamBatch(
+  root: THREE.Group,
+  name: string,
+  beams: readonly Beam[],
+  material: THREE.Material,
+  role: string,
+): void {
+  if (beams.length === 0) return
+  const geometry = new THREE.BoxGeometry(1, 1, 1)
+  const bottomAttribute = new THREE.InstancedBufferAttribute(
+    new Float32Array(beams.map(item => item.fadeAnchorY - UNDER_TRACK_SUPPORT_DEPTH)),
+    1,
+  )
+  const topAttribute = new THREE.InstancedBufferAttribute(
+    new Float32Array(beams.map(item => item.fadeAnchorY - UNDER_TRACK_SUPPORT_FADE_START_DEPTH)),
+    1,
+  )
+  geometry.setAttribute('supportFadeBottom', bottomAttribute)
+  geometry.setAttribute('supportFadeTop', topAttribute)
+  const mesh = new THREE.InstancedMesh(geometry, material, beams.length)
+  mesh.name = name
+  for (const [index, item] of beams.entries()) {
+    const direction = item.end.clone().sub(item.start)
+    const length = direction.length()
+    const quaternion = new THREE.Quaternion().setFromUnitVectors(WORLD_UP, direction.normalize())
+    mesh.setMatrixAt(
+      index,
+      new THREE.Matrix4().compose(
+        item.start.clone().lerp(item.end, 0.5),
+        quaternion,
+        new THREE.Vector3(item.width, length, item.depth),
+      ),
+    )
+  }
+  mesh.instanceMatrix.needsUpdate = true
+  mesh.computeBoundingBox()
+  mesh.computeBoundingSphere()
+  mesh.userData.supportRole = role
+  mesh.userData.supportFadeAttributes = ['supportFadeBottom', 'supportFadeTop']
+  root.add(mesh)
+}
+
+function cumulativeDistances(frames: readonly TrackAppearanceSupportFrame[]): number[] {
+  const distances = [0]
+  for (let index = 0; index < frames.length - 1; index += 1) {
+    distances.push(distances.at(-1)! + frames[index]!.point.distanceTo(frames[index + 1]!.point))
+  }
+  return distances
+}
+
+function frameAtDistance(
+  frames: readonly TrackAppearanceSupportFrame[],
+  distances: readonly number[],
+  target: number,
+): TrackAppearanceSupportFrame {
+  let segment = 0
+  while (segment < distances.length - 2 && distances[segment + 1]! < target) segment += 1
+  const length = distances[segment + 1]! - distances[segment]!
+  const progress = length <= 0.000_001 ? 0 : (target - distances[segment]!) / length
+  const start = frames[segment]!
+  const end = frames[segment + 1]!
+  const tangent = start.tangent.clone().lerp(end.tangent, progress).normalize()
+  const right = start.right.clone().lerp(end.right, progress)
+  right.addScaledVector(tangent, -right.dot(tangent))
+  if (right.lengthSq() < 0.000_001) right.crossVectors(start.up, tangent)
+  right.normalize()
+  const up = new THREE.Vector3().crossVectors(tangent, right).normalize()
+  if (up.dot(start.up.clone().lerp(end.up, progress)) < 0) {
+    right.negate()
+    up.negate()
+  }
+  return {
+    point: start.point.clone().lerp(end.point, progress),
+    tangent,
+    right,
+    up,
+    width: THREE.MathUtils.lerp(start.width, end.width, progress),
+  }
+}
+
+function deterministic(seed: string): number {
+  let hash = 2_166_136_261
+  for (const character of seed) {
+    hash ^= character.charCodeAt(0)
+    hash = Math.imul(hash, 16_777_619)
+  }
+  return (hash >>> 0) / 4_294_967_296
+}