@marble.fun/track-catalog 3.0.0

package/src/pages/play/race/track-appearance-sakura-bridge-fence.ts

@@ -0,0 +1,305 @@
+import { geometryDetailProfile } from '../../../three/geometry-detail'
+import * as THREE from 'three'
+
+import { VisualLatheGeometry, VisualExtrudeGeometry, VisualBoxGeometry } from '../../../three/visual-geometry'
+
+import {
+  canonicalWallFrameAt,
+  resampleCanonicalWallRun,
+  type CanonicalWallRun,
+  type RawWallFrame,
+} from './track-surface-topology'
+import { woodenFenceHeight, woodenFencePostCount, WOODEN_FENCE_HEIGHT_RATIO } from './track-fence-architecture'
+
+export type SakuraBridgeFencePathFrame = RawWallFrame
+export type SakuraBridgeFencePathRun = CanonicalWallRun
+
+export interface SakuraBridgeFenceMaterials {
+  timber: THREE.Material
+  hardware: THREE.Material
+}
+
+const RAIL_SAMPLE_SPACING = 1.2 * geometryDetailProfile.ribbonTolerance
+const POST_WIDTH_RATIO = 0.15
+const POST_DEPTH_RATIO = 0.17
+const BALUSTER_WIDTH_RATIO = 0.08
+const BALUSTER_DEPTH_RATIO = 0.065
+const FINIAL_REFERENCE_POST_HEIGHT = 1.28
+const FINIAL_HEIGHT = 0.325
+
+/**
+ * Adds an open vermilion Japanese bridge fence over the unchanged wall
+ * collider: lacquered timber posts and rails with gunmetal giboshi finials.
+ */
+export function addSakuraBridgeFenceVisual(
+  root: THREE.Group,
+  id: string,
+  runs: readonly SakuraBridgeFencePathRun[],
+  wallHeight: number,
+  materials: SakuraBridgeFenceMaterials,
+): THREE.Group | undefined {
+  if (wallHeight <= 0.3) return undefined
+
+  const group = new THREE.Group()
+  group.name = `${id}-sakura-vermilion-bridge-fence`
+  group.userData.themeOnly = 'japanese-sakura-lake'
+  group.userData.decorative = true
+  group.userData.visualOnly = true
+  group.userData.appearance = 'japanese-sakura-vermilion-bridge-fence'
+  group.userData.constructionContract = 'japanese-sakura-vermilion-bridge-fence-v5'
+  group.userData.wallHeightRatio = WOODEN_FENCE_HEIGHT_RATIO
+  group.userData.balustersPerPanel = 3
+  group.userData.balusterWidthRatio = BALUSTER_WIDTH_RATIO
+  group.userData.balusterDepthRatio = BALUSTER_DEPTH_RATIO
+
+  const postMatrices: THREE.Matrix4[] = []
+  const railMatrices: THREE.Matrix4[] = []
+  const balusterMatrices: THREE.Matrix4[] = []
+  const knobMatrices: THREE.Matrix4[] = []
+  const ownedPostPositions: THREE.Vector3[] = []
+  let suppressedConnectedPostCount = 0
+  let runCount = 0
+
+  for (const run of runs) {
+    if (run.frames.length < 2) continue
+    const canonicalRun = run
+    const frames = resampleCanonicalWallRun(canonicalRun, RAIL_SAMPLE_SPACING).frames
+    const totalLength = canonicalRun.length
+    if (totalLength <= 0.001) continue
+    runCount += 1
+
+    const overallFenceHeight = woodenFenceHeight(wallHeight)
+    // The finial is part of the silhouette, so reserve its scaled height
+    // inside the shared fence-height envelope rather than adding it on top.
+    const postHeight = overallFenceHeight / (1 + FINIAL_HEIGHT / FINIAL_REFERENCE_POST_HEIGHT)
+    const postCount = woodenFencePostCount(totalLength, overallFenceHeight)
+    for (let postIndex = 0; postIndex < postCount; postIndex += 1) {
+      const distance = (postIndex / (postCount - 1)) * totalLength
+      const frame = canonicalWallFrameAt(canonicalRun, distance)
+      // A connected run never owns its start post. At an ordinary connector
+      // the incoming neighbour owns it; at a T-junction the straight receiver
+      // owns the single corner post while the circular branch rails terminate
+      // against it. This prevents doubled posts and paired finials.
+      if (postIndex === 0 && run.startOwnership === 'connected') {
+        suppressedConnectedPostCount += 1
+        continue
+      }
+      if (ownedPostPositions.some(position => position.distanceToSquared(frame.base) <= 0.025 * 0.025)) {
+        suppressedConnectedPostCount += 1
+        continue
+      }
+      ownedPostPositions.push(frame.base.clone())
+      const worldUp = new THREE.Vector3(0, 1, 0)
+      const rotation = verticalFrameQuaternion(frame)
+      postMatrices.push(
+        new THREE.Matrix4().compose(
+          frame.base.clone().addScaledVector(worldUp, postHeight / 2 - 0.03),
+          rotation,
+          new THREE.Vector3(postHeight * POST_WIDTH_RATIO, postHeight, postHeight * POST_DEPTH_RATIO),
+        ),
+      )
+      knobMatrices.push(
+        new THREE.Matrix4().compose(
+          frame.base.clone().addScaledVector(worldUp, postHeight - 0.03),
+          rotation,
+          new THREE.Vector3(1, 1, 1).multiplyScalar(postHeight / FINIAL_REFERENCE_POST_HEIGHT),
+        ),
+      )
+    }
+
+    for (let panelIndex = 0; panelIndex < postCount - 1; panelIndex += 1) {
+      const panelStart = (panelIndex / (postCount - 1)) * totalLength
+      const panelEnd = ((panelIndex + 1) / (postCount - 1)) * totalLength
+      const balusterCount = 3
+      for (let balusterIndex = 0; balusterIndex < balusterCount; balusterIndex += 1) {
+        const distance = THREE.MathUtils.lerp(panelStart, panelEnd, (balusterIndex + 1) / 4)
+        const frame = canonicalWallFrameAt(canonicalRun, distance)
+        const bottomRailTop = postHeight * (0.16 + 0.13 / 2)
+        const middleRailBottom = postHeight * (0.55 - 0.13 / 2)
+        const balusterHeight = Math.max(0.16, middleRailBottom - bottomRailTop)
+        balusterMatrices.push(
+          new THREE.Matrix4().compose(
+            frame.base.clone().add(new THREE.Vector3(0, (bottomRailTop + middleRailBottom) / 2 - 0.03, 0)),
+            verticalFrameQuaternion(frame),
+            new THREE.Vector3(
+              postHeight * BALUSTER_WIDTH_RATIO,
+              balusterHeight,
+              postHeight * BALUSTER_DEPTH_RATIO,
+            ),
+          ),
+        )
+      }
+    }
+
+    for (let index = 0; index < frames.length - 1; index += 1) {
+      const start = frames[index]!
+      const end = frames[index + 1]!
+      const outward = start.outward.clone().add(end.outward).normalize()
+      for (const [heightFraction, heightRatio, depthRatio] of [
+        [0.16, 0.13, 0.11],
+        [0.55, 0.13, 0.11],
+        [0.84, 0.12, 0.11],
+      ] as const) {
+        const startPoint = start.base.clone().add(new THREE.Vector3(0, postHeight * heightFraction - 0.03, 0))
+        const endPoint = end.base.clone().add(new THREE.Vector3(0, postHeight * heightFraction - 0.03, 0))
+        appendRailMatrix(
+          railMatrices,
+          startPoint,
+          endPoint,
+          outward,
+          postHeight * heightRatio,
+          postHeight * depthRatio,
+        )
+      }
+    }
+  }
+
+  if (runCount === 0) return undefined
+  if (postMatrices.length > 0) {
+    const geometry = useAuthoredUv(new VisualBoxGeometry(1, 1, 1, 3, 0.12))
+    geometry.name = 'sakura-bridge-chunky-post-geometry'
+    group.add(instancedBatch(`${id}-sakura-bridge-posts`, geometry, materials.timber, postMatrices))
+  }
+  if (railMatrices.length > 0) {
+    const geometry = useAuthoredUv(createProfiledRailGeometry())
+    geometry.name = 'sakura-bridge-profiled-longitudinal-rail-geometry'
+    group.add(instancedBatch(`${id}-sakura-bridge-rails`, geometry, materials.timber, railMatrices))
+  }
+  if (balusterMatrices.length > 0) {
+    const geometry = useAuthoredUv(new VisualBoxGeometry(1, 1, 1, 3, 0.12))
+    geometry.name = 'sakura-bridge-lower-panel-baluster-geometry'
+    group.add(instancedBatch(`${id}-sakura-bridge-balusters`, geometry, materials.timber, balusterMatrices))
+  }
+  if (knobMatrices.length > 0) {
+    group.add(instancedBatch(`${id}-sakura-bridge-gunmetal-knobs`, createGiboshiGeometry(), materials.hardware, knobMatrices))
+  }
+
+  group.userData.runCount = runCount
+  group.userData.postCount = postMatrices.length
+  group.userData.railCount = railMatrices.length
+  group.userData.balusterCount = balusterMatrices.length
+  group.userData.knobCount = knobMatrices.length
+  group.userData.suppressedConnectedPostCount = suppressedConnectedPostCount
+  group.userData.connectedPostOwnership = 'incoming-or-t-receiver'
+  root.add(group)
+  return group
+}
+
+function appendRailMatrix(
+  target: THREE.Matrix4[],
+  start: THREE.Vector3,
+  end: THREE.Vector3,
+  outward: THREE.Vector3,
+  height: number,
+  depth: number,
+): void {
+  const direction = end.clone().sub(start)
+  const length = direction.length()
+  if (length <= 0.001) return
+  const xAxis = direction.normalize()
+  const zAxis = outward.clone().addScaledVector(xAxis, -outward.dot(xAxis))
+  if (zAxis.lengthSq() < 0.000_001) return
+  zAxis.normalize()
+  const yAxis = new THREE.Vector3().crossVectors(zAxis, xAxis).normalize()
+  const rotation = new THREE.Quaternion().setFromRotationMatrix(new THREE.Matrix4().makeBasis(xAxis, yAxis, zAxis))
+  target.push(
+    new THREE.Matrix4().compose(
+      start.clone().lerp(end, 0.5),
+      rotation,
+      new THREE.Vector3(length + 0.035, height, depth),
+    ),
+  )
+}
+
+function verticalFrameQuaternion(frame: SakuraBridgeFencePathFrame): THREE.Quaternion {
+  const yAxis = new THREE.Vector3(0, 1, 0)
+  const xAxis = frame.tangent.clone().addScaledVector(yAxis, -frame.tangent.dot(yAxis))
+  if (xAxis.lengthSq() < 0.000_001) xAxis.set(1, 0, 0)
+  xAxis.normalize()
+  const zAxis = new THREE.Vector3().crossVectors(xAxis, yAxis).normalize()
+  xAxis.crossVectors(yAxis, zAxis).normalize()
+  return new THREE.Quaternion().setFromRotationMatrix(new THREE.Matrix4().makeBasis(xAxis, yAxis, zAxis))
+}
+
+function createGiboshiGeometry(): THREE.LatheGeometry {
+  const profile = [
+    new THREE.Vector2(0, 0),
+    new THREE.Vector2(0.11, 0),
+    new THREE.Vector2(0.125, 0.012),
+    new THREE.Vector2(0.125, 0.03),
+    new THREE.Vector2(0.108, 0.042),
+    new THREE.Vector2(0.124, 0.052),
+    new THREE.Vector2(0.124, 0.07),
+    new THREE.Vector2(0.1, 0.083),
+    new THREE.Vector2(0.094, 0.098),
+    new THREE.Vector2(0.122, 0.132),
+    new THREE.Vector2(0.137, 0.17),
+    new THREE.Vector2(0.126, 0.195),
+    new THREE.Vector2(0.105, 0.222),
+    new THREE.Vector2(0.075, 0.255),
+    new THREE.Vector2(0.045, 0.282),
+    new THREE.Vector2(0.018, 0.307),
+    new THREE.Vector2(0.005, 0.319),
+    new THREE.Vector2(0, 0.325),
+  ]
+  const geometry = new VisualLatheGeometry([0, 1, 3, 8, 10, 12, 15, 17].map(index => profile[index]!), 32)
+  geometry.name = 'sakura-bridge-gunmetal-giboshi-geometry-v3'
+  geometry.userData.profile = 'compact-two-ring-long-taper-giboshi'
+  return geometry
+}
+
+function createProfiledRailGeometry(): THREE.ExtrudeGeometry {
+  const profile = new THREE.Shape()
+  profile.moveTo(-0.5, -0.32)
+  profile.quadraticCurveTo(-0.5, -0.5, -0.32, -0.5)
+  profile.lineTo(0.16, -0.5)
+  profile.quadraticCurveTo(0.43, -0.5, 0.53, -0.29)
+  profile.quadraticCurveTo(0.64, 0, 0.53, 0.29)
+  profile.quadraticCurveTo(0.43, 0.5, 0.16, 0.5)
+  profile.lineTo(-0.32, 0.5)
+  profile.quadraticCurveTo(-0.5, 0.5, -0.5, 0.32)
+  profile.closePath()
+  const geometry = new VisualExtrudeGeometry(profile, {
+    depth: 1,
+    steps: 1,
+    curveSegments: 5,
+    bevelEnabled: false,
+  })
+  geometry.rotateY(-Math.PI / 2)
+  geometry.translate(0.5, 0, 0)
+  geometry.computeVertexNormals()
+  geometry.userData.profile = 'flat-rear-crowned-fascia-bullnose'
+  geometry.userData.grainDirection = 'longitudinal'
+  return geometry
+}
+
+function useAuthoredUv<T extends THREE.BufferGeometry>(geometry: T): T {
+  const uv = geometry.getAttribute('uv')
+  const authored = new Float32Array(uv.count * 4)
+  for (let index = 0; index < uv.count; index += 1) authored[index * 4 + 2] = 1
+  geometry.setAttribute('themeNetUv', new THREE.BufferAttribute(authored, 4))
+  geometry.setAttribute('uv1', uv.clone())
+  geometry.userData.textureMapping = 'authored-aligned-pbr'
+  return geometry
+}
+
+
+function instancedBatch(
+  name: string,
+  geometry: THREE.BufferGeometry,
+  material: THREE.Material,
+  matrices: readonly THREE.Matrix4[],
+): THREE.InstancedMesh {
+  const mesh = new THREE.InstancedMesh(geometry, material, matrices.length)
+  mesh.name = name
+  mesh.userData.themeOnly = 'japanese-sakura-lake'
+  mesh.userData.decorative = true
+  mesh.userData.visualOnly = true
+  mesh.castShadow = true
+  mesh.receiveShadow = true
+  matrices.forEach((matrix, index) => mesh.setMatrixAt(index, matrix))
+  mesh.instanceMatrix.needsUpdate = true
+  mesh.computeBoundingBox()
+  mesh.computeBoundingSphere()
+  return mesh
+}