Replace THREE.Clock with THREE.Timer

docs/docs/spark-renderer.md

@@ -32,7 +32,7 @@ const spark = new SparkRenderer({
 | **Parameter**     | Description |
 | ----------------- | ----------- |
 | **premultipliedAlpha** | Whether to use premultiplied alpha when accumulating splat RGB. (default: `true`)
-| **clock**         | Pass in a `THREE.Clock` to synchronize time-based effects across different systems. Alternatively, you can set the `SparkRenderer` properties `time` and `deltaTime` directly. (default: `new THREE.Clock`)
+| **timer**         | Pass in a `THREE.Timer` to synchronize time-based effects across different systems. (default: `new THREE.Timer`)
 | **autoUpdate**    | Controls whether to check and automatically update splat collection each frame render. (default: `true`)
 | **preUpdate**     | Controls whether to update the splats before or after rendering. For WebXR this is set to `false` in order to complete rendering as soon as possible. (default: `true` if not WebXR)
 | **maxStdDev**     | Maximum standard deviations from the center to render Gaussians. Values `Math.sqrt(4)`..`Math.sqrt(9)` produce acceptable results and can be tweaked for performance. (default: `Math.sqrt(8)`)

src/SparkRenderer.ts

@@ -14,7 +14,6 @@ import { SplatWorker } from "./SplatWorker";
 import { SPLAT_TEX_HEIGHT, SPLAT_TEX_WIDTH } from "./defines";
 import { getShaders } from "./shaders";
 import {
-  cloneClock,
   isAndroid,
   isIos,
   isMobile,
@@ -42,11 +41,10 @@ export interface SparkRendererOptions {
    */
   premultipliedAlpha?: boolean;
   /**
-   * Pass in a THREE.Clock to synchronize time-based effects across different
-   * systems. Alternatively, you can set the property time directly.
-   * (default: new THREE.Clock)
+   * Pass in a THREE.Timer to to synchronize time-based effects across different
+   * systems.
    */
-  clock?: THREE.Clock;
+  timer?: THREE.Timer;
   /**
    * Controls whether to check and automatically update Gsplat collection
    * each frame render.
@@ -353,8 +351,8 @@ export class SparkRenderer extends THREE.Mesh {
   sortRadial: boolean;
   minSortIntervalMs: number;
 
-  clock: THREE.Clock;
-  time?: number;
+  readonly timer: THREE.Timer;
+  private readonly ownsTimer: boolean;
   lastFrame = -1;
   updateTimeoutId = -1;
   onDirty?: () => void;
@@ -550,7 +548,8 @@ export class SparkRenderer extends THREE.Mesh {
         : options.lodRaycast;
     this.lodRaycastIntervalMs = options.lodRaycastIntervalMs ?? 500;
 
-    this.clock = options.clock ? cloneClock(options.clock) : new THREE.Clock();
+    this.timer = options.timer ?? new THREE.Timer();
+    this.ownsTimer = !!options.timer;
 
     const accumulatorOptions = {
       extSplats: this.accumExtSplats,
@@ -907,7 +906,9 @@ export class SparkRenderer extends THREE.Mesh {
     autoUpdate: boolean;
   }) {
     const renderer = this.renderer;
-    const time = this.time ?? this.clock.getElapsedTime();
+    if (this.ownsTimer) {
+      this.timer.update();
+    }
 
     const center = camera.getWorldPosition(new THREE.Vector3());
     const dir = camera.getWorldDirection(new THREE.Vector3());
@@ -931,7 +932,7 @@ export class SparkRenderer extends THREE.Mesh {
       next.prepareGenerate({
         renderer,
         scene,
-        time,
+        timer: this.timer,
         camera,
         sortRadial: this.sortRadial ?? true,
         renderSize: this.renderSize,

src/SplatAccumulator.ts

@@ -441,7 +441,7 @@ export class SplatAccumulator {
   prepareGenerate({
     renderer,
     scene,
-    time,
+    timer,
     camera,
     sortRadial,
     renderSize,
@@ -450,7 +450,7 @@ export class SplatAccumulator {
   }: {
     renderer: THREE.WebGLRenderer;
     scene: THREE.Scene;
-    time: number;
+    timer: THREE.Timer;
     camera: THREE.Camera;
     sortRadial: boolean;
     renderSize: THREE.Vector2;
@@ -467,8 +467,8 @@ export class SplatAccumulator {
     SplatAccumulator.viewDirUniform.value.copy(this.viewDirection);
     SplatAccumulator.sortRadialUniform.value = sortRadial;
 
-    this.time = time;
-    this.deltaTime = time - previous.time;
+    this.time = timer.getElapsed();
+    this.deltaTime = timer.getDelta();
 
     const allGenerators: SplatGenerator[] = [];
     scene.traverse((node) => {

src/utils.ts

@@ -926,16 +926,6 @@ export function pixelsToPngUrl(
   return canvas.toDataURL("image/png");
 }
 
-// Manually clone a THREE.Clock object.
-export function cloneClock(clock: THREE.Clock): THREE.Clock {
-  const newClock = new THREE.Clock(clock.autoStart);
-  newClock.startTime = clock.startTime;
-  newClock.oldTime = clock.oldTime;
-  newClock.elapsedTime = clock.elapsedTime;
-  newClock.running = clock.running;
-  return newClock;
-}
-
 // Utility to filter out an undefined values from an object.
 export function omitUndefined<T extends object>(obj: T): Partial<T> {
   return Object.fromEntries(