@gnsx/three 0.185.15 → 0.186.0

package/examples/jsm/tsl/utils/SoftParticles.js

@@ -0,0 +1,60 @@
+import { Fn, float, positionView, viewportDepthTexture, perspectiveDepthToViewZ, cameraNear, cameraFar } from '@gnsx/three/tsl';
+
+/**
+ * @module SoftParticles
+ * @three_import import { softParticles } from 'three/addons/tsl/utils/SoftParticles.js';
+ */
+
+/**
+ * A symmetric contrast curve, as described in the "Soft Particles" white paper
+ * (NVIDIA, Tristan Lorach).
+ *
+ * @tsl
+ * @function
+ * @private
+ * @param {Node<float>} input - The value to remap, expected in the `[0, 1]` range.
+ * @param {Node<float>} power - The contrast power. `1` is linear, higher values sharpen the transition.
+ * @return {Node<float>} The remapped value.
+ */
+const contrastCurve = /*@__PURE__*/ Fn( ( [ input, power ] ) => {
+
+	const aboveHalf = input.greaterThan( 0.5 ).toConst();
+	const folded = aboveHalf.select( input.oneMinus(), input ).toConst();
+	const output = folded.mul( 2 ).saturate().pow( power ).mul( 0.5 ).toConst();
+
+	return aboveHalf.select( output.oneMinus(), output );
+
+} ).setLayout( {
+	name: 'contrastCurve',
+	type: 'float',
+	inputs: [
+		{ name: 'input', type: 'float' },
+		{ name: 'power', type: 'float' }
+	]
+} );
+
+/**
+ * Computes an opacity node for soft particles, based on the "Soft Particles" white
+ * paper (NVIDIA, Tristan Lorach).
+ *
+ * @tsl
+ * @function
+ * @param {Object} [parameters={}] - The configuration parameters.
+ * @param {Node<float>} [parameters.opacity=float(1)] - The sprite's base opacity, which the soft fade is multiplied with.
+ * @param {Node<float>|number} [parameters.distance=1] - The world-space distance over which the sprite fades out against the scene.
+ * @param {Node<float>|number} [parameters.contrast=2] - The contrast power of the fade curve. `1` is linear, higher values sharpen the transition.
+ * @param {Node<float>} [parameters.viewportDepth=viewportDepthTexture()] - The opaque scene depth the particles fade against.
+ * @return {Node<float>} The opacity node to assign to `material.opacityNode`.
+ */
+export function softParticles( { opacity = float( 1 ), distance = 1, contrast = 2, viewportDepth = viewportDepthTexture() } = {} ) {
+
+	// Read the opaque scene depth captured before the particle pass and convert both
+	// the scene depth and the particle's depth to view space, so the gap between them
+	// can be measured in world units.
+	const sceneViewZ = perspectiveDepthToViewZ( viewportDepth, cameraNear, cameraFar ).toConst();
+	const depthDelta = positionView.z.sub( sceneViewZ ).div( distance ).saturate();
+
+	// Fade out as the particle approaches the scene; stay opaque when well in front of it.
+	return opacity.mul( contrastCurve( depthDelta, contrast ) );
+
+}

package/examples/jsm/tsl/utils/TAAUtils.js

@@ -0,0 +1,195 @@
+import { add, float, Fn, If, luminance, max, struct, vec2, vec4, getViewPosition, logarithmicDepthToViewZ, viewZToOrthographicDepth, viewZToPerspectiveDepth } from '@gnsx/three/tsl';
+
+/**
+ * Optimized version of AABB clipping.
+ *
+ * Reference: {@link https://github.com/playdeadgames/temporal}
+ *
+ * @tsl
+ * @private
+ * @function
+ * @param {Node<vec4>} currentColor - The current color.
+ * @param {Node<vec4>} historyColor - The history color.
+ * @param {Node<vec4>} minColor - The minimum color of the AABB.
+ * @param {Node<vec4>} maxColor - The maximum color of the AABB.
+ * @return {Node<vec4>} The clipped history color.
+ */
+export const clipAABB = Fn( ( [ currentColor, historyColor, minColor, maxColor ] ) => {
+
+	const pClip = maxColor.rgb.add( minColor.rgb ).mul( 0.5 ).toConst();
+	const eClip = maxColor.rgb.sub( minColor.rgb ).mul( 0.5 ).add( 1e-7 ).toConst();
+	const vClip = historyColor.sub( vec4( pClip, currentColor.a ) ).toConst();
+	const vUnit = vClip.xyz.div( eClip ).toConst();
+	const absUnit = vUnit.abs().toConst();
+	const maxUnit = max( absUnit.x, absUnit.y, absUnit.z ).toConst();
+	return maxUnit.greaterThan( 1 ).select(
+		vec4( pClip, currentColor.a ).add( vClip.div( maxUnit ) ),
+		historyColor
+	);
+
+} ).setLayout( {
+	name: 'clipAABB',
+	type: 'vec4',
+	inputs: [
+		{ name: 'currentColor', type: 'vec4' },
+		{ name: 'historyColor', type: 'vec4' },
+		{ name: 'minColor', type: 'vec4' },
+		{ name: 'maxColor', type: 'vec4' }
+	]
+} );
+
+/**
+ * Blends the current and history color with a flicker reduction based on luminance weighing.
+ *
+ * @tsl
+ * @private
+ * @function
+ * @param {Node<vec4>} currentColor - The current color.
+ * @param {Node<vec4>} historyColor - The history color.
+ * @param {Node<float>} currentWeight - The weight of the current color.
+ * @return {Node<vec4>} The blended color.
+ */
+export const flickerReduction = Fn( ( [ currentColor, historyColor, currentWeight ] ) => {
+
+	const compressedCurrent = currentColor.mul( float( 1 ).div( ( max( currentColor.r, currentColor.g, currentColor.b ).add( 1 ) ) ) ).toConst();
+	const compressedHistory = historyColor.mul( float( 1 ).div( ( max( historyColor.r, historyColor.g, historyColor.b ).add( 1 ) ) ) ).toConst();
+
+	const luminanceCurrent = luminance( compressedCurrent.rgb ).toConst();
+	const luminanceHistory = luminance( compressedHistory.rgb ).toConst();
+
+	const weightCurrent = currentWeight.div( luminanceCurrent.add( 1 ) ).toConst();
+	const weightHistory = currentWeight.oneMinus().div( luminanceHistory.add( 1 ) ).toConst();
+
+	return add( currentColor.mul( weightCurrent ), historyColor.mul( weightHistory ) ).div( max( weightCurrent.add( weightHistory ), 0.00001 ) );
+
+} ).setLayout( {
+	name: 'flickerReduction',
+	type: 'vec4',
+	inputs: [
+		{ name: 'currentColor', type: 'vec4' },
+		{ name: 'historyColor', type: 'vec4' },
+		{ name: 'currentWeight', type: 'float' }
+	]
+} );
+
+/**
+ * Samples the 3×3 neighborhood of the given texel position in the depth buffer and returns
+ * the closest depth, its texel position and the farthest depth. Reversed and logarithmic depth
+ * values are converted to perspective depth.
+ *
+ * @tsl
+ * @private
+ * @function
+ * @param {TextureNode} depthNode - The depth buffer.
+ * @param {Node<vec2>} positionTexel - The texel position.
+ * @param {Node<vec2>} cameraNearFar - The camera's near and far.
+ * @return {Node<struct>} A struct with the members `closestDepth`, `closestPositionTexel` and `farthestDepth`.
+ */
+export const sampleCurrentDepth = Fn( ( [ depthNode, positionTexel, cameraNearFar ], builder ) => {
+
+	const closestDepth = float( 2 ).toVar();
+	const closestPositionTexel = vec2( 0 ).toVar();
+	const farthestDepth = float( - 1 ).toVar();
+
+	for ( let x = - 1; x <= 1; ++ x ) {
+
+		for ( let y = - 1; y <= 1; ++ y ) {
+
+			const neighbor = positionTexel.add( vec2( x, y ) ).toVar();
+			let depth = depthNode.load( neighbor ).r;
+			if ( builder.renderer.reversedDepthBuffer ) depth = depth.oneMinus();
+			if ( builder.renderer.logarithmicDepthBuffer ) depth = logarithmicToPerspectiveDepth( depth, cameraNearFar );
+			depth = depth.toVar();
+
+			If( depth.lessThan( closestDepth ), () => {
+
+				closestDepth.assign( depth );
+				closestPositionTexel.assign( neighbor );
+
+			} );
+
+			If( depth.greaterThan( farthestDepth ), () => {
+
+				farthestDepth.assign( depth );
+
+			} );
+
+		}
+
+	}
+
+	return currentDepthStruct( closestDepth, closestPositionTexel, farthestDepth );
+
+} );
+
+/**
+ * Samples the previous depth buffer and reprojects the depth into the current view.
+ *
+ * @tsl
+ * @private
+ * @function
+ * @param {TextureNode} previousDepthNode - The previous depth buffer.
+ * @param {Node<vec2>} uv - The uv coordinates.
+ * @param {Node<mat4>} previousCameraProjectionMatrixInverse - The previous camera projection matrix inverse.
+ * @param {Node<mat4>} previousCameraWorldMatrix - The previous camera world matrix.
+ * @param {Node<mat4>} cameraWorldMatrixInverse - The current camera world matrix inverse.
+ * @param {Node<vec2>} cameraNearFar - The camera's near and far.
+ * @param {Camera} camera - The camera.
+ * @return {Node<float>} The reprojected depth.
+ */
+export const samplePreviousDepth = Fn( ( [ previousDepthNode, uv, previousCameraProjectionMatrixInverse, previousCameraWorldMatrix, cameraWorldMatrixInverse, cameraNearFar, camera ], builder ) => {
+
+	let depth = previousDepthNode.sample( uv ).r;
+	if ( builder.renderer.logarithmicDepthBuffer ) depth = logarithmicToPerspectiveDepth( depth, cameraNearFar );
+	const positionView = getViewPosition( uv, depth, previousCameraProjectionMatrixInverse );
+	const positionWorld = previousCameraWorldMatrix.mul( vec4( positionView, 1 ) ).xyz;
+	const viewZ = cameraWorldMatrixInverse.mul( vec4( positionWorld, 1 ) ).z;
+	return camera.isOrthographicCamera
+		? viewZToOrthographicDepth( viewZ, cameraNearFar.x, cameraNearFar.y )
+		: viewZToPerspectiveDepth( viewZ, cameraNearFar.x, cameraNearFar.y );
+
+} );
+
+/**
+ * Computes a sequence of Halton(2, 3) jitter offsets in the range [0, 1].
+ *
+ * @private
+ * @function
+ * @param {number} length - The number of offsets.
+ * @return {Array<Array<number>>} The jitter offsets.
+ */
+export function computeHaltonOffsets( length ) {
+
+	return Array.from( { length }, ( _, index ) => [ halton( index + 1, 2 ), halton( index + 1, 3 ) ] );
+
+}
+
+const currentDepthStruct = struct( {
+	closestDepth: 'float',
+	closestPositionTexel: 'vec2',
+	farthestDepth: 'float'
+} );
+
+const logarithmicToPerspectiveDepth = ( depth, cameraNearFar ) => {
+
+	const { x: near, y: far } = cameraNearFar;
+	const viewZ = logarithmicDepthToViewZ( depth, near, far );
+	return viewZToPerspectiveDepth( viewZ, near, far );
+
+};
+
+function halton( index, base ) {
+
+	let fraction = 1;
+	let result = 0;
+	while ( index > 0 ) {
+
+		fraction /= base;
+		result += fraction * ( index % base );
+		index = Math.floor( index / base );
+
+	}
+
+	return result;
+
+}

package/examples/jsm/utils/BufferGeometryUtils.js

@@ -709,8 +709,8 @@ function mergeVertices( geometry, tolerance = 1e-4 ) {
 
 			for ( let k = 0; k < itemSize; k ++ ) {
 
-				// double tilde truncates the decimal value
-				hash += `${ ~ ~ ( attribute[ getters[ k ] ]( index ) * hashMultiplier + hashAdditive ) },`;
+				// Math.trunc() preserves the full Number range, ~~ would wrap to int32
+				hash += `${ Math.trunc( attribute[ getters[ k ] ]( index ) * hashMultiplier + hashAdditive ) },`;
 
 			}
 
@@ -799,12 +799,13 @@ function mergeVertices( geometry, tolerance = 1e-4 ) {
 }
 
 /**
- * Returns a new indexed geometry based on `TrianglesDrawMode` draw mode.
- * This mode corresponds to the `gl.TRIANGLES` primitive in WebGL.
+ * Converts the given geometry to the `TrianglesDrawMode` draw mode, which
+ * corresponds to the `gl.TRIANGLES` primitive in WebGL. The conversion only
+ * rewrites the index, so the geometry is modified in place and returned.
  *
  * @param {BufferGeometry} geometry - The geometry to convert.
  * @param {number} drawMode - The current draw mode.
- * @return {BufferGeometry} The new geometry using `TrianglesDrawMode`.
+ * @return {BufferGeometry} The converted geometry using `TrianglesDrawMode`.
  */
 function toTrianglesDrawMode( geometry, drawMode ) {
 
@@ -894,13 +895,12 @@ function toTrianglesDrawMode( geometry, drawMode ) {
 
 		}
 
-		// build final geometry
+		// updated indices
 
-		const newGeometry = geometry.clone();
-		newGeometry.setIndex( newIndices );
-		newGeometry.clearGroups();
+		geometry.setIndex( newIndices );
+		geometry.clearGroups();
 
-		return newGeometry;
+		return geometry;
 
 	} else {
 
@@ -1371,7 +1371,7 @@ function toCreasedNormals( geometry, creaseAngle = Math.PI / 3 /* 60 degrees */
 	// assign an id to each vertex, sharing the id between vertices with the same
 	// quantized position via an open-addressed hash table (slots hold id + 1, 0 means empty)
 	const vertexIds = new Int32Array( vertexCount );
-	const quantized = new Int32Array( vertexCount * 3 );
+	const quantized = new Float64Array( vertexCount * 3 );
 
 	let tableSize = 1;
 	while ( tableSize < vertexCount * 2 ) tableSize <<= 1;
@@ -1382,9 +1382,9 @@ function toCreasedNormals( geometry, creaseAngle = Math.PI / 3 /* 60 degrees */
 	for ( let i = 0; i < vertexCount; i ++ ) {
 
 		const i3 = 3 * i;
-		const qx = ~ ~ ( positions[ i3 + 0 ] * hashMultiplier );
-		const qy = ~ ~ ( positions[ i3 + 1 ] * hashMultiplier );
-		const qz = ~ ~ ( positions[ i3 + 2 ] * hashMultiplier );
+		const qx = Math.trunc( positions[ i3 + 0 ] * hashMultiplier );
+		const qy = Math.trunc( positions[ i3 + 1 ] * hashMultiplier );
+		const qz = Math.trunc( positions[ i3 + 2 ] * hashMultiplier );
 
 		let slot = ( Math.imul( qx, 73856093 ) ^ Math.imul( qy, 19349663 ) ^ Math.imul( qz, 83492791 ) ) & tableMask;
 

package/examples/jsm/utils/GaussianSplatUtils.js

@@ -0,0 +1,229 @@
+import {
+	BufferAttribute,
+	BufferGeometry,
+	Matrix3,
+	Matrix4,
+	Quaternion,
+	Vector3
+} from '@gnsx/three';
+
+const SH_C0 = 0.2820947917738781;
+const SH_BAND_COMPONENTS = [ 0, 9, 15, 21 ];
+// GPU upload packs four clamped-byte coefficients per uint32 word.
+const SH_BAND_WORDS = [ 0, 3, 4, 6 ];
+
+const _covarianceMatrix = new Matrix3();
+const _covarianceMatrixTranspose = new Matrix3();
+const _rotationScaleMatrix = new Matrix4();
+const _quaternion = new Quaternion();
+const _scale = new Vector3();
+const _zero = new Vector3();
+
+function sigmoid( value ) {
+
+	return 1 / ( 1 + Math.exp( - value ) );
+
+}
+
+// The target is expected to be a Uint8ClampedArray, which clamps and rounds
+// assigned values natively.
+function writeColorBytes( target, offset, r, g, b, a ) {
+
+	target[ offset ] = r;
+	target[ offset + 1 ] = g;
+	target[ offset + 2 ] = b;
+	target[ offset + 3 ] = a;
+
+}
+
+function sh0ToLinear( coefficient ) {
+
+	return coefficient * SH_C0 + 0.5;
+
+}
+
+function linearToSH0( color ) {
+
+	return ( color - 0.5 ) / SH_C0;
+
+}
+
+function writeColorBytesFromSH0( target, offset, r, g, b, a ) {
+
+	writeColorBytes(
+		target,
+		offset,
+		sh0ToLinear( r ) * 255,
+		sh0ToLinear( g ) * 255,
+		sh0ToLinear( b ) * 255,
+		a * 255
+	);
+
+}
+
+function writeCovariance( target, offset, sx, sy, sz, qx, qy, qz, qw ) {
+
+	_quaternion.set( qx, qy, qz, qw ).normalize();
+	_scale.set( sx, sy, sz );
+	_rotationScaleMatrix.compose( _zero, _quaternion, _scale );
+
+	_covarianceMatrix.setFromMatrix4( _rotationScaleMatrix );
+	_covarianceMatrixTranspose.copy( _covarianceMatrix ).transpose();
+	_covarianceMatrix.multiply( _covarianceMatrixTranspose );
+
+	const elements = _covarianceMatrix.elements;
+
+	target[ offset ] = elements[ 0 ];
+	target[ offset + 1 ] = elements[ 3 ];
+	target[ offset + 2 ] = elements[ 6 ];
+	target[ offset + 3 ] = elements[ 4 ];
+	target[ offset + 4 ] = elements[ 7 ];
+	target[ offset + 5 ] = elements[ 8 ];
+
+}
+
+function createPackedSphericalHarmonicsBand( count, degree ) {
+
+	const packed = new Uint32Array( count * SH_BAND_WORDS[ degree ] );
+	packed.fill( 0x80808080 );
+
+	return {
+		packed,
+		bytes: new Uint8ClampedArray( packed.buffer )
+	};
+
+}
+
+function createSphericalHarmonicsAttribute( values, count, degree ) {
+
+	const words = SH_BAND_WORDS[ degree ];
+
+	if ( values instanceof Uint32Array === false ) {
+
+		throw new Error( `THREE.createGaussianSplatGeometry: sphericalHarmonics${ degree } must use packed uint32 words.` );
+
+	}
+
+	if ( values.length !== count * words ) {
+
+		throw new Error( `THREE.createGaussianSplatGeometry: Invalid sphericalHarmonics${ degree } packed length.` );
+
+	}
+
+	return new BufferAttribute( values, words );
+
+}
+
+function getSphericalHarmonicsDegree( geometry ) {
+
+	if ( geometry === undefined || geometry.isBufferGeometry !== true ) return 0;
+
+	let degree = 0;
+
+	for ( let i = 1; i <= 3; i ++ ) {
+
+		const attribute = geometry.getAttribute( `sphericalHarmonics${ i }` );
+
+		if ( attribute === undefined ) break;
+
+		if ( attribute.itemSize !== SH_BAND_WORDS[ i ] ) {
+
+			throw new Error( `THREE.getSphericalHarmonicsDegree: Invalid sphericalHarmonics${ i } itemSize.` );
+
+		}
+
+		if ( attribute.array instanceof Uint32Array === false ) {
+
+			throw new Error( `THREE.getSphericalHarmonicsDegree: sphericalHarmonics${ i } must use packed uint32 words.` );
+
+		}
+
+		degree = i;
+
+	}
+
+	for ( let i = degree + 1; i <= 3; i ++ ) {
+
+		if ( geometry.getAttribute( `sphericalHarmonics${ i }` ) !== undefined ) {
+
+			throw new Error( 'THREE.getSphericalHarmonicsDegree: Spherical harmonics attributes must be contiguous.' );
+
+		}
+
+	}
+
+	const position = geometry.getAttribute( 'position' );
+
+	if ( position !== undefined ) {
+
+		for ( let i = 1; i <= degree; i ++ ) {
+
+			if ( geometry.getAttribute( `sphericalHarmonics${ i }` ).count !== position.count ) {
+
+				throw new Error( 'THREE.getSphericalHarmonicsDegree: Spherical harmonics attribute counts must match position.' );
+
+			}
+
+		}
+
+	}
+
+	return degree;
+
+}
+
+/**
+ * Creates Gaussian splat geometry from packed attribute arrays. Higher-order
+ * spherical harmonics must be supplied as packed `Uint32Array` words
+ * (`SH_BAND_WORDS[ degree ]` words per splat, four clamped-byte coefficients
+ * per word using `( value - 128 ) / 128`).
+ *
+ * @param {Float32Array} centers - Splat centers.
+ * @param {Float32Array} covariances - Splat covariance matrices.
+ * @param {Uint8Array|Uint8ClampedArray} colors - RGBA colors.
+ * @param {Object} [sphericalHarmonics={}] - Optional packed SH band arrays.
+ * @return {BufferGeometry} The Gaussian splat geometry.
+ */
+function createGaussianSplatGeometry( centers, covariances, colors, sphericalHarmonics = {} ) {
+
+	const geometry = new BufferGeometry();
+	geometry.setAttribute( 'position', new BufferAttribute( centers, 3 ) );
+	geometry.setAttribute( 'covariance', new BufferAttribute( covariances, 6 ) );
+	geometry.setAttribute( 'color', new BufferAttribute( colors, 4, true ) );
+
+	const count = centers.length / 3;
+
+	for ( let i = 1; i <= 3; i ++ ) {
+
+		const values = sphericalHarmonics[ `sh${ i }` ] || sphericalHarmonics[ `sphericalHarmonics${ i }` ];
+
+		if ( values !== undefined ) {
+
+			geometry.setAttribute( `sphericalHarmonics${ i }`, createSphericalHarmonicsAttribute( values, count, i ) );
+
+		}
+
+	}
+
+	getSphericalHarmonicsDegree( geometry );
+	geometry.computeBoundingBox();
+	geometry.computeBoundingSphere();
+
+	return geometry;
+
+}
+
+export {
+	SH_BAND_COMPONENTS,
+	SH_BAND_WORDS,
+	SH_C0,
+	createGaussianSplatGeometry,
+	createPackedSphericalHarmonicsBand,
+	getSphericalHarmonicsDegree,
+	linearToSH0,
+	sh0ToLinear,
+	sigmoid,
+	writeColorBytes,
+	writeColorBytesFromSH0,
+	writeCovariance
+};

package/examples/jsm/utils/WebGLTextureUtils.js

@@ -24,7 +24,7 @@ let fullscreenQuad;
  * Returns an uncompressed version of the given compressed texture.
  *
  * This module can only be used with {@link WebGLRenderer}. When using {@link WebGPURenderer},
- * import the function from {@link WebGPUTextureUtils}.
+ * import the function from {@link module:WebGPUTextureUtils}.
  *
  * @param {CompressedTexture} texture - The compressed texture.
  * @param {number} [maxTextureSize=Infinity] - The maximum size of the uncompressed texture.

package/examples/jsm/utils/WebGPUTextureUtils.js

@@ -18,7 +18,7 @@ const _quadMesh = /*@__PURE__*/ new QuadMesh();
  * Returns an uncompressed version of the given compressed texture.
  *
  * This module can only be used with {@link WebGPURenderer}. When using {@link WebGLRenderer},
- * import the function from {@link WebGLTextureUtils}.
+ * import the function from {@link module:WebGLTextureUtils}.
  *
  * @async
  * @param {CompressedTexture} blitTexture - The compressed texture.

package/examples/jsm/webxr/WebGLXRFallback.js

@@ -26,27 +26,13 @@ function setupWebGLXRFallback( renderer, createFallbackRenderer, onFallback = ()
 
 			}
 
-			if ( session !== null && renderer.backend.isWebGPUBackend === true && session.enabledFeatures.includes( 'webgpu' ) === false ) {
+			if ( session !== null && renderer.backend.isWebGPUBackend === true && typeof globalThis.XRGPUBinding === 'undefined' ) {
 
 				return switchToFallbackRenderer( session, renderer );
 
 			}
 
-			try {
-
-				return await setSession( session );
-
-			} catch ( error ) {
-
-				if ( session === null || renderer.backend.isWebGPUBackend !== true ) {
-
-					throw error;
-
-				}
-
-				return switchToFallbackRenderer( session, renderer );
-
-			}
+			return setSession( session );
 
 		};
 

package/examples/jsm/webxr/XRControllerModelFactory.js

@@ -325,6 +325,7 @@ class XRControllerModelFactory {
 
 		const controllerModel = new XRControllerModel();
 		let scene = null;
+		let connectionId = 0; // used to invalidate async operations of previous connections, see #34264
 
 		controller.addEventListener( 'connected', ( event ) => {
 
@@ -332,15 +333,22 @@ class XRControllerModelFactory {
 
 			if ( xrInputSource.targetRayMode !== 'tracked-pointer' || ! xrInputSource.gamepad || xrInputSource.hand ) return;
 
+			const id = ++ connectionId;
+
 			fetchProfile( xrInputSource, this.path, DEFAULT_PROFILE ).then( ( { profile, assetPath } ) => {
 
+				if ( id !== connectionId ) return;
+
 				controllerModel.motionController = new MotionController(
 					xrInputSource,
 					profile,
 					assetPath
 				);
 
-				const cachedAsset = this._assetCache[ controllerModel.motionController.assetUrl ];
+				const assetUrl = controllerModel.motionController.assetUrl;
+
+				const cachedAsset = this._assetCache[ assetUrl ];
+
 				if ( cachedAsset ) {
 
 					scene = cachedAsset.scene.clone();
@@ -358,9 +366,11 @@ class XRControllerModelFactory {
 					}
 
 					this.gltfLoader.setPath( '' );
-					this.gltfLoader.load( controllerModel.motionController.assetUrl, ( asset ) => {
+					this.gltfLoader.load( assetUrl, ( asset ) => {
+
+						this._assetCache[ assetUrl ] = asset;
 
-						this._assetCache[ controllerModel.motionController.assetUrl ] = asset;
+						if ( id !== connectionId ) return;
 
 						scene = asset.scene.clone();
 
@@ -372,7 +382,7 @@ class XRControllerModelFactory {
 					null,
 					() => {
 
-						throw new Error( `THREE.XRControllerModelFactory: Asset ${controllerModel.motionController.assetUrl} missing or malformed.` );
+						throw new Error( `THREE.XRControllerModelFactory: Asset ${assetUrl} missing or malformed.` );
 
 					} );
 
@@ -388,6 +398,8 @@ class XRControllerModelFactory {
 
 		controller.addEventListener( 'disconnected', () => {
 
+			connectionId ++;
+
 			controllerModel.motionController = null;
 			controllerModel.remove( scene );
 			scene = null;