AF Manager class for dynamic animation frame request/cancel

example/three/vr.js

@@ -230,6 +230,8 @@ function handleCamera() {
 
 			xrSession = renderer.xr.getSession();
 
+			tiles.setXRSession( xrSession );
+
 		}
 
 	} else {
@@ -246,6 +248,8 @@ function handleCamera() {
 
 			xrSession = null;
 
+			tiles.setXRSession( null );
+
 		}
 
 	}

src/core/renderer/tiles/TilesRendererBase.js

@@ -6,6 +6,7 @@ import { runTraversal } from './traverseFunctions.js';
 import { UNLOADED, QUEUED, LOADING, PARSING, LOADED, FAILED } from '../constants.js';
 import { throttle } from '../utilities/throttle.js';
 import { traverseSet } from '../utilities/TraversalUtils.js';
+import { FrameScheduler } from '../utilities/FrameScheduler.js';
 
 const PLUGIN_REGISTERED = Symbol( 'PLUGIN_REGISTERED' );
 const regionErrorTarget = {
@@ -194,19 +195,25 @@ export class TilesRendererBase {
 		this.cachedSinceLoadComplete = new Set();
 		this.isLoading = false;
 
+		const frameScheduler = new FrameScheduler();
+
 		const lruCache = new LRUCache();
 		lruCache.unloadPriorityCallback = lruPriorityCallback;
+		lruCache.frameScheduler = frameScheduler;
 
 		const downloadQueue = new PriorityQueue();
 		downloadQueue.maxJobs = 25;
 		downloadQueue.priorityCallback = defaultPriorityCallback;
+		downloadQueue.frameScheduler = frameScheduler;
 
 		const parseQueue = new PriorityQueue();
 		parseQueue.maxJobs = 5;
 		parseQueue.priorityCallback = defaultPriorityCallback;
+		parseQueue.frameScheduler = frameScheduler;
 
 		const processNodeQueue = new PriorityQueue();
 		processNodeQueue.maxJobs = 25;
+		processNodeQueue.frameScheduler = frameScheduler;
 		processNodeQueue.priorityCallback = ( a, b ) => {
 
 			const aParent = a.parent;
@@ -241,6 +248,7 @@ export class TilesRendererBase {
 		this.downloadQueue = downloadQueue;
 		this.parseQueue = parseQueue;
 		this.processNodeQueue = processNodeQueue;
+		this.frameScheduler = frameScheduler;
 		this.stats = {
 			inCacheSinceLoad: 0,
 			inCache: 0,
@@ -265,7 +273,7 @@ export class TilesRendererBase {
 
 			this.dispatchEvent( { type: 'needs-update' } );
 
-		} );
+		}, this.frameScheduler );
 
 		// options
 		this.errorTarget = 16.0;
@@ -278,6 +286,12 @@ export class TilesRendererBase {
 
 	}
 
+	setXRSession( xrsession ) {
+
+		this.frameScheduler.setXRSession( xrsession );
+
+	}
+
 	// Plugins
 	registerPlugin( plugin ) {
 

src/core/renderer/utilities/FrameScheduler.js

@@ -0,0 +1,89 @@
+class FrameScheduler {
+
+	constructor() {
+
+		// XR session
+		this.session = null;
+
+		// Pending AFs
+		this.pending = new Map();
+
+	}
+
+	// Set active XR session
+	// To be called when entering XR
+	setXRSession( session ) {
+
+		// call "flush" before assigning xr session to ensure callbacks are
+		// cancelled on the previous handle
+		if ( session !== this.session ) {
+
+			this.flushPending();
+			this.session = session;
+
+		}
+
+	}
+
+	// Request animation frame (defer to XR session if active)
+	requestAnimationFrame( cb ) {
+
+		const { session, pending } = this;
+		let handle;
+
+		const func = () => {
+
+			pending.delete( handle );
+			cb();
+
+		};
+
+		if ( ! session ) {
+
+			handle = requestAnimationFrame( func );
+
+		} else {
+
+			handle = session.requestAnimationFrame( func );
+
+		}
+
+		pending.set( handle, cb );
+
+		return handle;
+
+	}
+
+	// Cancel animation frame via handle (defer to XR session if active)
+	cancelAnimationFrame( handle ) {
+
+		const { pending, session } = this;
+		pending.delete( handle );
+
+		if ( ! session ) {
+
+			cancelAnimationFrame( handle );
+
+		} else {
+
+			session.cancelAnimationFrame( handle );
+
+		}
+
+	}
+
+	// Flush and complete pending AFs (defer to XR session if active)
+	flushPending() {
+
+		this.pending.forEach( ( cb, handle ) => {
+
+			cb();
+			this.cancelAnimationFrame( handle );
+
+		} );
+
+	}
+
+}
+
+export { FrameScheduler };

src/core/renderer/utilities/LRUCache.js

@@ -1,3 +1,5 @@
+import { FrameScheduler } from './FrameScheduler.js';
+
 const GIGABYTE_BYTES = 2 ** 30;
 
 class LRUCache {
@@ -56,6 +58,8 @@ class LRUCache {
 
 		this._unloadPriorityCallback = null;
 
+		this.frameScheduler = new FrameScheduler();
+
 		const itemSet = this.itemSet;
 		this.defaultPriorityCallback = item => itemSet.get( item );
 
@@ -346,15 +350,15 @@ class LRUCache {
 
 		if ( needsRerun ) {
 
-			this.unloadingHandle = requestAnimationFrame( () => this.scheduleUnload() );
+			this.unloadingHandle = this.frameScheduler.requestAnimationFrame( () => this.scheduleUnload() );
 
 		}
 
 	}
 
 	scheduleUnload() {
 
-		cancelAnimationFrame( this.unloadingHandle );
+		this.frameScheduler.cancelAnimationFrame( this.unloadingHandle );
 
 		if ( ! this.scheduled ) {
 

src/core/renderer/utilities/PriorityQueue.js

@@ -1,3 +1,5 @@
+import { FrameScheduler } from './FrameScheduler.js';
+
 export class PriorityQueueItemRemovedError extends Error {
 
 	constructor() {
@@ -31,10 +33,12 @@ export class PriorityQueue {
 
 		this.priorityCallback = null;
 
+		this.frameScheduler = new FrameScheduler();
+
 		// Customizable scheduling callback. Default using requestAnimationFrame()
 		this.schedulingCallback = func => {
 
-			requestAnimationFrame( func );
+			this.frameScheduler.requestAnimationFrame( func );
 
 		};
 

src/core/renderer/utilities/throttle.js

@@ -1,13 +1,13 @@
 // function that rate limits the amount of time a function can be called to once
 // per frame, initially queuing a new call for the next frame.
-export function throttle( callback ) {
+export function throttle( callback, frameScheduler ) {
 
 	let handle = null;
 	return () => {
 
-		if ( handle === null ) {
+		if ( handle === null && frameScheduler ) {
 
-			handle = requestAnimationFrame( () => {
+			handle = frameScheduler.requestAnimationFrame( () => {
 
 				handle = null;
 				callback();

src/r3f/utilities/QueryManager.js

@@ -9,6 +9,7 @@ import {
 } from 'three';
 import { SceneObserver } from './SceneObserver.js';
 import { Ellipsoid } from '3d-tiles-renderer/three';
+import { FrameScheduler } from '../../core/renderer/utilities/FrameScheduler.js';
 
 const _raycaster = /* @__PURE__ */ new Raycaster();
 const _line0 = /* @__PURE__ */ new Line3();
@@ -43,6 +44,9 @@ export class QueryManager extends EventDispatcher {
 		// cameras for sorting
 		this.cameras = new Set();
 
+		// frame scheduler
+		this.frameScheduler = new FrameScheduler();
+
 		// register to mark items as dirty
 		const queueAll = ( () => {
 
@@ -201,7 +205,7 @@ export class QueryManager extends EventDispatcher {
 		if ( this.autoRun && ! this.scheduled ) {
 
 			this.scheduled = true;
-			requestAnimationFrame( () => {
+			this.frameScheduler.requestAnimationFrame( () => {
 
 				this.scheduled = false;
 				this._runJobs();

test/core/FrameScheduler.test.js

@@ -0,0 +1,97 @@
+import { FrameScheduler } from '../../src/core/renderer/utilities/FrameScheduler.js';
+
+const nextFrame = async () => new Promise( resolve => requestAnimationFrame( resolve ) );
+describe( 'FrameScheduler', () => {
+
+	let scheduler;
+	beforeEach( () => {
+
+		scheduler = new FrameScheduler();
+
+	} );
+
+	it( 'should fire callbacks.', async () => {
+
+		let called = false;
+		scheduler.requestAnimationFrame( () => called = true );
+		expect( called ).toBe( false );
+
+		await nextFrame();
+		expect( called ).toBe( true );
+
+	} );
+
+	it( 'should flush callbacks.', () => {
+
+		let called = false;
+		scheduler.requestAnimationFrame( () => called = true );
+		scheduler.flushPending();
+
+		expect( called ).toBe( true );
+		expect( scheduler.pending.size ).toBe( 0 );
+
+	} );
+
+	it( 'should allow for cancelling callbacks.', async () => {
+
+		let called = false;
+		const handle = scheduler.requestAnimationFrame( () => called = true );
+		expect( called ).toBe( false );
+
+		scheduler.cancelAnimationFrame( handle );
+		expect( called ).toBe( false );
+
+		await nextFrame();
+		expect( called ).toBe( false );
+
+	} );
+
+	it( 'should flush callbacks when setting xr session.', () => {
+
+		let called = false;
+		scheduler.requestAnimationFrame( () => called = true );
+		scheduler.setXRSession( {} );
+		expect( called ).toBe( true );
+
+	} );
+
+	it( 'should use the xr session rAF if set.', async () => {
+
+		let called = false;
+		let cancelledHandle = null;
+		scheduler.setXRSession( {
+			requestAnimationFrame: () => called = true,
+			cancelAnimationFrame: handle => cancelledHandle = handle,
+		} );
+
+		const handle = scheduler.requestAnimationFrame( () => {} );
+		expect( called ).toBe( true );
+
+		scheduler.cancelAnimationFrame( handle );
+		expect( cancelledHandle ).toBe( handle );
+
+	} );
+
+	it( 'should not flush callbacks when setting the same session.', () => {
+
+		let called = false;
+		let xrSession = {
+			requestAnimationFrame,
+			cancelAnimationFrame,
+		};
+
+		scheduler.requestAnimationFrame( () => called = true );
+		scheduler.setXRSession( null );
+		expect( called ).toBe( false );
+
+		scheduler.setXRSession( xrSession );
+		expect( called ).toBe( true );
+
+		called = false;
+		scheduler.requestAnimationFrame( () => called = true );
+		scheduler.setXRSession( xrSession );
+		expect( called ).toBe( false );
+
+	} );
+
+} );