@marble.fun/track-catalog 3.0.0

package/src/three/theme-world-factory.ts

@@ -0,0 +1,590 @@
+import * as THREE from 'three'
+
+import { VisualCylinderGeometry, VisualConeGeometry, VisualTorusGeometry, VisualCircleGeometry, VisualIcosahedronGeometry } from './visual-geometry'
+
+import type { ThemeMaterialRegistry } from './theme-material-registry'
+import type { ThemeParticleStyle, TrackThemeDefinition } from './track-theme'
+
+export interface ThemeWorldState {
+  root: THREE.Group
+  update(deltaSeconds: number, elapsedSeconds: number): void
+  dispose(): void
+}
+
+export function createThemeWorld(
+  theme: TrackThemeDefinition,
+  materials: ThemeMaterialRegistry,
+  mobile: boolean,
+): ThemeWorldState {
+  const root = new THREE.Group()
+  root.name = `theme-world:${theme.id}`
+  root.userData.themeWorld = true
+  const scale = mobile ? 0.62 : 1
+  if (theme.world.kit !== 'studio') {
+    addGround(root, materials, theme.world.kit)
+  }
+
+  switch (theme.world.kit) {
+    case 'wild-west':
+      addWildWestKit(root, materials, scale * theme.world.density)
+      break
+    case 'ancient-egypt':
+      addAncientEgyptKit(root, materials, scale * theme.world.density)
+      break
+    case 'japanese-sakura-lake':
+      addJapaneseSakuraLakeKit(root, materials, scale * theme.world.density)
+      break
+    case 'space-station':
+      addSpaceStationKit(root, materials, scale * theme.world.density)
+      break
+    case 'jungle':
+      addJungleKit(root, materials, scale * theme.world.density)
+      break
+    case 'studio':
+      break
+  }
+
+  const particles = createThemeParticles(theme, mobile)
+  if (particles) root.add(particles.points)
+
+  return {
+    root,
+    update: (deltaSeconds, elapsedSeconds) => {
+      particles?.update(deltaSeconds, elapsedSeconds)
+    },
+    dispose: () => disposeThemeWorld(root),
+  }
+}
+
+function addGround(
+  root: THREE.Group,
+  materials: ThemeMaterialRegistry,
+  kit: TrackThemeDefinition['world']['kit'],
+): void {
+  const geometry =
+    kit === 'space-station' ? new VisualCylinderGeometry(100, 100, 0.22, 64) : new VisualCircleGeometry(105, 48)
+  const ground = new THREE.Mesh(geometry, materials.get('world.ground'))
+  ground.name = 'theme-ground'
+  if (geometry instanceof THREE.CircleGeometry) ground.rotation.x = -Math.PI / 2
+  ground.position.y = -0.12
+  ground.receiveShadow = true
+  root.add(ground)
+}
+
+function addWildWestKit(root: THREE.Group, materials: ThemeMaterialRegistry, density: number): void {
+  const count = Math.max(10, Math.round(34 * density))
+  const trunkGeometry = new VisualCylinderGeometry(0.3, 0.46, 4.6, 7)
+  const armGeometry = new VisualCylinderGeometry(0.16, 0.22, 2.1, 6)
+  const foliage = materials.get('world.foliage')
+  const trunks = new THREE.InstancedMesh(trunkGeometry, foliage, count)
+  const arms = new THREE.InstancedMesh(armGeometry, foliage, count * 2)
+  const matrix = new THREE.Matrix4()
+  let armIndex = 0
+
+  for (let index = 0; index < count; index += 1) {
+    const angle = (index / count) * Math.PI * 2 + seeded(index, 11) * 0.28
+    const radius = 28 + seeded(index, 17) * 62
+    const height = 0.72 + seeded(index, 29) * 0.65
+    const position = new THREE.Vector3(Math.cos(angle) * radius, 2.2 * height, Math.sin(angle) * radius)
+    matrix.compose(position, new THREE.Quaternion(), new THREE.Vector3(height, height, height))
+    trunks.setMatrixAt(index, matrix)
+    for (const side of [-1, 1]) {
+      const armPosition = position
+        .clone()
+        .add(new THREE.Vector3(side * 0.66 * height, 0.35 * height, seeded(index, side + 40) * 0.3))
+      const quaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0, side * Math.PI * 0.48))
+      matrix.compose(armPosition, quaternion, new THREE.Vector3(height, height, height))
+      arms.setMatrixAt(armIndex, matrix)
+      armIndex += 1
+    }
+  }
+  trunks.instanceMatrix.needsUpdate = true
+  arms.instanceMatrix.needsUpdate = true
+  root.add(trunks, arms)
+
+  addPerimeterFence(root, materials, 46, Math.max(18, Math.round(42 * density)), 1.65)
+  addRockField(root, materials, Math.max(12, Math.round(30 * density)), 30, 86)
+}
+
+function addAncientEgyptKit(root: THREE.Group, materials: ThemeMaterialRegistry, density: number): void {
+  const monumentCount = Math.max(6, Math.round(10 * density))
+  const obeliskGeometry = new VisualCylinderGeometry(0.18, 0.72, 7.2, 4)
+  const capGeometry = new VisualConeGeometry(0.51, 1.2, 4)
+  const obelisks = new THREE.InstancedMesh(obeliskGeometry, materials.get('world.primary'), monumentCount)
+  const caps = new THREE.InstancedMesh(capGeometry, materials.get('world.accent'), monumentCount)
+  const matrix = new THREE.Matrix4()
+
+  for (let index = 0; index < monumentCount; index += 1) {
+    const angle = (index / monumentCount) * Math.PI * 2 + 0.18
+    const radius = 42 + (index % 3) * 12
+    const scale = 0.76 + seeded(index, 83) * 0.46
+    const position = new THREE.Vector3(Math.cos(angle) * radius, 3.6 * scale, Math.sin(angle) * radius)
+    const quaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, Math.PI / 4, 0))
+    matrix.compose(position, quaternion, new THREE.Vector3(scale, scale, scale))
+    obelisks.setMatrixAt(index, matrix)
+    matrix.compose(position.clone().setY(7.72 * scale), quaternion, new THREE.Vector3(scale, scale, scale))
+    caps.setMatrixAt(index, matrix)
+  }
+  obelisks.name = 'ancient-egypt-obelisks'
+  caps.name = 'ancient-egypt-obelisk-caps'
+  obelisks.userData.decorative = true
+  caps.userData.decorative = true
+  obelisks.instanceMatrix.needsUpdate = true
+  caps.instanceMatrix.needsUpdate = true
+  root.add(obelisks, caps)
+
+  const pyramidSpecs = [
+    [-58, 0, -34, 12],
+    [52, 0, 43, 9],
+    [68, 0, -22, 7],
+  ] as const
+  for (const [index, [x, y, z, size]] of pyramidSpecs.entries()) {
+    const pyramid = new THREE.Mesh(new VisualConeGeometry(size, size * 0.92, 4), materials.get('world.secondary'))
+    pyramid.name = `ancient-egypt-pyramid-${index + 1}`
+    pyramid.userData.decorative = true
+    pyramid.position.set(x, y + size * 0.46, z)
+    pyramid.rotation.y = Math.PI / 4
+    root.add(pyramid)
+  }
+
+  addRockField(root, materials, Math.max(10, Math.round(22 * density)), 34, 88)
+}
+
+function addJapaneseSakuraLakeKit(root: THREE.Group, materials: ThemeMaterialRegistry, density: number): void {
+  const toriiCount = Math.max(4, Math.round(7 * density))
+  const postGeometry = new THREE.BoxGeometry(0.42, 5.4, 0.42)
+  const beamGeometry = new THREE.BoxGeometry(5.8, 0.38, 0.55)
+  const upperBeamGeometry = new THREE.BoxGeometry(6.7, 0.3, 0.68)
+  const toriiPosts = new THREE.InstancedMesh(postGeometry, materials.get('world.primary'), toriiCount * 2)
+  const toriiBeams = new THREE.InstancedMesh(beamGeometry, materials.get('world.dark'), toriiCount)
+  const toriiUpperBeams = new THREE.InstancedMesh(upperBeamGeometry, materials.get('world.primary'), toriiCount)
+  const parentMatrix = new THREE.Matrix4()
+  const localMatrix = new THREE.Matrix4()
+  const instanceMatrix = new THREE.Matrix4()
+  const position = new THREE.Vector3()
+  const quaternion = new THREE.Quaternion()
+  const scale = new THREE.Vector3(1, 1, 1)
+  let postIndex = 0
+
+  for (let index = 0; index < toriiCount; index += 1) {
+    const angle = (index / toriiCount) * Math.PI * 2 + 0.24
+    const radius = 39 + (index % 2) * 17
+    position.set(Math.cos(angle) * radius, 0, Math.sin(angle) * radius)
+    quaternion.setFromEuler(new THREE.Euler(0, -angle + Math.PI / 2, 0))
+    parentMatrix.compose(position, quaternion, scale)
+
+    for (const x of [-2.15, 2.15]) {
+      localMatrix.makeTranslation(x, 2.7, 0)
+      toriiPosts.setMatrixAt(postIndex, instanceMatrix.multiplyMatrices(parentMatrix, localMatrix))
+      postIndex += 1
+    }
+    localMatrix.makeTranslation(0, 4.55, 0)
+    toriiBeams.setMatrixAt(index, instanceMatrix.multiplyMatrices(parentMatrix, localMatrix))
+    localMatrix.makeTranslation(0, 5.35, 0)
+    toriiUpperBeams.setMatrixAt(index, instanceMatrix.multiplyMatrices(parentMatrix, localMatrix))
+  }
+  toriiPosts.name = 'japanese-sakura-torii-posts'
+  toriiBeams.name = 'japanese-sakura-torii-beams'
+  toriiUpperBeams.name = 'japanese-sakura-torii-upper-beams'
+  for (const toriiPart of [toriiPosts, toriiBeams, toriiUpperBeams]) {
+    toriiPart.userData.decorative = true
+    toriiPart.instanceMatrix.needsUpdate = true
+  }
+  root.add(toriiPosts, toriiBeams, toriiUpperBeams)
+
+  const pagodaSpecs = [
+    [-58, 0, -35, 1.15],
+    [55, 0, 42, 0.95],
+    [67, 0, -24, 0.78],
+  ] as const
+  for (let tier = 0; tier < 3; tier += 1) {
+    const bodies = new THREE.InstancedMesh(
+      new THREE.BoxGeometry(3.5 - tier * 0.55, 1.35, 3.5 - tier * 0.55),
+      materials.get('world.secondary'),
+      pagodaSpecs.length,
+    )
+    const roofs = new THREE.InstancedMesh(
+      new VisualCylinderGeometry(1.6 - tier * 0.2, 2.9 - tier * 0.36, 0.65, 4),
+      materials.get('world.dark'),
+      pagodaSpecs.length,
+    )
+    for (const [index, [x, y, z, pagodaScale]] of pagodaSpecs.entries()) {
+      position.set(x, y, z)
+      quaternion.identity()
+      scale.setScalar(pagodaScale)
+      parentMatrix.compose(position, quaternion, scale)
+      localMatrix.makeTranslation(0, 0.8 + tier * 1.55, 0)
+      bodies.setMatrixAt(index, instanceMatrix.multiplyMatrices(parentMatrix, localMatrix))
+      localMatrix.compose(
+        new THREE.Vector3(0, 1.65 + tier * 1.55, 0),
+        quaternion.setFromAxisAngle(THREE.Object3D.DEFAULT_UP, Math.PI / 4),
+        new THREE.Vector3(1, 1, 1),
+      )
+      roofs.setMatrixAt(index, instanceMatrix.multiplyMatrices(parentMatrix, localMatrix))
+    }
+    bodies.name = `japanese-sakura-pagoda-tier-${tier + 1}-bodies`
+    roofs.name = `japanese-sakura-pagoda-tier-${tier + 1}-roofs`
+    bodies.userData.decorative = true
+    roofs.userData.decorative = true
+    bodies.instanceMatrix.needsUpdate = true
+    roofs.instanceMatrix.needsUpdate = true
+    root.add(bodies, roofs)
+  }
+}
+
+function addSpaceStationKit(root: THREE.Group, materials: ThemeMaterialRegistry, density: number): void {
+  const segments = Math.max(12, Math.round(28 * density))
+  const pylonGeometry = new THREE.BoxGeometry(1.1, 6.5, 1.1)
+  const lightGeometry = new THREE.BoxGeometry(0.22, 2.8, 0.28)
+  const pylons = new THREE.InstancedMesh(pylonGeometry, materials.get('world.primary'), segments)
+  const lights = new THREE.InstancedMesh(lightGeometry, materials.get('world.accent'), segments)
+  const matrix = new THREE.Matrix4()
+
+  for (let index = 0; index < segments; index += 1) {
+    const angle = (index / segments) * Math.PI * 2
+    const radius = 42 + (index % 3) * 8
+    const position = new THREE.Vector3(Math.cos(angle) * radius, 3.25, Math.sin(angle) * radius)
+    const quaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, -angle, 0))
+    matrix.compose(position, quaternion, new THREE.Vector3(1, 1, 1))
+    pylons.setMatrixAt(index, matrix)
+    matrix.compose(position.clone().add(new THREE.Vector3(0, 0.35, 0)), quaternion, new THREE.Vector3(1, 1, 1))
+    lights.setMatrixAt(index, matrix)
+  }
+  pylons.instanceMatrix.needsUpdate = true
+  lights.instanceMatrix.needsUpdate = true
+  root.add(pylons, lights)
+
+  for (const radius of [34, 62]) {
+    const ring = new THREE.Mesh(
+      new VisualTorusGeometry(radius, radius === 34 ? 0.26 : 0.42, 6, 96),
+      materials.get(radius === 34 ? 'world.accent' : 'world.secondary'),
+    )
+    ring.rotation.x = Math.PI / 2
+    ring.position.y = radius === 34 ? 1.2 : 8
+    root.add(ring)
+  }
+
+  const planetSpecs = [
+    { position: [-18, 9, -22], radius: 5.5, slot: 'world.secondary' },
+    { position: [12, 8, -14], radius: 3.2, slot: 'world.primary' },
+    { position: [-30, 5, 2], radius: 2.8, slot: 'world.accent' },
+  ] as const
+  for (const [index, planetSpec] of planetSpecs.entries()) {
+    const planet = new THREE.Mesh(new VisualIcosahedronGeometry(planetSpec.radius, 3), materials.get(planetSpec.slot))
+    planet.name = `space-background-planet-${index + 1}`
+    planet.position.set(planetSpec.position[0], planetSpec.position[1], planetSpec.position[2])
+    root.add(planet)
+    if (index === 0) {
+      const planetRing = new THREE.Mesh(
+        new VisualTorusGeometry(planetSpec.radius * 1.45, 0.32, 8, 72),
+        materials.get('world.accent'),
+      )
+      planetRing.name = 'space-background-planet-ring'
+      planetRing.position.copy(planet.position)
+      planetRing.rotation.set(Math.PI * 0.62, 0.18, 0.25)
+      root.add(planetRing)
+    }
+  }
+}
+
+function addJungleKit(root: THREE.Group, materials: ThemeMaterialRegistry, density: number): void {
+  addJungleGreenPerimeter(root, materials, 36, density)
+  addRockField(root, materials, Math.max(18, Math.round(38 * density)), 30, 82)
+
+  const leafCount = Math.max(30, Math.round(86 * density))
+  const leafGeometry = new VisualConeGeometry(0.62, 2.8, 4)
+  leafGeometry.rotateZ(Math.PI / 2)
+  const leaves = new THREE.InstancedMesh(leafGeometry, materials.get('world.foliage'), leafCount)
+  const matrix = new THREE.Matrix4()
+  for (let index = 0; index < leafCount; index += 1) {
+    const angle = (index / leafCount) * Math.PI * 2 + seeded(index, 19) * 0.3
+    const radius = 24 + seeded(index, 31) * 68
+    const position = new THREE.Vector3(
+      Math.cos(angle) * radius,
+      0.45 + seeded(index, 7) * 2.3,
+      Math.sin(angle) * radius,
+    )
+    const quaternion = new THREE.Quaternion().setFromEuler(
+      new THREE.Euler(seeded(index, 23) * 0.6, angle + seeded(index, 37), seeded(index, 41) * 0.6),
+    )
+    const size = 0.65 + seeded(index, 43) * 1.35
+    matrix.compose(position, quaternion, new THREE.Vector3(size, size, size))
+    leaves.setMatrixAt(index, matrix)
+  }
+  leaves.name = 'jungle-broad-leaves'
+  leaves.userData.decorative = true
+  leaves.instanceMatrix.needsUpdate = true
+  root.add(leaves)
+}
+
+function addJungleGreenPerimeter(
+  root: THREE.Group,
+  materials: ThemeMaterialRegistry,
+  radius: number,
+  density: number,
+): void {
+  // Decorative only: the authored track guards remain the sole wall colliders.
+  const clusterCount = Math.max(144, Math.round(280 * density))
+  const clusterGeometry = new THREE.DodecahedronGeometry(0.72, 0)
+  const clusters = new THREE.InstancedMesh(clusterGeometry, materials.get('world.foliage'), clusterCount)
+  clusters.name = 'jungle-perimeter-leaf-clusters'
+  clusters.userData.decorative = true
+  const matrix = new THREE.Matrix4()
+  const foliageColors = [
+    new THREE.Color('#256f35'),
+    new THREE.Color('#3d8f3b'),
+    new THREE.Color('#61a844'),
+    new THREE.Color('#8dbc4b'),
+    new THREE.Color('#b2cf5b'),
+  ]
+
+  for (let index = 0; index < clusterCount; index += 1) {
+    const angle = (index / clusterCount) * Math.PI * 2 + (seeded(index, 47) - 0.5) * 0.045
+    const clusterRadius = radius + (seeded(index, 53) - 0.5) * 1.15
+    const band = index % 3
+    const height = 0.48 + band * 0.78 + seeded(index, 59) * 0.58
+    const position = new THREE.Vector3(Math.cos(angle) * clusterRadius, height, Math.sin(angle) * clusterRadius)
+    const quaternion = new THREE.Quaternion().setFromEuler(
+      new THREE.Euler(seeded(index, 67) * 1.2, -angle + seeded(index, 71), seeded(index, 79) * 1.1),
+    )
+    const width = 0.78 + seeded(index, 61) * 0.92
+    const heightScale = 0.65 + seeded(index, 83) * 0.9
+    const depth = 0.72 + seeded(index, 89) * 0.84
+    matrix.compose(position, quaternion, new THREE.Vector3(width, heightScale, depth))
+    clusters.setMatrixAt(index, matrix)
+    clusters.setColorAt(index, foliageColors[Math.floor(seeded(index, 73) * foliageColors.length)]!)
+  }
+  clusters.instanceMatrix.needsUpdate = true
+  if (clusters.instanceColor) clusters.instanceColor.needsUpdate = true
+  root.add(clusters)
+
+  const broadLeafCount = Math.max(90, Math.round(180 * density))
+  const broadLeafGeometry = new VisualConeGeometry(0.46, 1.9, 4)
+  broadLeafGeometry.rotateZ(Math.PI / 2)
+  const broadLeaves = new THREE.InstancedMesh(broadLeafGeometry, materials.get('world.foliage'), broadLeafCount)
+  broadLeaves.name = 'jungle-perimeter-broad-leaves'
+  broadLeaves.userData.decorative = true
+  for (let index = 0; index < broadLeafCount; index += 1) {
+    const angle = (index / broadLeafCount) * Math.PI * 2 + (seeded(index, 97) - 0.5) * 0.08
+    const leafRadius = radius + (seeded(index, 101) - 0.5) * 1.4
+    const position = new THREE.Vector3(
+      Math.cos(angle) * leafRadius,
+      0.38 + seeded(index, 103) * 2.6,
+      Math.sin(angle) * leafRadius,
+    )
+    const quaternion = new THREE.Quaternion().setFromEuler(
+      new THREE.Euler(seeded(index, 107) * 1.1, -angle + seeded(index, 109) * 1.5, seeded(index, 113) * 1.3),
+    )
+    const size = 0.62 + seeded(index, 127) * 0.92
+    matrix.compose(position, quaternion, new THREE.Vector3(size, size, size))
+    broadLeaves.setMatrixAt(index, matrix)
+    broadLeaves.setColorAt(index, foliageColors[Math.floor(seeded(index, 131) * foliageColors.length)]!)
+  }
+  broadLeaves.instanceMatrix.needsUpdate = true
+  if (broadLeaves.instanceColor) broadLeaves.instanceColor.needsUpdate = true
+  root.add(broadLeaves)
+}
+
+function addPerimeterFence(
+  root: THREE.Group,
+  materials: ThemeMaterialRegistry,
+  radius: number,
+  count: number,
+  height: number,
+): void {
+  const postGeometry = new VisualCylinderGeometry(0.13, 0.19, height, 5)
+  const railGeometry = new THREE.BoxGeometry((Math.PI * 2 * radius) / count + 0.24, 0.12, 0.15)
+  const posts = new THREE.InstancedMesh(postGeometry, materials.get('world.primary'), count)
+  const rails = new THREE.InstancedMesh(railGeometry, materials.get('world.primary'), count * 2)
+  const ties = new THREE.InstancedMesh(new VisualTorusGeometry(0.2, 0.035, 4, 8), materials.get('world.accent'), count)
+  const matrix = new THREE.Matrix4()
+  let railIndex = 0
+  for (let index = 0; index < count; index += 1) {
+    const angle = (index / count) * Math.PI * 2
+    const position = new THREE.Vector3(Math.cos(angle) * radius, height / 2 - 0.04, Math.sin(angle) * radius)
+    const lean = (seeded(index, 13) - 0.5) * 0.22
+    const postQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(lean, -angle, lean * 0.7))
+    matrix.compose(position, postQuaternion, new THREE.Vector3(1, 1, 1))
+    posts.setMatrixAt(index, matrix)
+
+    for (const railHeight of [height * 0.38, height * 0.72]) {
+      const railPosition = new THREE.Vector3(Math.cos(angle) * radius, railHeight, Math.sin(angle) * radius)
+      const railQuaternion = new THREE.Quaternion().setFromEuler(
+        new THREE.Euler(0, -angle, (seeded(index, railIndex + 3) - 0.5) * 0.08),
+      )
+      matrix.compose(railPosition, railQuaternion, new THREE.Vector3(1, 1, 1))
+      rails.setMatrixAt(railIndex, matrix)
+      railIndex += 1
+    }
+
+    matrix.compose(
+      position.clone().setY(height * 0.72),
+      new THREE.Quaternion().setFromEuler(new THREE.Euler(Math.PI / 2, -angle, 0)),
+      new THREE.Vector3(1, 1, 1),
+    )
+    ties.setMatrixAt(index, matrix)
+  }
+  posts.instanceMatrix.needsUpdate = true
+  rails.instanceMatrix.needsUpdate = true
+  ties.instanceMatrix.needsUpdate = true
+  root.add(posts, rails, ties)
+}
+
+function addRockField(
+  root: THREE.Group,
+  materials: ThemeMaterialRegistry,
+  count: number,
+  minimumRadius: number,
+  maximumRadius: number,
+): void {
+  const geometry = new THREE.DodecahedronGeometry(1.25, 0)
+  const rocks = new THREE.InstancedMesh(geometry, materials.get('world.secondary'), count)
+  const matrix = new THREE.Matrix4()
+  for (let index = 0; index < count; index += 1) {
+    const angle = (index / count) * Math.PI * 2 + seeded(index, 5) * 0.4
+    const radius = THREE.MathUtils.lerp(minimumRadius, maximumRadius, seeded(index, 9))
+    const scale = new THREE.Vector3(
+      0.6 + seeded(index, 21) * 1.8,
+      0.45 + seeded(index, 27) * 1.4,
+      0.6 + seeded(index, 33) * 1.8,
+    )
+    matrix.compose(
+      new THREE.Vector3(Math.cos(angle) * radius, scale.y * 0.45, Math.sin(angle) * radius),
+      new THREE.Quaternion().setFromEuler(new THREE.Euler(seeded(index, 15), seeded(index, 25) * Math.PI, 0)),
+      scale,
+    )
+    rocks.setMatrixAt(index, matrix)
+  }
+  rocks.instanceMatrix.needsUpdate = true
+  root.add(rocks)
+}
+
+interface ParticleState {
+  points: THREE.Points
+  update(deltaSeconds: number, elapsedSeconds: number): void
+}
+
+function createThemeParticles(theme: TrackThemeDefinition, mobile: boolean): ParticleState | undefined {
+  if (theme.particles.style === 'none' || theme.particles.count === 0) return undefined
+  const count = Math.max(64, Math.round(theme.particles.count * (mobile ? 0.58 : 1)))
+  const positions = new Float32Array(count * 3)
+  const velocities = new Float32Array(count * 3)
+  const colors = new Float32Array(count * 3)
+  const primary = new THREE.Color(theme.particles.color)
+  const secondary = new THREE.Color(theme.particles.secondaryColor)
+  const random = createRandom(`${theme.id}:particles`)
+
+  for (let index = 0; index < count; index += 1) {
+    const offset = index * 3
+    positions[offset] = (random() - 0.5) * 190
+    positions[offset + 1] = random() * 72 - 8
+    positions[offset + 2] = (random() - 0.5) * 190
+    const velocity = particleVelocity(theme.particles.style, random)
+    velocities.set(velocity, offset)
+    const color = primary.clone().lerp(secondary, random())
+    colors[offset] = color.r
+    colors[offset + 1] = color.g
+    colors[offset + 2] = color.b
+  }
+
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
+  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
+  const material = new THREE.PointsMaterial({
+    size: theme.particles.size,
+    transparent: true,
+    opacity: theme.particles.opacity,
+    depthWrite: false,
+    vertexColors: true,
+    blending: theme.particles.style === 'space-drift' ? THREE.AdditiveBlending : THREE.NormalBlending,
+    sizeAttenuation: true,
+  })
+  const points = new THREE.Points(geometry, material)
+  points.name = `theme-particles:${theme.particles.style}`
+  points.frustumCulled = false
+
+  return {
+    points,
+    update: (deltaSeconds, elapsedSeconds) => {
+      const positionAttribute = geometry.getAttribute('position') as THREE.BufferAttribute
+      for (let index = 0; index < count; index += 1) {
+        const offset = index * 3
+        const speed = theme.particles.speed
+        let x = positions[offset]!
+        let y = positions[offset + 1]!
+        let z = positions[offset + 2]!
+        x += velocities[offset]! * deltaSeconds * speed
+        y += velocities[offset + 1]! * deltaSeconds * speed
+        z += velocities[offset + 2]! * deltaSeconds * speed
+
+        if (theme.particles.style === 'space-drift') {
+          x += Math.sin(elapsedSeconds * 0.7 + index) * deltaSeconds * 0.18
+        } else if (theme.particles.style === 'fireflies') {
+          y += Math.sin(elapsedSeconds * 1.4 + index * 0.7) * deltaSeconds * 0.3
+        } else if (theme.particles.style === 'petals') {
+          x += Math.sin(elapsedSeconds * 0.9 + index * 0.73) * deltaSeconds * 0.52
+          z += Math.cos(elapsedSeconds * 0.64 + index * 0.41) * deltaSeconds * 0.3
+          y += Math.sin(elapsedSeconds * 1.2 + index * 0.37) * deltaSeconds * 0.08
+        }
+
+        if (x > 96) x = -96
+        if (x < -96) x = 96
+        if (y > 72) y = -8
+        if (y < -8) y = 72
+        if (z > 96) z = -96
+        if (z < -96) z = 96
+        positions[offset] = x
+        positions[offset + 1] = y
+        positions[offset + 2] = z
+      }
+      positionAttribute.needsUpdate = true
+    },
+  }
+}
+
+function particleVelocity(style: ThemeParticleStyle, random: () => number): [number, number, number] {
+  switch (style) {
+    case 'space-drift':
+      return [0.45 + random() * 0.9, (random() - 0.5) * 0.18, 0.8 + random() * 1.4]
+    case 'dust':
+      return [0.5 + random(), random() * 0.1, (random() - 0.5) * 0.25]
+    case 'fireflies':
+      return [(random() - 0.5) * 0.18, (random() - 0.5) * 0.08, (random() - 0.5) * 0.18]
+    case 'petals':
+      return [0.42 + random() * 0.38, -0.08 - random() * 0.16, (random() - 0.5) * 0.32]
+    case 'none':
+      return [0, 0, 0]
+  }
+}
+
+function disposeThemeWorld(root: THREE.Group): void {
+  root.traverse(object => {
+    if (!(object instanceof THREE.Mesh || object instanceof THREE.Line || object instanceof THREE.Points)) return
+    object.geometry.dispose()
+    const materials = Array.isArray(object.material) ? object.material : [object.material]
+    materials.forEach(material => {
+      if (!material.userData.themeRegistryManaged) material.dispose()
+    })
+  })
+  root.removeFromParent()
+}
+
+function seeded(index: number, salt: number): number {
+  const value = Math.sin(index * 12.9898 + salt * 78.233) * 43_758.5453
+  return value - Math.floor(value)
+}
+
+function createRandom(seed: string): () => number {
+  let state = 2_166_136_261
+  for (const char of seed) {
+    state ^= char.charCodeAt(0)
+    state = Math.imul(state, 16_777_619)
+  }
+  return () => {
+    state += 0x6d2b79f5
+    let value = state
+    value = Math.imul(value ^ (value >>> 15), value | 1)
+    value ^= value + Math.imul(value ^ (value >>> 7), value | 61)
+    return ((value ^ (value >>> 14)) >>> 0) / 4_294_967_296
+  }
+}