@marble.fun/track-catalog 3.0.0

package/src/pages/play/race/marble-entity.ts

@@ -0,0 +1,257 @@
+import RAPIER from '@dimforge/rapier3d-deterministic-compat'
+import type { MarbleSimulationSnapshot, PhysicsCourse } from '@marble.fun/physics-engine'
+import * as THREE from 'three'
+
+import { MarbleSphereGeometry } from '../../../three/marble-sphere-geometry'
+
+
+import { createLobbyMarble, type LobbyMarble } from '../../lobby/marble-factory'
+import { RACE_STOCK_MARBLES, STOCK_MARBLES } from '../../lobby/lobby-types'
+import { createGlassMarbleMaterial } from './marble-material'
+import { createMarblePhysicsState, type MarblePhysicsState } from './race-physics'
+import type { MarbleAssignment, MarbleTuning } from './race-types'
+import type { TrackCourse } from './track-course'
+import { RigidBodyTransformInterpolator } from './race-transform-interpolation'
+
+const TRAIL_POINT_COUNT = 22
+const MARBLE_LABEL_CLEARANCE = 1.12
+
+export interface MarbleEntity extends MarblePhysicsState {
+  visual: THREE.Group
+  visualReady: Promise<void>
+  disposeVisual(): void
+  label: THREE.Sprite
+  trail: THREE.Line
+  trailPositions: Float32Array
+  transformInterpolator: RigidBodyTransformInterpolator
+}
+
+function createLabelSprite(assignment: MarbleAssignment): THREE.Sprite {
+  const labelText = assignment.label.slice(0, 8).toUpperCase()
+  const canvas = document.createElement('canvas')
+  canvas.width = 256
+  canvas.height = 72
+  const context = canvas.getContext('2d')
+
+  if (!context) {
+    throw new Error('Canvas 2D context is unavailable')
+  }
+
+  context.font = '700 28px Inter, system-ui, sans-serif'
+  const pillWidth = THREE.MathUtils.clamp(Math.ceil(context.measureText(labelText).width + 64), 152, 248)
+  const pillX = (canvas.width - pillWidth) / 2
+  context.clearRect(0, 0, canvas.width, canvas.height)
+  const pillColor = new THREE.Color(assignment.color).multiplyScalar(0.34)
+  context.fillStyle = `#${pillColor.getHexString()}`
+  context.beginPath()
+  context.roundRect(pillX, 7, pillWidth, 58, 29)
+  context.fill()
+  context.fillStyle = '#f7fafb'
+  context.font = '700 28px Inter, system-ui, sans-serif'
+  context.textAlign = 'center'
+  context.textBaseline = 'middle'
+  context.fillText(labelText, canvas.width / 2, 36)
+
+  const texture = new THREE.CanvasTexture(canvas)
+  texture.colorSpace = THREE.SRGBColorSpace
+  const material = new THREE.SpriteMaterial({
+    map: texture,
+    transparent: true,
+    depthTest: false,
+    depthWrite: false,
+    toneMapped: false,
+  })
+  const sprite = new THREE.Sprite(material)
+  sprite.scale.set(2.35, 0.66, 1)
+  sprite.renderOrder = 1_000
+
+  return sprite
+}
+
+export type RaceMarbleVisualStyle = 'default' | 'stock' | 'stock-no-logo'
+
+function createDefaultMarbleVisual(assignment: MarbleAssignment, radius: number): THREE.Group {
+  const root = new THREE.Group()
+  root.name = `${assignment.slotId}-${assignment.label}`
+  const shell = new THREE.Mesh(
+    new MarbleSphereGeometry(radius, 36, 24),
+    createGlassMarbleMaterial(assignment.color, radius),
+  )
+  shell.castShadow = true
+  shell.receiveShadow = true
+  root.add(shell)
+
+  return root
+}
+
+function createStockMarbleVisual(
+  assignment: MarbleAssignment,
+  radius: number,
+  includeLogo: boolean,
+): { marble: LobbyMarble; visual: THREE.Group } | undefined {
+  const slotIndex = Number.parseInt(assignment.slotId.slice(1), 10) - 1
+  const spec = RACE_STOCK_MARBLES.find(candidate => candidate.id === assignment.label) ?? STOCK_MARBLES[slotIndex]
+  if (!spec) return undefined
+
+  const marble = createLobbyMarble(
+    {
+      ...spec,
+      interactive: false,
+      withPodium: false,
+    },
+    { includeLogo },
+  )
+  marble.marble.position.set(0, 0, 0)
+  marble.marble.scale.setScalar(1)
+  marble.root.scale.setScalar(radius / 0.73)
+  marble.root.name = `${assignment.slotId}-${assignment.label}`
+  return { marble, visual: marble.root }
+}
+
+function createTrail(color: string): { line: THREE.Line; positions: Float32Array } {
+  const positions = new Float32Array(TRAIL_POINT_COUNT * 3)
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
+  const material = new THREE.LineBasicMaterial({
+    color,
+    transparent: true,
+    opacity: 0.42,
+    depthWrite: false,
+  })
+  const line = new THREE.Line(geometry, material)
+  line.frustumCulled = false
+
+  return { line, positions }
+}
+
+export function createMarbleEntity(
+  scene: THREE.Object3D,
+  world: RAPIER.World,
+  course: TrackCourse,
+  assignment: MarbleAssignment,
+  tuning: MarbleTuning,
+  visualStyle: RaceMarbleVisualStyle = 'default',
+): MarbleEntity {
+  const physics = createMarblePhysicsState(world, course, assignment, tuning)
+  const translation = physics.body.translation()
+  const position = new THREE.Vector3(translation.x, translation.y, translation.z)
+  const stockVisual =
+    visualStyle === 'stock' || visualStyle === 'stock-no-logo'
+      ? createStockMarbleVisual(assignment, tuning.radius, visualStyle === 'stock')
+      : undefined
+  const visual = stockVisual?.visual ?? createDefaultMarbleVisual(assignment, tuning.radius)
+  const label = createLabelSprite(assignment)
+  const { line: trail, positions: trailPositions } = createTrail(assignment.color)
+  visual.position.copy(position)
+  label.position.copy(position)
+  label.position.y += tuning.radius + MARBLE_LABEL_CLEARANCE
+  scene.add(trail, visual, label)
+
+  for (let index = 0; index < TRAIL_POINT_COUNT; index += 1) {
+    trailPositions[index * 3] = position.x
+    trailPositions[index * 3 + 1] = position.y
+    trailPositions[index * 3 + 2] = position.z
+  }
+
+  return {
+    ...physics,
+    visual,
+    visualReady: stockVisual?.marble.ready ?? Promise.resolve(),
+    disposeVisual: () => {
+      if (stockVisual) stockVisual.marble.dispose()
+      else {
+        visual.traverse(object => {
+          if (!(object instanceof THREE.Mesh)) return
+          object.geometry.dispose()
+          const materials = Array.isArray(object.material) ? object.material : [object.material]
+          materials.forEach(material => material.dispose())
+        })
+      }
+      visual.removeFromParent()
+      label.material.map?.dispose()
+      label.material.dispose()
+      label.removeFromParent()
+      trail.geometry.dispose()
+      const trailMaterials = Array.isArray(trail.material) ? trail.material : [trail.material]
+      trailMaterials.forEach(material => material.dispose())
+      trail.removeFromParent()
+    },
+    label,
+    trail,
+    trailPositions,
+    transformInterpolator: new RigidBodyTransformInterpolator(physics.body),
+  }
+}
+
+export function captureMarblePhysicsTransform(entity: MarbleEntity): void {
+  // Portals are authoritative discontinuities. Snapping render history avoids
+  // drawing a one-frame flight across the world between linked endpoints.
+  entity.transformInterpolator.capture(entity.body, 2)
+}
+
+/**
+ * Copies an immutable authoritative core snapshot into the runtime's render/query
+ * mirror. The mirrored body is never stepped and cannot affect core physics.
+ */
+export function applyMarbleSimulationSnapshot(
+  entity: MarbleEntity,
+  snapshot: MarbleSimulationSnapshot,
+  course: PhysicsCourse,
+  captureTransform = true,
+): void {
+  entity.body.setTranslation({ x: snapshot.position[0], y: snapshot.position[1], z: snapshot.position[2] }, false)
+  entity.body.setRotation(
+    {
+      x: snapshot.rotation[0],
+      y: snapshot.rotation[1],
+      z: snapshot.rotation[2],
+      w: snapshot.rotation[3],
+    },
+    false,
+  )
+  entity.body.setLinvel(
+    {
+      x: snapshot.linearVelocity[0],
+      y: snapshot.linearVelocity[1],
+      z: snapshot.linearVelocity[2],
+    },
+    false,
+  )
+  entity.body.setAngvel(
+    {
+      x: snapshot.angularVelocity[0],
+      y: snapshot.angularVelocity[1],
+      z: snapshot.angularVelocity[2],
+    },
+    false,
+  )
+  course.projectPoint(
+    { x: snapshot.position[0], y: snapshot.position[1], z: snapshot.position[2] },
+    entity.projection.sampleIndex,
+    entity.projection,
+  )
+  entity.projection.distance = snapshot.route.distance
+  course.writePoseAtDistance(snapshot.route.distance, entity.pose)
+  entity.progress = snapshot.route.distance
+  entity.bestProgress = snapshot.bestProgressMeters
+  entity.speed = snapshot.speedMetersPerSecond
+  entity.finishedAtTick = snapshot.finishedAtTick
+  if (captureTransform) captureMarblePhysicsTransform(entity)
+}
+
+export function syncMarbleVisual(entity: MarbleEntity, interpolationAlpha = 1): void {
+  entity.transformInterpolator.write(entity.visual, interpolationAlpha)
+  entity.label.position.copy(entity.visual.position)
+  entity.label.position.y += entity.tuning.radius + MARBLE_LABEL_CLEARANCE
+}
+
+export function updateMarbleTrail(entity: MarbleEntity): void {
+  const translation = entity.body.translation()
+  entity.trailPositions.copyWithin(0, 3)
+  const finalIndex = (TRAIL_POINT_COUNT - 1) * 3
+  entity.trailPositions[finalIndex] = translation.x
+  entity.trailPositions[finalIndex + 1] = translation.y
+  entity.trailPositions[finalIndex + 2] = translation.z
+  const attribute = entity.trail.geometry.getAttribute('position')
+  attribute.needsUpdate = true
+}

package/src/pages/play/race/marble-material.ts

@@ -0,0 +1,20 @@
+import * as THREE from 'three'
+
+export function createGlassMarbleMaterial(color: string, radius: number): THREE.MeshPhysicalMaterial {
+  const marbleColor = new THREE.Color(color)
+  return new THREE.MeshPhysicalMaterial({
+    color: marbleColor,
+    emissive: marbleColor,
+    emissiveIntensity: 0.035,
+    metalness: 0,
+    roughness: 0.075,
+    transmission: 0,
+    thickness: radius * 1.4,
+    ior: 1.52,
+    specularIntensity: 1,
+    specularColor: new THREE.Color(0xffffff),
+    clearcoat: 1,
+    clearcoatRoughness: 0.025,
+    envMapIntensity: 1.25,
+  })
+}