diff --git a/examples/files.json b/examples/files.json
index 0173905083689c..6341bfa5de2e2f 100644
--- a/examples/files.json
+++ b/examples/files.json
@@ -485,6 +485,7 @@
 		"webgpu_volume_cloud",
 		"webgpu_volume_lighting",
 		"webgpu_volume_lighting_rectarea",
+		"webgpu_volume_lighting_traa",
 		"webgpu_volume_perlin",
 		"webgpu_water",
 		"webgpu_xr_rollercoaster",
diff --git a/examples/jsm/tsl/display/RetroPassNode.js b/examples/jsm/tsl/display/RetroPassNode.js
index 2f6a9cb10e463f..bcf42e8b9de77d 100644
--- a/examples/jsm/tsl/display/RetroPassNode.js
+++ b/examples/jsm/tsl/display/RetroPassNode.js
@@ -1,5 +1,5 @@
-import { MeshBasicNodeMaterial, PassNode, UnsignedByteType, NearestFilter } from 'three/webgpu';
-import { float, vec2, vec4, Fn, uv, varying, cameraProjectionMatrix, cameraViewMatrix, positionWorld, screenSize, materialColor, replaceDefaultUV } from 'three/tsl';
+import { MeshBasicNodeMaterial, PassNode, UnsignedByteType, NearestFilter, CubeMapNode, MeshPhongNodeMaterial } from 'three/webgpu';
+import { float, vec2, vec4, Fn, uv, varying, cameraProjectionMatrix, cameraViewMatrix, positionWorld, screenSize, materialColor, uint, texture, uniform, context, reflectVector } from 'three/tsl';
 
 const _affineUv = varying( vec2() );
 const _w = varying( float() );
@@ -50,7 +50,8 @@ class RetroPassNode extends PassNode {
 		super( PassNode.COLOR, scene, camera );
 
 		const {
-			affineDistortion = null
+			affineDistortion = null,
+			filterTextures = false
 		} = options;
 
 		this.setResolutionScale( .25 );
@@ -61,6 +62,8 @@ class RetroPassNode extends PassNode {
 
 		this.affineDistortionNode = affineDistortion;
 
+		this.filterTextures = filterTextures;
+
 		this._materialCache = new Map();
 
 	}
@@ -80,36 +83,125 @@ class RetroPassNode extends PassNode {
 
 		renderer.setRenderObjectFunction( ( object, scene, camera, geometry, material, ...params ) => {
 
-			let retroMaterial = this._materialCache.get( material );
+			const retroMaterialData = this._materialCache.get( material );
+
+			let retroMaterial;
+
+			if ( retroMaterialData === undefined || retroMaterialData.version !== material.version ) {
+
+				if ( retroMaterialData !== undefined ) {
+
+					retroMaterialData.material.dispose();
+
+				}
+
+				if ( material.isMeshBasicMaterial || material.isMeshBasicNodeMaterial ) {
+
+					retroMaterial = new MeshBasicNodeMaterial();
 
-			if ( retroMaterial === undefined ) {
+				} else {
 
-				retroMaterial = new MeshBasicNodeMaterial();
+					retroMaterial = new MeshPhongNodeMaterial();
+
+				}
 
 				retroMaterial.colorNode = material.colorNode || null;
 				retroMaterial.opacityNode = material.opacityNode || null;
 				retroMaterial.positionNode = material.positionNode || null;
 				retroMaterial.vertexNode = material.vertexNode || _clipSpaceRetro;
 
+				let colorNode = material.colorNode || materialColor;
+
+				if ( material.isMeshStandardNodeMaterial || material.isMeshStandardMaterial ) {
+
+					const envMap = material.envMap || scene.environment;
+
+					if ( envMap ) {
+
+						const reflection = new CubeMapNode( texture( envMap ) );
+
+						let metalness;
+
+						if ( material.metalnessNode ) {
+
+							metalness = material.metalnessNode;
+
+						} else {
+
+							metalness = uniform( material.metalness ).onRenderUpdate( ( { material } ) => material.metalness );
+
+							if ( material.metalnessMap ) {
+
+								const textureUniform = texture( material.metalnessMap ).onRenderUpdate( ( { material } ) => material.metalnessMap );
+
+								metalness = metalness.mul( textureUniform.b );
+
+							}
+
+						}
+
+						colorNode = metalness.mix( colorNode, reflection );
+
+					}
+
+				}
+
+				retroMaterial.colorNode = colorNode;
+
+				//
+
+				const contextData = {};
+
 				if ( this.affineDistortionNode ) {
 
-					retroMaterial.colorNode = replaceDefaultUV( () => {
+					contextData.getUV = ( texture ) => {
+
+						let finalUV;
+
+						if ( texture.isCubeTextureNode ) {
 
-						return this.affineDistortionNode.mix( uv(), _affineUv.div( _w ) );
+							finalUV = reflectVector;
 
-					}, retroMaterial.colorNode || materialColor );
+						} else {
+
+							finalUV = this.affineDistortionNode.mix( uv(), _affineUv.div( _w ) );
+
+						}
+
+						return finalUV;
+
+					};
 
 				}
 
-				this._materialCache.set( material, retroMaterial );
+				if ( this.filterTextures !== true ) {
+
+					contextData.getTextureLevel = () => uint( 0 );
+
+				}
+
+				retroMaterial.contextNode = context( contextData );
+
+				//
+
+				this._materialCache.set( material, {
+					material: retroMaterial,
+					version: material.version
+				} );
+
+			} else {
+
+				retroMaterial = retroMaterialData.material;
 
 			}
 
-			retroMaterial.map = material.map;
-			retroMaterial.color = material.color;
-			retroMaterial.opacity = material.opacity;
-			retroMaterial.transparent = material.transparent;
-			retroMaterial.side = material.side;
+			for ( const property in material ) {
+
+				if ( retroMaterial[ property ] === undefined ) continue;
+
+				retroMaterial[ property ] = material[ property ];
+
+			}
 
 			renderer.renderObject( object, scene, camera, geometry, retroMaterial, ...params );
 
@@ -131,7 +223,12 @@ class RetroPassNode extends PassNode {
 
 		super.dispose();
 
-		this._materialCache.forEach( material => material.dispose() );
+		this._materialCache.forEach( ( data ) => {
+
+			data.material.dispose();
+
+		} );
+
 		this._materialCache.clear();
 
 	}
diff --git a/examples/screenshots/webgpu_postprocessing_retro.jpg b/examples/screenshots/webgpu_postprocessing_retro.jpg
index 1585d761881f50..39626e76a86680 100644
Binary files a/examples/screenshots/webgpu_postprocessing_retro.jpg and b/examples/screenshots/webgpu_postprocessing_retro.jpg differ
diff --git a/examples/screenshots/webgpu_volume_lighting_traa.jpg b/examples/screenshots/webgpu_volume_lighting_traa.jpg
new file mode 100644
index 00000000000000..00898d2d2f9b1e
Binary files /dev/null and b/examples/screenshots/webgpu_volume_lighting_traa.jpg differ
diff --git a/examples/webgpu_postprocessing_retro.html b/examples/webgpu_postprocessing_retro.html
index 0b64507a806465..75377766b97b5d 100644
--- a/examples/webgpu_postprocessing_retro.html
+++ b/examples/webgpu_postprocessing_retro.html
@@ -35,7 +35,7 @@
 		<script type="module">
 
 			import * as THREE from 'three/webgpu';
-			import { pass, mix, mul, oneMinus, positionLocal, smoothstep, texture, time, rotateUV, Fn, uv, vec2, vec3, vec4, uniform, posterize, floor, float, sin, fract, dot, step, color, normalWorld, length, atan, replaceDefaultUV } from 'three/tsl';
+			import { pass, mix, mul, oneMinus, positionLocal, smoothstep, texture, time, rotateUV, Fn, uv, vec2, vec3, vec4, uniform, posterize, floor, float, sin, fract, dot, step, color, normalWorld, length, atan, replaceDefaultUV, screenSize } from 'three/tsl';
 			import { retroPass } from 'three/addons/tsl/display/RetroPassNode.js';
 			import { bayerDither } from 'three/addons/tsl/math/Bayer.js';
 			import { scanlines, vignette, colorBleeding, barrelUV } from 'three/addons/tsl/display/CRT.js';
@@ -43,10 +43,13 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
 
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, scene, renderer, renderPipeline, controls;
+			let environment;
+			let currentModel;
 
 			init();
 
@@ -136,17 +139,90 @@
 				const gltfLoader = new GLTFLoader();
 				const textureLoader = new THREE.TextureLoader();
 
-				// baked model
+				// Model
 
-				gltfLoader.load(
-					'./models/gltf/coffeeMug.glb',
-					( gltf ) => {
+				const models = {
+					'Coffee Mug': 'models/gltf/coffeeMug.glb',
+					'Damaged Helmet': 'models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf',
+				};
 
-        				gltf.scene.getObjectByName( 'baked' ).material.map.anisotropy = 8;
-						scene.add( gltf.scene );
+				function loadModel( name ) {
+
+					function loadEnvironment() {
+
+						if ( environment ) return;
+
+						environment = new HDRLoader()
+							.setPath( 'textures/equirectangular/' )
+							.load( 'venice_sunset_1k.hdr', ( texture ) => {
+
+								texture.mapping = THREE.EquirectangularReflectionMapping;
+								scene.environment = texture;
+
+								// re-invalidate retro pass textures
+
+								retro.dispose();
+
+							} );
 
 					}
-				);
+
+					if ( currentModel ) {
+
+						scene.remove( currentModel );
+						currentModel.traverse( ( child ) => {
+
+							if ( child.isMesh ) {
+
+								child.geometry.dispose();
+								child.material.dispose();
+
+							}
+
+						} );
+
+					}
+
+					gltfLoader.load( models[ name ], ( gltf ) => {
+
+						currentModel = gltf.scene;
+						currentModel.position.set( 0, 0, 0 );
+
+						smoke.visible = false;
+
+						if ( name === 'Damaged Helmet' ) {
+
+							loadEnvironment();
+
+							currentModel.scale.setScalar( 3 );
+							currentModel.position.y = 1;
+
+						} else if ( name === 'Coffee Mug' ) {
+
+							smoke.visible = true;
+
+						}
+
+						scene.add( currentModel );
+
+					} );
+
+				}
+
+				loadModel( 'Coffee Mug' );
+
+				// lighting
+
+				const ambientLight = new THREE.AmbientLight( 0x404040, 2 );
+				scene.add( ambientLight );
+
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );
+				directionalLight.position.set( 5, 10, 5 );
+				scene.add( directionalLight );
+
+				const pointLight = new THREE.PointLight( 0xff6600, 5, 20 );
+				pointLight.position.set( - 3, 3, 2 );
+				scene.add( pointLight );
 
 				// geometry
 
@@ -235,9 +311,9 @@
 				const colorDepthSteps = uniform( 32 );
 
 				// CRT effect parameters (subtle for PS1 look)
-				const scanlineIntensity = uniform( 0.08 ); // subtle scanlines
-				const scanlineCount = uniform( 60 ); // match vertical resolution
-				const scanlineSpeed = uniform( 0.05 ); // slow scroll
+				const scanlineIntensity = uniform( 0.3 ); // subtle scanlines
+				const scanlineDensity = uniform( 1 ); // 0.1-1: normalized scanline density (1 = full screen resolution)
+				const scanlineSpeed = uniform( 0.0 ); // no scanline movement
 				const vignetteIntensity = uniform( 0.3 ); // subtle vignette
 				const bleeding = uniform( 0.001 ); // minimal bleeding
 				const curvature = uniform( 0.02 ); // subtle curve
@@ -252,13 +328,15 @@
 				const distortedUV = barrelUV( curvature );
 				const distortedDelta = circle( curvature.add( .1 ).mul( 10 ), 1 ).mul( curvature ).mul( .05 );
 
-				let retroPipeline = retroPass( scene, camera, { affineDistortion } );
+				const retro = retroPass( scene, camera, { affineDistortion } );
+
+				let retroPipeline = retro;
 				retroPipeline = replaceDefaultUV( distortedUV, retroPipeline );
 				retroPipeline = colorBleeding( retroPipeline, bleeding.add( distortedDelta ) );
 				retroPipeline = bayerDither( retroPipeline, colorDepthSteps );
 				retroPipeline = posterize( retroPipeline, colorDepthSteps );
 				retroPipeline = vignette( retroPipeline, vignetteIntensity, 0.6 );
-				retroPipeline = scanlines( retroPipeline, scanlineIntensity, scanlineCount, scanlineSpeed );
+				retroPipeline = scanlines( retroPipeline, scanlineIntensity, screenSize.y.mul( scanlineDensity ), scanlineSpeed );
 
 				renderPipeline.outputNode = retroPipeline;
 
@@ -278,6 +356,8 @@
 
 				const gui = renderer.inspector.createParameters( 'Settings' );
 
+				gui.add( { model: 'Coffee Mug' }, 'model', Object.keys( models ) ).name( 'Model' ).onChange( loadModel );
+
 				gui.add( { enabled: true }, 'enabled' ).onChange( v => {
 
 					renderPipeline.outputNode = v ? retroPipeline : defaultPass;
@@ -288,11 +368,16 @@
 				gui.add( curvature, 'value', 0, 0.2, 0.01 ).name( 'Curvature' );
 				gui.add( colorDepthSteps, 'value', 4, 32, 1 ).name( 'Color Depth' );
 				gui.add( scanlineIntensity, 'value', 0, 1, 0.01 ).name( 'Scanlines' );
-				gui.add( scanlineCount, 'value', 20, 480, 1 ).name( 'Scanline Count' );
+				gui.add( scanlineDensity, 'value', 0.02, 1, 0.01 ).name( 'Scanline Density' );
 				gui.add( scanlineSpeed, 'value', 0, .1, 0.01 ).name( 'Scanline Speed' );
 				gui.add( vignetteIntensity, 'value', 0, 1, 0.01 ).name( 'Vignette' );
 				gui.add( bleeding, 'value', 0, 0.005, 0.001 ).name( 'Color Bleeding' );
 				gui.add( affineDistortion, 'value', 0, 1 ).name( 'Affine Distortion' );
+				gui.add( retro, 'filterTextures' ).name( 'Filter Textures' ).onChange( () => {
+
+					retro.dispose();
+
+				} );
 
 				window.addEventListener( 'resize', onWindowResize );
 
diff --git a/examples/webgpu_volume_lighting.html b/examples/webgpu_volume_lighting.html
index 8e97b4db49a9de..ecdfb1e9370cdf 100644
--- a/examples/webgpu_volume_lighting.html
+++ b/examples/webgpu_volume_lighting.html
@@ -239,12 +239,12 @@
 				const gui = renderer.inspector.createParameters( 'Volumetric Lighting' );
 
 				const rayMarching = gui.addFolder( 'Ray Marching' );
-				rayMarching.add( params, 'resolution', .1, .5 ).onChange( ( resolution ) => {
+				rayMarching.add( params, 'resolution', .1, 1 ).onChange( ( resolution ) => {
 
 					volumetricPass.setResolutionScale( resolution );
 
 				} );
-				rayMarching.add( volumetricMaterial, 'steps', 2, 12 ).name( 'step count' );
+				rayMarching.add( volumetricMaterial, 'steps', 2, 16 ).name( 'step count' );
 				rayMarching.add( denoiseStrength, 'value', 0, 1 ).name( 'denoise strength' );
 				rayMarching.add( params, 'denoise' ).onChange( ( denoise ) => {
 
diff --git a/examples/webgpu_volume_lighting_rectarea.html b/examples/webgpu_volume_lighting_rectarea.html
index f674d5baf58470..7b44b5fadb7a7f 100644
--- a/examples/webgpu_volume_lighting_rectarea.html
+++ b/examples/webgpu_volume_lighting_rectarea.html
@@ -261,12 +261,12 @@
 				const gui = renderer.inspector.createParameters( 'Volumetric Lighting' );
 
 				const rayMarching = gui.addFolder( 'Ray Marching' );
-				rayMarching.add( params, 'resolution', .1, .5 ).onChange( ( resolution ) => {
+				rayMarching.add( params, 'resolution', .1, 1 ).onChange( ( resolution ) => {
 
 					volumetricPass.setResolutionScale( resolution );
 
 				} );
-				rayMarching.add( volumetricMaterial, 'steps', 2, 12 ).name( 'step count' );
+				rayMarching.add( volumetricMaterial, 'steps', 2, 16 ).name( 'step count' );
 				rayMarching.add( denoiseStrength, 'value', 0, 1 ).name( 'denoise strength' );
 				rayMarching.add( params, 'denoise' ).onChange( ( denoise ) => {
 
diff --git a/examples/webgpu_volume_lighting_traa.html b/examples/webgpu_volume_lighting_traa.html
new file mode 100644
index 00000000000000..c6e0cbee2fd578
--- /dev/null
+++ b/examples/webgpu_volume_lighting_traa.html
@@ -0,0 +1,338 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgpu - volumetric lighting using TRAA</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="example.css">
+	</head>
+
+	<body>
+
+		<div id="info">
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
+
+			<div class="title-wrapper">
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Volumetric Lighting using TRAA</span>
+			</div>
+
+			<small>Compatible with native lights and shadows using TRAA.</small>
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.webgpu.js",
+					"three/webgpu": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.tsl.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three/webgpu';
+			import { vec2, vec3, Fn, texture3D, screenUV, uniform, screenCoordinate, pass, depthPass, mrt, output, velocity, fract, interleavedGradientNoise } from 'three/tsl';
+
+			import { traa } from 'three/addons/tsl/display/TRAANode.js';
+
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
+
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
+			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
+
+			// Halton sequence for temporal offset - matches TRAA's 32-sample Halton jitter
+			// This creates optimal low-discrepancy distribution that accumulates well with TRAA
+			function halton( index, base ) {
+
+				let result = 0;
+				let f = 1;
+
+				while ( index > 0 ) {
+
+					f /= base;
+					result += f * ( index % base );
+					index = Math.floor( index / base );
+
+				}
+
+				return result;
+
+			}
+
+			// Generate 32 Halton offsets (base 2, 3) - same length as TRAA
+			const _haltonOffsets = Array.from(
+				{ length: 32 },
+				( _, i ) => [ halton( i + 1, 2 ), halton( i + 1, 3 ) ]
+			);
+
+			let renderer, scene, camera;
+			let volumetricMesh, teapot, pointLight, spotLight;
+			let renderPipeline;
+			let temporalOffset, temporalRotation, shaderTime;
+			let params;
+
+			init();
+
+			function createTexture3D() {
+
+				let i = 0;
+
+				const size = 128;
+				const data = new Uint8Array( size * size * size );
+
+				const scale = 10;
+				const perlin = new ImprovedNoise();
+
+				const repeatFactor = 5.0;
+
+				for ( let z = 0; z < size; z ++ ) {
+
+					for ( let y = 0; y < size; y ++ ) {
+
+						for ( let x = 0; x < size; x ++ ) {
+
+							const nx = ( x / size ) * repeatFactor;
+							const ny = ( y / size ) * repeatFactor;
+							const nz = ( z / size ) * repeatFactor;
+
+							const noiseValue = perlin.noise( nx * scale, ny * scale, nz * scale );
+
+							data[ i ] = ( 128 + 128 * noiseValue );
+
+							i ++;
+
+						}
+
+					}
+
+				}
+
+				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.unpackAlignment = 1;
+				texture.needsUpdate = true;
+
+				return texture;
+
+			}
+
+			function init() {
+
+				renderer = new THREE.WebGPURenderer();
+				// renderer.setPixelRatio( window.devicePixelRatio ); // Disable DPR for performance
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				renderer.toneMapping = THREE.NeutralToneMapping;
+				renderer.toneMappingExposure = 2;
+				renderer.shadowMap.enabled = true;
+				renderer.inspector = new Inspector();
+				document.body.appendChild( renderer.domElement );
+
+				scene = new THREE.Scene();
+
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.set( - 8, 1, - 6 );
+
+				const controls = new OrbitControls( camera, renderer.domElement );
+				controls.maxDistance = 40;
+				controls.minDistance = 2;
+
+				// Volumetric Fog Area
+
+				const noiseTexture3D = createTexture3D();
+
+				const smokeAmount = uniform( 2 );
+
+				const volumetricMaterial = new THREE.VolumeNodeMaterial();
+				volumetricMaterial.steps = 12;
+				volumetricMaterial.transparent = true;
+				volumetricMaterial.blending = THREE.AdditiveBlending;
+
+				// Temporal dithering using Interleaved Gradient Noise (IGN) + Halton sequence
+				temporalOffset = uniform( 0 );
+				temporalRotation = uniform( 0 );
+				shaderTime = uniform( 0 );
+
+				const temporalJitter2D = vec2( temporalOffset, temporalRotation );
+				volumetricMaterial.offsetNode = fract( interleavedGradientNoise( screenCoordinate.add( temporalJitter2D.mul( 100 ) ) ).add( temporalOffset ) );
+				volumetricMaterial.scatteringNode = Fn( ( { positionRay } ) => {
+
+					const timeScaled = vec3( shaderTime, 0, shaderTime.mul( .3 ) );
+
+					const sampleGrain = ( scale, timeScale = 1 ) => texture3D( noiseTexture3D, positionRay.add( timeScaled.mul( timeScale ) ).mul( scale ).mod( 1 ), 0 ).r.add( .5 );
+
+					let density = sampleGrain( .1 );
+					density = density.mul( sampleGrain( .05, 1 ) );
+					density = density.mul( sampleGrain( .02, 2 ) );
+
+					return smokeAmount.mix( 1, density );
+
+				} );
+
+				volumetricMesh = new THREE.Mesh( new THREE.BoxGeometry( 20, 10, 20 ), volumetricMaterial );
+				volumetricMesh.receiveShadow = true;
+				volumetricMesh.position.y = 2;
+				scene.add( volumetricMesh );
+
+				// Objects
+
+				teapot = new THREE.Mesh( new TeapotGeometry( .8, 18 ), new THREE.MeshStandardMaterial( { color: 0xffffff, side: THREE.DoubleSide } ) );
+				teapot.castShadow = true;
+				scene.add( teapot );
+
+				const floor = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshStandardMaterial( { color: 0xffffff } ) );
+				floor.rotation.x = - Math.PI / 2;
+				floor.position.y = - 3;
+				floor.receiveShadow = true;
+				scene.add( floor );
+
+				// Lights
+
+				pointLight = new THREE.PointLight( 0xf9bb50, 3, 100 );
+				pointLight.castShadow = true;
+				pointLight.position.set( 0, 1.4, 0 );
+				scene.add( pointLight );
+
+				spotLight = new THREE.SpotLight( 0xffffff, 100 );
+				spotLight.position.set( 2.5, 5, 2.5 );
+				spotLight.angle = Math.PI / 6;
+				spotLight.penumbra = 1;
+				spotLight.decay = 2;
+				spotLight.distance = 0;
+				spotLight.map = new THREE.TextureLoader().setPath( 'textures/' ).load( 'colors.png' );
+				spotLight.castShadow = true;
+				spotLight.shadow.intensity = .98;
+				spotLight.shadow.mapSize.width = 1024;
+				spotLight.shadow.mapSize.height = 1024;
+				spotLight.shadow.camera.near = 1;
+				spotLight.shadow.camera.far = 15;
+				spotLight.shadow.focus = 1;
+				scene.add( spotLight );
+
+				// Render Pipeline
+
+				renderPipeline = new THREE.RenderPipeline( renderer );
+
+				const volumetricIntensity = uniform( 1 );
+
+				// Pre-Pass: Opaque objects only (volumetric is transparent, excluded automatically)
+
+				const prePass = depthPass( scene, camera );
+				prePass.name = 'Pre Pass';
+				prePass.transparent = false;
+
+				const prePassDepth = prePass.getTextureNode( 'depth' ).toInspector( 'Depth', () => prePass.getLinearDepthNode() );
+
+				// Apply depth to volumetric material for proper occlusion
+
+				volumetricMaterial.depthNode = prePassDepth.sample( screenUV );
+
+				// Scene Pass: Full scene including volumetric with MRT
+
+				const scenePass = pass( scene, camera ).toInspector( 'Scene' );
+				scenePass.name = 'Scene Pass';
+				scenePass.setMRT( mrt( {
+					output: output,
+					velocity: velocity
+				} ) );
+
+				const scenePassColor = scenePass.getTextureNode().toInspector( 'Output' );
+				const scenePassVelocity = scenePass.getTextureNode( 'velocity' ).toInspector( 'Velocity' );
+
+				// TRAA with scene pass depth/velocity (includes volumetric)
+
+				const traaPass = traa( scenePassColor, prePassDepth, scenePassVelocity, camera );
+
+				renderPipeline.outputNode = traaPass;
+
+				// GUI
+
+				params = {
+					traa: true,
+					animated: true
+				};
+
+				const gui = renderer.inspector.createParameters( 'Volumetric Lighting' );
+
+				gui.add( params, 'animated' );
+				gui.add( params, 'traa' ).name( 'TRAA' ).onChange( updatePostProcessing );
+
+				const rayMarching = gui.addFolder( 'Ray Marching' );
+				rayMarching.add( volumetricMaterial, 'steps', 2, 16, 1 ).name( 'step count' );
+
+				function updatePostProcessing() {
+
+					renderPipeline.outputNode = params.traa ? traaPass : scenePassColor;
+					renderPipeline.needsUpdate = true;
+
+				}
+
+				const lighting = gui.addFolder( 'Lighting / Scene' );
+				lighting.add( pointLight, 'intensity', 0, 6 ).name( 'light intensity' );
+				lighting.add( spotLight, 'intensity', 0, 200 ).name( 'spot intensity' );
+				lighting.add( volumetricIntensity, 'value', 0, 2 ).name( 'volumetric intensity' );
+				lighting.add( smokeAmount, 'value', 0, 3 ).name( 'smoke amount' );
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			let frameCount = 0;
+			let animationTime = 0;
+			let lastTime = performance.now();
+
+			function animate() {
+
+				const currentTime = performance.now();
+				const delta = ( currentTime - lastTime ) * 0.001;
+				lastTime = currentTime;
+
+				// Update temporal uniforms - synced with TRAA's Halton sequence for optimal accumulation
+				const haltonIndex = frameCount % 32;
+				temporalOffset.value = _haltonOffsets[ haltonIndex ][ 0 ];
+				temporalRotation.value = _haltonOffsets[ haltonIndex ][ 1 ];
+				frameCount ++;
+
+				if ( params.animated ) {
+
+					animationTime += delta;
+
+				}
+
+				shaderTime.value = animationTime;
+
+				const scale = 2.4;
+
+				pointLight.position.x = Math.sin( animationTime * 0.7 ) * scale;
+				pointLight.position.y = Math.cos( animationTime * 0.5 ) * scale;
+				pointLight.position.z = Math.cos( animationTime * 0.3 ) * scale;
+
+				spotLight.position.x = Math.cos( animationTime * 0.3 ) * scale;
+				spotLight.lookAt( 0, 0, 0 );
+
+				teapot.rotation.y = animationTime * 0.2;
+
+				renderPipeline.render();
+
+			}
+
+		</script>
+
+	</body>
+</html>
diff --git a/src/nodes/accessors/Camera.js b/src/nodes/accessors/Camera.js
index c42d3b6f15ab79..331d331c297a79 100644
--- a/src/nodes/accessors/Camera.js
+++ b/src/nodes/accessors/Camera.js
@@ -6,6 +6,29 @@ import { uniformArray } from './UniformArrayNode.js';
 import { builtin } from './BuiltinNode.js';
 import { screenSize } from '../display/ScreenNode.js';
 
+// Cache node uniforms
+
+let _cameraProjectionMatrixBase = null;
+let _cameraProjectionMatrixArray = null;
+
+let _cameraProjectionMatrixInverseBase = null;
+let _cameraProjectionMatrixInverseArray = null;
+
+let _cameraViewMatrixBase = null;
+let _cameraViewMatrixArray = null;
+
+let _cameraWorldMatrixBase = null;
+let _cameraWorldMatrixArray = null;
+
+let _cameraNormalMatrixBase = null;
+let _cameraNormalMatrixArray = null;
+
+let _cameraPositionBase = null;
+let _cameraPositionArray = null;
+
+let _cameraViewportBase = null;
+let _cameraViewportArray = null;
+
 /**
  * TSL object that represents the current `index` value of the camera if used ArrayCamera.
  *
@@ -50,13 +73,27 @@ export const cameraProjectionMatrix = /*@__PURE__*/ ( Fn( ( { camera } ) => {
 
 		}
 
-		const cameraProjectionMatrices = uniformArray( matrices ).setGroup( renderGroup ).setName( 'cameraProjectionMatrices' );
+		if ( _cameraProjectionMatrixArray === null ) {
+
+			_cameraProjectionMatrixArray = uniformArray( matrices ).setGroup( renderGroup ).setName( 'cameraProjectionMatrices' );
 
-		cameraProjectionMatrix = cameraProjectionMatrices.element( camera.isMultiViewCamera ? builtin( 'gl_ViewID_OVR' ) : cameraIndex ).toConst( 'cameraProjectionMatrix' );
+		} else {
+
+			_cameraProjectionMatrixArray.array = matrices;
+
+		}
+
+		cameraProjectionMatrix = _cameraProjectionMatrixArray.element( camera.isMultiViewCamera ? builtin( 'gl_ViewID_OVR' ) : cameraIndex ).toConst( 'cameraProjectionMatrix' );
 
 	} else {
 
-		cameraProjectionMatrix = uniform( 'mat4' ).setName( 'cameraProjectionMatrix' ).setGroup( renderGroup ).onRenderUpdate( ( { camera } ) => camera.projectionMatrix );
+		if ( _cameraProjectionMatrixBase === null ) {
+
+			_cameraProjectionMatrixBase = uniform( camera.projectionMatrix ).setName( 'cameraProjectionMatrix' ).setGroup( renderGroup ).onRenderUpdate( ( { camera } ) => camera.projectionMatrix );
+
+		}
+
+		cameraProjectionMatrix = _cameraProjectionMatrixBase;
 
 	}
 
@@ -84,13 +121,27 @@ export const cameraProjectionMatrixInverse = /*@__PURE__*/ ( Fn( ( { camera } )
 
 		}
 
-		const cameraProjectionMatricesInverse = uniformArray( matrices ).setGroup( renderGroup ).setName( 'cameraProjectionMatricesInverse' );
+		if ( _cameraProjectionMatrixInverseArray === null ) {
+
+			_cameraProjectionMatrixInverseArray = uniformArray( matrices ).setGroup( renderGroup ).setName( 'cameraProjectionMatricesInverse' );
 
-		cameraProjectionMatrixInverse = cameraProjectionMatricesInverse.element( camera.isMultiViewCamera ? builtin( 'gl_ViewID_OVR' ) : cameraIndex ).toConst( 'cameraProjectionMatrixInverse' );
+		} else {
+
+			_cameraProjectionMatrixInverseArray.array = matrices;
+
+		}
+
+		cameraProjectionMatrixInverse = _cameraProjectionMatrixInverseArray.element( camera.isMultiViewCamera ? builtin( 'gl_ViewID_OVR' ) : cameraIndex ).toConst( 'cameraProjectionMatrixInverse' );
 
 	} else {
 
-		cameraProjectionMatrixInverse = uniform( 'mat4' ).setName( 'cameraProjectionMatrixInverse' ).setGroup( renderGroup ).onRenderUpdate( ( { camera } ) => camera.projectionMatrixInverse );
+		if ( _cameraProjectionMatrixInverseBase === null ) {
+
+			_cameraProjectionMatrixInverseBase = uniform( camera.projectionMatrixInverse ).setName( 'cameraProjectionMatrixInverse' ).setGroup( renderGroup ).onRenderUpdate( ( { camera } ) => camera.projectionMatrixInverse );
+
+		}
+
+		cameraProjectionMatrixInverse = _cameraProjectionMatrixInverseBase;
 
 	}
 
@@ -118,13 +169,27 @@ export const cameraViewMatrix = /*@__PURE__*/ ( Fn( ( { camera } ) => {
 
 		}
 
-		const cameraViewMatrices = uniformArray( matrices ).setGroup( renderGroup ).setName( 'cameraViewMatrices' );
+		if ( _cameraViewMatrixArray === null ) {
+
+			_cameraViewMatrixArray = uniformArray( matrices ).setGroup( renderGroup ).setName( 'cameraViewMatrices' );
 
-		cameraViewMatrix = cameraViewMatrices.element( camera.isMultiViewCamera ? builtin( 'gl_ViewID_OVR' ) : cameraIndex ).toConst( 'cameraViewMatrix' );
+		} else {
+
+			_cameraViewMatrixArray.array = matrices;
+
+		}
+
+		cameraViewMatrix = _cameraViewMatrixArray.element( camera.isMultiViewCamera ? builtin( 'gl_ViewID_OVR' ) : cameraIndex ).toConst( 'cameraViewMatrix' );
 
 	} else {
 
-		cameraViewMatrix = uniform( 'mat4' ).setName( 'cameraViewMatrix' ).setGroup( renderGroup ).onRenderUpdate( ( { camera } ) => camera.matrixWorldInverse );
+		if ( _cameraViewMatrixBase === null ) {
+
+			_cameraViewMatrixBase = uniform( camera.matrixWorldInverse ).setName( 'cameraViewMatrix' ).setGroup( renderGroup ).onRenderUpdate( ( { camera } ) => camera.matrixWorldInverse );
+
+		}
+
+		cameraViewMatrix = _cameraViewMatrixBase;
 
 	}
 
@@ -152,13 +217,27 @@ export const cameraWorldMatrix = /*@__PURE__*/ ( Fn( ( { camera } ) => {
 
 		}
 
-		const cameraWorldMatrices = uniformArray( matrices ).setGroup( renderGroup ).setName( 'cameraWorldMatrices' );
+		if ( _cameraWorldMatrixArray === null ) {
+
+			_cameraWorldMatrixArray = uniformArray( matrices ).setGroup( renderGroup ).setName( 'cameraWorldMatrices' );
 
-		cameraWorldMatrix = cameraWorldMatrices.element( camera.isMultiViewCamera ? builtin( 'gl_ViewID_OVR' ) : cameraIndex ).toConst( 'cameraWorldMatrix' );
+		} else {
+
+			_cameraWorldMatrixArray.array = matrices;
+
+		}
+
+		cameraWorldMatrix = _cameraWorldMatrixArray.element( camera.isMultiViewCamera ? builtin( 'gl_ViewID_OVR' ) : cameraIndex ).toConst( 'cameraWorldMatrix' );
 
 	} else {
 
-		cameraWorldMatrix = uniform( 'mat4' ).setName( 'cameraWorldMatrix' ).setGroup( renderGroup ).onRenderUpdate( ( { camera } ) => camera.matrixWorld );
+		if ( _cameraWorldMatrixBase === null ) {
+
+			_cameraWorldMatrixBase = uniform( camera.matrixWorld ).setName( 'cameraWorldMatrix' ).setGroup( renderGroup ).onRenderUpdate( ( { camera } ) => camera.matrixWorld );
+
+		}
+
+		cameraWorldMatrix = _cameraWorldMatrixBase;
 
 	}
 
@@ -186,13 +265,27 @@ export const cameraNormalMatrix = /*@__PURE__*/ ( Fn( ( { camera } ) => {
 
 		}
 
-		const cameraNormalMatrices = uniformArray( matrices ).setGroup( renderGroup ).setName( 'cameraNormalMatrices' );
+		if ( _cameraNormalMatrixArray === null ) {
+
+			_cameraNormalMatrixArray = uniformArray( matrices ).setGroup( renderGroup ).setName( 'cameraNormalMatrices' );
 
-		cameraNormalMatrix = cameraNormalMatrices.element( camera.isMultiViewCamera ? builtin( 'gl_ViewID_OVR' ) : cameraIndex ).toConst( 'cameraNormalMatrix' );
+		} else {
+
+			_cameraNormalMatrixArray.array = matrices;
+
+		}
+
+		cameraNormalMatrix = _cameraNormalMatrixArray.element( camera.isMultiViewCamera ? builtin( 'gl_ViewID_OVR' ) : cameraIndex ).toConst( 'cameraNormalMatrix' );
 
 	} else {
 
-		cameraNormalMatrix = uniform( 'mat3' ).setName( 'cameraNormalMatrix' ).setGroup( renderGroup ).onRenderUpdate( ( { camera } ) => camera.normalMatrix );
+		if ( _cameraNormalMatrixBase === null ) {
+
+			_cameraNormalMatrixBase = uniform( camera.normalMatrix ).setName( 'cameraNormalMatrix' ).setGroup( renderGroup ).onRenderUpdate( ( { camera } ) => camera.normalMatrix );
+
+		}
+
+		cameraNormalMatrix = _cameraNormalMatrixBase;
 
 	}
 
@@ -220,24 +313,38 @@ export const cameraPosition = /*@__PURE__*/ ( Fn( ( { camera } ) => {
 
 		}
 
-		const cameraPositions = uniformArray( positions ).setGroup( renderGroup ).setName( 'cameraPositions' ).onRenderUpdate( ( { camera }, self ) => {
+		if ( _cameraPositionArray === null ) {
+
+			_cameraPositionArray = uniformArray( positions ).setGroup( renderGroup ).setName( 'cameraPositions' ).onRenderUpdate( ( { camera }, self ) => {
 
-			const subCameras = camera.cameras;
-			const array = self.array;
+				const subCameras = camera.cameras;
+				const array = self.array;
 
-			for ( let i = 0, l = subCameras.length; i < l; i ++ ) {
+				for ( let i = 0, l = subCameras.length; i < l; i ++ ) {
 
-				array[ i ].setFromMatrixPosition( subCameras[ i ].matrixWorld );
+					array[ i ].setFromMatrixPosition( subCameras[ i ].matrixWorld );
 
-			}
+				}
 
-		} );
+			} );
 
-		cameraPosition = cameraPositions.element( camera.isMultiViewCamera ? builtin( 'gl_ViewID_OVR' ) : cameraIndex ).toConst( 'cameraPosition' );
+		} else {
+
+			_cameraPositionArray.array = positions;
+
+		}
+
+		cameraPosition = _cameraPositionArray.element( camera.isMultiViewCamera ? builtin( 'gl_ViewID_OVR' ) : cameraIndex ).toConst( 'cameraPosition' );
 
 	} else {
 
-		cameraPosition = uniform( new Vector3() ).setName( 'cameraPosition' ).setGroup( renderGroup ).onRenderUpdate( ( { camera }, self ) => self.value.setFromMatrixPosition( camera.matrixWorld ) );
+		if ( _cameraPositionBase === null ) {
+
+			_cameraPositionBase = uniform( new Vector3() ).setName( 'cameraPosition' ).setGroup( renderGroup ).onRenderUpdate( ( { camera }, self ) => self.value.setFromMatrixPosition( camera.matrixWorld ) );
+
+		}
+
+		cameraPosition = _cameraPositionBase;
 
 	}
 
@@ -266,14 +373,28 @@ export const cameraViewport = /*@__PURE__*/ ( Fn( ( { camera } ) => {
 
 		}
 
-		const cameraViewports = uniformArray( viewports, 'vec4' ).setGroup( renderGroup ).setName( 'cameraViewports' );
+		if ( _cameraViewportArray === null ) {
+
+			_cameraViewportArray = uniformArray( viewports, 'vec4' ).setGroup( renderGroup ).setName( 'cameraViewports' );
 
-		cameraViewport = cameraViewports.element( cameraIndex ).toConst( 'cameraViewport' );
+		} else {
+
+			_cameraViewportArray.array = viewports;
+
+		}
+
+		cameraViewport = _cameraViewportArray.element( cameraIndex ).toConst( 'cameraViewport' );
 
 	} else {
 
-		// Fallback for single camera
-		cameraViewport = vec4( 0, 0, screenSize.x, screenSize.y ).toConst( 'cameraViewport' );
+		if ( _cameraViewportBase === null ) {
+
+			// Fallback for single camera
+			_cameraViewportBase = vec4( 0, 0, screenSize.x, screenSize.y ).toConst( 'cameraViewport' );
+
+		}
+
+		cameraViewport = _cameraViewportBase;
 
 	}
 
diff --git a/src/nodes/accessors/TextureNode.js b/src/nodes/accessors/TextureNode.js
index 6eaf2ccf66ae55..1f466c1c797bc8 100644
--- a/src/nodes/accessors/TextureNode.js
+++ b/src/nodes/accessors/TextureNode.js
@@ -405,14 +405,18 @@ class TextureNode extends UniformNode {
 
 			} else {
 
-				if ( this.value.compareFunction !== null && this.value.compareFunction !== LessCompare ) {
+				if ( this.value.compareFunction === null || this.value.compareFunction === LessCompare ) {
+
+					compareStepNode = this.compareNode;
+
+				} else {
+
+					compareNode = this.compareNode;
 
 					warnOnce( 'TSL: Only "LessCompare" is supported for depth texture comparison fallback.' );
 
 				}
 
-				compareStepNode = this.compareNode;
-
 			}
 
 		}
diff --git a/src/nodes/accessors/UniformArrayNode.js b/src/nodes/accessors/UniformArrayNode.js
index c21fa795fb812d..e05d8ace7a1fcc 100644
--- a/src/nodes/accessors/UniformArrayNode.js
+++ b/src/nodes/accessors/UniformArrayNode.js
@@ -315,6 +315,8 @@ class UniformArrayNode extends BufferNode {
 		this.bufferCount = length;
 		this.bufferType = paddedType;
 
+		this.update(); // initialize the buffer values
+
 		return super.setup( builder );
 
 	}
diff --git a/test/e2e/puppeteer.js b/test/e2e/puppeteer.js
index d17e72cd02c84f..96452f43847399 100644
--- a/test/e2e/puppeteer.js
+++ b/test/e2e/puppeteer.js
@@ -39,6 +39,7 @@ const exceptionList = [
 	'webgpu_test_memory',
 	'webgpu_texturegrad',
 	'webgpu_tsl_vfx_flames',
+	'webgpu_volume_lighting_traa',
 
 	// Need more time to render
 	'css3d_mixed',