rayzee 5.5.0 → 5.6.1

package/src/Stages/AutoExposure.js

@@ -1,11 +1,25 @@
 import { Fn, wgslFn, vec4, float, int, uint, ivec2, uvec2, uniform, If, max,
-	textureLoad, textureStore, workgroupArray, workgroupBarrier, localId, workgroupId,
-	attributeArray } from 'three/tsl';
+	textureLoad, textureStore, workgroupBarrier, localId, workgroupId,
+	attributeArray, atomicAdd, atomicStore, atomicLoad, Loop } from 'three/tsl';
 import { RenderTarget, TextureNode, StorageTexture, ReadbackBuffer } from 'three/webgpu';
 import { FloatType, RGBAFormat, NearestFilter } from 'three';
 import { RenderStage, StageExecutionMode } from '../Pipeline/RenderStage.js';
 import { luminance } from '../TSL/Common.js';
 
+// ── Histogram constants ────────────────────────────────────
+const NUM_BINS = 256;
+const MIN_LOG_LUM = - 8.0; // ln(~0.00034)  — very dark
+const MAX_LOG_LUM = 6.0; // ln(~403)     — bright specular
+const LOG_LUM_RANGE = MAX_LOG_LUM - MIN_LOG_LUM; // 14 nats ≈ 20 stops
+const BIN_WIDTH = LOG_LUM_RANGE / NUM_BINS;
+const WEIGHT_SCALE = 10000; // float → uint quantisation for metering weights
+
+// ── Metering ────────────────────────────────────────────────
+// Centre-weighted Gaussian is the only mode — spot and uniform
+// are unnecessary given the percentile clipping already handles
+// extreme highlights/shadows. The centerWeight uniform controls
+// the Gaussian falloff steepness.
+
 // ── wgslFn helpers ──────────────────────────────────────────
 
 /**
@@ -45,31 +59,30 @@ const adaptExposure = /*@__PURE__*/ wgslFn( `
 ` );
 
 /**
- * WebGPU Auto-Exposure Stage (Fully Compute Shader)
+ * WebGPU Auto-Exposure Stage — Histogram-Based with Centre-Weighted Metering
  *
  * GPU-based automatic exposure control with human eye-like adaptation.
- * Uses hierarchical luminance reduction and asymmetric temporal smoothing.
+ * Uses histogram-based luminance analysis with percentile clipping
+ * and centre-weighted spatial metering for robust exposure estimation.
  *
  * Algorithm:
- *   1. Downsample (compute): full res → 64×64 log-luminance
- *   2. Reduction (compute): parallel reduction 64×64 → 1×1 via shared memory
- *      Single workgroup of 256 threads, each loads 16 texels.
- *      Computes geometric mean: exp(Σlog(L) / N)
- *   3. Adaptation (compute): temporal smoothing with prev exposure; writes
- *      vec4(exposure, luminance, targetExposure, 1) into a 1-element storage buffer.
- *   4. Async readback via `renderer.getArrayBufferAsync(attr, ReadbackBuffer)`:
- *      the ReadbackBuffer pools its staging GPUBuffer across frames, avoiding
- *      per-frame allocation churn. Apply to renderer.toneMappingExposure.
- *
- * WebGPU advantage: async readback (no GPU pipeline stall).
- * 1-frame delay is imperceptible for slowly-changing exposure.
+ *   1. Downsample (compute): full res → 64×64 log-luminance grid
+ *   2. Histogram (compute): build 256-bin weighted histogram from the 64×64
+ *      grid. Single workgroup of 256 threads; each loads 16 texels, applies
+ *      centre-weighted Gaussian, and scatters via atomicAdd into a storage buffer.
+ *   3. Analyze (compute): single thread reads the histogram, computes CDF,
+ *      extracts percentile-clipped weighted mean (ignoring bottom/top
+ *      extremes), and writes the geometric mean to a 1×1 storage texture.
+ *   4. Adaptation (compute): temporal smoothing with prev exposure; writes
+ *      vec4(exposure, luminance, targetExposure, 1) into a 1-element buffer.
+ *   5. Async readback via `renderer.getArrayBufferAsync(attr, ReadbackBuffer)`.
  *
  * Execution: ALWAYS
  *
  * Events listened:
  *   pipeline:reset              — reset temporal history
  *   autoexposure:toggle         — enable/disable
- *   autoexposure:updateParameters — update key value, speeds, bounds
+ *   autoexposure:updateParameters — update key value, speeds, bounds, percentiles
  *
  * Textures published:  (none — publishes state, not textures)
  * Textures read:       edgeFiltering:output > asvgf:output > pathtracer:color
@@ -101,6 +114,12 @@ export class AutoExposure extends RenderStage {
 		this.isFirstFrameU = uniform( 1.0 ); // 1.0 = true
 		this.previousExposureU = uniform( options.initialExposure ?? 1.0 );
 
+		// ── Histogram & metering uniforms ────────────────
+
+		this.lowPercentileU = uniform( options.lowPercentile ?? 0.10 );
+		this.highPercentileU = uniform( options.highPercentile ?? 0.90 );
+		this.centerWeightU = uniform( options.centerWeight ?? 8.0 );
+
 		// ── Input resolution uniforms (for downsample compute) ──
 
 		this.inputResW = uniform( 1 );
@@ -149,14 +168,14 @@ export class AutoExposure extends RenderStage {
 		this._downsampleStorageTex.minFilter = NearestFilter;
 		this._downsampleStorageTex.magFilter = NearestFilter;
 
-		// 1×1 StorageTexture for compute reduction output
+		// 1×1 StorageTexture for histogram analysis output
 		this._reductionStorageTex = new StorageTexture( 1, 1 );
 		this._reductionStorageTex.type = FloatType;
 		this._reductionStorageTex.format = RGBAFormat;
 		this._reductionStorageTex.minFilter = NearestFilter;
 		this._reductionStorageTex.magFilter = NearestFilter;
 
-		// 1×1 RenderTarget — readable copy of reduction output (cross-dispatch reads
+		// 1×1 RenderTarget — readable copy of analysis output (cross-dispatch reads
 		// from StorageTexture return zeros — must copy to RenderTarget first)
 		this._reductionReadTarget = new RenderTarget( 1, 1, rtOpts );
 
@@ -167,6 +186,9 @@ export class AutoExposure extends RenderStage {
 		this._readbackBuffer = new ReadbackBuffer( 16 );
 		this._readbackBuffer.name = 'AutoExposureAdaptation';
 
+		// ── Histogram storage buffer (atomic uint, 256 bins) ─────
+		this._histogramBuffer = attributeArray( NUM_BINS, 'uint' ).toAtomic();
+
 	}
 
 	// ──────────────────────────────────────────────────
@@ -176,7 +198,8 @@ export class AutoExposure extends RenderStage {
 	_buildCompute() {
 
 		this._buildDownsampleCompute();
-		this._buildReductionCompute();
+		this._buildHistogramCompute();
+		this._buildHistogramAnalyzeCompute();
 		this._buildAdaptationCompute();
 
 	}
@@ -257,94 +280,146 @@ export class AutoExposure extends RenderStage {
 	}
 
 	/**
-	 * Reduction: parallel compute 64×64 → 1×1
+	 * Histogram Build (compute): 64×64 downsample → 256-bin weighted histogram
 	 *
-	 * Single workgroup of 256 threads. Each thread loads 16 texels
-	 * from the 64×64 downsample texture, then participates in a
-	 * shared-memory parallel reduction.
+	 * Single workgroup of 256 threads. Each thread processes 16 texels from
+	 * the downsample grid, applies spatial metering weight, and atomically
+	 * scatters into the histogram storage buffer.
 	 *
-	 * Output: StorageTexture(1×1) = vec4(geometricMean, count, avgLogLum, 1)
+	 * Phase 1: Clear all 256 bins (one per thread)
+	 * Phase 2: Build histogram with metering-weighted atomic scatter
 	 */
-	_buildReductionCompute() {
+	_buildHistogramCompute() {
 
 		const downsampleTex = this._downsampleTarget.texture;
-		const outputTex = this._reductionStorageTex;
+		const histogram = this._histogramBuffer;
+		const centerWeight = this.centerWeightU;
 
 		const WGSIZE = 256;
 		const TEXELS_PER_THREAD = 16; // 4096 / 256
 		const TEX_SIZE = 64;
 
-		const sharedLogSum = workgroupArray( 'float', WGSIZE );
-		const sharedCount = workgroupArray( 'float', WGSIZE );
-
-		const reductionFn = Fn( () => {
+		const computeFn = Fn( () => {
 
 			const tid = localId.x;
 
-			// ── Phase 1: Each thread loads and sums 16 texels ──
-
-			const threadLogSum = float( 0.0 ).toVar();
-			const threadCount = float( 0.0 ).toVar();
+			// ── Phase 1: Clear histogram ──────────────────
+			atomicStore( histogram.element( tid ), uint( 0 ) );
+			workgroupBarrier();
 
-			for ( let i = 0; i < TEXELS_PER_THREAD; i ++ ) {
+			// ── Phase 2: Build histogram ──────────────────
+			for ( let t = 0; t < TEXELS_PER_THREAD; t ++ ) {
 
-				const linearIdx = tid.mul( TEXELS_PER_THREAD ).add( i );
+				const linearIdx = tid.mul( TEXELS_PER_THREAD ).add( t );
 				const px = linearIdx.mod( TEX_SIZE );
 				const py = linearIdx.div( TEX_SIZE );
+
 				const data = textureLoad( downsampleTex, ivec2( int( px ), int( py ) ) );
+				const logLumSum = data.x;
+				const validCount = data.y;
+
+				If( validCount.greaterThan( 0.0 ), () => {
 
-				// data.x = logLumSum, data.y = validCount from downsample
-				threadLogSum.addAssign( data.x );
-				threadCount.addAssign( data.y );
+					// Per-cell average log-luminance (natural log, matches downsample output)
+					const avgLogLum = logLumSum.div( validCount );
+
+					// Map to histogram bin [0, NUM_BINS-1]
+					const normalized = avgLogLum.sub( float( MIN_LOG_LUM ) ).div( float( LOG_LUM_RANGE ) );
+					const bin = uint( normalized.mul( float( NUM_BINS ) ).floor().clamp( 0.0, float( NUM_BINS - 1 ) ) );
+
+					// ── Centre-weighted metering ──────────
+					const uvx = float( px ).add( 0.5 ).div( float( TEX_SIZE ) );
+					const uvy = float( py ).add( 0.5 ).div( float( TEX_SIZE ) );
+					const dx = uvx.sub( 0.5 );
+					const dy = uvy.sub( 0.5 );
+					const dist2 = dx.mul( dx ).add( dy.mul( dy ) );
+
+					// Gaussian falloff: 1.0 at centre, ~0.02 at corners
+					const weight = dist2.mul( centerWeight ).negate().exp();
+
+					const weightUint = uint( weight.mul( float( WEIGHT_SCALE ) ) );
+					atomicAdd( histogram.element( bin ), weightUint );
+
+				} );
 
 			}
 
-			sharedLogSum.element( tid ).assign( threadLogSum );
-			sharedCount.element( tid ).assign( threadCount );
+		} );
 
-			// ── Phase 2: Parallel reduction (8 steps) ──────────
-			// JS for-loop unrolls at shader build time
+		this._histogramComputeNode = computeFn().compute( [ 1, 1, 1 ], [ WGSIZE, 1, 1 ] );
 
-			for ( let stride = WGSIZE / 2; stride >= 1; stride = Math.floor( stride / 2 ) ) {
+	}
 
-				workgroupBarrier();
+	/**
+	 * Histogram Analysis (compute): extract percentile-clipped geometric mean
+	 *
+	 * Single thread. Reads the 256-bin histogram, computes the CDF, clips
+	 * the bottom and top percentiles, and computes the weighted geometric
+	 * mean of luminance within the accepted range.
+	 *
+	 * Output: StorageTexture(1×1) = vec4(geometricMean, totalCount, avgLogLum, 1)
+	 */
+	_buildHistogramAnalyzeCompute() {
 
-				If( tid.lessThan( uint( stride ) ), () => {
+		const histogram = this._histogramBuffer;
+		const outputTex = this._reductionStorageTex;
+		const lowPercentile = this.lowPercentileU;
+		const highPercentile = this.highPercentileU;
 
-					sharedLogSum.element( tid ).addAssign(
-						sharedLogSum.element( tid.add( uint( stride ) ) )
-					);
-					sharedCount.element( tid ).addAssign(
-						sharedCount.element( tid.add( uint( stride ) ) )
-					);
+		const computeFn = Fn( () => {
 
-				} );
+			// ── Pass 1: compute total weight ──────────────
+			const totalWeight = float( 0.0 ).toVar();
 
-			}
+			Loop( NUM_BINS, ( { i } ) => {
 
-			// ── Phase 3: Thread 0 writes final result ──────────
+				totalWeight.addAssign( float( atomicLoad( histogram.element( i ) ) ) );
 
-			workgroupBarrier();
+			} );
+
+			// Percentile thresholds (in quantised weight units)
+			const lowThreshold = totalWeight.mul( lowPercentile );
+			const highThreshold = totalWeight.mul( highPercentile );
+
+			// ── Pass 2: percentile-clipped weighted mean ──
+			const cumWeight = float( 0.0 ).toVar();
+			const logLumAccum = float( 0.0 ).toVar();
+			const validWeight = float( 0.0 ).toVar();
+			const prevCum = float( 0.0 ).toVar();
+
+			Loop( NUM_BINS, ( { i } ) => {
+
+				const binWeight = float( atomicLoad( histogram.element( i ) ) );
+				prevCum.assign( cumWeight );
+				cumWeight.addAssign( binWeight );
 
-			If( tid.equal( uint( 0 ) ), () => {
+				// Include bin if it overlaps the [lowThreshold, highThreshold] range
+				If( prevCum.lessThan( highThreshold ).and( cumWeight.greaterThan( lowThreshold ) ), () => {
 
-				const totalLogSum = sharedLogSum.element( uint( 0 ) );
-				const totalCount = sharedCount.element( uint( 0 ) );
-				const safeCount = max( totalCount, float( 1.0 ) );
-				const avgLogLum = totalLogSum.div( safeCount );
-				const geometricMean = avgLogLum.exp();
+					// Bin centre in log-luminance space
+					const binCenter = float( MIN_LOG_LUM ).add(
+						float( i ).add( 0.5 ).mul( float( BIN_WIDTH ) )
+					);
+					logLumAccum.addAssign( binCenter.mul( binWeight ) );
+					validWeight.addAssign( binWeight );
 
-				textureStore(
-					outputTex,
-					uvec2( uint( 0 ), uint( 0 ) ),
-					vec4( geometricMean, totalCount, avgLogLum, 1.0 )
-				).toWriteOnly();
+				} );
 
 			} );
 
+			const safeWeight = max( validWeight, float( 1.0 ) );
+			const avgLogLum = logLumAccum.div( safeWeight );
+			const geometricMean = avgLogLum.exp();
+
+			textureStore(
+				outputTex,
+				uvec2( uint( 0 ), uint( 0 ) ),
+				vec4( geometricMean, totalWeight, avgLogLum, 1.0 )
+			).toWriteOnly();
+
 		} );
 
-		this._reductionComputeNode = reductionFn().compute( 1, [ WGSIZE, 1, 1 ] );
+		this._histogramAnalyzeNode = computeFn().compute( 1, [ 1, 1, 1 ] );
 
 	}
 
@@ -352,7 +427,7 @@ export class AutoExposure extends RenderStage {
 	 * Adaptation (compute): temporal smoothing
 	 *
 	 * Single-thread compute dispatch [1, 1, 1], workgroup [1, 1, 1].
-	 * Reads geometric mean from reduction RenderTarget, applies asymmetric
+	 * Reads geometric mean from analysis RenderTarget, applies asymmetric
 	 * temporal smoothing using the previous-exposure uniform, and writes
 	 * vec4(exposure, luminance, targetExposure, 1) into a 1-element storage
 	 * buffer which the CPU reads via getArrayBufferAsync + ReadbackBuffer.
@@ -372,7 +447,7 @@ export class AutoExposure extends RenderStage {
 
 		const computeFn = Fn( () => {
 
-			// Read geometric mean from reduction result (1×1 RenderTarget)
+			// Read geometric mean from histogram analysis result (1×1 RenderTarget)
 			const geoMean = textureLoad( reductionTex, ivec2( int( 0 ), int( 0 ) ) ).x;
 
 			const result = adaptExposure(
@@ -404,16 +479,7 @@ export class AutoExposure extends RenderStage {
 
 		} );
 
-		this.on( 'autoexposure:updateParameters', ( data ) => {
-
-			if ( ! data ) return;
-			if ( data.keyValue !== undefined ) this.keyValueU.value = data.keyValue;
-			if ( data.minExposure !== undefined ) this.minExposureU.value = data.minExposure;
-			if ( data.maxExposure !== undefined ) this.maxExposureU.value = data.maxExposure;
-			if ( data.adaptSpeedBright !== undefined ) this.adaptSpeedBrightU.value = data.adaptSpeedBright;
-			if ( data.adaptSpeedDark !== undefined ) this.adaptSpeedDarkU.value = data.adaptSpeedDark;
-
-		} );
+		this.on( 'autoexposure:updateParameters', ( data ) => data && this.updateParameters( data ) );
 
 	}
 
@@ -450,12 +516,16 @@ export class AutoExposure extends RenderStage {
 		this.renderer.compute( this._downsampleComputeNode );
 		this.renderer.copyTextureToTexture( this._downsampleStorageTex, this._downsampleTarget.texture );
 
-		// ── Pass 2: Reduction 64×64 → 1×1 (compute) ────────
+		// ── Pass 2: Histogram build (compute) ───────────────
+
+		this.renderer.compute( this._histogramComputeNode );
+
+		// ── Pass 3: Histogram analysis → 1×1 result ─────────
 
-		this.renderer.compute( this._reductionComputeNode );
+		this.renderer.compute( this._histogramAnalyzeNode );
 		this.renderer.copyTextureToTexture( this._reductionStorageTex, this._reductionReadTarget.texture );
 
-		// ── Pass 3: Temporal adaptation (compute) ───────────
+		// ── Pass 4: Temporal adaptation (compute) ───────────
 
 		this._reductionReadTexNode.value = this._reductionReadTarget.texture;
 		this.renderer.compute( this._adaptationComputeNode );
@@ -578,7 +648,7 @@ export class AutoExposure extends RenderStage {
 
 	setSize( /* width, height */ ) {
 
-		// Downsample and reduction targets are fixed-size (64×64 → 1×1)
+		// Downsample and histogram targets are fixed-size (64×64 → 256 bins → 1×1)
 		// No resizing needed — the downsample compute shader reads input
 		// resolution from uniforms and computes block sizes dynamically.
 
@@ -611,19 +681,25 @@ export class AutoExposure extends RenderStage {
 		if ( params.maxExposure !== undefined ) this.maxExposureU.value = params.maxExposure;
 		if ( params.adaptSpeedBright !== undefined ) this.adaptSpeedBrightU.value = params.adaptSpeedBright;
 		if ( params.adaptSpeedDark !== undefined ) this.adaptSpeedDarkU.value = params.adaptSpeedDark;
+		if ( params.lowPercentile !== undefined ) this.lowPercentileU.value = params.lowPercentile;
+		if ( params.highPercentile !== undefined ) this.highPercentileU.value = params.highPercentile;
+		if ( params.centerWeight !== undefined ) this.centerWeightU.value = params.centerWeight;
 
 	}
 
 	dispose() {
 
 		this._downsampleComputeNode?.dispose();
-		this._reductionComputeNode?.dispose();
+		this._histogramComputeNode?.dispose();
+		this._histogramAnalyzeNode?.dispose();
 		this._adaptationComputeNode?.dispose();
 		this._downsampleTarget?.dispose();
 		this._downsampleStorageTex?.dispose();
 		this._reductionStorageTex?.dispose();
 		this._reductionReadTarget?.dispose();
 		this._readbackBuffer?.dispose();
+		this._inputTexNode?.dispose();
+		this._reductionReadTexNode?.dispose();
 
 	}
 

package/src/Stages/BilateralFilter.js

@@ -321,6 +321,8 @@ export class BilateralFilter extends RenderStage {
 		this._computeNodeB?.dispose();
 		this._storageTexA?.dispose();
 		this._storageTexB?.dispose();
+		this._readTexNode?.dispose();
+		this._normalDepthTexNode?.dispose();
 
 	}
 

package/src/Stages/Display.js

@@ -110,6 +110,7 @@ export class Display extends RenderStage {
 
 	dispose() {
 
+		this._displayTexNode?.dispose();
 		this.displayMaterial?.dispose();
 		// QuadMesh extends Mesh — no dispose method; material already disposed.
 		this.displayQuad = null;

package/src/Stages/EdgeFilter.js

@@ -275,6 +275,7 @@ export class EdgeFilter extends RenderStage {
 		this._computeNode?.dispose();
 		this._outputStorageTex?.dispose();
 		this.outputTarget?.dispose();
+		this._inputTexNode?.dispose();
 
 	}
 

package/src/Stages/MotionVector.js

@@ -547,6 +547,7 @@ export class MotionVector extends RenderStage {
 		this._worldSpaceStorageTex?.dispose();
 		this.screenSpaceTarget?.dispose();
 		this.worldSpaceTarget?.dispose();
+		this._normalDepthTexNode?.dispose();
 
 	}
 

package/src/Stages/SSRC.js

@@ -194,6 +194,12 @@ export class SSRC extends RenderStage {
 		this._prevNDTexA.dispose();
 		this._prevNDTexB.dispose();
 		this._outputTex.dispose();
+		this._colorTexNode?.dispose();
+		this._ndTexNode?.dispose();
+		this._motionTexNode?.dispose();
+		this._readCacheTexNode?.dispose();
+		this._readPrevNDTexNode?.dispose();
+		this._readPass1CacheTexNode?.dispose();
 
 	}
 

package/src/Stages/Variance.js

@@ -371,6 +371,9 @@ export class Variance extends RenderStage {
 		this._computeNodeB?.dispose();
 		this._storageTexA?.dispose();
 		this._storageTexB?.dispose();
+		this._colorTexNode?.dispose();
+		this._readTexNodeA?.dispose();
+		this._readTexNodeB?.dispose();
 
 	}
 

package/src/managers/DenoisingManager.js

@@ -54,6 +54,17 @@ export class DenoisingManager extends EventDispatcher {
 		this._lastRenderWidth = 0;
 		this._lastRenderHeight = 0;
 
+		// Track the current completion-chain listener so it can be removed on re-trigger
+		this._pendingStartUpscaler = null;
+
+		// Bound event forwarding handlers (stored for removal on re-setup / dispose)
+		this._denoiserStartHandler = null;
+		this._denoiserEndHandler = null;
+		this._upscalerResChangedHandler = null;
+		this._upscalerStartHandler = null;
+		this._upscalerProgressHandler = null;
+		this._upscalerEndHandler = null;
+
 	}
 
 	_createDenoiserCanvas( mainCanvas ) {
@@ -146,11 +157,13 @@ export class DenoisingManager extends EventDispatcher {
 
 		this.denoiser.enabled = DEFAULT_STATE.enableOIDN;
 
-		// Forward lifecycle events
-		this.denoiser.addEventListener( 'start', () =>
-			this.dispatchEvent( { type: EngineEvents.DENOISING_START } ) );
-		this.denoiser.addEventListener( 'end', () =>
-			this.dispatchEvent( { type: EngineEvents.DENOISING_END } ) );
+		// Forward lifecycle events (store refs for removal on re-setup / dispose)
+		this._denoiserStartHandler = () =>
+			this.dispatchEvent( { type: EngineEvents.DENOISING_START } );
+		this._denoiserEndHandler = () =>
+			this.dispatchEvent( { type: EngineEvents.DENOISING_END } );
+		this.denoiser.addEventListener( 'start', this._denoiserStartHandler );
+		this.denoiser.addEventListener( 'end', this._denoiserEndHandler );
 
 	}
 
@@ -189,15 +202,19 @@ export class DenoisingManager extends EventDispatcher {
 
 		this.upscaler.enabled = DEFAULT_STATE.enableUpscaler || false;
 
-		// Forward lifecycle events
-		this.upscaler.addEventListener( 'resolution_changed', ( e ) =>
-			this.dispatchEvent( { type: 'resolution_changed', width: e.width, height: e.height } ) );
-		this.upscaler.addEventListener( 'start', () =>
-			this.dispatchEvent( { type: EngineEvents.UPSCALING_START } ) );
-		this.upscaler.addEventListener( 'progress', ( e ) =>
-			this.dispatchEvent( { type: EngineEvents.UPSCALING_PROGRESS, progress: e.progress } ) );
-		this.upscaler.addEventListener( 'end', () =>
-			this.dispatchEvent( { type: EngineEvents.UPSCALING_END } ) );
+		// Forward lifecycle events (store refs for removal on re-setup / dispose)
+		this._upscalerResChangedHandler = ( e ) =>
+			this.dispatchEvent( { type: 'resolution_changed', width: e.width, height: e.height } );
+		this._upscalerStartHandler = () =>
+			this.dispatchEvent( { type: EngineEvents.UPSCALING_START } );
+		this._upscalerProgressHandler = ( e ) =>
+			this.dispatchEvent( { type: EngineEvents.UPSCALING_PROGRESS, progress: e.progress } );
+		this._upscalerEndHandler = () =>
+			this.dispatchEvent( { type: EngineEvents.UPSCALING_END } );
+		this.upscaler.addEventListener( 'resolution_changed', this._upscalerResChangedHandler );
+		this.upscaler.addEventListener( 'start', this._upscalerStartHandler );
+		this.upscaler.addEventListener( 'progress', this._upscalerProgressHandler );
+		this.upscaler.addEventListener( 'end', this._upscalerEndHandler );
 
 	}
 
@@ -353,8 +370,23 @@ export class DenoisingManager extends EventDispatcher {
 	 * @param {Function}         params.isStillComplete   - () => boolean, guard for async race
 	 * @param {import('../Pipeline/PipelineContext.js').PipelineContext} params.context
 	 */
+	_cleanupCompletionListener() {
+
+		if ( this._pendingStartUpscaler && this.denoiser ) {
+
+			this.denoiser.removeEventListener( 'end', this._pendingStartUpscaler );
+
+		}
+
+		this._pendingStartUpscaler = null;
+
+	}
+
 	onRenderComplete( { isStillComplete, context } ) {
 
+		// Remove any stale completion-chain listener from a previous render cycle
+		this._cleanupCompletionListener();
+
 		// Show post-process canvas if any post-process is enabled
 		if ( ( this.denoiser?.enabled || this.upscaler?.enabled ) && this.denoiserCanvas ) {
 
@@ -365,6 +397,8 @@ export class DenoisingManager extends EventDispatcher {
 		// Chain: denoise first (if enabled), then upscale (if enabled)
 		const startUpscaler = () => {
 
+			this._pendingStartUpscaler = null;
+
 			if ( ! isStillComplete() ) return;
 
 			if ( this.upscaler?.enabled ) {
@@ -377,6 +411,7 @@ export class DenoisingManager extends EventDispatcher {
 
 		if ( this.denoiser?.enabled ) {
 
+			this._pendingStartUpscaler = startUpscaler;
 			this.denoiser.addEventListener( 'end', startUpscaler, { once: true } );
 			this.denoiser.start();
 
@@ -401,6 +436,9 @@ export class DenoisingManager extends EventDispatcher {
 	 */
 	abort( mainCanvas ) {
 
+		// Remove stale completion-chain listener before aborting
+		this._cleanupCompletionListener();
+
 		if ( mainCanvas ) mainCanvas.style.opacity = '1';
 
 		if ( this.upscaler ) this.upscaler.abort();
@@ -416,8 +454,13 @@ export class DenoisingManager extends EventDispatcher {
 
 	dispose() {
 
+		// Remove pending completion-chain listener
+		this._cleanupCompletionListener();
+
 		if ( this.denoiser ) {
 
+			if ( this._denoiserStartHandler ) this.denoiser.removeEventListener( 'start', this._denoiserStartHandler );
+			if ( this._denoiserEndHandler ) this.denoiser.removeEventListener( 'end', this._denoiserEndHandler );
 			this.denoiser.dispose();
 			this.denoiser = null;
 
@@ -425,11 +468,22 @@ export class DenoisingManager extends EventDispatcher {
 
 		if ( this.upscaler ) {
 
+			if ( this._upscalerResChangedHandler ) this.upscaler.removeEventListener( 'resolution_changed', this._upscalerResChangedHandler );
+			if ( this._upscalerStartHandler ) this.upscaler.removeEventListener( 'start', this._upscalerStartHandler );
+			if ( this._upscalerProgressHandler ) this.upscaler.removeEventListener( 'progress', this._upscalerProgressHandler );
+			if ( this._upscalerEndHandler ) this.upscaler.removeEventListener( 'end', this._upscalerEndHandler );
 			this.upscaler.dispose();
 			this.upscaler = null;
 
 		}
 
+		this._denoiserStartHandler = null;
+		this._denoiserEndHandler = null;
+		this._upscalerResChangedHandler = null;
+		this._upscalerStartHandler = null;
+		this._upscalerProgressHandler = null;
+		this._upscalerEndHandler = null;
+
 		if ( this.denoiserCanvas?.parentNode ) {
 
 			this.denoiserCanvas.parentNode.removeChild( this.denoiserCanvas );