@marble.fun/track-catalog 3.0.0

package/src/three/theme-asset-cache.ts

@@ -0,0 +1,120 @@
+import * as THREE from 'three'
+
+import { usesMobileRenderingBudget } from './mobile-rendering-budget'
+
+import { loadThemeKtx2Texture } from './theme-material-assets'
+import type { TrackThemeDefinition } from './track-theme'
+
+export function configureThemePanoramaTexture(texture: THREE.Texture, themeId: string): THREE.Texture {
+  texture.name = `theme-panorama:${themeId}`
+  texture.colorSpace = THREE.SRGBColorSpace
+  texture.mapping = THREE.EquirectangularReflectionMapping
+  texture.wrapS = THREE.RepeatWrapping
+  texture.wrapT = THREE.ClampToEdgeWrapping
+  texture.magFilter = THREE.LinearFilter
+  texture.minFilter = texture.mipmaps.length > 1 ? THREE.LinearMipmapLinearFilter : THREE.LinearFilter
+  texture.generateMipmaps = !(texture instanceof THREE.CompressedTexture)
+  texture.needsUpdate = true
+  return texture
+}
+
+export function resolveThemePanoramaUrl(url: string, mobile: boolean): string {
+  if (!mobile) return url
+  return url.replace(/\.ktx2(?=($|\?))/, '-mobile.ktx2')
+}
+
+export interface ThemePanoramaLease {
+  readonly texture: THREE.Texture | undefined
+  release(): void
+}
+
+interface PanoramaEntry {
+  lastUsed: number
+  leases: number
+  promise: Promise<THREE.Texture>
+  texture?: THREE.Texture
+}
+
+class ThemeAssetCache {
+  private readonly panoramas = new Map<string, PanoramaEntry>()
+  private readonly useMobilePanoramas = usesMobileRenderingBudget()
+
+  async acquirePanorama(theme: TrackThemeDefinition): Promise<ThemePanoramaLease> {
+    if (!theme.panoramaUrl) return { texture: undefined, release: () => undefined }
+
+    let entry = this.panoramas.get(theme.id)
+    if (!entry) {
+      entry = {
+        lastUsed: performance.now(),
+        leases: 0,
+        promise: Promise.resolve(undefined as never),
+      }
+      const runtimeUrl = resolveThemePanoramaUrl(theme.panoramaUrl, this.useMobilePanoramas)
+      entry.promise = (
+        runtimeUrl.endsWith('.ktx2')
+          ? loadThemeKtx2Texture(runtimeUrl)
+          : new THREE.TextureLoader().loadAsync(runtimeUrl)
+      )
+        .then(texture => {
+          entry!.texture = configureThemePanoramaTexture(texture, theme.id)
+          entry!.lastUsed = performance.now()
+          this.evict()
+          return entry!.texture
+        })
+        .catch(error => {
+          this.panoramas.delete(theme.id)
+          throw error
+        })
+      this.panoramas.set(theme.id, entry)
+    }
+
+    entry.leases += 1
+    entry.lastUsed = performance.now()
+    let released = false
+
+    try {
+      const texture = await entry.promise
+      return {
+        texture,
+        release: () => {
+          if (released) return
+          released = true
+          entry!.leases = Math.max(0, entry!.leases - 1)
+          entry!.lastUsed = performance.now()
+          this.evict()
+        },
+      }
+    } catch (error) {
+      entry.leases = Math.max(0, entry.leases - 1)
+      throw error
+    }
+  }
+
+  private evict(): void {
+    const mobile = usesMobileRenderingBudget()
+    const allowance = (mobile ? 32 : 96) * 1024 * 1024
+    const pinnedBytes = [...this.panoramas.values()]
+      .filter(entry => entry.leases > 0)
+      .reduce((total, entry) => total + panoramaBytes(entry.texture), 0)
+    const previous = [...this.panoramas.entries()]
+      .filter(([, entry]) => entry.leases === 0 && entry.texture)
+      .sort((left, right) => right[1].lastUsed - left[1].lastUsed)
+    let retainedPrevious = false
+    for (const [themeId, entry] of previous) {
+      const fits = !retainedPrevious && pinnedBytes + panoramaBytes(entry.texture) <= allowance
+      if (fits) {
+        retainedPrevious = true
+        continue
+      }
+      entry.texture?.dispose()
+      this.panoramas.delete(themeId)
+    }
+  }
+}
+
+function panoramaBytes(texture: THREE.Texture | undefined): number {
+  const image = texture?.image as { width?: number; height?: number } | undefined
+  return Math.max(1, image?.width ?? 1) * Math.max(1, image?.height ?? 1) * 4
+}
+
+export const themeAssetCache = new ThemeAssetCache()

package/src/three/theme-audio-preference.ts

@@ -0,0 +1,43 @@
+export const THEME_AUDIO_MUTED_STORAGE_KEY = 'marble.fun.theme-audio-muted'
+const EVENT_NAME = 'marble-theme-audio-preference'
+
+export function shouldPageAudioRemainActive(options: {
+  focused: boolean
+  mobile: boolean
+  visible: boolean
+}): boolean {
+  return !options.mobile || (options.visible && options.focused)
+}
+
+export function isThemeAudioMuted(): boolean {
+  try {
+    return JSON.parse(window.localStorage.getItem(THEME_AUDIO_MUTED_STORAGE_KEY) ?? 'false') === true
+  } catch {
+    return false
+  }
+}
+
+export function notifyThemeAudioPreference(muted: boolean): void {
+  window.dispatchEvent(new CustomEvent<boolean>(EVENT_NAME, { detail: muted }))
+}
+
+export function subscribeToThemeAudioPreference(listener: (muted: boolean) => void): () => void {
+  const handlePreferenceChange = (event: Event): void => {
+    listener((event as CustomEvent<boolean>).detail)
+  }
+  const handleStorageChange = (event: StorageEvent): void => {
+    if (event.key !== THEME_AUDIO_MUTED_STORAGE_KEY) return
+    try {
+      listener(JSON.parse(event.newValue ?? 'false') === true)
+    } catch {
+      listener(false)
+    }
+  }
+
+  window.addEventListener(EVENT_NAME, handlePreferenceChange)
+  window.addEventListener('storage', handleStorageChange)
+  return () => {
+    window.removeEventListener(EVENT_NAME, handlePreferenceChange)
+    window.removeEventListener('storage', handleStorageChange)
+  }
+}