create-definedmotion 0.1.4 → 0.2.0

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

@@ -5,17 +5,29 @@ 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'
 
+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,
   TwoDim
@@ -23,7 +35,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 +78,8 @@ export class AnimatedScene {
 
   playEffectFunction: () => any = () => {}
 
+  renderingEventFunction: (start: boolean) => any = () => {}
+
   isPlaying = false
 
   private initialSceneChildren: THREE.Object3D[] = []
@@ -77,6 +103,7 @@ export class AnimatedScene {
 
   private buildFunction: (scene: this) => any
 
+  public hotReloadSetting: HotReloadSetting
   private traceFromStart: boolean
 
   private controlsAnimationFrameId: number | null = null
@@ -87,6 +114,9 @@ export class AnimatedScene {
   private doNotPlayAudio = false
   private renderingAudioGather: AudioInScene[] = []
 
+  private playbackTargetDistance: number | null = null
+  
+
   constructor(
     pixelsWidth: number,
     pixelsHeight: number,
@@ -97,7 +127,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
 
@@ -130,6 +161,9 @@ export class AnimatedScene {
     this.renderer = renderer
     this.controls = controls
 
+    // Cap viewer pixel ratio, without this HDRIs become super slow on MacBooks for example
+    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1));
+
     this.startControls()
 
     addDestroyFunction(() => this.onDestroy())
@@ -148,7 +182,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 +199,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 +212,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 +240,7 @@ export class AnimatedScene {
   }
 
   end() {
-    this.totalSceneTicks = this.sceneCalculationTick + 1
+    this.totalSceneTicks = this.sceneCalculationTick 
   }
 
   registerAudio(audioPath: string) {
@@ -221,7 +279,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) {
@@ -261,24 +319,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 +368,6 @@ export class AnimatedScene {
 
       this.renderCurrentFrame()
       animateCounter++
-
-      if (animateCounter % 10 === 0) {
-        logCameraState(this.camera)
-      }
     }
     animate()
   }
@@ -357,12 +404,16 @@ export class AnimatedScene {
     this.isPlaying = false
     if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId)
 
-    this.syncControlsWithCamera()
 
-    this.startControls()
+    // 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()
@@ -425,6 +476,7 @@ export class AnimatedScene {
 
     this.isPlaying = false
     this.startControls()
+    this.renderingEventFunction(false)
   }
 
   play() {
@@ -435,17 +487,32 @@ export class AnimatedScene {
     this.isPlaying = true
     this.stopControls()
     await this.jumpToFrameAtIndex(fromFrame)
-    logCameraState(this.camera)
+
+    // 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()

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)