create-definedmotion 0.2.0 → 0.3.1

package/template/src/renderer/src/lib/audio/manager.ts

@@ -0,0 +1,185 @@
+// audio/loader.ts
+export interface AudioInScene {
+  audioPath: string
+  volume: number
+  atFrame: number
+}
+
+let loadedAudio = new Map<string, AudioBuffer>()
+let registeredAudios = new Set<string>()
+
+// A single shared AudioContext
+const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
+
+// ---- Internal tracking of playing sounds ----
+type PlayingId = string
+
+interface PlayingSound {
+  id: PlayingId
+  path: string
+  source: AudioBufferSourceNode | null
+  gain: GainNode
+  volume: number
+  // timeline info
+  startTick: number            // tick in your scene when this sound originally “started”
+  startedCtxTime: number       // audioContext.currentTime when we started this source
+  offsetAtStartSec: number     // offset in the buffer where this source began
+  durationSec: number
+}
+
+let active: PlayingSound[] = []
+const newId = () => Math.random().toString(36).slice(2)
+
+// ----------------- Public API -----------------
+
+export const registerAudio = (audioPath: string) => {
+  registeredAudios.add(audioPath)
+}
+
+export const loadAllAudio = async (): Promise<void> => {
+  const tasks: Promise<void>[] = []
+  for (const path of registeredAudios) {
+    if (!loadedAudio.has(path)) {
+      const p = fetch(path)
+        .then(r => {
+          if (!r.ok) throw new Error(`Failed to load ${path}: ${r.status} ${r.statusText}`)
+          return r.arrayBuffer()
+        })
+        .then(buf => audioContext.decodeAudioData(buf))
+        .then(decoded => { loadedAudio.set(path, decoded) })
+        .catch(err => console.error('Audio load error', path, err))
+      tasks.push(p)
+    }
+  }
+  await Promise.all(tasks)
+}
+
+export const cleanupAudioData = async (): Promise<void> => {
+  stopAll()
+  loadedAudio.clear()
+  registeredAudios.clear()
+}
+
+// Fire immediately at offset 0 (used when the “tick” with a play event is reached)
+export const playAudio = (audioPath: string, volume: number = 1): PlayingId | null => {
+  return startBufferAtOffset(audioPath, 0, volume, /*startTick*/ 0)
+}
+
+// Called when the timeline jumps to a specific tick.
+// Rebuilds audio as if we had been playing since their respective start ticks.
+export const seekToTick = (
+  tick: number,
+  planned: Map<number, AudioInScene[]>,
+  timelineFPS: number
+) => {
+  stopAll()
+
+  for (const [startTick, list] of planned.entries()) {
+    if (startTick > tick) continue
+    for (const item of list) {
+      const buf = loadedAudio.get(item.audioPath)
+      if (!buf) continue
+      const elapsedTicks = tick - startTick
+      const offsetSec = Math.max(0, elapsedTicks / timelineFPS)
+      if (offsetSec < buf.duration) {
+        startBufferAtOffset(item.audioPath, offsetSec, item.volume, startTick)
+      }
+    }
+  }
+}
+
+// Pause = capture offsets, stop sources; Resume = recreate new sources at captured offsets
+export const pauseAll = () => {
+  // capture and stop
+  for (const p of active) {
+    if (!p.source) continue
+    const playedSec = audioContext.currentTime - p.startedCtxTime
+    const accumulated = p.offsetAtStartSec + playedSec
+    // replace with a paused placeholder (no source)
+    try { p.source.stop(0) } catch {}
+    p.source.disconnect()
+    p.source = null
+    p.offsetAtStartSec = accumulated
+  }
+}
+
+export const resumeAll = () => {
+  for (const p of active) {
+    if (p.source) continue
+    // restart from stored offset
+    rearmSource(p, p.offsetAtStartSec)
+  }
+}
+
+export const stopAll = () => {
+  for (const p of active) {
+    try { p.source?.stop(0) } catch {}
+    try { p.source?.disconnect() } catch {}
+    try { p.gain.disconnect() } catch {}
+  }
+  active = []
+}
+
+// -------- helpers --------
+
+function startBufferAtOffset(
+  audioPath: string,
+  offsetSec: number,
+  volume: number,
+  startTick: number
+): PlayingId | null {
+  const buf = loadedAudio.get(audioPath)
+  if (!buf) {
+    console.warn(`Audio not loaded: ${audioPath}`)
+    return null
+  }
+  const id = newId()
+  const gain = audioContext.createGain()
+  gain.gain.value = volume
+  gain.connect(audioContext.destination)
+
+  const node = audioContext.createBufferSource()
+  node.buffer = buf
+  node.connect(gain)
+
+  const startedCtxTime = audioContext.currentTime
+  node.start(0, offsetSec)
+
+  const playing: PlayingSound = {
+    id,
+    path: audioPath,
+    source: node,
+    gain,
+    volume,
+    startTick,
+    startedCtxTime,
+    offsetAtStartSec: offsetSec,
+    durationSec: buf.duration
+  }
+
+  // remove from active when ends
+  node.onended = () => {
+    active = active.filter(a => a.id !== id)
+    try { node.disconnect() } catch {}
+    try { gain.disconnect() } catch {}
+  }
+
+  active.push(playing)
+  return id
+}
+
+function rearmSource(p: PlayingSound, offsetSec: number) {
+  const buf = loadedAudio.get(p.path)
+  if (!buf) return
+  const node = audioContext.createBufferSource()
+  node.buffer = buf
+  node.connect(p.gain)
+  p.startedCtxTime = audioContext.currentTime
+  p.offsetAtStartSec = offsetSec
+  p.source = node
+  node.onended = () => {
+    active = active.filter(a => a.id !== p.id)
+    try { node.disconnect() } catch {}
+  }
+  node.start(0, offsetSec)
+}

package/template/src/renderer/src/lib/rendering/hdri.ts

@@ -0,0 +1,273 @@
+// src/renderer/lib/rendering/hdri.ts
+
+import * as THREE from 'three';
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
+import { AnimatedScene } from '../scene/sceneClass';
+
+import _photoStudio1 from '$assets/hdri/photo-studio1.hdr?url';
+import _photoStudio2 from '$assets/hdri/photo-studio2.hdr?url';
+import _photoStudio3 from '$assets/hdri/photo-studio3.hdr?url';
+import _outdoor1 from '$assets/hdri/outdoor1.hdr?url';
+import _indoor1 from '$assets/hdri/indoor1.hdr?url';
+import _metro1 from '$assets/hdri/metro1.hdr?url';
+
+import vert_blur_hdri from '../shaders/hdri_blur/vert.glsl?raw';
+import frag_blur_hdri from '../shaders/hdri_blur/frag.glsl?raw';
+
+// ---------------------------------------------------------------------------
+// Public types & enums
+// ---------------------------------------------------------------------------
+
+export enum HDRIs {
+  photoStudio1 = _photoStudio1 as any,
+  photoStudio2 = _photoStudio2 as any,
+  photoStudio3 = _photoStudio3 as any,
+  outdoor1 = _outdoor1 as any,
+  indoor1 = _indoor1 as any,
+  metro1 = _metro1 as any
+}
+
+/**
+ * Lightweight description of a loaded HDRI.
+ * The actual heavy GPU setup happens when you call addHDRI().
+ */
+export interface HDRIData {
+  texture: THREE.DataTexture;
+  blurAmount: number;
+}
+
+// ---------------------------------------------------------------------------
+// Internal caches
+// ---------------------------------------------------------------------------
+
+// Reused loader
+const rgbeLoader = new RGBELoader().setDataType(THREE.FloatType);
+
+// path -> DataTexture promise (so we only load + decode once per file)
+const sourceCache = new Map<string, Promise<THREE.DataTexture>>();
+
+// (rendererId|textureUUID) -> envMap (PMREM output)
+const envMapCache = new Map<string, THREE.Texture>();
+
+// (rendererId|textureUUID|blur|opacity) -> blurred background texture
+const blurCache = new Map<string, THREE.Texture>();
+
+let rendererIdCounter = 1;
+function getRendererId(renderer: THREE.WebGLRenderer): number {
+  const r = renderer as any;
+  if (!r.__dmHdriId) {
+    r.__dmHdriId = rendererIdCounter++;
+  }
+  return r.__dmHdriId;
+}
+
+function envKey(renderer: THREE.WebGLRenderer, tex: THREE.Texture): string {
+  return `${getRendererId(renderer)}|${tex.uuid}`;
+}
+
+function blurKey(
+  renderer: THREE.WebGLRenderer,
+  tex: THREE.Texture,
+  blurAmount: number,
+  opacity: number
+): string {
+  return `${getRendererId(renderer)}|${tex.uuid}|${blurAmount.toFixed(3)}|${opacity.toFixed(3)}`;
+}
+
+// ---------------------------------------------------------------------------
+// 1) Load HDRI file at module scope (no renderer needed)
+// ---------------------------------------------------------------------------
+
+/**
+ * Load and decode the HDRI once (per path). Intended for top-level usage:
+ *
+ *   const hdriData = await loadHDRIData(HDRIs.outdoor1, 2, 1);
+ *
+ * Then you can reuse hdriData across many AnimatedScene instances.
+ */
+export const loadHDRIData = async (
+  path: HDRIs | string,
+  blurAmount: number,
+): Promise<HDRIData> => {
+  const key = String(path);
+
+  let texturePromise = sourceCache.get(key);
+  if (!texturePromise) {
+    texturePromise = new Promise<THREE.DataTexture>((resolve, reject) => {
+      rgbeLoader.load(
+        key as any,
+        (texture) => {
+          // Equirectangular HDR setup
+          texture.mapping = THREE.EquirectangularReflectionMapping;
+          texture.magFilter = THREE.LinearFilter;
+          texture.minFilter = THREE.LinearFilter;
+          texture.generateMipmaps = false;
+          resolve(texture);
+        },
+        undefined,
+        (error) => {
+          console.error('Error loading HDRI:', error);
+          reject(error);
+        }
+      );
+    });
+    sourceCache.set(key, texturePromise);
+  }
+
+  const texture = await texturePromise;
+
+  return {
+    texture,
+    blurAmount,
+  };
+};
+
+// ---------------------------------------------------------------------------
+// 2) One-off blur pass: render full-screen quad into a render target
+// ---------------------------------------------------------------------------
+
+function blurHDRITexture(
+  renderer: THREE.WebGLRenderer,
+  source: THREE.DataTexture,
+  blurAmount: number,
+  opacity: number
+): THREE.Texture {
+  if (blurAmount <= 0.0001) {
+    // No blur required – reuse the original texture directly.
+    return source;
+  }
+
+  const width = source.image.width;
+  const height = source.image.height;
+
+  const target = new THREE.WebGLRenderTarget(width, height, {
+    type: THREE.FloatType,
+    depthBuffer: false,
+    stencilBuffer: false,
+    magFilter: THREE.LinearFilter,
+    minFilter: THREE.LinearFilter
+  });
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+
+  const material = new THREE.ShaderMaterial({
+    uniforms: {
+      uTexture: { value: source },
+      uBlurAmount: { value: blurAmount },
+      uTextureSize: { value: new THREE.Vector2(width, height) },
+      sigma: { value: 3.0 },
+      opacity: { value: opacity },
+      uSaturation: { value: 1.0 } // kept for future color-tweak usage
+    },
+    vertexShader: vert_blur_hdri,
+    fragmentShader: frag_blur_hdri,
+    depthTest: false,
+    depthWrite: false
+  });
+
+  const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
+  scene.add(quad);
+
+  const prevTarget = renderer.getRenderTarget();
+
+  renderer.setRenderTarget(target);
+  renderer.render(scene, camera);
+  renderer.setRenderTarget(prevTarget);
+
+  quad.geometry.dispose();
+  material.dispose();
+
+  // The render target holds the baked blur texture;
+  // we keep the target alive as long as the texture is in use.
+  return target.texture;
+}
+
+// ---------------------------------------------------------------------------
+// 3) Cached envMap + blurred background texture getters
+// ---------------------------------------------------------------------------
+
+function getEnvMap(renderer: THREE.WebGLRenderer, tex: THREE.DataTexture): THREE.Texture {
+  const key = envKey(renderer, tex);
+  const cached = envMapCache.get(key);
+  if (cached) return cached;
+
+  const pmremGenerator = new THREE.PMREMGenerator(renderer);
+  pmremGenerator.compileEquirectangularShader();
+  const envMap = pmremGenerator.fromEquirectangular(tex).texture;
+  pmremGenerator.dispose();
+
+  envMapCache.set(key, envMap);
+  return envMap;
+}
+
+function getBlurredBackgroundTexture(
+  renderer: THREE.WebGLRenderer,
+  hdriData: HDRIData,
+  opacity: number
+): THREE.Texture {
+  const { texture, blurAmount } = hdriData;
+  const key = blurKey(renderer, texture, blurAmount, opacity);
+  const cached = blurCache.get(key);
+  if (cached) return cached;
+
+  const blurred = blurHDRITexture(renderer, texture, blurAmount, opacity);
+  blurCache.set(key, blurred);
+  return blurred;
+}
+
+// ---------------------------------------------------------------------------
+// 4) Public: attach HDRI to an AnimatedScene
+// ---------------------------------------------------------------------------
+
+/**
+ * Apply a previously loaded HDRI to the scene:
+ * - Sets scene.environment using a cached PMREM envMap.
+ * - Creates a big background sphere using a baked, blurred texture.
+ *
+ * The heavy work (file IO, decode, blur) is cached and reused.
+ */
+export async function addHDRI(
+  scene: AnimatedScene,
+  hdriData: HDRIData,
+  lightingIntensity = 1.0,
+  opacity: number = 1.0,
+): Promise<THREE.Mesh> {
+  const { renderer } = scene;
+
+  // Cached per renderer + texture:
+  const envMap = getEnvMap(renderer, hdriData.texture);
+
+  // Cached per renderer + texture + blurAmount + opacity:
+  const backgroundTexture = getBlurredBackgroundTexture(renderer, hdriData, opacity);
+
+  // Background sphere
+  const geometry = new THREE.SphereGeometry(scene.farLimitRender / 2, 40, 40);
+
+  const material = new THREE.MeshBasicMaterial({
+    map: backgroundTexture,
+    side: THREE.BackSide,
+    transparent: opacity < 1,
+    opacity: opacity
+  });
+
+  const backgroundSphere = new THREE.Mesh(geometry, material);
+  backgroundSphere.renderOrder = -1;
+  scene.scene.add(backgroundSphere);
+
+  // Environment for PBR materials etc.
+  scene.scene.environment = envMap;
+  scene.scene.environmentIntensity = lightingIntensity;
+
+  return backgroundSphere;
+}
+
+// ---------------------------------------------------------------------------
+// (Optional) cache clearing helpers if you ever need them
+// ---------------------------------------------------------------------------
+
+export function clearHDRICaches(): void {
+  sourceCache.clear();
+  envMapCache.clear();
+  blurCache.clear();
+}

package/template/src/renderer/src/lib/rendering/lighting3d.ts

@@ -230,111 +230,6 @@ export function addSceneLighting(
   return lights
 }
 
-/**
- * Creates a scene with standard grid, axes, and lighting
- *
- * @param scene - The Three.js scene to set up
- * @param lightingOptions - Optional lighting configuration
- * @returns The created lights collection
- */
-export function setupStandardScene(
-  scene: THREE.Scene,
-  lightingOptions: LightingOptions = {}
-): LightCollection {
-  // Add grid
-  const gridHelper = new THREE.GridHelper(10, 10)
-  scene.add(gridHelper)
-
-  // Add axes
-  const axesHelper = new THREE.AxesHelper(5)
-  scene.add(axesHelper)
-
-  // Add lights and return them
-  return addSceneLighting(scene, lightingOptions)
-}
-
-export interface HDRIData {
-  texture: THREE.DataTexture
-  material: THREE.Material
-}
-
-export const loadHDRIData = async (
-  path: HDRIs | string,
-  blurAmount: number,
-  opacity: number = 1
-): Promise<HDRIData> => {
-  const rgbeLoader: RGBELoader = new RGBELoader()
-
-  return new Promise((resolve, reject) => {
-    rgbeLoader.setDataType(THREE.FloatType).load(
-      path as any,
-      (texture: THREE.DataTexture): void => {
-        const blurredMaterial = new THREE.ShaderMaterial({
-          uniforms: {
-            uTexture: { value: texture },
-            uBlurAmount: { value: blurAmount }, // Increase for more blur
-            uTextureSize: {
-              value: new THREE.Vector2(texture.image.width, texture.image.height)
-            },
-            sigma: { value: 3.0 }, // Add this uniform
-            opacity: { value: opacity }
-          },
-          vertexShader: vert_blur_hdri,
-          fragmentShader: frag_blur_hdri,
-          side: THREE.BackSide,
-          transparent: true
-        })
-
-        resolve({
-          texture,
-          material: blurredMaterial
-        })
-      },
-      (_) => {},
-      // Optional error callback
-      (error): void => {
-        console.error('Error loading HDRI:', error)
-        reject(error)
-      }
-    )
-  })
-}
-
-export enum HDRIs {
-  photoStudio1 = _photoStudio1 as any,
-  photoStudio2 = _photoStudio2 as any,
-  photoStudio3 = _photoStudio3 as any,
-  outdoor1 = _outdoor1 as any,
-  indoor1 = _indoor1 as any,
-  metro1 = _metro1 as any
-}
-
-export async function addHDRI(scene: AnimatedScene, hdriData: HDRIData, lightingIntensity = 1.0) {
-  // Create PMREM Generator for converting equirectangular HDRI to cubemap
-  const pmremGenerator: THREE.PMREMGenerator = new THREE.PMREMGenerator(scene.renderer)
-  pmremGenerator.compileEquirectangularShader()
-
-  // Process the HDRI texture
-  const envMap: THREE.Texture = pmremGenerator.fromEquirectangular(hdriData.texture).texture
-
-  // Create background sphere
-  const geometry = new THREE.SphereGeometry(scene.farLimitRender / 2, 40, 40)
-
-  const backgroundSphere = new THREE.Mesh(geometry, hdriData.material)
-  backgroundSphere.renderOrder = -1 // Render before other objects
-
-  // Attach to camera
-  scene.scene.add(backgroundSphere)
-
-  // Apply to scene environment (for reflections)
-  scene.scene.environment = envMap
-
-  scene.scene.environmentIntensity = lightingIntensity
-
-  // Clean up resources
-  // texture.dispose()
-  pmremGenerator.dispose()
-}
 
 export function addBackgroundGradient({
   scene,

package/template/src/renderer/src/lib/rendering/setup.ts

@@ -1,7 +1,13 @@
 import * as THREE from 'three'
-import type { SceneComponents } from './protocols'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 
+export interface SceneComponents {
+  camera: THREE.PerspectiveCamera | THREE.OrthographicCamera
+  renderer: THREE.WebGLRenderer
+  scene: THREE.Scene
+  controls: OrbitControls
+}
+
 export const createScene = (
   container: HTMLElement,
   pixelsWidth: number,

package/template/src/renderer/src/lib/rendering/svg/latexSVGQueries.ts

@@ -0,0 +1,44 @@
+import * as THREE from 'three';
+import { CONTENT_NAME } from './svgRendering';
+
+
+export interface ClassQueryResult {
+  className: string;      // e.g. "variable"
+  meshes: THREE.Mesh[];   // all meshes that belong to this class
+  box: THREE.Box3;        // combined bounding box (in world space)
+  center: THREE.Vector3;  // center of that box (world space)
+}
+
+export function queryLaTeXClass(
+  root: THREE.Object3D,
+  className: string
+): ClassQueryResult | null {
+  // Try to use the inner content group if it exists
+  const content =
+    (root.getObjectByName(CONTENT_NAME) as THREE.Group | null) ??
+    (root as THREE.Group);
+
+  const meshes: THREE.Mesh[] = [];
+
+  // Make sure transforms are current
+  root.updateMatrixWorld(true);
+
+  content.traverse(obj => {
+    const mesh = obj as THREE.Mesh;
+    // @ts-ignore: runtime check
+    if (!mesh.isMesh) return;
+    const classes: string[] | undefined = mesh.userData.dmClasses;
+    if (!classes) return;
+    if (classes.includes(className)) {
+      meshes.push(mesh);
+    }
+  });
+
+  if (!meshes.length) return null;
+
+  const box = new THREE.Box3();
+  for (const m of meshes) box.expandByObject(m);
+  const center = box.getCenter(new THREE.Vector3());
+
+  return { className, meshes, box, center };
+}