diff --git a/examples/jsm/loaders/usd/USDComposer.js b/examples/jsm/loaders/usd/USDComposer.js
index 786a4732d77947..0cbdfe6db6baf3 100644
--- a/examples/jsm/loaders/usd/USDComposer.js
+++ b/examples/jsm/loaders/usd/USDComposer.js
@@ -625,56 +625,71 @@ class USDComposer {
 			const typeName = spec.fields.typeName;
 
 			// Check for references/payloads
-			const refValue = this._getReference( spec );
-			if ( refValue ) {
+			const refValues = this._getReferences( spec );
+			if ( refValues.length > 0 ) {
 
 				// Get local variant selections from this prim
 				const localVariants = this._getLocalVariantSelections( spec.fields );
 
-				// Resolve the reference
-				const referencedGroup = this._resolveReference( refValue, localVariants );
-				if ( referencedGroup ) {
+				// Resolve all references
+				const resolvedGroups = [];
+				for ( const refValue of refValues ) {
+
+					const referencedGroup = this._resolveReference( refValue, localVariants );
+					if ( referencedGroup ) resolvedGroups.push( referencedGroup );
+
+				}
+
+				if ( resolvedGroups.length > 0 ) {
 
 					const attrs = this._getAttributes( path );
 
-					// Check if the referenced content is a single mesh (or container with single mesh)
+					// Single reference with single mesh: use optimized path
 					// This handles the USDZExporter pattern: Xform references geometry file
-					const singleMesh = this._findSingleMesh( referencedGroup );
+					if ( resolvedGroups.length === 1 ) {
 
-					if ( singleMesh && ( typeName === 'Xform' || ! typeName ) ) {
+						const singleMesh = this._findSingleMesh( resolvedGroups[ 0 ] );
 
-						// Merge the mesh into this prim
-						singleMesh.name = name;
-						this.applyTransform( singleMesh, spec.fields, attrs );
+						if ( singleMesh && ( typeName === 'Xform' || ! typeName ) ) {
 
-						// Apply material binding from the referencing prim if present
-						this._applyMaterialBinding( singleMesh, path );
+							// Merge the mesh into this prim
+							singleMesh.name = name;
+							this.applyTransform( singleMesh, spec.fields, attrs );
 
-						parent.add( singleMesh );
+							// Apply material binding from the referencing prim if present
+							this._applyMaterialBinding( singleMesh, path );
 
-						// Still build local children (overrides)
-						this._buildHierarchy( singleMesh, path );
+							parent.add( singleMesh );
 
-					} else {
+							// Still build local children (overrides)
+							this._buildHierarchy( singleMesh, path );
+
+							continue;
+
+						}
+
+					}
+
+					// Create a container for the referenced content
+					const obj = new Object3D();
+					obj.name = name;
+					this.applyTransform( obj, spec.fields, attrs );
 
-						// Create a container for the referenced content
-						const obj = new Object3D();
-						obj.name = name;
-						this.applyTransform( obj, spec.fields, attrs );
+					// Add all children from all resolved references
+					for ( const referencedGroup of resolvedGroups ) {
 
-						// Add all children from the referenced group
 						while ( referencedGroup.children.length > 0 ) {
 
 							obj.add( referencedGroup.children[ 0 ] );
 
 						}
 
-						parent.add( obj );
+					}
 
-						// Still build local children (overrides)
-						this._buildHierarchy( obj, path );
+					parent.add( obj );
 
-					}
+					// Still build local children (overrides)
+					this._buildHierarchy( obj, path );
 
 					continue;
 
@@ -1023,27 +1038,44 @@ class USDComposer {
 	}
 
 	/**
-	 * Get reference value from a prim spec.
+	 * Get all reference values from a prim spec.
+	 * @returns {string[]} Array of reference strings like "@path@" or "@path@<prim>"
 	 */
-	_getReference( spec ) {
+	_getReferences( spec ) {
+
+		const results = [];
 
 		if ( spec.fields.references && spec.fields.references.length > 0 ) {
 
 			const ref = spec.fields.references[ 0 ];
-			if ( typeof ref === 'string' ) return ref;
-			if ( ref.assetPath ) return '@' + ref.assetPath + '@';
+
+			if ( typeof ref === 'string' ) {
+
+				// Extract all @...@ references (handles both single and array values)
+				const matches = ref.matchAll( /@([^@]+)@(?:<([^>]+)>)?/g );
+				for ( const match of matches ) {
+
+					results.push( match[ 0 ] );
+
+				}
+
+			} else if ( ref.assetPath ) {
+
+				results.push( '@' + ref.assetPath + '@' );
+
+			}
 
 		}
 
-		if ( spec.fields.payload ) {
+		if ( results.length === 0 && spec.fields.payload ) {
 
 			const payload = spec.fields.payload;
-			if ( typeof payload === 'string' ) return payload;
-			if ( payload.assetPath ) return '@' + payload.assetPath + '@';
+			if ( typeof payload === 'string' ) results.push( payload );
+			else if ( payload.assetPath ) results.push( '@' + payload.assetPath + '@' );
 
 		}
 
-		return null;
+		return results;
 
 	}
 
@@ -1585,7 +1617,7 @@ class USDComposer {
 			if ( ! indices || indices.length === 0 ) continue;
 
 			// Get material binding - check direct path and variant paths
-			let materialPath = this._getMaterialBindingTarget( p );
+			const materialPath = this._getMaterialBindingTarget( p );
 
 			subsets.push( {
 				name: p.split( '/' ).pop(),
@@ -2751,7 +2783,7 @@ class USDComposer {
 	_getMaterialPath( meshPath, fields ) {
 
 		let materialPath = null;
-		let materialBinding = fields[ 'material:binding' ];
+		const materialBinding = fields[ 'material:binding' ];
 
 		if ( materialBinding ) {
 
@@ -2775,7 +2807,7 @@ class USDComposer {
 		const material = new MeshPhysicalMaterial();
 
 		let materialPath = null;
-		let materialBinding = fields[ 'material:binding' ];
+		const materialBinding = fields[ 'material:binding' ];
 
 		if ( materialBinding ) {
 
@@ -3846,6 +3878,7 @@ class USDComposer {
 			}
 
 		};
+
 		image.src = url;
 
 		return texture;
@@ -4075,7 +4108,7 @@ class USDComposer {
 			// Use geomBindTransform if available, otherwise fall back to identity.
 			// Estimating bind transforms from vertex/joint samples is not robust and can
 			// produce severe skinning distortion for valid assets.
-			let bindMatrix = new Matrix4();
+			const bindMatrix = new Matrix4();
 
 			if ( geomBindTransform && geomBindTransform.length === 16 ) {
 
diff --git a/examples/screenshots/webgl_loader_3dtiles.jpg b/examples/screenshots/webgl_loader_3dtiles.jpg
index 98d83e0a0d0dd6..1340197da33701 100644
Binary files a/examples/screenshots/webgl_loader_3dtiles.jpg and b/examples/screenshots/webgl_loader_3dtiles.jpg differ
diff --git a/examples/webgl_loader_3dtiles.html b/examples/webgl_loader_3dtiles.html
index 4d4156fc981042..0c86c31df9c4fa 100644
--- a/examples/webgl_loader_3dtiles.html
+++ b/examples/webgl_loader_3dtiles.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js loader - 3d tiles</title>
+		<title>three.js loader - 3d tiles + clouds</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
 			body {
-				background-color: #111;
+				background-color: #000;
 				color: #eee;
 			}
 
@@ -33,10 +33,11 @@
 
 	<body>
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> 3d tiles - <a href="https://github.com/NASA-AMMOS/3DTilesRendererJS" target="_blank" rel="noopener">3d-tiles-renderer</a><br/>
-			See <a href="https://github.com/NASA-AMMOS/3DTilesRendererJS" target="_blank" rel="noopener">main project repository</a> for more information and examples on loading 3d tiles
-			<br/>
-			and other tiled data formats. <a href="https://developers.google.com/maps/documentation/tile/3d-tiles" target="_blank" rel="noopener">Google Photorealistic Tiles</a> token courtesy of <a href="https://ion.cesium.com/" target="_blank" rel="noopener">Cesium Ion</a>.
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> -
+			<a href="https://github.com/NASA-AMMOS/3DTilesRendererJS" target="_blank" rel="noopener">3d-tiles-renderer</a> +
+			<a href="https://github.com/takram-design-engineering/three-geospatial" target="_blank" rel="noopener">three-clouds</a><br/>
+			<a href="https://developers.google.com/maps/documentation/tile/3d-tiles" target="_blank" rel="noopener">Google Photorealistic Tiles</a> token courtesy of <a href="https://ion.cesium.com/" target="_blank" rel="noopener">Cesium Ion</a>.<br/>
+			<label>time of day: <input id="hour" type="range" min="0" max="24" value="0" step="0.01" style="pointer-events: all; vertical-align: middle;"></label>
 		</div>
 
 		<div id="credits">
@@ -44,13 +45,23 @@
 			<a href="https://ion.cesium.com/" target="_blank" rel="noopener"><img src="./textures/cesiumion.png" /></a>
 		</div>
 
+		<!-- "three/examples/" import map entry required by 3d-tiles-renderer -->
 		<script type="importmap">
 			{
 				"imports": {
 					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/",
 					"three/examples/": "./",
-					"3d-tiles-renderer": "https://cdn.jsdelivr.net/npm/3d-tiles-renderer@0.4.8/src/index.js",
-					"3d-tiles-renderer/plugins": "https://cdn.jsdelivr.net/npm/3d-tiles-renderer@0.4.8/src/plugins/index.js"
+					"3d-tiles-renderer": "https://cdn.jsdelivr.net/npm/3d-tiles-renderer@0.4.23/build/index.js",
+					"3d-tiles-renderer/core/plugins": "https://cdn.jsdelivr.net/npm/3d-tiles-renderer@0.4.23/build/index.core-plugins.js",
+					"3d-tiles-renderer/three/plugins": "https://cdn.jsdelivr.net/npm/3d-tiles-renderer@0.4.23/build/index.three-plugins.js",
+					"postprocessing": "https://cdn.jsdelivr.net/npm/postprocessing@6.39.0/build/index.js",
+					"@takram/three-clouds": "https://cdn.jsdelivr.net/npm/@takram/three-clouds@0.7.3/build/index.js",
+					"@takram/three-atmosphere": "https://cdn.jsdelivr.net/npm/@takram/three-atmosphere@0.17.1/build/index.js",
+					"@takram/three-geospatial": "https://cdn.jsdelivr.net/npm/@takram/three-geospatial@0.7.1/build/index.js",
+					"@takram/three-geospatial/shaders": "https://cdn.jsdelivr.net/npm/@takram/three-geospatial@0.7.1/build/shaders.js",
+					"@takram/three-geospatial-effects": "https://cdn.jsdelivr.net/npm/@takram/three-geospatial-effects@0.6.1/build/index.js",
+					"@takram/three-atmosphere/shaders/bruneton": "https://cdn.jsdelivr.net/npm/@takram/three-atmosphere@0.17.1/build/shaders/bruneton.js"
 				}
 			}
 		</script>
@@ -58,9 +69,25 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
-			import { TilesRenderer, GlobeControls } from '3d-tiles-renderer';
-			import { CesiumIonAuthPlugin, GLTFExtensionsPlugin, TilesFadePlugin, UpdateOnChangePlugin } from '3d-tiles-renderer/plugins';
+			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { toCreasedNormals } from 'three/addons/utils/BufferGeometryUtils.js';
+			import { TilesRenderer, GlobeControls, CAMERA_FRAME } from '3d-tiles-renderer';
+			import { CesiumIonAuthPlugin } from '3d-tiles-renderer/core/plugins';
+			import { GLTFExtensionsPlugin, TilesFadePlugin, UpdateOnChangePlugin } from '3d-tiles-renderer/three/plugins';
+
+			import { EffectMaterial, EffectPass, NormalPass, SMAAEffect } from 'postprocessing';
+			import {
+				CloudsEffect,
+				CLOUD_SHAPE_TEXTURE_SIZE,
+				CLOUD_SHAPE_DETAIL_TEXTURE_SIZE,
+				DEFAULT_LOCAL_WEATHER_URL,
+				DEFAULT_SHAPE_URL,
+				DEFAULT_SHAPE_DETAIL_URL,
+				DEFAULT_TURBULENCE_URL
+			} from '@takram/three-clouds';
+			import { AerialPerspectiveEffect, PrecomputedTexturesGenerator, getSunDirectionECEF } from '@takram/three-atmosphere';
+			import { STBNLoader, DEFAULT_STBN_URL } from '@takram/three-geospatial';
+			import { DitheringEffect, LensFlareEffect } from '@takram/three-geospatial-effects';
 
 			// Ion key provided by Cesium for use on threejs.org
 			// A personal Cesium Ion key can be used for development.
@@ -68,49 +95,263 @@
 
 			let camera, scene, renderer;
 			let tiles, controls;
+			let clouds, aerialPerspective;
+			let _prevTime = 0, _deltaTime = 0;
 
 			init();
 
-			function init() {
+			async function init() {
 
 				// camera
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100 );
-				camera.position.set( - 1, 1, 1 ).normalize().multiplyScalar( 10 );
-				camera.position.set( - 8000000, 10000000, - 14720000 );
-				camera.lookAt( 0, 0, 0 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 1e6 );
 
 				// scene
 				scene = new THREE.Scene();
 
 				// renderer
-				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
+				renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setAnimationLoop( animate );
+				renderer.toneMapping = THREE.AgXToneMapping;
+				renderer.toneMappingExposure = 10;
 				document.body.appendChild( renderer.domElement );
 
 				// loader
 				const dracoLoader = new DRACOLoader();
-				dracoLoader.setDecoderPath( 'jsm/libs/draco/' );
+				dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
 				dracoLoader.setDecoderConfig( { type: 'js' } );
 
+				const DEG2RAD = Math.PI / 180;
+
 				// tiles
+				class TileCreasedNormalsPlugin {
+
+					processTileModel( scene ) {
+
+						scene.traverse( ( mesh ) => {
+
+							if ( mesh.geometry ) {
+
+								mesh.geometry = toCreasedNormals( mesh.geometry, 30 * DEG2RAD );
+
+							}
+
+						} );
+
+					}
+
+				}
+
 				tiles = new TilesRenderer();
 				tiles.registerPlugin( new CesiumIonAuthPlugin( { apiToken: ION_KEY, assetId: '2275207', autoRefreshToken: true } ) );
 				tiles.registerPlugin( new GLTFExtensionsPlugin( { dracoLoader } ) );
+				tiles.registerPlugin( new TileCreasedNormalsPlugin() );
 				tiles.registerPlugin( new TilesFadePlugin() );
 				tiles.registerPlugin( new UpdateOnChangePlugin() );
 				tiles.setCamera( camera );
 				tiles.setResolutionFromRenderer( camera, renderer );
+
 				scene.add( tiles.group );
 
-				// rotate the globe so the north pole is up
-				tiles.group.rotation.x = - Math.PI / 2;
+				// position camera above Tokyo
+				tiles.ellipsoid.getObjectFrame(
+					35.6812 * DEG2RAD, 139.80 * DEG2RAD, 500,
+					- 90 * DEG2RAD, - 10 * DEG2RAD, 0,
+					camera.matrix, CAMERA_FRAME
+				);
+				camera.matrix.decompose( camera.position, camera.quaternion, camera.scale );
 
 				// controls
-				controls = new GlobeControls( scene, camera, renderer.domElement, tiles );
+				controls = new GlobeControls( scene, camera, renderer.domElement );
+				controls.setEllipsoid( tiles.ellipsoid, tiles.group );
 				controls.enableDamping = true;
 
+				// Workaround: adjustHeight causes camera drift as tiles load.
+				// Disable until first user interaction.
+				controls.adjustHeight = false;
+
+				function enableAdjustHeight() {
+
+					controls.adjustHeight = true;
+					renderer.domElement.removeEventListener( 'pointerdown', enableAdjustHeight );
+					renderer.domElement.removeEventListener( 'wheel', enableAdjustHeight );
+
+				}
+
+				renderer.domElement.addEventListener( 'pointerdown', enableAdjustHeight );
+				renderer.domElement.addEventListener( 'wheel', enableAdjustHeight );
+
+				// sun direction
+				const sunDirection = new THREE.Vector3();
+				const params = { hourUTC: 0 }; // 0:00 UTC = 9:00 AM Tokyo
+
+				function updateSunDirection() {
+
+					const ms = params.hourUTC * 3600000;
+					const date = new Date( Date.UTC( 2024, 2, 1 ) + ms );
+					getSunDirectionECEF( date, sunDirection );
+					aerialPerspective.sunDirection.copy( sunDirection );
+					clouds.sunDirection.copy( sunDirection );
+
+				}
+
+				// aerial perspective (sky + atmosphere + deferred lighting)
+				aerialPerspective = new AerialPerspectiveEffect( camera );
+				aerialPerspective.sky = true;
+				aerialPerspective.sunLight = true;
+				aerialPerspective.skyLight = true;
+
+				const normalPass = new NormalPass( scene, camera );
+				aerialPerspective.normalBuffer = normalPass.texture;
+
+				// clouds
+				clouds = new CloudsEffect( camera );
+				clouds.coverage = 0.3;
+				clouds.localWeatherVelocity.set( 0.001, 0 );
+				clouds.shadow.farScale = 0.25;
+				clouds.shadow.maxFar = 1e5;
+				clouds.shadow.cascadeCount = 2;
+				clouds.shadow.mapSize.set( 512, 512 );
+				clouds.shadow.splitMode = 'practical';
+				clouds.shadow.splitLambda = 0.71;
+
+				// sync cloud shadows to atmosphere
+				clouds.events.addEventListener( 'change', ( event ) => {
+
+					if ( event.property === 'atmosphereOverlay' ) aerialPerspective.overlay = clouds.atmosphereOverlay;
+					if ( event.property === 'atmosphereShadow' ) aerialPerspective.shadow = clouds.atmosphereShadow;
+					if ( event.property === 'atmosphereShadowLength' ) aerialPerspective.shadowLength = clouds.atmosphereShadowLength;
+
+				} );
+
+				// adapter: bridges pmndrs postprocessing passes to renderer.setEffects()
+
+				class EffectPassAdapter {
+
+					constructor( pass ) {
+
+						this.pass = pass;
+						this.needsSwap = pass.needsSwap !== false;
+						this.enabled = true;
+						this._initialized = false;
+
+					}
+
+					render( renderer, writeBuffer, readBuffer ) {
+
+						if ( ! this._initialized ) {
+
+							this.pass.initialize( renderer, false, THREE.HalfFloatType );
+							this.pass.setSize( readBuffer.width, readBuffer.height );
+
+							if ( readBuffer.depthTexture && this.pass.setDepthTexture ) {
+
+								this.pass.setDepthTexture( readBuffer.depthTexture );
+
+							}
+
+							this._initialized = true;
+
+						}
+
+						if ( this.pass.fullscreenMaterial instanceof EffectMaterial ) {
+
+							this.pass.fullscreenMaterial.adoptCameraSettings( camera );
+
+						}
+
+						this.pass.render( renderer, readBuffer, writeBuffer, _deltaTime );
+
+					}
+
+					setSize( width, height ) {
+
+						if ( this._initialized ) this.pass.setSize( width, height );
+
+					}
+
+				}
+
+				// postprocessing
+				renderer.setEffects( [
+					new EffectPassAdapter( normalPass ),
+					new EffectPassAdapter( new EffectPass( camera, clouds, aerialPerspective ) ),
+					new EffectPassAdapter( new EffectPass( camera, new LensFlareEffect() ) ),
+					new EffectPassAdapter( new EffectPass( camera, new SMAAEffect() ) ),
+					new EffectPassAdapter( new EffectPass( camera, new DitheringEffect() ) ),
+				] );
+
+				// generate precomputed atmosphere textures on GPU
+				const texturesGenerator = new PrecomputedTexturesGenerator( renderer );
+				const textures = await texturesGenerator.update();
+				Object.assign( aerialPerspective, textures );
+				Object.assign( clouds, textures );
+
+				// load cloud textures
+				const textureLoader = new THREE.TextureLoader();
+
+				function loadCloudTexture( url, property ) {
+
+					textureLoader.load( url, ( texture ) => {
+
+						texture.minFilter = THREE.LinearMipMapLinearFilter;
+						texture.magFilter = THREE.LinearFilter;
+						texture.wrapS = THREE.RepeatWrapping;
+						texture.wrapT = THREE.RepeatWrapping;
+						texture.colorSpace = THREE.NoColorSpace;
+						texture.needsUpdate = true;
+						clouds[ property ] = texture;
+
+					} );
+
+				}
+
+				loadCloudTexture( DEFAULT_LOCAL_WEATHER_URL, 'localWeatherTexture' );
+				loadCloudTexture( DEFAULT_TURBULENCE_URL, 'turbulenceTexture' );
+
+				function loadData3DTexture( url, size, property ) {
+
+					fetch( url ).then( res => res.arrayBuffer() ).then( buffer => {
+
+						const data = new Uint8Array( buffer );
+						const texture = new THREE.Data3DTexture( data, size, size, size );
+						texture.format = THREE.RedFormat;
+						texture.minFilter = THREE.LinearFilter;
+						texture.magFilter = THREE.LinearFilter;
+						texture.wrapS = THREE.RepeatWrapping;
+						texture.wrapT = THREE.RepeatWrapping;
+						texture.wrapR = THREE.RepeatWrapping;
+						texture.colorSpace = THREE.NoColorSpace;
+						texture.needsUpdate = true;
+						clouds[ property ] = texture;
+
+					} );
+
+				}
+
+				loadData3DTexture( DEFAULT_SHAPE_URL, CLOUD_SHAPE_TEXTURE_SIZE, 'shapeTexture' );
+				loadData3DTexture( DEFAULT_SHAPE_DETAIL_URL, CLOUD_SHAPE_DETAIL_TEXTURE_SIZE, 'shapeDetailTexture' );
+
+				new STBNLoader().load( DEFAULT_STBN_URL, ( texture ) => {
+
+					clouds.stbnTexture = texture;
+					aerialPerspective.stbnTexture = texture;
+
+				} );
+
+				// initial sun position
+				updateSunDirection();
+
+				document.getElementById( 'hour' ).addEventListener( 'input', ( e ) => {
+
+					params.hourUTC = parseFloat( e.target.value );
+					updateSunDirection();
+
+				} );
+
+				// start rendering
+				renderer.setAnimationLoop( animate );
+
 				window.addEventListener( 'resize', onWindowResize );
 				onWindowResize();
 
@@ -127,7 +368,10 @@
 
 			}
 
-			function animate() {
+			function animate( time ) {
+
+				_deltaTime = ( time - _prevTime ) / 1000;
+				_prevTime = time;
 
 				controls.update();
 				tiles.update();
diff --git a/src/renderers/common/Info.js b/src/renderers/common/Info.js
index 396b0683ccc1c1..b863e79a65627e 100644
--- a/src/renderers/common/Info.js
+++ b/src/renderers/common/Info.js
@@ -3,7 +3,7 @@ import {
 	ByteType, UnsignedByteType, ShortType, UnsignedShortType, HalfFloatType,
 	IntType, UnsignedIntType, FloatType,
 	AlphaFormat, RedFormat, RedIntegerFormat, DepthFormat, DepthStencilFormat,
-	RGBFormat,
+	RGFormat, RGIntegerFormat, RGBFormat, RGBIntegerFormat,
 	UnsignedShort4444Type, UnsignedShort5551Type,
 	UnsignedInt248Type, UnsignedInt5999Type, UnsignedInt101111Type
 } from '../../constants.js';
@@ -386,7 +386,8 @@ class Info {
 		let channels = 4; // RGBA default
 
 		if ( texture.format === AlphaFormat || texture.format === RedFormat || texture.format === RedIntegerFormat || texture.format === DepthFormat || texture.format === DepthStencilFormat ) channels = 1;
-		else if ( texture.format === RGBFormat ) channels = 3;
+		else if ( texture.format === RGFormat || texture.format === RGIntegerFormat ) channels = 2;
+		else if ( texture.format === RGBFormat || texture.format === RGBIntegerFormat ) channels = 3;
 
 		let bytesPerPixel = bytesPerChannel * channels;
 
diff --git a/src/renderers/webgl-fallback/utils/WebGLTextureUtils.js b/src/renderers/webgl-fallback/utils/WebGLTextureUtils.js
index 5fbf87aeedee4a..498114e1560ce7 100644
--- a/src/renderers/webgl-fallback/utils/WebGLTextureUtils.js
+++ b/src/renderers/webgl-fallback/utils/WebGLTextureUtils.js
@@ -181,11 +181,7 @@ class WebGLTextureUtils {
 			if ( glType === gl.FLOAT ) internalFormat = gl.R32F;
 			if ( glType === gl.HALF_FLOAT ) internalFormat = gl.R16F;
 			if ( glType === gl.UNSIGNED_BYTE ) internalFormat = gl.R8;
-			if ( glType === gl.UNSIGNED_SHORT ) internalFormat = gl.R16;
-			if ( glType === gl.UNSIGNED_INT ) internalFormat = gl.R32UI;
-			if ( glType === gl.BYTE ) internalFormat = gl.R8I;
-			if ( glType === gl.SHORT ) internalFormat = gl.R16I;
-			if ( glType === gl.INT ) internalFormat = gl.R32I;
+			if ( glType === gl.BYTE ) internalFormat = gl.R8_SNORM;
 
 		}
 
@@ -205,11 +201,7 @@ class WebGLTextureUtils {
 			if ( glType === gl.FLOAT ) internalFormat = gl.RG32F;
 			if ( glType === gl.HALF_FLOAT ) internalFormat = gl.RG16F;
 			if ( glType === gl.UNSIGNED_BYTE ) internalFormat = gl.RG8;
-			if ( glType === gl.UNSIGNED_SHORT ) internalFormat = gl.RG16;
-			if ( glType === gl.UNSIGNED_INT ) internalFormat = gl.RG32UI;
-			if ( glType === gl.BYTE ) internalFormat = gl.RG8I;
-			if ( glType === gl.SHORT ) internalFormat = gl.RG16I;
-			if ( glType === gl.INT ) internalFormat = gl.RG32I;
+			if ( glType === gl.BYTE ) internalFormat = gl.RG8_SNORM;
 
 		}
 
@@ -230,13 +222,8 @@ class WebGLTextureUtils {
 
 			if ( glType === gl.FLOAT ) internalFormat = gl.RGB32F;
 			if ( glType === gl.HALF_FLOAT ) internalFormat = gl.RGB16F;
-			if ( glType === gl.UNSIGNED_BYTE ) internalFormat = gl.RGB8;
-			if ( glType === gl.UNSIGNED_SHORT ) internalFormat = gl.RGB16;
-			if ( glType === gl.UNSIGNED_INT ) internalFormat = gl.RGB32UI;
-			if ( glType === gl.BYTE ) internalFormat = gl.RGB8I;
-			if ( glType === gl.SHORT ) internalFormat = gl.RGB16I;
-			if ( glType === gl.INT ) internalFormat = gl.RGB32I;
 			if ( glType === gl.UNSIGNED_BYTE ) internalFormat = ( transfer === SRGBTransfer ) ? gl.SRGB8 : gl.RGB8;
+			if ( glType === gl.BYTE ) internalFormat = gl.RGB8_SNORM;
 			if ( glType === gl.UNSIGNED_SHORT_5_6_5 ) internalFormat = gl.RGB565;
 			if ( glType === gl.UNSIGNED_SHORT_5_5_5_1 ) internalFormat = gl.RGB5_A1;
 			if ( glType === gl.UNSIGNED_SHORT_4_4_4_4 ) internalFormat = gl.RGB4;
@@ -262,13 +249,8 @@ class WebGLTextureUtils {
 
 			if ( glType === gl.FLOAT ) internalFormat = gl.RGBA32F;
 			if ( glType === gl.HALF_FLOAT ) internalFormat = gl.RGBA16F;
-			if ( glType === gl.UNSIGNED_BYTE ) internalFormat = gl.RGBA8;
-			if ( glType === gl.UNSIGNED_SHORT ) internalFormat = gl.RGBA16;
-			if ( glType === gl.UNSIGNED_INT ) internalFormat = gl.RGBA32UI;
-			if ( glType === gl.BYTE ) internalFormat = gl.RGBA8I;
-			if ( glType === gl.SHORT ) internalFormat = gl.RGBA16I;
-			if ( glType === gl.INT ) internalFormat = gl.RGBA32I;
 			if ( glType === gl.UNSIGNED_BYTE ) internalFormat = ( transfer === SRGBTransfer ) ? gl.SRGB8_ALPHA8 : gl.RGBA8;
+			if ( glType === gl.BYTE ) internalFormat = gl.RGBA8_SNORM;
 			if ( glType === gl.UNSIGNED_SHORT_4_4_4_4 ) internalFormat = gl.RGBA4;
 			if ( glType === gl.UNSIGNED_SHORT_5_5_5_1 ) internalFormat = gl.RGB5_A1;