@marble.fun/track-catalog 3.0.0

package/src/pages/play/race/track-appearance-vampire-carved-wall.ts

@@ -0,0 +1,545 @@
+import * as THREE from 'three'
+
+import { TRACK_RAIL_WALL_THICKNESS } from './track-definition'
+import { canonicalWallFrameAt, type CanonicalWallRun } from './track-surface-topology'
+
+export const VAMPIRE_CARVED_WALL_MAXIMUM_BAY_RATIO = 0.86
+export const VAMPIRE_CARVED_WALL_RECESS_DEPTH_RATIO = 0.02
+export const VAMPIRE_CARVED_WALL_RECESS_TO_THICKNESS = 0.125
+export const VAMPIRE_CARVED_WALL_PROJECTION_RATIO = 0.026
+export const VAMPIRE_CARVED_WALL_PROJECTION_TO_THICKNESS = 0.18
+
+const MINIMUM_WALL_HEIGHT = 0.36
+const WALL_BASE_SINK = 0.03
+
+interface GeometryAccumulator {
+  positions: number[]
+  uvs: number[]
+  metricUvs: number[]
+  indices: number[]
+}
+
+interface SurfacePoint {
+  distance: number
+  height: number
+  across: number
+}
+
+/**
+ * Builds the complete visible wall as one solid, path-following batch. The
+ * panel field replaces the outer face and steps inward through its bevel; no
+ * backing facade or applied trim is part of this visual construction.
+ * Rapier continues to use the unchanged canonical wall collider.
+ */
+export function addVampireCarvedWallVisual(
+  host: THREE.Group,
+  id: string,
+  runs: readonly CanonicalWallRun[],
+  wallHeight: number,
+  material: THREE.Material,
+): THREE.Group | undefined {
+  if (wallHeight < MINIMUM_WALL_HEIGHT || runs.length === 0) return undefined
+
+  const group = new THREE.Group()
+  group.name = `${id}-vampire-carved-wall`
+  group.userData.themeOnly = 'vampire-castle'
+  group.userData.visualOnly = true
+  group.userData.decorative = true
+  group.userData.appearance = 'vampire-castle-solid-carved-oak-wall-v2'
+  group.userData.representation = 'single-batched-solid-recessed-panel-wall'
+  group.userData.frontSideOnly = true
+  group.userData.drawCallBudget = 1
+  group.userData.runMetricLengths = runs.map(run => run.length)
+  group.userData.runTerminalOwnership = runs.map(run => ({
+    start: run.startOwnership,
+    end: run.endOwnership,
+    startPosition: run.frames[0]!.base.toArray(),
+    endPosition: run.frames.at(-1)!.base.toArray(),
+  }))
+  group.userData.wallHeight = wallHeight
+  group.userData.wallThickness = TRACK_RAIL_WALL_THICKNESS
+
+  const built = createSolidCarvedWallGeometry(runs, wallHeight)
+  const mesh = new THREE.Mesh(built.geometry, material)
+  mesh.name = `${id}-vampire-carved-wall-solid-batch`
+  mesh.castShadow = true
+  mesh.receiveShadow = true
+  mesh.userData.visualOnly = true
+  mesh.userData.decorative = true
+  mesh.userData.drawCallBudget = 1
+  mesh.userData.editorBoundsSource = 'canonical-wall-envelope'
+  group.userData.panelCount = built.panelCount
+  group.userData.recessDepth = built.recessDepth
+  group.userData.recessToThickness = built.recessDepth / TRACK_RAIL_WALL_THICKNESS
+  group.userData.maximumProjection = built.maximumProjection
+  group.userData.panelConstruction = 'outer-face-holes-plus-double-bevel-and-inset-fields'
+  group.userData.faceRule = 'both-broad-faces'
+  group.userData.terminalRule = 'canonical-connection-ownership'
+  group.userData.connectedTerminalCaps = 'open-neighbor-owned'
+  group.add(mesh)
+  host.add(group)
+  return group
+}
+
+function createSolidCarvedWallGeometry(
+  runs: readonly CanonicalWallRun[],
+  wallHeight: number,
+): {
+  geometry: THREE.BufferGeometry
+  panelCount: number
+  recessDepth: number
+  maximumProjection: number
+} {
+  const output: GeometryAccumulator = { positions: [], uvs: [], metricUvs: [], indices: [] }
+  const maximumBaySpacing = wallHeight * VAMPIRE_CARVED_WALL_MAXIMUM_BAY_RATIO
+  const recessDepth = Math.min(
+    wallHeight * VAMPIRE_CARVED_WALL_RECESS_DEPTH_RATIO,
+    TRACK_RAIL_WALL_THICKNESS * VAMPIRE_CARVED_WALL_RECESS_TO_THICKNESS,
+  )
+  const maximumProjection = Math.min(
+    wallHeight * VAMPIRE_CARVED_WALL_PROJECTION_RATIO,
+    TRACK_RAIL_WALL_THICKNESS * VAMPIRE_CARVED_WALL_PROJECTION_TO_THICKNESS,
+  )
+  let panelCount = 0
+
+  for (const run of runs) {
+    for (const [start, end] of carvedBayIntervals(run, maximumBaySpacing)) {
+      for (const face of [-1, 1] as const) {
+        panelCount += appendCarvedBayFace(
+          output,
+          run,
+          face,
+          start,
+          end,
+          wallHeight,
+          recessDepth,
+          maximumProjection,
+        )
+      }
+    }
+    appendRunTopAndBottom(output, run, wallHeight, maximumProjection)
+    if (run.capStart) appendTerminalCap(output, run, 0, wallHeight, -1, maximumProjection)
+    if (run.capEnd) appendTerminalCap(output, run, run.length, wallHeight, 1, maximumProjection)
+  }
+
+  const geometry = new THREE.BufferGeometry()
+  geometry.name = 'vampire-castle-solid-carved-oak-wall-v2-geometry'
+  geometry.setAttribute('position', new THREE.Float32BufferAttribute(output.positions, 3))
+  geometry.setAttribute('uv', new THREE.Float32BufferAttribute(output.uvs, 2))
+  geometry.setAttribute('uv1', new THREE.Float32BufferAttribute(output.uvs, 2))
+  geometry.setAttribute('themeNetUv', new THREE.Float32BufferAttribute(output.metricUvs, 4))
+  geometry.setIndex(output.indices)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingBox()
+  geometry.computeBoundingSphere()
+  geometry.userData.wallThickness = TRACK_RAIL_WALL_THICKNESS
+  geometry.userData.wallTopologySource = 'canonical-wall-run'
+  geometry.userData.themeMaterialLongitudinalAxis = 'x'
+  geometry.userData.solidWall = true
+  geometry.userData.openings = 0
+  geometry.userData.recessDepth = recessDepth
+  geometry.userData.recessedFaces = 2
+  geometry.userData.panelFieldsPerBay = 4
+  geometry.userData.bevelSteps = 2
+  geometry.userData.maximumProjection = maximumProjection
+  geometry.userData.hybridRelief = 'raised-architecture-plus-recessed-panel-fields'
+  return { geometry, panelCount, recessDepth, maximumProjection }
+}
+
+function carvedBayIntervals(run: CanonicalWallRun, maximumBaySpacing: number): [number, number][] {
+  const sectionBoundaries = [0]
+  for (let index = 1; index < run.frames.length - 1; index += 1) {
+    const previous = run.frames[index - 1]!.base
+    const current = run.frames[index]!.base
+    const next = run.frames[index + 1]!.base
+    const incoming = current.clone().sub(previous)
+    const outgoing = next.clone().sub(current)
+    incoming.y = 0
+    outgoing.y = 0
+    if (incoming.lengthSq() <= 0.000_001 || outgoing.lengthSq() <= 0.000_001) continue
+    if (incoming.angleTo(outgoing) >= THREE.MathUtils.degToRad(18)) {
+      sectionBoundaries.push(run.frames[index]!.distance)
+    }
+  }
+  sectionBoundaries.push(run.length)
+
+  const intervals: [number, number][] = []
+  for (let section = 0; section < sectionBoundaries.length - 1; section += 1) {
+    const start = sectionBoundaries[section]!
+    const end = sectionBoundaries[section + 1]!
+    const length = end - start
+    if (length <= 0.000_001) continue
+    const intervalCount = Math.max(1, Math.ceil(length / maximumBaySpacing))
+    for (let bay = 0; bay < intervalCount; bay += 1) {
+      intervals.push([
+        THREE.MathUtils.lerp(start, end, bay / intervalCount),
+        THREE.MathUtils.lerp(start, end, (bay + 1) / intervalCount),
+      ])
+    }
+  }
+  return intervals
+}
+
+function appendCarvedBayFace(
+  output: GeometryAccumulator,
+  run: CanonicalWallRun,
+  face: -1 | 1,
+  start: number,
+  end: number,
+  wallHeight: number,
+  recessDepth: number,
+  maximumProjection: number,
+): number {
+  const bayWidth = end - start
+  const sideInset = Math.min(wallHeight * 0.075, bayWidth * 0.22)
+  const left = start + sideInset
+  const right = end - sideInset
+  const upperGap = Math.min(wallHeight * 0.014, bayWidth * 0.032)
+  const upperWidth = (right - left - upperGap * 2) / 3
+  const panels: THREE.Vector2[][] = [
+    gothicLancetContour(left, right, wallHeight * 0.12, wallHeight * 0.46, wallHeight * 0.625, 7),
+    ...Array.from({ length: 3 }, (_unused, index) => {
+      const panelLeft = left + index * (upperWidth + upperGap)
+      return gothicLancetContour(
+        panelLeft,
+        panelLeft + upperWidth,
+        wallHeight * 0.66,
+        wallHeight * 0.79,
+        wallHeight * 0.91,
+        5,
+      )
+    }),
+  ].map(clockwiseContour)
+  const bevelWidth = Math.min(wallHeight * 0.024, bayWidth * 0.055)
+  const halfThickness = TRACK_RAIL_WALL_THICKNESS * 0.5
+  const longitudinalSegments = 26
+  const verticalSegments = 32
+  const vertexOffset = output.positions.length / 3
+  for (let vertical = 0; vertical <= verticalSegments; vertical += 1) {
+    const height = (vertical / verticalSegments) * wallHeight
+    for (let longitudinal = 0; longitudinal <= longitudinalSegments; longitudinal += 1) {
+      const distance = THREE.MathUtils.lerp(start, end, longitudinal / longitudinalSegments)
+      const depth = architecturalDepthAt(
+        new THREE.Vector2(distance, height),
+        panels,
+        start,
+        end,
+        wallHeight,
+        bevelWidth,
+        recessDepth,
+        maximumProjection,
+      )
+      appendGridVertex(output, run, {
+        distance,
+        height,
+        across: face * (halfThickness - depth),
+      })
+    }
+  }
+  const stride = longitudinalSegments + 1
+  for (let vertical = 0; vertical < verticalSegments; vertical += 1) {
+    for (let longitudinal = 0; longitudinal < longitudinalSegments; longitudinal += 1) {
+      const a = vertexOffset + vertical * stride + longitudinal
+      const b = a + 1
+      const c = a + stride
+      const d = c + 1
+      const distance = THREE.MathUtils.lerp(start, end, (longitudinal + 0.5) / longitudinalSegments)
+      const expected = canonicalWallFrameAt(run, distance).outward.clone().multiplyScalar(face)
+      appendFacingIndex(output, a, b, c, expected)
+      appendFacingIndex(output, b, d, c, expected)
+    }
+  }
+  return panels.length
+}
+
+function appendGridVertex(output: GeometryAccumulator, run: CanonicalWallRun, point: SurfacePoint): void {
+  const world = mapSurfacePoint(run, point)
+  output.positions.push(world.x, world.y, world.z)
+  output.uvs.push(point.distance, point.height)
+  output.metricUvs.push(point.height, point.distance, 1, run.length)
+}
+
+function appendFacingIndex(
+  output: GeometryAccumulator,
+  a: number,
+  b: number,
+  c: number,
+  expectedNormal: THREE.Vector3,
+): void {
+  const pointAt = (index: number) =>
+    new THREE.Vector3(
+      output.positions[index * 3]!,
+      output.positions[index * 3 + 1]!,
+      output.positions[index * 3 + 2]!,
+    )
+  const origin = pointAt(a)
+  const normal = pointAt(b).sub(origin).cross(pointAt(c).sub(origin))
+  if (normal.dot(expectedNormal) >= 0) output.indices.push(a, b, c)
+  else output.indices.push(a, c, b)
+}
+
+function carvedDepthAt(
+  point: THREE.Vector2,
+  panels: readonly THREE.Vector2[][],
+  bevelWidth: number,
+  recessDepth: number,
+): number {
+  for (const panel of panels) {
+    if (!pointInsideContour(point, panel)) continue
+    const edgeDistance = distanceToContour(point, panel)
+    const firstStep = bevelWidth
+    const secondStep = bevelWidth * 2.15
+    if (edgeDistance <= firstStep) {
+      return recessDepth * 0.44 * THREE.MathUtils.smoothstep(edgeDistance, 0, firstStep)
+    }
+    if (edgeDistance <= secondStep) {
+      return THREE.MathUtils.lerp(
+        recessDepth * 0.44,
+        recessDepth,
+        THREE.MathUtils.smoothstep(edgeDistance, firstStep, secondStep),
+      )
+    }
+    return recessDepth
+  }
+  return 0
+}
+
+function architecturalDepthAt(
+  point: THREE.Vector2,
+  panels: readonly THREE.Vector2[][],
+  start: number,
+  end: number,
+  wallHeight: number,
+  bevelWidth: number,
+  recessDepth: number,
+  maximumProjection: number,
+): number {
+  const bayWidth = end - start
+  const pilasterWidth = Math.min(wallHeight * 0.04, bayWidth * 0.075)
+  const edgeDistance = Math.min(Math.abs(point.x - start), Math.abs(end - point.x))
+  let projection =
+    edgeDistance <= pilasterWidth
+      ? maximumProjection * (0.62 + 0.38 * (1 - THREE.MathUtils.smoothstep(edgeDistance, 0, pilasterWidth)))
+      : 0
+
+  const crownStart = wallHeight * 0.91
+  const plinthEnd = wallHeight * 0.105
+  if (point.y >= crownStart) {
+    projection = Math.max(
+      projection,
+      maximumProjection * (0.72 + 0.28 * THREE.MathUtils.smoothstep(point.y, crownStart, wallHeight)),
+    )
+  }
+  if (point.y <= plinthEnd) {
+    projection = Math.max(
+      projection,
+      maximumProjection * (0.72 + 0.28 * (1 - THREE.MathUtils.smoothstep(point.y, 0, plinthEnd))),
+    )
+  }
+
+  const moldingWidth = bevelWidth * 1.45
+  for (const panel of panels) {
+    const contourDistance = distanceToContour(point, panel)
+    if (contourDistance > moldingWidth) continue
+    const moldingProjection =
+      maximumProjection * 0.82 * (1 - THREE.MathUtils.smoothstep(contourDistance, 0, moldingWidth))
+    projection = Math.max(projection, moldingProjection)
+  }
+  return projection > 0.000_001 ? -projection : carvedDepthAt(point, panels, bevelWidth, recessDepth)
+}
+
+function distanceToContour(point: THREE.Vector2, contour: readonly THREE.Vector2[]): number {
+  let closestDistanceSquared = Number.POSITIVE_INFINITY
+  for (let index = 0; index < contour.length; index += 1) {
+    const start = contour[index]!
+    const end = contour[(index + 1) % contour.length]!
+    const dx = end.x - start.x
+    const dy = end.y - start.y
+    const lengthSquared = dx * dx + dy * dy
+    const progress =
+      lengthSquared <= 0.000_001
+        ? 0
+        : THREE.MathUtils.clamp(((point.x - start.x) * dx + (point.y - start.y) * dy) / lengthSquared, 0, 1)
+    const offsetX = point.x - (start.x + dx * progress)
+    const offsetY = point.y - (start.y + dy * progress)
+    closestDistanceSquared = Math.min(closestDistanceSquared, offsetX * offsetX + offsetY * offsetY)
+  }
+  return Math.sqrt(closestDistanceSquared)
+}
+
+function pointInsideContour(point: THREE.Vector2, contour: readonly THREE.Vector2[]): boolean {
+  let inside = false
+  for (let index = 0, previous = contour.length - 1; index < contour.length; previous = index, index += 1) {
+    const currentPoint = contour[index]!
+    const previousPoint = contour[previous]!
+    const crosses =
+      currentPoint.y > point.y !== previousPoint.y > point.y &&
+      point.x <
+        ((previousPoint.x - currentPoint.x) * (point.y - currentPoint.y)) /
+          (previousPoint.y - currentPoint.y) +
+          currentPoint.x
+    if (crosses) inside = !inside
+  }
+  return inside
+}
+
+function gothicLancetContour(
+  left: number,
+  right: number,
+  bottom: number,
+  shoulder: number,
+  apex: number,
+  curveSegments: number,
+): THREE.Vector2[] {
+  const center = (left + right) * 0.5
+  const width = right - left
+  const rise = apex - shoulder
+  const points = [new THREE.Vector2(left, bottom), new THREE.Vector2(left, shoulder)]
+  appendCubicArc(
+    points,
+    new THREE.Vector2(left, shoulder),
+    new THREE.Vector2(left + width * 0.05, shoulder + rise * 0.62),
+    new THREE.Vector2(center - width * 0.13, apex - rise * 0.16),
+    new THREE.Vector2(center, apex),
+    curveSegments,
+  )
+  appendCubicArc(
+    points,
+    new THREE.Vector2(center, apex),
+    new THREE.Vector2(center + width * 0.13, apex - rise * 0.16),
+    new THREE.Vector2(right - width * 0.05, shoulder + rise * 0.62),
+    new THREE.Vector2(right, shoulder),
+    curveSegments,
+  )
+  points.push(new THREE.Vector2(right, bottom))
+  return points
+}
+
+function appendCubicArc(
+  target: THREE.Vector2[],
+  start: THREE.Vector2,
+  controlA: THREE.Vector2,
+  controlB: THREE.Vector2,
+  end: THREE.Vector2,
+  segments: number,
+): void {
+  for (let segment = 1; segment <= segments; segment += 1) {
+    const progress = segment / segments
+    const inverse = 1 - progress
+    target.push(
+      new THREE.Vector2(
+        inverse ** 3 * start.x +
+          3 * inverse ** 2 * progress * controlA.x +
+          3 * inverse * progress ** 2 * controlB.x +
+          progress ** 3 * end.x,
+        inverse ** 3 * start.y +
+          3 * inverse ** 2 * progress * controlA.y +
+          3 * inverse * progress ** 2 * controlB.y +
+          progress ** 3 * end.y,
+      ),
+    )
+  }
+}
+
+function clockwiseContour(points: THREE.Vector2[]): THREE.Vector2[] {
+  return THREE.ShapeUtils.isClockWise(points) ? points : [...points].reverse()
+}
+
+function appendRunTopAndBottom(
+  output: GeometryAccumulator,
+  run: CanonicalWallRun,
+  wallHeight: number,
+  maximumProjection: number,
+): void {
+  const halfThickness = TRACK_RAIL_WALL_THICKNESS * 0.5 + maximumProjection
+  for (let index = 0; index < run.frames.length - 1; index += 1) {
+    const start = run.frames[index]!.distance
+    const end = run.frames[index + 1]!.distance
+    const midpoint = canonicalWallFrameAt(run, (start + end) * 0.5)
+    const bottom: [SurfacePoint, SurfacePoint, SurfacePoint, SurfacePoint] = [
+      { distance: start, height: 0, across: -halfThickness },
+      { distance: end, height: 0, across: -halfThickness },
+      { distance: end, height: 0, across: halfThickness },
+      { distance: start, height: 0, across: halfThickness },
+    ]
+    const narrowSurfaceUv = (point: SurfacePoint): readonly [number, number] => [
+      point.across + halfThickness,
+      point.distance,
+    ]
+    appendMappedQuad(output, run, bottom, midpoint.up.clone().negate(), narrowSurfaceUv)
+    const top = bottom.map(point => ({ ...point, height: wallHeight })) as typeof bottom
+    appendMappedQuad(output, run, top, midpoint.up, narrowSurfaceUv)
+  }
+}
+
+function appendTerminalCap(
+  output: GeometryAccumulator,
+  run: CanonicalWallRun,
+  distance: number,
+  wallHeight: number,
+  direction: -1 | 1,
+  maximumProjection: number,
+): void {
+  const halfThickness = TRACK_RAIL_WALL_THICKNESS * 0.5 + maximumProjection
+  const cap: [SurfacePoint, SurfacePoint, SurfacePoint, SurfacePoint] = [
+    { distance, height: 0, across: -halfThickness },
+    { distance, height: 0, across: halfThickness },
+    { distance, height: wallHeight, across: halfThickness },
+    { distance, height: wallHeight, across: -halfThickness },
+  ]
+  const terminalPathNormal = (() => {
+    if (run.frames.length < 2) return canonicalWallFrameAt(run, distance).tangent.clone().multiplyScalar(direction)
+    if (direction < 0) {
+      return run.frames[0]!.base.clone().sub(run.frames[1]!.base).setY(0).normalize()
+    }
+    return run.frames.at(-1)!.base.clone().sub(run.frames.at(-2)!.base).setY(0).normalize()
+  })()
+  appendMappedQuad(
+    output,
+    run,
+    cap,
+    terminalPathNormal,
+    point => [point.across + halfThickness, point.height],
+  )
+}
+
+function appendMappedQuad(
+  output: GeometryAccumulator,
+  run: CanonicalWallRun,
+  points: [SurfacePoint, SurfacePoint, SurfacePoint, SurfacePoint],
+  expectedNormal: THREE.Vector3,
+  uvForPoint?: (point: SurfacePoint) => readonly [number, number],
+): void {
+  appendMappedTriangle(output, run, [points[0], points[1], points[2]], expectedNormal, uvForPoint)
+  appendMappedTriangle(output, run, [points[0], points[2], points[3]], expectedNormal, uvForPoint)
+}
+
+function appendMappedTriangle(
+  output: GeometryAccumulator,
+  run: CanonicalWallRun,
+  points: [SurfacePoint, SurfacePoint, SurfacePoint],
+  expectedNormal: THREE.Vector3,
+  uvForPoint?: (point: SurfacePoint) => readonly [number, number],
+): void {
+  const mapped = points.map(point => mapSurfacePoint(run, point)) as [THREE.Vector3, THREE.Vector3, THREE.Vector3]
+  const normal = mapped[1].clone().sub(mapped[0]).cross(mapped[2].clone().sub(mapped[0]))
+  const order = normal.dot(expectedNormal) >= 0 ? [0, 1, 2] : [0, 2, 1]
+  const baseIndex = output.positions.length / 3
+  for (const index of order) {
+    const point = points[index]!
+    const world = mapped[index]!
+    const uv = uvForPoint?.(point) ?? [point.distance, point.height]
+    output.positions.push(world.x, world.y, world.z)
+    output.uvs.push(uv[0], uv[1])
+    output.metricUvs.push(point.height, point.distance, 1, run.length)
+  }
+  output.indices.push(baseIndex, baseIndex + 1, baseIndex + 2)
+}
+
+function mapSurfacePoint(run: CanonicalWallRun, point: SurfacePoint): THREE.Vector3 {
+  const frame = canonicalWallFrameAt(run, point.distance)
+  return frame.base
+    .clone()
+    .addScaledVector(frame.outward, point.across)
+    .addScaledVector(frame.up, point.height - WALL_BASE_SINK)
+}