@marble.fun/track-catalog 3.0.0

package/src/pages/play/race/race-simulation-renderer.ts

@@ -0,0 +1,221 @@
+import type {
+  MarbleSimulationSnapshot,
+  MechanismSimulationPart,
+  RaceSimulationSnapshot,
+  SimulationQuaternion,
+  SimulationVector3,
+} from '@marble.fun/physics-engine'
+import * as THREE from 'three'
+
+const PORTAL_SNAP_DISTANCE_SQUARED = 4
+
+interface RisingWallVisualMetadata {
+  anchor: SimulationVector3
+  up: SimulationVector3
+  wallHeight: number
+}
+
+export interface RenderedMarbleSimulationState {
+  snapshot: MarbleSimulationSnapshot
+  position: SimulationVector3
+  rotation: SimulationQuaternion
+}
+
+export interface RaceSimulationRenderBindings {
+  marbleObjects: ReadonlyMap<string, THREE.Object3D>
+  mechanismPartObjects: ReadonlyMap<string, THREE.Object3D>
+  onMarbleState?(state: RenderedMarbleSimulationState): void
+}
+
+function indexedParts(snapshot: RaceSimulationSnapshot): Map<string, MechanismSimulationPart> {
+  const parts = new Map<string, MechanismSimulationPart>()
+  for (const mechanism of snapshot.mechanisms) {
+    for (const part of mechanism.parts ?? []) parts.set(part.id, part)
+  }
+  return parts
+}
+
+function visualObjectNameForPart(partId: string): string | undefined {
+  if (partId.endsWith(':paddle')) return `${partId.slice(0, -':paddle'.length)}-splitter-paddle`
+  const indexedPart = /^(.*):(shelf|flipper|rebound|wall):(\d+)$/.exec(partId)
+  if (!indexedPart) return undefined
+  const [, mechanismId, kind, rawIndex] = indexedPart
+  const index = Number(rawIndex)
+  switch (kind) {
+    case 'shelf':
+      return `${mechanismId}-conveyor-shelf-${index + 1}`
+    case 'flipper':
+      return `${mechanismId}-flipper-${index + 1}`
+    case 'rebound':
+      return `${mechanismId}-rebound-${index}`
+    case 'wall':
+      return `${mechanismId}-rising-wall-${index}`
+    default:
+      return undefined
+  }
+}
+
+/** Resolves stable core part ids onto the visual objects built by track-runtime. */
+export function bindMechanismPartObjects(
+  root: THREE.Object3D,
+  snapshot: RaceSimulationSnapshot,
+): ReadonlyMap<string, THREE.Object3D> {
+  const bindings = new Map<string, THREE.Object3D>()
+  for (const part of indexedParts(snapshot).values()) {
+    const objectName = visualObjectNameForPart(part.id)
+    const object = objectName ? root.getObjectByName(objectName) : undefined
+    if (object) bindings.set(part.id, object)
+  }
+  return bindings
+}
+
+function writeTransform(
+  object: THREE.Object3D,
+  previousPosition: SimulationVector3,
+  previousRotation: SimulationQuaternion,
+  currentPosition: SimulationVector3,
+  currentRotation: SimulationQuaternion,
+  alpha: number,
+  snapLargeTranslation: boolean,
+  rotationScratch: THREE.Quaternion,
+): void {
+  const dx = currentPosition[0] - previousPosition[0]
+  const dy = currentPosition[1] - previousPosition[1]
+  const dz = currentPosition[2] - previousPosition[2]
+  const progress = snapLargeTranslation && dx * dx + dy * dy + dz * dz > PORTAL_SNAP_DISTANCE_SQUARED ? 1 : alpha
+  object.position.set(
+    previousPosition[0] + dx * progress,
+    previousPosition[1] + dy * progress,
+    previousPosition[2] + dz * progress,
+  )
+  object.quaternion.fromArray(previousRotation).slerp(rotationScratch.fromArray(currentRotation), progress)
+}
+
+function cropRisingWallVisual(object: THREE.Object3D): void {
+  const metadata = object.userData.risingWallVisual as RisingWallVisualMetadata | undefined
+  if (!metadata) return
+  const { anchor, up, wallHeight } = metadata
+  const centerOffset =
+    (object.position.x - anchor[0]) * up[0] +
+    (object.position.y - anchor[1]) * up[1] +
+    (object.position.z - anchor[2]) * up[2]
+  const exposedHeight = THREE.MathUtils.clamp(centerOffset + wallHeight / 2, 0, wallHeight)
+  object.position.set(
+    anchor[0] + up[0] * exposedHeight / 2,
+    anchor[1] + up[1] * exposedHeight / 2,
+    anchor[2] + up[2] * exposedHeight / 2,
+  )
+  object.scale.y = exposedHeight / wallHeight
+  object.visible = exposedHeight > 0.001
+}
+
+/**
+ * Visual-only interpolation of immutable core snapshots. This class has no
+ * Rapier world/body access and therefore cannot alter authoritative motion.
+ */
+export class RaceSimulationRenderer {
+  #previous?: RaceSimulationSnapshot
+  #current?: RaceSimulationSnapshot
+  #previousMarbles = new Map<string, MarbleSimulationSnapshot>()
+  #currentMarbles = new Map<string, MarbleSimulationSnapshot>()
+  #previousParts = new Map<string, MechanismSimulationPart>()
+  #currentParts = new Map<string, MechanismSimulationPart>()
+  readonly #rotationScratch = new THREE.Quaternion()
+
+  constructor(readonly bindings: RaceSimulationRenderBindings) {}
+
+  push(snapshot: RaceSimulationSnapshot): void {
+    if (this.#current && snapshot.simulationTick < this.#current.simulationTick) {
+      throw new Error(`Cannot render stale simulation tick ${snapshot.simulationTick}`)
+    }
+    if (!this.#current || snapshot.simulationTick === this.#current.simulationTick) {
+      this.#current = snapshot
+      if (!this.#previous) {
+        this.#previous = snapshot
+        this.indexSnapshot(snapshot, this.#previousMarbles, this.#previousParts)
+      }
+      this.indexSnapshot(snapshot, this.#currentMarbles, this.#currentParts)
+      return
+    }
+    this.#previous = this.#current
+    this.#current = snapshot
+    const reusableMarbles = this.#previousMarbles
+    this.#previousMarbles = this.#currentMarbles
+    this.#currentMarbles = reusableMarbles
+    const reusableParts = this.#previousParts
+    this.#previousParts = this.#currentParts
+    this.#currentParts = reusableParts
+    this.indexSnapshot(snapshot, this.#currentMarbles, this.#currentParts)
+  }
+
+  render(interpolationAlpha: number): void {
+    const current = this.#current
+    if (!current) return
+    const alpha = THREE.MathUtils.clamp(interpolationAlpha, 0, 1)
+    for (const marble of current.marbles) {
+      const before = this.#previousMarbles.get(marble.slotId) ?? marble
+      const object = this.bindings.marbleObjects.get(marble.slotId)
+      if (object) {
+        writeTransform(
+          object,
+          before.position,
+          before.rotation,
+          marble.position,
+          marble.rotation,
+          alpha,
+          true,
+          this.#rotationScratch,
+        )
+      }
+      if (this.bindings.onMarbleState) {
+        const position: SimulationVector3 = object
+          ? [object.position.x, object.position.y, object.position.z]
+          : marble.position
+        const rotation: SimulationQuaternion = object
+          ? [object.quaternion.x, object.quaternion.y, object.quaternion.z, object.quaternion.w]
+          : marble.rotation
+        this.bindings.onMarbleState({ snapshot: marble, position, rotation })
+      }
+    }
+
+    for (const part of this.#currentParts.values()) {
+      const before = this.#previousParts.get(part.id) ?? part
+      const object = this.bindings.mechanismPartObjects.get(part.id)
+      if (object) {
+        writeTransform(
+          object,
+          before.position,
+          before.rotation,
+          part.position,
+          part.rotation,
+          alpha,
+          false,
+          this.#rotationScratch,
+        )
+        cropRisingWallVisual(object)
+      }
+    }
+  }
+
+  private indexSnapshot(
+    snapshot: RaceSimulationSnapshot,
+    marbles: Map<string, MarbleSimulationSnapshot>,
+    parts: Map<string, MechanismSimulationPart>,
+  ): void {
+    marbles.clear()
+    parts.clear()
+    for (const marble of snapshot.marbles) marbles.set(marble.slotId, marble)
+    for (const mechanism of snapshot.mechanisms) {
+      for (const part of mechanism.parts ?? []) parts.set(part.id, part)
+    }
+  }
+
+  clear(): void {
+    this.#previous = undefined
+    this.#current = undefined
+    this.#previousMarbles.clear()
+    this.#currentMarbles.clear()
+    this.#previousParts.clear()
+    this.#currentParts.clear()
+  }
+}

package/src/pages/play/race/race-terminal-checker-strip.ts

@@ -0,0 +1,226 @@
+import * as THREE from 'three'
+
+export const RACE_TERMINAL_CHECKER_STRIP_ROWS = 2
+export const RACE_TERMINAL_CHECKER_STRIP_DEPTH = 0.9
+export const RACE_TERMINAL_CHECKER_CELL_SIZE = RACE_TERMINAL_CHECKER_STRIP_DEPTH / RACE_TERMINAL_CHECKER_STRIP_ROWS
+export const RACE_TERMINAL_CHECKER_STRIP_FACE_OFFSET = 0.012
+
+export interface RaceTerminalCheckerStripSurface {
+  totalLength: number
+  startDistance: number
+  floorThickness: number
+  includeEntryFace: boolean
+  widthAt(distance: number): number
+  topPointAt(distance: number, normalizedLateral: number): THREE.Vector3
+  upAt(distance: number): THREE.Vector3
+  outward: THREE.Vector3
+}
+
+/**
+ * Splits decorative terminal floor details around the checker. The start grid
+ * has no approach run because its checker begins at the exposed entry. The
+ * finish keeps its funnel-side architecture and resumes it at the checker's
+ * rear edge. Side walls, floor geometry, and colliders deliberately keep their
+ * original full-piece paths.
+ */
+export function createRaceTerminalFloorDetailFrameRuns<Frame>(
+  frames: readonly Frame[],
+  distances: readonly number[],
+  frameAtDistance: (distance: number) => Frame,
+  checkerStartDistance = 0,
+): readonly (readonly Frame[])[] {
+  const totalLength = distances.at(-1) ?? 0
+  if (frames.length < 2 || totalLength <= 0.000_001) return []
+  const checkerStart = THREE.MathUtils.clamp(checkerStartDistance, 0, totalLength)
+  const checkerEnd = Math.min(checkerStart + RACE_TERMINAL_CHECKER_STRIP_DEPTH, totalLength)
+  const frameAtBoundary = (distance: number): Frame => {
+    const exactFrameIndex = distances.findIndex(candidate => Math.abs(candidate - distance) <= 0.000_001)
+    return exactFrameIndex >= 0 ? frames[exactFrameIndex]! : frameAtDistance(distance)
+  }
+
+  const sliceThroughBoundary = (startDistance: number, endDistance: number): readonly Frame[] => {
+    if (endDistance - startDistance <= 0.000_001) return []
+    const run: Frame[] = [frameAtBoundary(startDistance)]
+    for (let index = 0; index < frames.length; index += 1) {
+      const distance = distances[index]
+      if (distance === undefined || distance <= startDistance + 0.000_001 || distance >= endDistance - 0.000_001) {
+        continue
+      }
+      run.push(frames[index]!)
+    }
+    run.push(frameAtBoundary(endDistance))
+    return run
+  }
+
+  const approach = sliceThroughBoundary(0, checkerStart)
+  const exit = sliceThroughBoundary(checkerEnd, totalLength)
+
+  return [approach, exit].filter(run => run.length >= 2)
+}
+
+/** Locates the first frame of the final constant-width, single-file channel. */
+export function resolveRaceTerminalCheckerStartDistance(
+  raceRole: 'start' | 'finish',
+  widths: readonly number[],
+  distances: readonly number[],
+): number {
+  if (raceRole === 'start' || widths.length === 0) return 0
+  const terminalWidth = widths.at(-1)!
+  for (let index = 0; index < widths.length; index += 1) {
+    if (widths.slice(index).every(width => Math.abs(width - terminalWidth) <= 0.000_001)) {
+      return distances[index] ?? 0
+    }
+  }
+  return 0
+}
+
+export function raceTerminalCheckerColumnCount(width: number): number {
+  return Math.max(2, Math.round(width / RACE_TERMINAL_CHECKER_CELL_SIZE))
+}
+
+const LIGHT = new THREE.Color('#f1f3f5')
+const DARK = new THREE.Color('#20252a')
+
+/** Adds one permanent visual checkerboard wrapped over a terminal's top and entry face. */
+export function addRaceTerminalCheckerStrip(
+  root: THREE.Group,
+  id: string,
+  surface: RaceTerminalCheckerStripSurface,
+): THREE.Mesh | undefined {
+  if (surface.totalLength <= 0.000_001 || surface.floorThickness <= 0.000_001) return undefined
+  const checkerStartDistance = THREE.MathUtils.clamp(surface.startDistance, 0, surface.totalLength)
+  const checkerDepth = Math.min(RACE_TERMINAL_CHECKER_STRIP_DEPTH, surface.totalLength - checkerStartDistance)
+  if (checkerDepth <= 0.000_001) return undefined
+  const checkerWidth = surface.widthAt(checkerStartDistance)
+  const checkerColumns = raceTerminalCheckerColumnCount(checkerWidth)
+  const checkerFaceRows = Math.max(1, Math.round(surface.floorThickness / RACE_TERMINAL_CHECKER_CELL_SIZE))
+  const entryUp = surface.upAt(checkerStartDistance).clone().normalize()
+  const outward = surface.outward.clone().normalize()
+
+  const positions: number[] = []
+  const colors: number[] = []
+  const indices: number[] = []
+  const append = (point: THREE.Vector3, color: THREE.Color): number => {
+    const index = positions.length / 3
+    positions.push(point.x, point.y, point.z)
+    colors.push(color.r, color.g, color.b)
+    return index
+  }
+  const appendQuad = (
+    points: readonly [THREE.Vector3, THREE.Vector3, THREE.Vector3, THREE.Vector3],
+    color: THREE.Color,
+    expectedNormal: THREE.Vector3,
+  ): void => {
+    const base = append(points[0], color)
+    append(points[1], color)
+    append(points[2], color)
+    append(points[3], color)
+    const normal = points[1].clone().sub(points[0]).cross(points[2].clone().sub(points[0]))
+    if (normal.dot(expectedNormal) >= 0) {
+      indices.push(base, base + 1, base + 2, base, base + 2, base + 3)
+    } else {
+      indices.push(base, base + 2, base + 1, base, base + 3, base + 2)
+    }
+  }
+
+  // Top surface: follow the real ribbon sampler so curves, grades, and troughs match.
+  for (let row = 0; row < RACE_TERMINAL_CHECKER_STRIP_ROWS; row += 1) {
+    const startDistance = checkerStartDistance + (row / RACE_TERMINAL_CHECKER_STRIP_ROWS) * checkerDepth
+    const endDistance = checkerStartDistance + ((row + 1) / RACE_TERMINAL_CHECKER_STRIP_ROWS) * checkerDepth
+    for (let column = 0; column < checkerColumns; column += 1) {
+      const startLateral = -1 + (column / checkerColumns) * 2
+      const endLateral = -1 + ((column + 1) / checkerColumns) * 2
+      const color = (row + column) % 2 === 0 ? LIGHT : DARK
+      const startUp = surface.upAt(startDistance)
+      const endUp = surface.upAt(endDistance)
+      appendQuad(
+        [
+          surface
+            .topPointAt(startDistance, startLateral)
+            .addScaledVector(startUp, RACE_TERMINAL_CHECKER_STRIP_FACE_OFFSET),
+          surface.topPointAt(endDistance, startLateral).addScaledVector(endUp, RACE_TERMINAL_CHECKER_STRIP_FACE_OFFSET),
+          surface.topPointAt(endDistance, endLateral).addScaledVector(endUp, RACE_TERMINAL_CHECKER_STRIP_FACE_OFFSET),
+          surface
+            .topPointAt(startDistance, endLateral)
+            .addScaledVector(startUp, RACE_TERMINAL_CHECKER_STRIP_FACE_OFFSET),
+        ],
+        color,
+        surface.upAt((startDistance + endDistance) / 2),
+      )
+    }
+  }
+
+  // Only the start grid owns an exposed entry cap. The finish line is an
+  // internal floor marking at the single-file transition.
+  for (let row = 0; surface.includeEntryFace && row < checkerFaceRows; row += 1) {
+    const topDrop = (row / checkerFaceRows) * surface.floorThickness
+    const bottomDrop = ((row + 1) / checkerFaceRows) * surface.floorThickness
+    for (let column = 0; column < checkerColumns; column += 1) {
+      const startLateral = -1 + (column / checkerColumns) * 2
+      const endLateral = -1 + ((column + 1) / checkerColumns) * 2
+      const color = (row + column + 1) % 2 === 0 ? LIGHT : DARK
+      appendQuad(
+        [
+          surface
+            .topPointAt(checkerStartDistance, startLateral)
+            .addScaledVector(entryUp, -topDrop)
+            .addScaledVector(outward, RACE_TERMINAL_CHECKER_STRIP_FACE_OFFSET),
+          surface
+            .topPointAt(checkerStartDistance, endLateral)
+            .addScaledVector(entryUp, -topDrop)
+            .addScaledVector(outward, RACE_TERMINAL_CHECKER_STRIP_FACE_OFFSET),
+          surface
+            .topPointAt(checkerStartDistance, endLateral)
+            .addScaledVector(entryUp, -bottomDrop)
+            .addScaledVector(outward, RACE_TERMINAL_CHECKER_STRIP_FACE_OFFSET),
+          surface
+            .topPointAt(checkerStartDistance, startLateral)
+            .addScaledVector(entryUp, -bottomDrop)
+            .addScaledVector(outward, RACE_TERMINAL_CHECKER_STRIP_FACE_OFFSET),
+        ],
+        color,
+        outward,
+      )
+    }
+  }
+
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3))
+  geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3))
+  geometry.setIndex(indices)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingBox()
+  geometry.computeBoundingSphere()
+
+  const material = new THREE.MeshStandardMaterial({
+    vertexColors: true,
+    roughness: 0.78,
+    metalness: 0,
+    side: THREE.FrontSide,
+    polygonOffset: true,
+    polygonOffsetFactor: -1,
+    polygonOffsetUnits: -1,
+  })
+  material.name = 'race-terminal-checker-strip-material'
+  const strip = new THREE.Mesh(geometry, material)
+  strip.name = `${id}-race-terminal-checker-strip`
+  strip.receiveShadow = true
+  strip.renderOrder = 4
+  strip.userData.ownsMaterial = true
+  strip.userData.visualOnly = true
+  strip.userData.decorative = true
+  strip.userData.themePermanent = true
+  strip.userData.checkerRows = RACE_TERMINAL_CHECKER_STRIP_ROWS
+  strip.userData.checkerColumns = checkerColumns
+  strip.userData.checkerFaceRows = surface.includeEntryFace ? checkerFaceRows : 0
+  strip.userData.checkerCellTargetSize = RACE_TERMINAL_CHECKER_CELL_SIZE
+  strip.userData.checkerCellWidth = checkerWidth / checkerColumns
+  strip.userData.checkerCellDepth = checkerDepth / RACE_TERMINAL_CHECKER_STRIP_ROWS
+  strip.userData.checkerStartDistance = checkerStartDistance
+  strip.userData.checkerDepth = checkerDepth
+  strip.userData.checkerFaceHeight = surface.includeEntryFace ? surface.floorThickness : 0
+  strip.userData.wrapsEntryFace = surface.includeEntryFace
+  strip.userData.faceOffset = RACE_TERMINAL_CHECKER_STRIP_FACE_OFFSET
+  root.add(strip)
+  return strip
+}

package/src/pages/play/race/race-transform-interpolation.ts

@@ -0,0 +1,50 @@
+import * as THREE from 'three'
+
+interface TransformSource {
+  translation(): { x: number; y: number; z: number }
+  rotation(): { x: number; y: number; z: number; w: number }
+}
+
+export function clampInterpolationAlpha(alpha: number): number {
+  return Number.isFinite(alpha) ? THREE.MathUtils.clamp(alpha, 0, 1) : 1
+}
+
+/** Render-only history for one authoritative rigid-body transform. */
+export class RigidBodyTransformInterpolator {
+  readonly previousPosition = new THREE.Vector3()
+  readonly currentPosition = new THREE.Vector3()
+  readonly previousRotation = new THREE.Quaternion()
+  readonly currentRotation = new THREE.Quaternion()
+
+  constructor(source: TransformSource) {
+    this.reset(source)
+  }
+
+  reset(source: TransformSource): void {
+    const position = source.translation()
+    const rotation = source.rotation()
+    this.currentPosition.set(position.x, position.y, position.z)
+    this.previousPosition.copy(this.currentPosition)
+    this.currentRotation.set(rotation.x, rotation.y, rotation.z, rotation.w).normalize()
+    this.previousRotation.copy(this.currentRotation)
+  }
+
+  capture(source: TransformSource, snapDistance = Number.POSITIVE_INFINITY): void {
+    this.previousPosition.copy(this.currentPosition)
+    this.previousRotation.copy(this.currentRotation)
+    const position = source.translation()
+    const rotation = source.rotation()
+    this.currentPosition.set(position.x, position.y, position.z)
+    this.currentRotation.set(rotation.x, rotation.y, rotation.z, rotation.w).normalize()
+    if (this.previousPosition.distanceToSquared(this.currentPosition) > snapDistance ** 2) {
+      this.previousPosition.copy(this.currentPosition)
+      this.previousRotation.copy(this.currentRotation)
+    }
+  }
+
+  write(object: THREE.Object3D, alpha: number): void {
+    const safeAlpha = clampInterpolationAlpha(alpha)
+    object.position.lerpVectors(this.previousPosition, this.currentPosition, safeAlpha)
+    object.quaternion.slerpQuaternions(this.previousRotation, this.currentRotation, safeAlpha)
+  }
+}

package/src/pages/play/race/race-types.ts

@@ -0,0 +1,12 @@
+export type {
+  MarbleAssignment,
+  MarbleStanding,
+  MarbleTuning,
+  RaceConfiguration,
+  RacePhase,
+  RaceSnapshot,
+  RaceTuning,
+  RaceWinner,
+} from '@marble.fun/physics-engine'
+
+export { MAX_RACE_MARBLES as MAX_MARBLES, MIN_RACE_MARBLES as MIN_MARBLES } from '@marble.fun/physics-engine'

package/src/pages/play/race/rebound-visual.ts

@@ -0,0 +1,70 @@
+import * as THREE from 'three'
+
+import { VisualCapsuleGeometry } from '../../../three/visual-geometry'
+
+export interface ReboundVisualFactoryOptions {
+  reboundLength: number
+  reboundWidth: number
+  reboundHeight: number
+  bodyMaterial: THREE.Material
+  accentMaterial: THREE.Material
+}
+
+/** Creates shared visual geometry and a cheap per-bumper Group factory. */
+export function createReboundVisualFactory(options: ReboundVisualFactoryOptions): () => THREE.Group {
+  const barLength = options.reboundLength - options.reboundWidth
+  const capRadius = options.reboundWidth / 2
+  const shellGeometry = createReboundShellGeometry(
+    capRadius,
+    barLength,
+    options.reboundHeight / options.reboundWidth,
+  )
+
+  return () => {
+    const visual = new THREE.Group()
+    // One closed shell avoids the old body/end-cap intersections, while
+    // geometry groups retain the red centre and dark armored ends.
+    const bar = new THREE.Mesh(shellGeometry, [options.bodyMaterial, options.accentMaterial])
+    bar.name = 'body'
+    bar.userData.reboundVisualStyle = 'reinforced-single-shell-bumper'
+    bar.castShadow = true
+    bar.receiveShadow = true
+    visual.add(bar)
+    return visual
+  }
+}
+
+function createReboundShellGeometry(
+  radius: number,
+  bodyLength: number,
+  heightScale: number,
+): THREE.BufferGeometry {
+  const capsule = new VisualCapsuleGeometry(radius, bodyLength, 8, 24)
+  capsule.rotateZ(Math.PI / 2)
+  capsule.scale(1, heightScale, 1)
+  const geometry = capsule.toNonIndexed()
+  capsule.dispose()
+  geometry.clearGroups()
+  const positions = geometry.getAttribute('position')
+  const capStart = bodyLength / 2
+  const bodyIndices: number[] = []
+  const accentIndices: number[] = []
+  for (let vertex = 0; vertex < positions.count; vertex += 3) {
+    const centerX = (positions.getX(vertex) + positions.getX(vertex + 1) + positions.getX(vertex + 2)) / 3
+    const indices = Math.abs(centerX) >= capStart ? accentIndices : bodyIndices
+    indices.push(vertex, vertex + 1, vertex + 2)
+  }
+  // CapsuleGeometry arrives as alternating body/cap triangles. One group per
+  // triangle made each tiny bumper cost hundreds of draw calls despite using
+  // only two opaque materials. Reordering the index stream by material keeps
+  // every position, normal, UV, triangle, and material assignment identical
+  // while reducing the shell to one submission per material.
+  geometry.setIndex([...bodyIndices, ...accentIndices])
+  geometry.addGroup(0, bodyIndices.length, 0)
+  geometry.addGroup(bodyIndices.length, accentIndices.length, 1)
+  geometry.name = 'reinforced-rebound-single-shell-geometry'
+  geometry.computeBoundingBox()
+  geometry.computeBoundingSphere()
+  geometry.userData.closedSurface = true
+  return geometry
+}

package/src/pages/play/race/seeded-random.ts

@@ -0,0 +1,23 @@
+import {
+  appendRaceFingerprint,
+  createRaceRandom,
+  formatRaceFingerprint,
+  hashRaceSeed,
+  normalizeRaceSeed,
+  raceRandomBetween,
+  shuffleRaceValues,
+} from '@marble.fun/physics-engine'
+
+export const normalizeSeed = normalizeRaceSeed
+export const hashSeed = hashRaceSeed
+export const createSeededRandom = createRaceRandom
+export const randomBetween = raceRandomBetween
+export const shuffled = shuffleRaceValues
+export const appendFingerprint = appendRaceFingerprint
+export const formatFingerprint = formatRaceFingerprint
+
+export function generateSeed(): string {
+  const words = new Uint32Array(2)
+  crypto.getRandomValues(words)
+  return `${words[0]!.toString(16).padStart(8, '0')}-${words[1]!.toString(16).padStart(8, '0')}`
+}