@marble.fun/track-catalog 3.0.0

package/src/three/shared-obstacle-metal.ts

@@ -0,0 +1,44 @@
+import type { MaterialRecipe, ThemeMaterialSlot } from './track-theme'
+
+export interface SharedObstacleMetalPalette {
+  light: string
+  dark: string
+}
+
+const SHARED_OBSTACLE_METAL_SURFACE = {
+  kind: 'physical',
+  roughness: 0.12,
+  metalness: 0.88,
+  clearcoat: 1,
+  clearcoatRoughness: 0.05,
+  envMapIntensity: 2.25,
+} as const satisfies Omit<Extract<MaterialRecipe, { kind: 'physical' }>, 'color'>
+
+function tintedObstacleMetal(color: string): MaterialRecipe {
+  return { ...SHARED_OBSTACLE_METAL_SURFACE, color }
+}
+
+/**
+ * Every themed obstacle uses this one metal response. Themes own only the two
+ * tints; geometry owns whether a surface is a light body or a darker detail.
+ */
+export function createSharedObstacleMetalMaterials(
+  palette: SharedObstacleMetalPalette,
+): Pick<
+  Record<ThemeMaterialSlot, MaterialRecipe>,
+  | 'obstacle.primary'
+  | 'obstacle.secondary'
+  | 'obstacle.base'
+  | 'mechanism.flipper.primary'
+  | 'mechanism.flipper.secondary'
+> {
+  const light = tintedObstacleMetal(palette.light)
+  const dark = tintedObstacleMetal(palette.dark)
+  return {
+    'obstacle.primary': light,
+    'obstacle.secondary': dark,
+    'obstacle.base': dark,
+    'mechanism.flipper.primary': light,
+    'mechanism.flipper.secondary': dark,
+  }
+}

package/src/three/soft-additive-particles.ts

@@ -0,0 +1,57 @@
+import * as THREE from 'three'
+
+export interface SoftAdditiveParticleMaterialOptions {
+  color: THREE.ColorRepresentation
+  fog?: boolean
+  opacity: number
+  size: number
+  sizeAttenuation: boolean
+}
+
+export function createSoftParticleSpriteTexture(size = 32): THREE.DataTexture {
+  const data = new Uint8Array(size * size * 4)
+  const center = (size - 1) * 0.5
+  const radius = size * 0.5
+
+  for (let y = 0; y < size; y += 1) {
+    for (let x = 0; x < size; x += 1) {
+      const distance = Math.min(1, Math.hypot(x - center, y - center) / radius)
+      const fade =
+        distance <= 0.35
+          ? THREE.MathUtils.lerp(1, 0.8, THREE.MathUtils.smoothstep(distance, 0, 0.35))
+          : THREE.MathUtils.lerp(0.8, 0, THREE.MathUtils.smoothstep(distance, 0.35, 1))
+      const value = Math.round(fade * 255)
+      const offset = (y * size + x) * 4
+      data[offset] = value
+      data[offset + 1] = value
+      data[offset + 2] = value
+      data[offset + 3] = value
+    }
+  }
+
+  const texture = new THREE.DataTexture(data, size, size, THREE.RGBAFormat)
+  texture.name = 'soft-additive-particle-sprite'
+  texture.colorSpace = THREE.NoColorSpace
+  texture.minFilter = THREE.LinearFilter
+  texture.magFilter = THREE.LinearFilter
+  texture.generateMipmaps = false
+  texture.needsUpdate = true
+  return texture
+}
+
+export function createSoftAdditiveParticleMaterial(options: SoftAdditiveParticleMaterialOptions): THREE.PointsMaterial {
+  const sprite = createSoftParticleSpriteTexture()
+  return new THREE.PointsMaterial({
+    color: options.color,
+    map: sprite,
+    alphaMap: sprite,
+    size: options.size,
+    sizeAttenuation: options.sizeAttenuation,
+    blending: THREE.AdditiveBlending,
+    transparent: true,
+    opacity: options.opacity,
+    depthWrite: false,
+    fog: options.fog ?? false,
+    toneMapped: false,
+  })
+}

package/src/three/space-station-appearance.ts

@@ -0,0 +1,213 @@
+import type { MaterialRecipe } from './track-theme'
+import * as THREE from 'three'
+
+export const SPACE_STATION_ARMORED_WALL_ID = 'space-station.armored-wall'
+export const SPACE_STATION_FLOOR_DECK_ID = 'space-station.modular-deck'
+export const SPACE_STATION_FLOOR_DECK_BASE_ID = 'space-station.modular-deck-base'
+export const SPACE_STATION_HOVER_GRID_FLOOR_ID = 'space-station.holographic-hover-grid'
+export const SPACE_STATION_WALL_PANEL_ID = 'space-station.armored-wall-panel'
+export const SPACE_STATION_WALL_RIB_ID = 'space-station.armored-wall-rib'
+export const SPACE_STATION_WALL_TRIM_ID = 'space-station.armored-wall-trim'
+export const SPACE_STATION_WALL_LIGHT_ID = 'space-station.armored-wall-light'
+export const SPACE_STATION_CENTER_GUIDE_ID = 'space-station.routed-center-guide'
+
+export const SPACE_STATION_FLOOR_DECK_MATERIAL: MaterialRecipe = {
+  kind: 'physical',
+  color: '#ffffff',
+  roughness: 0.5,
+  metalness: 0.68,
+  envMapIntensity: 1.24,
+  clearcoat: 0.08,
+  clearcoatRoughness: 0.48,
+  textureUrl: '/themes/textures/space-station-floor-deck-v2-neutral-albedo.webp',
+  normalTextureUrl: '/themes/textures/space-station-floor-deck-v2-neutral-normal.png',
+  heightTextureUrl: '/themes/textures/space-station-floor-deck-v2-neutral-height.png',
+  roughnessTextureUrl: '/themes/textures/space-station-floor-deck-v2-neutral-roughness.png',
+  aoTextureUrl: '/themes/textures/space-station-floor-deck-v2-neutral-ao.png',
+  textureWorldSize: [4.2, 5],
+  normalScale: [0.24, 0.24],
+  bumpScale: 0.008,
+  aoMapIntensity: 0.22,
+}
+
+/** Neutral carrier beneath the routed, unchanged approved deck cross-section. */
+export const SPACE_STATION_FLOOR_DECK_BASE_MATERIAL: MaterialRecipe = {
+  kind: 'physical',
+  color: '#ffffff',
+  roughness: 0.5,
+  metalness: 0.68,
+  envMapIntensity: 1.24,
+  clearcoat: 0.08,
+  clearcoatRoughness: 0.48,
+  textureUrl: '/themes/textures/space-station-floor-deck-v2-neutral-albedo.webp',
+  normalTextureUrl: '/themes/textures/space-station-floor-deck-v2-neutral-normal.png',
+  heightTextureUrl: '/themes/textures/space-station-floor-deck-v2-neutral-height.png',
+  roughnessTextureUrl: '/themes/textures/space-station-floor-deck-v2-neutral-roughness.png',
+  aoTextureUrl: '/themes/textures/space-station-floor-deck-v2-neutral-ao.png',
+  textureWorldSize: [4.2, 5],
+  normalScale: [0.24, 0.24],
+  bumpScale: 0.008,
+  aoMapIntensity: 0.22,
+}
+
+/**
+ * Transparent rift-energy lattice approved for the Space Station theme. The
+ * continuous shell and Rapier collider remain unchanged beneath this visual.
+ */
+export const SPACE_STATION_HOVER_GRID_FLOOR_MATERIAL: MaterialRecipe = {
+  kind: 'standard',
+  color: '#19cfff',
+  roughness: 0,
+  metalness: 0,
+  transparent: true,
+  opacity: 1,
+  depthWrite: false,
+  emissiveSurface: 'upward',
+  pattern: {
+    kind: 'holographic-hover-grid',
+    primary: '#19cfff',
+    secondary: '#e0faff',
+    worldSize: [0.28, 0.28],
+  },
+  hoverGridCoreWidth: 0.0045,
+  hoverGridAuraFalloff: 46,
+  hoverGridAuraStrength: 0.62,
+  hoverGridJunctionStrength: 0.34,
+}
+
+export const SPACE_STATION_WALL_CHASSIS_MATERIAL: MaterialRecipe = {
+  kind: 'physical',
+  color: '#ffffff',
+  roughness: 0.34,
+  metalness: 0.86,
+  envMapIntensity: 1.28,
+  clearcoat: 0.08,
+  clearcoatRoughness: 0.5,
+  textureUrl: '/themes/textures/space-station-wall-chassis-v1-albedo.webp',
+  normalTextureUrl: '/themes/textures/space-station-wall-chassis-v1-normal.png',
+  heightTextureUrl: '/themes/textures/space-station-wall-chassis-v1-height.png',
+  roughnessTextureUrl: '/themes/textures/space-station-wall-chassis-v1-roughness.png',
+  aoTextureUrl: '/themes/textures/space-station-wall-chassis-v1-ao.png',
+  textureWorldSize: [1.8, 1.8],
+  normalScale: [0.34, 0.34],
+  bumpScale: 0.012,
+  aoMapIntensity: 0.28,
+}
+
+export const SPACE_STATION_WALL_PANEL_MATERIAL: MaterialRecipe = {
+  kind: 'physical',
+  color: '#ffffff',
+  roughness: 0.46,
+  metalness: 0.18,
+  envMapIntensity: 1.08,
+  clearcoat: 0.08,
+  clearcoatRoughness: 0.62,
+  textureUrl: '/themes/textures/space-station-wall-panel-v1-albedo.webp',
+  normalTextureUrl: '/themes/textures/space-station-wall-panel-v1-normal.png',
+  heightTextureUrl: '/themes/textures/space-station-wall-panel-v1-height.png',
+  roughnessTextureUrl: '/themes/textures/space-station-wall-panel-v1-roughness.png',
+  aoTextureUrl: '/themes/textures/space-station-wall-panel-v1-ao.png',
+  textureWorldSize: [1.55, 1.28],
+  normalScale: [0.3, 0.3],
+  bumpScale: 0.01,
+  aoMapIntensity: 0.24,
+}
+
+export const SPACE_STATION_WALL_RIB_MATERIAL: MaterialRecipe = {
+  kind: 'physical',
+  color: '#ffffff',
+  roughness: 0.3,
+  metalness: 0.7,
+  envMapIntensity: 1.42,
+  clearcoat: 0.2,
+  clearcoatRoughness: 0.3,
+  textureUrl: '/themes/textures/space-station-wall-rib-v1-albedo.webp',
+  normalTextureUrl: '/themes/textures/space-station-wall-rib-v1-normal.png',
+  heightTextureUrl: '/themes/textures/space-station-wall-rib-v1-height.png',
+  roughnessTextureUrl: '/themes/textures/space-station-wall-rib-v1-roughness.png',
+  aoTextureUrl: '/themes/textures/space-station-wall-rib-v1-ao.png',
+  textureWorldSize: [0.42, 1.28],
+  normalScale: [0.52, 0.52],
+  bumpScale: 0.009,
+  aoMapIntensity: 0.2,
+}
+
+export const SPACE_STATION_WALL_TRIM_MATERIAL: MaterialRecipe = {
+  kind: 'physical',
+  color: '#303b46',
+  roughness: 0.36,
+  metalness: 0.76,
+  envMapIntensity: 1.16,
+}
+
+export const SPACE_STATION_WALL_LIGHT_MATERIAL: MaterialRecipe = {
+  kind: 'physical',
+  color: '#00a8d8',
+  roughness: 0.08,
+  metalness: 0,
+  envMapIntensity: 1.4,
+  emissive: '#00c8ff',
+  emissiveIntensity: 2.2,
+  clearcoat: 1,
+  clearcoatRoughness: 0.04,
+}
+
+/** Saturated emissive route line. Reuses the existing guide mesh and draw call. */
+export const SPACE_STATION_CENTER_GUIDE_MATERIAL: MaterialRecipe = {
+  kind: 'physical',
+  color: '#003dba',
+  roughness: 0.06,
+  metalness: 0,
+  envMapIntensity: 0.72,
+  emissive: '#0077ff',
+  emissiveIntensity: 1.45,
+  clearcoat: 1,
+  clearcoatRoughness: 0.03,
+}
+
+export function createSpaceStationCenterGuideGlowMaterial(source: THREE.Material): THREE.ShaderMaterial {
+  const sourceColor =
+    source instanceof THREE.MeshStandardMaterial ? source.emissive.clone() : new THREE.Color('#0077ff')
+  const material = new THREE.ShaderMaterial({
+    uniforms: {
+      uAuraColor: { value: sourceColor.clone().multiplyScalar(0.72) },
+      uCoreColor: { value: sourceColor.clone().lerp(new THREE.Color('#5eeaff'), 0.42) },
+    },
+    vertexShader: `
+      attribute float themeGuideGlow;
+      varying float vGuideGlow;
+      void main() {
+        vGuideGlow = themeGuideGlow;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `,
+    fragmentShader: `
+      uniform vec3 uAuraColor;
+      uniform vec3 uCoreColor;
+      varying float vGuideGlow;
+      void main() {
+        float aura = pow(clamp(vGuideGlow, 0.0, 1.0), 1.45);
+        float core = smoothstep(0.78, 0.98, vGuideGlow);
+        vec3 color = mix(uAuraColor, uCoreColor, core);
+        float intensity = mix(0.72, 2.35, core) * aura;
+        float alpha = mix(0.22, 0.96, core) * aura;
+        gl_FragColor = vec4(color * intensity, alpha);
+      }
+    `,
+    transparent: true,
+    depthWrite: false,
+    blending: THREE.AdditiveBlending,
+    side: THREE.FrontSide,
+    toneMapped: false,
+  })
+  material.name = 'space-station-routed-center-guide-glow-material'
+  return material
+}
+
+export function isSpaceStationArmoredWallAppearance(appearanceId: string | undefined): boolean {
+  return appearanceId === SPACE_STATION_ARMORED_WALL_ID
+}
+
+export function supportsSpaceStationHoverGridFloor(themeId: string, materialSlots: readonly string[]): boolean {
+  return themeId === 'intergalactic-space-station' && materialSlots.includes('lane.surface')
+}

package/src/three/static-track-batched-mesh.ts

@@ -0,0 +1,132 @@
+import * as THREE from 'three'
+
+/**
+ * Static course geometry often renders more than once for the same camera
+ * (transmission, then the main view). Reuse Three's exact draw list instead
+ * of repeating per-instance culling, sorting, and indirect-texture uploads.
+ * Moving cameras and editor mutations still use Three's normal preparation.
+ */
+export class StaticTrackBatchedMesh extends THREE.BatchedMesh {
+  declare customSort: THREE.BatchedMesh['customSort']
+  private renderListValid = false
+  private readonly cachedProjection = new THREE.Matrix4()
+  private readonly cachedView = new THREE.Matrix4()
+  private readonly cachedCameraWorld = new THREE.Matrix4()
+  private readonly cachedWorld = new THREE.Matrix4()
+  private cachedCoordinateSystem?: THREE.CoordinateSystem
+  private cachedReversedDepth = false
+  private cachedTransparent = false
+  private cachedWireframe = false
+  private cachedCulling = true
+  private cachedSorting = true
+
+  override onBeforeRender(
+    renderer: THREE.WebGLRenderer,
+    scene: THREE.Scene,
+    camera: THREE.Camera,
+    geometry: THREE.BufferGeometry,
+    material: THREE.Material,
+    group: THREE.Group,
+  ): void {
+    const wireframe = 'wireframe' in material && material.wireframe === true
+    // Array-camera subviews and arbitrary custom sort callbacks can depend on
+    // state beyond these matrices; leave their preparation to Three.
+    const cacheable = !(camera instanceof THREE.ArrayCamera) && this.customSort === null
+    if (
+      cacheable &&
+      this.renderListValid &&
+      this.cachedProjection.equals(camera.projectionMatrix) &&
+      this.cachedView.equals(camera.matrixWorldInverse) &&
+      this.cachedCameraWorld.equals(camera.matrixWorld) &&
+      this.cachedWorld.equals(this.matrixWorld) &&
+      this.cachedCoordinateSystem === camera.coordinateSystem &&
+      this.cachedReversedDepth === camera.reversedDepth &&
+      this.cachedTransparent === material.transparent &&
+      this.cachedWireframe === wireframe &&
+      this.cachedCulling === this.perObjectFrustumCulled &&
+      this.cachedSorting === this.sortObjects
+    )
+      return
+
+    super.onBeforeRender(renderer, scene, camera, geometry, material, group)
+    this.cachedProjection.copy(camera.projectionMatrix)
+    this.cachedView.copy(camera.matrixWorldInverse)
+    this.cachedCameraWorld.copy(camera.matrixWorld)
+    this.cachedWorld.copy(this.matrixWorld)
+    this.cachedCoordinateSystem = camera.coordinateSystem
+    this.cachedReversedDepth = camera.reversedDepth
+    this.cachedTransparent = material.transparent
+    this.cachedWireframe = wireframe
+    this.cachedCulling = this.perObjectFrustumCulled
+    this.cachedSorting = this.sortObjects
+    this.renderListValid = cacheable
+  }
+
+  override setMatrixAt(instanceId: number, matrix: THREE.Matrix4): this {
+    this.renderListValid = false
+    return super.setMatrixAt(instanceId, matrix)
+  }
+
+  override setVisibleAt(instanceId: number, visible: boolean): this {
+    this.renderListValid = false
+    return super.setVisibleAt(instanceId, visible)
+  }
+
+  override setGeometryIdAt(instanceId: number, geometryId: number): this {
+    this.renderListValid = false
+    return super.setGeometryIdAt(instanceId, geometryId)
+  }
+
+  override addInstance(geometryId: number): number {
+    this.renderListValid = false
+    return super.addInstance(geometryId)
+  }
+
+  override deleteInstance(instanceId: number): this {
+    this.renderListValid = false
+    return super.deleteInstance(instanceId)
+  }
+
+  override addGeometry(
+    geometry: THREE.BufferGeometry,
+    reservedVertexRange?: number,
+    reservedIndexRange?: number,
+  ): number {
+    this.renderListValid = false
+    return super.addGeometry(geometry, reservedVertexRange, reservedIndexRange)
+  }
+
+  override setGeometryAt(geometryId: number, geometry: THREE.BufferGeometry): number {
+    this.renderListValid = false
+    const result = super.setGeometryAt(geometryId, geometry)
+    // Resolve lazy geometry bounds outside onBeforeRender. Three shares its
+    // scratch vectors between bounds calculation and camera-distance sorting.
+    this.getBoundingSphereAt(geometryId, new THREE.Sphere())
+    return result
+  }
+
+  override deleteGeometry(geometryId: number): this {
+    this.renderListValid = false
+    return super.deleteGeometry(geometryId)
+  }
+
+  override optimize(): this {
+    this.renderListValid = false
+    return super.optimize()
+  }
+
+  override setGeometrySize(maxVertexCount: number, maxIndexCount: number): void {
+    this.renderListValid = false
+    super.setGeometrySize(maxVertexCount, maxIndexCount)
+  }
+
+  override setInstanceCount(maxInstanceCount: number): void {
+    this.renderListValid = false
+    super.setInstanceCount(maxInstanceCount)
+  }
+
+  override copy(source: THREE.BatchedMesh): this {
+    this.renderListValid = false
+    return super.copy(source)
+  }
+}

package/src/three/stone-track-shell-appearance.ts

@@ -0,0 +1,12 @@
+export const SHARED_STONE_TRACK_BLOCK_MATERIAL_ID = 'shared.stone-track-block'
+export const SHARED_STONE_TRACK_SHELL_THEME_IDS = ['low-poly-jungle', 'ancient-egypt', 'vampire-castle'] as const
+
+export function isSharedStoneTrackShellAppearance(id: string | undefined): boolean {
+  return (
+    id === 'jungle.temple-masonry' || id === 'ancient-egypt.temple-ashlar' || id === 'vampire-castle.dark-stone-wall'
+  )
+}
+
+export function isSharedStoneTrackShellDefaultTheme(themeId: string | undefined): boolean {
+  return SHARED_STONE_TRACK_SHELL_THEME_IDS.some(candidate => candidate === themeId)
+}

package/src/three/theme-ambience-controller.ts

@@ -0,0 +1,226 @@
+import {
+  isThemeAudioMuted,
+  shouldPageAudioRemainActive,
+  subscribeToThemeAudioPreference,
+} from './theme-audio-preference'
+import type { ThemeAmbienceStyle, TrackThemeDefinition } from './track-theme'
+
+interface AmbienceVoice {
+  gain: GainNode
+  stop: () => void
+}
+
+export class ThemeAmbienceController {
+  private context?: AudioContext
+  private master?: GainNode
+  private active?: AmbienceVoice
+  private pendingTheme?: TrackThemeDefinition
+  private disposed = false
+  private muted = typeof window === 'undefined' ? true : isThemeAudioMuted()
+  private readonly mobileQuery = window.matchMedia('(max-width: 767px)')
+  private readonly unsubscribePreference: () => void
+
+  constructor() {
+    this.unsubscribePreference = subscribeToThemeAudioPreference(muted => {
+      this.muted = muted
+      this.updateMaster()
+    })
+    window.addEventListener('pointerdown', this.unlock, { passive: true })
+    window.addEventListener('keydown', this.unlock)
+    window.addEventListener('focus', this.handlePageFocusChange)
+    window.addEventListener('blur', this.handlePageFocusChange)
+    document.addEventListener('visibilitychange', this.handleVisibilityChange)
+    this.mobileQuery.addEventListener('change', this.handlePageFocusChange)
+  }
+
+  applyTheme(theme: TrackThemeDefinition): void {
+    this.pendingTheme = theme
+    if (!this.context || this.context.state !== 'running') return
+
+    const next = createAmbienceVoice(this.context, theme.ambience.style)
+    next.gain.gain.setValueAtTime(0, this.context.currentTime)
+    next.gain.gain.linearRampToValueAtTime(theme.ambience.volume, this.context.currentTime + 0.45)
+    next.gain.connect(this.master as GainNode)
+
+    const previous = this.active
+    this.active = next
+    if (previous) {
+      previous.gain.gain.cancelScheduledValues(this.context.currentTime)
+      previous.gain.gain.setValueAtTime(previous.gain.gain.value, this.context.currentTime)
+      previous.gain.gain.linearRampToValueAtTime(0, this.context.currentTime + 0.45)
+      window.setTimeout(previous.stop, 520)
+    }
+  }
+
+  dispose(): void {
+    if (this.disposed) return
+    this.disposed = true
+    this.unsubscribePreference()
+    window.removeEventListener('pointerdown', this.unlock)
+    window.removeEventListener('keydown', this.unlock)
+    window.removeEventListener('focus', this.handlePageFocusChange)
+    window.removeEventListener('blur', this.handlePageFocusChange)
+    document.removeEventListener('visibilitychange', this.handleVisibilityChange)
+    this.mobileQuery.removeEventListener('change', this.handlePageFocusChange)
+    this.active?.stop()
+    this.active = undefined
+    void this.context?.close()
+    this.context = undefined
+  }
+
+  private readonly unlock = (): void => {
+    if (this.disposed) return
+    this.context ??= new AudioContext()
+    this.master ??= this.context.createGain()
+    this.master.connect(this.context.destination)
+    this.updateMaster()
+    void this.context.resume().then(() => {
+      if (this.pendingTheme && !this.active) this.applyTheme(this.pendingTheme)
+    })
+  }
+
+  private readonly handleVisibilityChange = (): void => {
+    this.updateContextActivity()
+  }
+
+  private readonly handlePageFocusChange = (): void => {
+    this.updateContextActivity()
+  }
+
+  private updateContextActivity(): void {
+    if (!this.context) return
+    const active = shouldPageAudioRemainActive({
+      focused: document.hasFocus(),
+      mobile: this.mobileQuery.matches,
+      visible: !document.hidden,
+    })
+    if (!active) {
+      void this.context.suspend()
+    } else {
+      void this.context.resume()
+    }
+  }
+
+  private updateMaster(): void {
+    if (!this.master || !this.context) return
+    this.master.gain.cancelScheduledValues(this.context.currentTime)
+    this.master.gain.linearRampToValueAtTime(this.muted ? 0 : 1, this.context.currentTime + 0.08)
+  }
+}
+
+function createAmbienceVoice(context: AudioContext, style: ThemeAmbienceStyle): AmbienceVoice {
+  const output = context.createGain()
+  const nodes: AudioScheduledSourceNode[] = []
+  const cleanup: AudioNode[] = [output]
+  const settings = ambienceSettings(style)
+
+  for (const [frequency, level] of settings.tones) {
+    const oscillator = context.createOscillator()
+    const gain = context.createGain()
+    oscillator.type = settings.wave
+    oscillator.frequency.value = frequency
+    gain.gain.value = level
+    oscillator.connect(gain)
+    gain.connect(output)
+    oscillator.start()
+    nodes.push(oscillator)
+    cleanup.push(oscillator, gain)
+  }
+
+  if (settings.noise > 0) {
+    const buffer = context.createBuffer(1, context.sampleRate * 2, context.sampleRate)
+    const channel = buffer.getChannelData(0)
+    for (let index = 0; index < channel.length; index += 1) {
+      channel[index] = Math.random() * 2 - 1
+    }
+    const source = context.createBufferSource()
+    const filter = context.createBiquadFilter()
+    const gain = context.createGain()
+    source.buffer = buffer
+    source.loop = true
+    filter.type = settings.filterType
+    filter.frequency.value = settings.filterFrequency
+    filter.Q.value = 0.7
+    gain.gain.value = settings.noise
+    source.connect(filter)
+    filter.connect(gain)
+    gain.connect(output)
+    source.start()
+    nodes.push(source)
+    cleanup.push(source, filter, gain)
+  }
+
+  return {
+    gain: output,
+    stop: () => {
+      nodes.forEach(node => {
+        try {
+          node.stop()
+        } catch {
+          // A source may already have stopped during scene teardown.
+        }
+      })
+      cleanup.forEach(node => node.disconnect())
+    },
+  }
+}
+
+function ambienceSettings(style: ThemeAmbienceStyle): {
+  tones: readonly (readonly [number, number])[]
+  wave: OscillatorType
+  noise: number
+  filterType: BiquadFilterType
+  filterFrequency: number
+} {
+  switch (style) {
+    case 'desert':
+      return { tones: [[92, 0.08]], wave: 'sine', noise: 0.52, filterType: 'lowpass', filterFrequency: 480 }
+    case 'space':
+      return {
+        tones: [
+          [46, 0.22],
+          [92, 0.08],
+          [184, 0.025],
+        ],
+        wave: 'sine',
+        noise: 0.16,
+        filterType: 'bandpass',
+        filterFrequency: 720,
+      }
+    case 'jungle':
+      return {
+        tones: [
+          [118, 0.035],
+          [236, 0.012],
+        ],
+        wave: 'sine',
+        noise: 0.42,
+        filterType: 'bandpass',
+        filterFrequency: 1_650,
+      }
+    case 'meadow':
+      return {
+        tones: [
+          [146.8, 0.022],
+          [220, 0.009],
+        ],
+        wave: 'sine',
+        noise: 0.3,
+        filterType: 'bandpass',
+        filterFrequency: 1_280,
+      }
+    case 'sakura-lake':
+      return {
+        tones: [
+          [146.8, 0.018],
+          [220, 0.008],
+        ],
+        wave: 'sine',
+        noise: 0.38,
+        filterType: 'bandpass',
+        filterFrequency: 1_420,
+      }
+    case 'studio':
+      return { tones: [[60, 0.035]], wave: 'sine', noise: 0.07, filterType: 'lowpass', filterFrequency: 400 }
+  }
+}