create-definedmotion 0.1.4 → 0.3.0

package/template/src/renderer/src/lib/scene/sceneClass.ts

@@ -5,16 +5,37 @@ import {
   type InternalAnimation,
   type UserAnimation
 } from '../animation/protocols'
-import { generateID, logCameraState } from '../general/helpers'
+import { generateID } from '../general/helpers'
 import { sleep } from '../rendering/helpers'
 import { createScene } from '../rendering/setup'
 import * as THREE from 'three'
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
 import { easeConstant } from '../animation/interpolations'
-import { animationFPSThrottle, renderSkip } from '../../../../entry'
+import { animationFPSDivider, renderSkip } from '../../../../entry'
 import { addDestroyFunction } from '../general/onDestory'
-import { ticksToMillis } from '../animation/helpers'
-import { AudioInScene, loadAllAudio, playAudio, registerAudio } from '../audio/loader'
+import {
+  AudioInScene,
+  loadAllAudio,
+  playAudio,
+  registerAudio,
+  seekToTick as audioSeekToTick,
+  pauseAll as audioPauseAll,
+  resumeAll as audioResumeAll,
+  stopAll as audioStopAll
+} from '../audio/manager'
+
+export const screenFPS = await (window.api as any).getDisplayHz();   //Your screen fps
+
+const timelineFPS = screenFPS / animationFPSDivider;
+
+// Convert ticks (frames) to milliseconds
+export const ticksToMillis = (ticks: number) => (ticks / timelineFPS) * 1000
+
+// Convert milliseconds to the closest whole number of ticks
+export const millisToTicks = (ms: number) => Math.ceil((ms / 1000) * timelineFPS)
+
+export const renderOutputFps = () => timelineFPS / renderSkip
+
 
 export enum SpaceSetting {
   ThreeDim,
@@ -23,7 +44,19 @@ export enum SpaceSetting {
 
 export enum HotReloadSetting {
   TraceFromStart,
-  BeginFromCurrent
+  BeginFromCurrent,
+  BeginFreshOnSave
+}
+
+export const hotreloadNameLookup = (mode: HotReloadSetting) => {
+  switch (mode) {
+    case HotReloadSetting.TraceFromStart:
+      return "Trace from start";
+    case HotReloadSetting.BeginFromCurrent:
+      return "Begin from current frame without trace";
+    case HotReloadSetting.BeginFreshOnSave:
+      return "Go to the beginning";
+  }
 }
 
 type SceneInstruction = (tick: number) => any
@@ -54,6 +87,8 @@ export class AnimatedScene {
 
   playEffectFunction: () => any = () => {}
 
+  renderingEventFunction: (start: boolean) => any = () => {}
+
   isPlaying = false
 
   private initialSceneChildren: THREE.Object3D[] = []
@@ -61,6 +96,7 @@ export class AnimatedScene {
     position: THREE.Vector3
     rotation: THREE.Euler
     zoom?: number
+    fov?: number  
     left?: number
     right?: number
     top?: number
@@ -77,6 +113,7 @@ export class AnimatedScene {
 
   private buildFunction: (scene: this) => any
 
+  public hotReloadSetting: HotReloadSetting
   private traceFromStart: boolean
 
   private controlsAnimationFrameId: number | null = null
@@ -87,6 +124,11 @@ export class AnimatedScene {
   private doNotPlayAudio = false
   private renderingAudioGather: AudioInScene[] = []
 
+  private playbackTargetDistance: number | null = null
+
+  private resizeObserver?: ResizeObserver
+  
+
   constructor(
     pixelsWidth: number,
     pixelsHeight: number,
@@ -97,7 +139,8 @@ export class AnimatedScene {
     this.container = globalContainerRef
     this.pixelsHeight = pixelsHeight
     this.pixelsWidth = pixelsWidth
-    this.traceFromStart = hotReloadSetting === HotReloadSetting.TraceFromStart
+    this.hotReloadSetting = hotReloadSetting
+    this.traceFromStart = hotReloadSetting !== HotReloadSetting.BeginFromCurrent
 
     const threeDim = spaceSetting === SpaceSetting.ThreeDim
 
@@ -110,12 +153,11 @@ export class AnimatedScene {
       this.farLimitRender
     )
 
-    this.buildFunction = async () => {
-      await buildFunctionGiven(this)
-      this.end()
-    }
+    this.scene = scene
+    this.camera = camera
+    this.renderer = renderer
+    this.controls = controls
 
-    this.attachScreenSizeListener(globalContainerRef, threeDim)
     // Store initial state
     this.initialSceneChildren = [...scene.children]
     this.initialCameraState = this.captureCameraState(camera)
@@ -125,10 +167,13 @@ export class AnimatedScene {
       shadowMapEnabled: renderer.shadowMap.enabled
     }
 
-    this.scene = scene
-    this.camera = camera
-    this.renderer = renderer
-    this.controls = controls
+
+    this.buildFunction = async () => {
+      await buildFunctionGiven(this)
+      this.end()
+    }
+
+    this.attachScreenSizeListener(globalContainerRef, threeDim)
 
     this.startControls()
 
@@ -148,7 +193,16 @@ export class AnimatedScene {
     this.appendInstruction(instruction, this.sceneCalculationTick)
   }
 
-  addAnim(...animations: UserAnimation[]) {
+  doAt(tick: number, instruction: SceneInstruction) {
+    if (tick < 0) throw new Error('doAt: tick must be ≥ 0')
+    this.appendInstruction(instruction, tick)
+  }
+
+  getCurrentTimeMs() {
+    return ticksToMillis(this.sceneRenderTick)
+  }
+
+  addAnims(...animations: UserAnimation[]) {
     const longest = Math.max(...animations.map((a) => a.interpolation.length))
     for (const animation of animations) {
       this.appendAnimation(animation)
@@ -156,7 +210,7 @@ export class AnimatedScene {
     this.sceneCalculationTick += longest
   }
 
-  insertAnimAt(tick: number, ...animations: UserAnimation[]) {
+  insertAnimsAt(tick: number, ...animations: UserAnimation[]) {
     for (const animation of animations) {
       const internalAnimation: InternalAnimation = {
         startTick: tick,
@@ -169,6 +223,21 @@ export class AnimatedScene {
     }
   }
 
+  addDeferredAnims(...futureAnimations: (() => UserAnimation)[]) {
+    // Execute once during planning just to get durations
+    const tempAnims = futureAnimations.map(fn => fn())
+    const longest = Math.max(...tempAnims.map((a) => a.interpolation.length))
+    
+    this.do((tick) => {
+      const calculatedAnimations: UserAnimation[] = []
+      for (const futureAnimation of futureAnimations) {
+        calculatedAnimations.push(futureAnimation()) // Execute again at runtime
+      }
+      this.insertAnimsAt(tick, ...calculatedAnimations)
+    })
+    this.sceneCalculationTick += longest
+  }
+
   addSequentialBackgroundAnims(...sequentialAnimations: UserAnimation[]) {
     let padding = 0
     for (const animation of sequentialAnimations) {
@@ -182,7 +251,7 @@ export class AnimatedScene {
   }
 
   end() {
-    this.totalSceneTicks = this.sceneCalculationTick + 1
+    this.totalSceneTicks = this.sceneCalculationTick 
   }
 
   registerAudio(audioPath: string) {
@@ -221,7 +290,7 @@ export class AnimatedScene {
   }
 
   addWait(duration: number) {
-    this.addAnim(createAnim(easeConstant(0, duration), () => {}))
+    this.addAnims(createAnim(easeConstant(0, duration), () => {}))
   }
 
   async jumpToFrameAtIndex(index: number, notSize: boolean = false) {
@@ -251,9 +320,12 @@ export class AnimatedScene {
     this.sceneRenderTick = index
     await this.playEffectFunction()
 
-    // console.log('INSTRUCTIONS', this.sceneInstructions)
-
     this.doNotPlayAudio = false
+
+    // Only (re)start audio when actively playing or rendering
+    if (this.isPlaying && !this.doNotPlayAudio && !this.isRendering) {
+      audioSeekToTick(this.sceneRenderTick, this.planedSounds, timelineFPS)
+    }
   }
 
   getAspectRatio() {
@@ -261,24 +333,17 @@ export class AnimatedScene {
   }
 
   private syncControlsWithCamera() {
-    // Get the direction vector (works for both camera types)
-    const direction = new THREE.Vector3(0, 0, -1)
+  const dir = new THREE.Vector3();
+  this.camera.getWorldDirection(dir); // works for both camera types
 
-    // Use the appropriate transformation based on camera type
-    if (this.camera.type === 'OrthographicCamera') {
-      direction.transformDirection(this.camera.matrixWorld)
-    } else {
-      direction.applyQuaternion(this.camera.quaternion)
-    }
+  const distance =
+    this.playbackTargetDistance ??
+    this.controls.target.distanceTo(this.camera.position);
 
-    // Calculate the new target (same for both camera types)
-    const targetDistance = this.controls.target.distanceTo(this.controls.object.position)
-    const newTarget = this.camera.position.clone().add(direction.multiplyScalar(targetDistance))
-    this.controls.target.copy(newTarget)
-
-    // Reset the internal state
-    this.controls.update()
-  }
+  const newTarget = this.camera.position.clone().add(dir.multiplyScalar(distance));
+  this.controls.target.copy(newTarget);
+  this.controls.update();
+} 
 
   private startControls() {
     this.controls.enabled = true
@@ -317,10 +382,6 @@ export class AnimatedScene {
 
       this.renderCurrentFrame()
       animateCounter++
-
-      if (animateCounter % 10 === 0) {
-        logCameraState(this.camera)
-      }
     }
     animate()
   }
@@ -333,36 +394,68 @@ export class AnimatedScene {
   }
 
   private attachScreenSizeListener(container: HTMLElement, threeDim: boolean) {
-    const internalAspect = this.pixelsWidth / this.pixelsHeight
-    // Resize handler
-    const handleResize = () => {
-      const newWidth = container.clientWidth
-      const newHeight = container.clientHeight
-
-      if (threeDim && this.camera instanceof THREE.PerspectiveCamera) {
-        this.camera.aspect = internalAspect
-      } else if (this.camera instanceof THREE.OrthographicCamera) {
-        this.camera.left = -this.zoom * internalAspect
-        this.camera.right = this.zoom * internalAspect
-      }
+  const targetAspect = this.pixelsWidth / this.pixelsHeight
+
+  const handleResize = (width: number) => {
+    if (!width) return
 
-      this.camera.updateProjectionMatrix()
-      this.renderer.setSize(newWidth, newHeight)
-      this.renderer.render(this.scene, this.camera)
+    // Respect the animation's logical aspect ratio
+    const height = width / targetAspect
+
+    // Set container size manually
+    container.style.height = `${height}px`
+
+    // Update camera based on that aspect
+    const aspect = width / height
+
+    if (threeDim && this.camera instanceof THREE.PerspectiveCamera) {
+      this.camera.aspect = aspect
+    } else if (this.camera instanceof THREE.OrthographicCamera) {
+      this.camera.left   = -this.zoom * aspect
+      this.camera.right  =  this.zoom * aspect
+      this.camera.top    =  this.zoom
+      this.camera.bottom = -this.zoom
     }
-    window.addEventListener('resize', handleResize)
+
+    this.camera.updateProjectionMatrix()
+    this.renderer.setSize(width, height)
+    this.renderer.render(this.scene, this.camera)
   }
 
+  // Initial sizing
+  handleResize(container.clientWidth)
+
+  // React to container size changes (e.g. inspector open/close)
+  this.resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const { width } = entry.contentRect
+      handleResize(width)
+    }
+  })
+
+  this.resizeObserver.observe(container)
+
+  // Clean up on destroy / hot reload
+  addDestroyFunction(() => {
+    this.resizeObserver?.disconnect()
+  })
+}
+
   pause() {
     this.isPlaying = false
     if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId)
 
-    this.syncControlsWithCamera()
 
-    this.startControls()
+    audioPauseAll()
+    // use the captured distance one last time
+    this.syncControlsWithCamera();
+    this.playbackTargetDistance = null;
+
+    this.startControls();
   }
 
   async render() {
+    this.renderingEventFunction(true)
     this.isRendering = true
     this.isPlaying = true
     this.stopControls()
@@ -420,11 +513,13 @@ export class AnimatedScene {
     div.style.zIndex = originalZIndex
 
     this.renderer.setSize(this.container.clientWidth, this.container.clientHeight)
+    this.isPlaying = false
     await this.jumpToFrameAtIndex(0)
     this.renderCurrentFrame()
 
-    this.isPlaying = false
+    
     this.startControls()
+    this.renderingEventFunction(false)
   }
 
   play() {
@@ -435,17 +530,35 @@ export class AnimatedScene {
     this.isPlaying = true
     this.stopControls()
     await this.jumpToFrameAtIndex(fromFrame)
-    logCameraState(this.camera)
+
+    // If we were previously paused and had partial offsets captured, this also ensures clean resume:
+    audioResumeAll()
+
+    // Capture a distance that OrbitControls will keep during play
+  this.playbackTargetDistance =
+    this.controls.target.distanceTo(this.camera.position)
 
     let currentFrame = fromFrame
     let numberCalledAnimate = 0
     const animate = async (trace: boolean) => {
       if (!this.isPlaying) return
       if (currentFrame <= toFrame) {
-        if (numberCalledAnimate % animationFPSThrottle === 0) {
+        // Still modulus since the requestAnimationFrame runs at the screenFPS rate, not timelineFPS rate
+        if (numberCalledAnimate % animationFPSDivider === 0) {
           this.sceneRenderTick = currentFrame
           //To not apply trace twice if we just jumped to startframe (and thus tranced it)
           await this.traceCurrentFrame(this.sceneRenderTick, true, !trace)
+
+          // --- Keep controls.target aligned with the animated camera ---
+          if (this.playbackTargetDistance != null) {
+            const camDir = new THREE.Vector3()
+            this.camera.getWorldDirection(camDir)         // forward (-Z in view space)
+            const target = this.camera.position.clone()
+              .add(camDir.multiplyScalar(this.playbackTargetDistance))
+            this.controls.target.copy(target)
+            this.controls.update() // ok to call while disabled; just updates internals
+          }
+
           this.renderCurrentFrame()
           currentFrame++
           await this.playEffectFunction()
@@ -537,6 +650,7 @@ export class AnimatedScene {
 
   // Replace recreateComponents with reset logic
   private resetComponents(notSize: boolean) {
+    audioStopAll()   
     this.resetSceneVars()
     this.resetScene()
     this.resetCamera()
@@ -567,6 +681,7 @@ export class AnimatedScene {
       state.bottom = camera.bottom
     } else if (camera instanceof THREE.PerspectiveCamera) {
       state.zoom = camera.zoom
+      state.fov  = (camera as THREE.PerspectiveCamera).fov
     }
 
     return state
@@ -607,6 +722,9 @@ export class AnimatedScene {
 
     if (cam instanceof THREE.PerspectiveCamera) {
       cam.zoom = this.initialCameraState.zoom!
+      if (this.initialCameraState.fov != null) {
+        (cam as THREE.PerspectiveCamera).fov = this.initialCameraState.fov  
+      }
     }
   }
 

package/template/src/renderer/src/lib/animation/helpers.ts

@@ -1,7 +0,0 @@
-import { screenFps } from '../../../../entry'
-
-// Convert ticks (frames) to milliseconds
-export const ticksToMillis = (ticks: number) => (ticks / screenFps) * 1000
-
-// Convert milliseconds to the closest whole number of ticks
-export const millisToTicks = (ms: number) => Math.ceil((ms / 1000) * screenFps)

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

@@ -1,104 +0,0 @@
-export interface AudioInScene {
-  audioPath: string
-  volume: number
-  atFrame: number
-}
-
-// Global caches for audio assets
-// The key is a file path and the value is the loaded AudioBuffer.
-let loadedAudio = new Map<string, AudioBuffer>()
-
-let registeredAudios = new Set<string>()
-
-// Create or reuse an AudioContext instance.
-const audioContext = new AudioContext()
-
-/**
- * Registers an audio file path and returns a corresponding ID.
- * @param audioPath - The path to the audio file.
- * @returns A unique audio ID.
- */
-export const registerAudio = (audioPath: string) => {
-  registeredAudios.add(audioPath)
-}
-
-/**
- * Loads all registered audio files into the global cache.
- * Every audio file referenced in the audioIDMappings will be fetched
- * and decoded; results are stored in the loadedAudio map.
- */
-export const loadAllAudio = async (): Promise<void> => {
-  const loadPromises: Promise<void>[] = []
-
-  // Loop over each registered audio file.
-  for (const [path, _] of registeredAudios.entries()) {
-    // If this audio file isn't already loaded, load it.
-    if (!loadedAudio.has(path)) {
-      const promise = fetch(path)
-        .then((response) => {
-          if (!response.ok) {
-            throw new Error(`Failed to load audio file at ${path}: ${response.statusText}`)
-          }
-          return response.arrayBuffer()
-        })
-        .then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer))
-        .then((decodedBuffer) => {
-          loadedAudio.set(path, decodedBuffer)
-          console.log(`Loaded audio [path: ${path}] from: ${path}`)
-        })
-        .catch((error) => {
-          console.error(`Error loading audio from ${path}:`, error)
-        })
-      loadPromises.push(promise)
-    }
-  }
-
-  await Promise.all(loadPromises)
-  console.log('All audio files have been loaded.')
-}
-
-/**
- * Plays the audio corresponding to the given audioID with the specified volume.
- * @param audioID - The registered audio ID to play.
- * @param volume - The volume level (e.g., 0.0 to 1.0).
- */
-export const playAudio = (audioPath: string, volume: number) => {
-  const hasAudio = registeredAudios.has(audioPath)
-  if (!hasAudio) {
-    console.warn(`Audio path ${audioPath} not registered.`)
-    return
-  }
-
-  const buffer = loadedAudio.get(audioPath)
-  if (!buffer) {
-    console.warn(`Audio file for ${audioPath} has not been loaded.`)
-    return
-  }
-
-  // Create a buffer source node to play the audio.
-  const source = audioContext.createBufferSource()
-  source.buffer = buffer
-
-  // Create a gain node to control the volume.
-  const gainNode = audioContext.createGain()
-  gainNode.gain.value = volume
-
-  // Connect the nodes: source -> gain -> audio context destination.
-  source.connect(gainNode)
-  gainNode.connect(audioContext.destination)
-
-  // Start playback immediately.
-  source.start(0)
-}
-
-/**
- * Cleans up all audio resources.
- * This function:
- *  - Clears the loaded audio cache.
- *  - Clears the audio ID mapping.
- *  - Resets the last registered ID counter.
- */
-export const cleanupAudioData = async (): Promise<void> => {
-  // Clear the caches.
-  loadedAudio.clear()
-}

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

@@ -1,6 +0,0 @@
-import * as THREE from "three"
-import { COLORS } from "./helpers"
-
-export const getRegularMetal = (color: number = COLORS.white) => {
-  return new THREE.MeshStandardMaterial({ color: color, roughness: 0.2, metalness: 1 })
-}

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

@@ -1,21 +0,0 @@
-import * as THREE from 'three'
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
-
-export interface SceneComponents {
-  camera: THREE.PerspectiveCamera | THREE.OrthographicCamera
-  renderer: THREE.WebGLRenderer
-  scene: THREE.Scene
-  controls: OrbitControls
-}
-
-export const RERENDER = (state: SceneComponents) => {
-  state.renderer.render(state.scene, state.camera)
-}
-
-export const ADD = (state: SceneComponents, element: THREE.Mesh) => {
-  state.scene.add(element)
-}
-
-export const REMOVE = (state: SceneComponents, element: THREE.Mesh) => {
-  state.scene.remove(element)
-}