rayzee 5.11.0 → 6.0.1

package/src/index.js

@@ -14,6 +14,9 @@ export { PathTracerApp } from './PathTracerApp.js';
 // Event types
 export { EngineEvents } from './EngineEvents.js';
 
+// Asset URL / cache namespace overrides (call before constructing PathTracerApp)
+export { configureAssets, getAssetConfig } from './AssetConfig.js';
+
 // Configuration defaults and presets
 export {
 	ENGINE_DEFAULTS,
@@ -28,8 +31,8 @@ export {
 	TEXTURE_CONSTANTS,
 	DEFAULT_TEXTURE_MATRIX,
 	MEMORY_CONSTANTS,
-	FINAL_RENDER_CONFIG,
-	PREVIEW_RENDER_CONFIG,
+	PRODUCTION_RENDER_CONFIG,
+	INTERACTIVE_RENDER_CONFIG,
 } from './EngineDefaults.js';
 
 // Settings & managers (for advanced consumers)

package/src/managers/DenoisingManager.js

@@ -325,7 +325,7 @@ export class DenoisingManager extends EventDispatcher {
 		if ( s.adaptiveSampling ) {
 
 			s.adaptiveSampling.enabled = enabled;
-			s.adaptiveSampling.toggleHelper( false );
+			s.adaptiveSampling.setHeatmapEnabled( false );
 
 		}
 
@@ -517,10 +517,14 @@ export class DenoisingManager extends EventDispatcher {
 
 	}
 
-	/** Toggles the ASVGF heatmap debug overlay. */
+	/**
+	 * Toggle the ASVGF heatmap compute pass. When enabled, the stage writes
+	 * the heatmap to its public `heatmapTarget` RenderTarget — the host is
+	 * responsible for rendering it.
+	 */
 	toggleASVGFHeatmap( enabled ) {
 
-		this._stages.asvgf?.toggleHeatmap?.( enabled );
+		this._stages.asvgf?.setHeatmapEnabled?.( enabled );
 
 	}
 
@@ -577,10 +581,14 @@ export class DenoisingManager extends EventDispatcher {
 
 	}
 
-	/** Toggles the adaptive sampling debug helper. */
+	/**
+	 * Toggle the AdaptiveSampling heatmap compute pass. When enabled, the
+	 * stage writes the heatmap to its public `heatmapTarget` RenderTarget —
+	 * the host is responsible for rendering it.
+	 */
 	toggleAdaptiveSamplingHelper( enabled ) {
 
-		this._stages.adaptiveSampling?.toggleHelper( enabled );
+		this._stages.adaptiveSampling?.setHeatmapEnabled( enabled );
 
 	}
 

package/src/managers/VideoRenderManager.js

@@ -7,7 +7,7 @@
  */
 
 import { EngineEvents } from '../EngineEvents.js';
-import { FINAL_RENDER_CONFIG } from '../EngineDefaults.js';
+import { PRODUCTION_RENDER_CONFIG } from '../EngineDefaults.js';
 import { updateStats, getDisplaySamples } from '../Processor/utils.js';
 
 export class VideoRenderManager {
@@ -26,7 +26,7 @@ export class VideoRenderManager {
 	 * @param {Object} options
 	 * @param {number} [options.clipIndex=0]        - Animation clip index
 	 * @param {number} [options.fps=30]             - Output frame rate
-	 * @param {number} [options.samplesPerFrame]     - SPP per frame (defaults to FINAL_RENDER_CONFIG.maxSamples)
+	 * @param {number} [options.samplesPerFrame]     - SPP per frame (defaults to PRODUCTION_RENDER_CONFIG.maxSamples)
 	 * @param {boolean} [options.enableOIDN=true]    - Run OIDN denoiser per frame
 	 * @param {number} [options.speed=1]              - Playback speed multiplier (maps video time to animation time)
 	 * @param {number} [options.totalFrames]         - Override total frame count (for looped animations)
@@ -40,7 +40,7 @@ export class VideoRenderManager {
 			clipIndex = 0,
 			fps = 30,
 			speed = 1,
-			samplesPerFrame = FINAL_RENDER_CONFIG.maxSamples,
+			samplesPerFrame = PRODUCTION_RENDER_CONFIG.maxSamples,
 			enableOIDN = true,
 			onFrame,
 			onProgress,
@@ -80,7 +80,7 @@ export class VideoRenderManager {
 		app.stopAnimation();
 
 		// Configure for high-quality offline rendering
-		app.configureForMode( 'final-render' );
+		app.configureForMode( 'production' );
 
 		// Override samples per frame
 		app.settings.setMany( { maxSamples: samplesPerFrame }, { silent: true } );

package/dist/assets/AIUpscalerWorker-D58dcMrY.js

@@ -1,2 +0,0 @@
-(function(){let e=null;async function t(){return e||(e=await import(`https://cdn.jsdelivr.net/npm/onnxruntime-web@1.24.3/dist/ort.webgpu.bundle.min.mjs`),e.env.wasm.wasmPaths=`https://cdn.jsdelivr.net/npm/onnxruntime-web@1.24.3/dist/`,e.env.logLevel=`error`,e)}let n=`models`,r=null,i=null;function a(){return new Promise((e,t)=>{let r=indexedDB.open(`ai-upscaler-models`,1);r.onupgradeneeded=()=>r.result.createObjectStore(n),r.onsuccess=()=>e(r.result),r.onerror=()=>t(r.error)})}async function o(e){try{let t=await a();return await new Promise((r,i)=>{let a=t.transaction(n,`readonly`).objectStore(n).get(e);a.onsuccess=()=>r(a.result||null),a.onerror=()=>i(a.error)})}catch{return null}}async function s(e,t){try{let r=await a();await new Promise((i,a)=>{let o=r.transaction(n,`readwrite`);o.objectStore(n).put(t,e),o.oncomplete=()=>i(),o.onerror=()=>a(o.error)})}catch{}}async function c(e){let t=await o(e);if(t)return console.log(`AI Upscaler Worker: model loaded from cache (${(t.byteLength/1024/1024).toFixed(1)}MB)`),t;let n=await fetch(e);if(!n.ok)throw Error(`Failed to fetch model: ${n.status}`);let r=await n.arrayBuffer();return s(e,r.slice(0)),r}async function l(e,n){if(r&&i===e){self.postMessage({type:`loaded`,backend:`webgpu`});return}r&&=(await r.release(),null);let[a,o]=await Promise.all([c(e),t()]);r=await o.InferenceSession.create(a,n),i=e;let s=512;try{let e=await navigator.gpu?.requestAdapter(),t=await e?.requestAdapterInfo?.()||e?.info,n=/apple|swiftshader|llvmpipe/i.test(t?.vendor||``)||/apple|swiftshader/i.test(t?.architecture||``),r=t?.device?.toLowerCase?.()?.includes(`integrated`)||/intel.*iris|intel.*uhd|intel.*hd|amd.*vega|radeon.*graphics/i.test(t?.description||``);s=n?128:r?256:512,console.log(`AI Upscaler Worker: GPU="${t?.description||t?.device||`unknown`}", tileSize=${s}`)}catch{}let l=(a.byteLength/1024/1024).toFixed(1);console.log(`AI Upscaler Worker: model loaded (${l}MB), backend: webgpu`),self.postMessage({type:`loaded`,backend:`webgpu`,tileSize:s})}async function u(e,n,i,a){let o=await t(),s=r.inputNames[0],c=r.outputNames[0],l=new o.Tensor(`float32`,e,[1,3,i,n]),u=(await r.run({[s]:l}))[c].data;self.postMessage({type:`inferred`,outputData:u,id:a},[u.buffer])}self.onmessage=async e=>{let{type:t}=e.data;try{t===`load`?await l(e.data.url,e.data.sessionOptions):t===`infer`?await u(e.data.tileData,e.data.width,e.data.height,e.data.id):t===`dispose`&&r&&(await r.release(),r=null,i=null)}catch(t){self.postMessage({type:`error`,message:t.message,id:e.data?.id})}}})();
-//# sourceMappingURL=AIUpscalerWorker-D58dcMrY.js.map

package/dist/assets/AIUpscalerWorker-D58dcMrY.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AIUpscalerWorker-D58dcMrY.js","names":[],"sources":["../../src/Processor/Workers/AIUpscalerWorker.js"],"sourcesContent":["/**\n * Web Worker for AI Upscaler inference.\n * Handles ONNX model loading and tile-based inference off the main thread.\n *\n * Messages:\n *   Main → Worker:\n *     { type: 'load', url, sessionOptions }  — load/switch model\n *     { type: 'infer', tileData, width, height, id }  — run inference on a tile\n *     { type: 'dispose' }  — release session\n *\n *   Worker → Main:\n *     { type: 'loaded', backend }\n *     { type: 'inferred', outputData, id }\n *     { type: 'error', message, id? }\n */\n\n// Loaded lazily via CDN to avoid bundling the 69 MB onnxruntime-web package\nconst ORT_CDN_URL = 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.24.3/dist/ort.webgpu.bundle.min.mjs';\n\nlet ort = null;\n\nasync function getOrt() {\n\n\tif ( ort ) return ort;\n\n\tort = await import( /* @vite-ignore */ ORT_CDN_URL );\n\n\t// WASM paths for CDN delivery — WebGPU EP still uses WASM for lightweight shape ops\n\tort.env.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.24.3/dist/';\n\tort.env.logLevel = 'error';\n\n\treturn ort;\n\n}\n\nconst IDB_NAME = 'ai-upscaler-models';\nconst IDB_STORE = 'models';\n\nlet session = null;\nlet currentModelUrl = null;\n\n// ─── IndexedDB Model Cache ───────────────────────────────────────────────────\n\nfunction openDB() {\n\n\treturn new Promise( ( resolve, reject ) => {\n\n\t\tconst req = indexedDB.open( IDB_NAME, 1 );\n\t\treq.onupgradeneeded = () => req.result.createObjectStore( IDB_STORE );\n\t\treq.onsuccess = () => resolve( req.result );\n\t\treq.onerror = () => reject( req.error );\n\n\t} );\n\n}\n\nasync function getCachedModel( url ) {\n\n\ttry {\n\n\t\tconst db = await openDB();\n\t\treturn await new Promise( ( resolve, reject ) => {\n\n\t\t\tconst tx = db.transaction( IDB_STORE, 'readonly' );\n\t\t\tconst req = tx.objectStore( IDB_STORE ).get( url );\n\t\t\treq.onsuccess = () => resolve( req.result || null );\n\t\t\treq.onerror = () => reject( req.error );\n\n\t\t} );\n\n\t} catch {\n\n\t\treturn null;\n\n\t}\n\n}\n\nasync function cacheModel( url, buffer ) {\n\n\ttry {\n\n\t\tconst db = await openDB();\n\t\tawait new Promise( ( resolve, reject ) => {\n\n\t\t\tconst tx = db.transaction( IDB_STORE, 'readwrite' );\n\t\t\ttx.objectStore( IDB_STORE ).put( buffer, url );\n\t\t\ttx.oncomplete = () => resolve();\n\t\t\ttx.onerror = () => reject( tx.error );\n\n\t\t} );\n\n\t} catch {\n\n\t\t// Cache write failure is non-fatal\n\t}\n\n}\n\n// ─── Model Loading ───────────────────────────────────────────────────────────\n\nasync function fetchModel( url ) {\n\n\t// Try IndexedDB cache first\n\tconst cached = await getCachedModel( url );\n\tif ( cached ) {\n\n\t\tconsole.log( `AI Upscaler Worker: model loaded from cache (${( cached.byteLength / 1024 / 1024 ).toFixed( 1 )}MB)` );\n\t\treturn cached;\n\n\t}\n\n\t// Network fetch + cache\n\tconst response = await fetch( url );\n\tif ( ! response.ok ) throw new Error( `Failed to fetch model: ${response.status}` );\n\tconst buffer = await response.arrayBuffer();\n\n\t// Cache in background (don't block session creation)\n\tcacheModel( url, buffer.slice( 0 ) );\n\n\treturn buffer;\n\n}\n\nasync function loadModel( url, sessionOptions ) {\n\n\tif ( session && currentModelUrl === url ) {\n\n\t\tconst backend = 'webgpu';\n\t\tself.postMessage( { type: 'loaded', backend } );\n\t\treturn;\n\n\t}\n\n\t// Dispose previous session\n\tif ( session ) {\n\n\t\tawait session.release();\n\t\tsession = null;\n\n\t}\n\n\tconst [ modelBuffer, ortLib ] = await Promise.all( [ fetchModel( url ), getOrt() ] );\n\n\tsession = await ortLib.InferenceSession.create( modelBuffer, sessionOptions );\n\tcurrentModelUrl = url;\n\n\t// Detect GPU and recommend tile size based on device type\n\tlet tileSize = 512; // default\n\ttry {\n\n\t\tconst adapter = await navigator.gpu?.requestAdapter();\n\t\tconst info = await adapter?.requestAdapterInfo?.() || adapter?.info;\n\t\tconst isMobile = /apple|swiftshader|llvmpipe/i.test( info?.vendor || '' )\n\t\t\t|| /apple|swiftshader/i.test( info?.architecture || '' );\n\t\tconst isIntegrated = info?.device?.toLowerCase?.()?.includes( 'integrated' )\n\t\t\t|| /intel.*iris|intel.*uhd|intel.*hd|amd.*vega|radeon.*graphics/i.test( info?.description || '' );\n\n\t\tif ( isMobile ) {\n\n\t\t\ttileSize = 128;\n\n\t\t} else if ( isIntegrated ) {\n\n\t\t\ttileSize = 256;\n\n\t\t} else {\n\n\t\t\ttileSize = 512;\n\n\t\t}\n\n\t\tconsole.log( `AI Upscaler Worker: GPU=\"${info?.description || info?.device || 'unknown'}\", tileSize=${tileSize}` );\n\n\t} catch { /* fallback to default */ }\n\n\tconst sizeMB = ( modelBuffer.byteLength / 1024 / 1024 ).toFixed( 1 );\n\tconsole.log( `AI Upscaler Worker: model loaded (${sizeMB}MB), backend: webgpu` );\n\n\tself.postMessage( { type: 'loaded', backend: 'webgpu', tileSize } );\n\n}\n\nasync function inferTile( tileData, width, height, id ) {\n\n\tconst ortLib = await getOrt();\n\tconst inputName = session.inputNames[ 0 ];\n\tconst outputName = session.outputNames[ 0 ];\n\tconst inputTensor = new ortLib.Tensor( 'float32', tileData, [ 1, 3, height, width ] );\n\n\tconst results = await session.run( { [ inputName ]: inputTensor } );\n\tconst outputData = results[ outputName ].data;\n\n\t// Transfer the output buffer (zero-copy)\n\tself.postMessage( { type: 'inferred', outputData, id }, [ outputData.buffer ] );\n\n}\n\nself.onmessage = async ( e ) => {\n\n\tconst { type } = e.data;\n\n\ttry {\n\n\t\tif ( type === 'load' ) {\n\n\t\t\tawait loadModel( e.data.url, e.data.sessionOptions );\n\n\t\t} else if ( type === 'infer' ) {\n\n\t\t\tawait inferTile( e.data.tileData, e.data.width, e.data.height, e.data.id );\n\n\t\t} else if ( type === 'dispose' ) {\n\n\t\t\tif ( session ) {\n\n\t\t\t\tawait session.release();\n\t\t\t\tsession = null;\n\t\t\t\tcurrentModelUrl = null;\n\n\t\t\t}\n\n\t\t}\n\n\t} catch ( error ) {\n\n\t\tself.postMessage( { type: 'error', message: error.message, id: e.data?.id } );\n\n\t}\n\n};\n"],"mappings":"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"}

package/src/Processor/createRenderTargetHelper.js

@@ -1,521 +0,0 @@
-/**
- * createRenderTargetHelper - A component for displaying Three.js render targets in a resizable window
- *
- * Uses async readback for pixel data.
- *
- * @param {THREE.WebGPURenderer} renderer - The renderer instance
- * @param {THREE.RenderTarget} renderTargetOrTexture - The render target to display
- * @param {Object} options - Optional configuration
- * @param {number} options.width - Initial width of the view (default: 200)
- * @param {number} options.height - Initial height of the view (default: 200)
- * @param {string} options.position - Position on screen ('bottom-right', 'bottom-left', 'top-right', 'top-left') (default: 'bottom-right')
- * @param {boolean} options.flipX - Flip the image horizontally (default: true)
- * @param {boolean} options.flipY - Flip the image vertically (default: true)
- * @param {boolean} options.autoUpdate - Whether to automatically update on animation frames (default: false)
- * @param {string} options.title - Title to display in the header (default: 'Render Target')
- * @param {number} options.textureIndex - For MRT render targets, which texture attachment to read (default: 0)
- * @param {string} options.transform - Optional shader transform: 'normal-remap' remaps [0,1] to visible range
- * @returns {HTMLElement} The container element with attached methods
- */
-export function createRenderTargetHelper( renderer, renderTargetOrTexture, options = {} ) {
-
-	// MRT texture index for readback
-	const textureIndex = options.textureIndex || 0;
-
-	// Detect if input is a Texture or RenderTarget
-	const isTexture = renderTargetOrTexture.isTexture === true;
-
-	let renderTarget;
-
-	if ( isTexture ) {
-
-		console.warn( 'RenderTargetHelper: Direct Texture input is not supported. Pass a RenderTarget instead.' );
-		renderTarget = null;
-
-	} else {
-
-		renderTarget = renderTargetOrTexture;
-
-	}
-
-	// Default options
-	const config = {
-		width: options.width || 200,
-		height: options.height || 200,
-		position: options.position || 'bottom-right',
-		flipX: options.flipX !== undefined ? options.flipX : false,
-		flipY: options.flipY !== undefined ? options.flipY : false,
-		autoUpdate: options.autoUpdate || false,
-		theme: options.theme || 'dark', // 'light' or 'dark' - changed default to dark to match the app's theme
-		title: options.title || renderTarget?.name || 'Render Target'
-	};
-
-	// Create container
-	const container = document.createElement( 'div' );
-	container.className = 'render-target-helper';
-
-	// Apply styles based on position
-	const positionStyles = {
-		'bottom-right': { bottom: '48px', right: '10px' }, // Adjusted for stats position
-		'bottom-left': { bottom: '10px', left: '10px' },
-		'top-right': { top: '10px', right: '10px' },
-		'top-left': { top: '10px', left: '10px' }
-	};
-
-	// Theme styles
-	const themeStyles = {
-		'light': {
-			backgroundColor: 'white',
-			border: '1px solid #ddd',
-			color: '#333'
-		},
-		'dark': {
-			backgroundColor: '#1e293b', // Match app's slate color
-			border: '1px solid #334155',
-			color: '#f8fafc'
-		}
-	};
-
-	Object.assign( container.style, {
-		display: 'flex',
-		flexDirection: 'column',
-		position: 'fixed',
-		resize: 'both',
-		overflow: 'hidden',
-		padding: '8px',
-		borderRadius: '4px',
-		boxShadow: '0 5px 15px rgba(0,0,0,0.3)',
-		transition: 'opacity 0.2s ease',
-		zIndex: '1000',
-		minWidth: '100px',
-		minHeight: '100px',
-		maxWidth: '500px',
-		maxHeight: '500px',
-		width: `${config.width}px`,
-		height: `${config.height}px`,
-		...positionStyles[ config.position ],
-		...themeStyles[ config.theme ]
-	} );
-
-	// Create title bar with controls
-	const titleBar = document.createElement( 'div' );
-	titleBar.style.display = 'flex';
-	titleBar.style.justifyContent = 'space-between';
-	titleBar.style.alignItems = 'center';
-	titleBar.style.marginBottom = '4px';
-	titleBar.style.cursor = 'move';
-	titleBar.style.userSelect = 'none';
-
-	// Title
-	const title = document.createElement( 'span' );
-	title.textContent = config.title;
-	title.style.fontSize = '12px';
-	title.style.fontFamily = 'monospace';
-	title.style.color = themeStyles[ config.theme ].color;
-
-	// Controls
-	const controls = document.createElement( 'div' );
-
-	// Close button
-	const closeBtn = document.createElement( 'button' );
-	closeBtn.innerHTML = '×';
-	closeBtn.style.background = 'none';
-	closeBtn.style.border = 'none';
-	closeBtn.style.cursor = 'pointer';
-	closeBtn.style.fontSize = '16px';
-	closeBtn.style.color = themeStyles[ config.theme ].color;
-	closeBtn.style.padding = '0 4px';
-	closeBtn.title = 'Close';
-
-	closeBtn.onclick = () => {
-
-		container.style.display = 'none';
-		if ( config.autoUpdate ) {
-
-			cancelAnimationFrame( animFrameId );
-			animFrameId = null;
-
-		}
-
-	};
-
-	// Add refresh button
-	const refreshBtn = document.createElement( 'button' );
-	refreshBtn.innerHTML = '⟳';
-	refreshBtn.style.background = 'none';
-	refreshBtn.style.border = 'none';
-	refreshBtn.style.cursor = 'pointer';
-	refreshBtn.style.fontSize = '14px';
-	refreshBtn.style.color = themeStyles[ config.theme ].color;
-	refreshBtn.style.padding = '0 4px';
-	refreshBtn.title = 'Refresh';
-
-	refreshBtn.onclick = () => {
-
-		container.update();
-
-	};
-
-	controls.appendChild( refreshBtn );
-	controls.appendChild( closeBtn );
-	titleBar.appendChild( title );
-	titleBar.appendChild( controls );
-	container.appendChild( titleBar );
-
-	// Canvas for displaying the render target
-	const domCanvas = document.createElement( 'canvas' );
-	domCanvas.style.width = '100%';
-	domCanvas.style.height = 'calc(100% - 20px)';
-
-
-	// Apply flipping if needed
-	let transform = '';
-	if ( config.flipX ) transform += 'scaleX(-1) ';
-	if ( config.flipY ) transform += 'scaleY(-1) ';
-	domCanvas.style.transform = transform.trim();
-
-	container.appendChild( domCanvas );
-
-	// Get render target dimensions
-	let width = renderTarget ? renderTarget.width : 1;
-	let height = renderTarget ? renderTarget.height : 1;
-
-	// Initialize canvas
-	domCanvas.width = width;
-	domCanvas.height = height;
-
-	const context = domCanvas.getContext( '2d' );
-
-	// Pixel data buffer
-	let clampedPixels = new Uint8ClampedArray( 4 * width * height );
-
-	// Guard against concurrent async reads (WebGPU)
-	let pendingRead = false;
-
-	// Make container draggable
-	let isDragging = false;
-	let dragOffsetX = 0;
-	let dragOffsetY = 0;
-
-	titleBar.addEventListener( 'pointerdown', ( e ) => {
-
-		isDragging = true;
-		dragOffsetX = e.clientX - container.offsetLeft;
-		dragOffsetY = e.clientY - container.offsetTop;
-		document.body.style.userSelect = 'none'; // Prevent text selection during drag
-
-	} );
-
-	function onPointerMove( e ) {
-
-		if ( ! isDragging ) return;
-
-		const newLeft = e.clientX - dragOffsetX;
-		const newTop = e.clientY - dragOffsetY;
-
-		const maxX = window.innerWidth - container.offsetWidth;
-		const maxY = window.innerHeight - container.offsetHeight;
-
-		container.style.left = `${Math.max( 0, Math.min( newLeft, maxX ) )}px`;
-		container.style.top = `${Math.max( 0, Math.min( newTop, maxY ) )}px`;
-
-		container.style.bottom = 'auto';
-		container.style.right = 'auto';
-
-	}
-
-	function onPointerUp() {
-
-		isDragging = false;
-		document.body.style.userSelect = '';
-
-	}
-
-	window.addEventListener( 'pointermove', onPointerMove );
-	window.addEventListener( 'pointerup', onPointerUp );
-
-	// Optimize resize handling
-	function handleResize() {
-
-		if ( ! renderTarget ) return;
-
-		// Get current dimensions from source
-		const currentWidth = renderTarget.width;
-		const currentHeight = renderTarget.height;
-
-		// Check if dimensions have changed
-		if ( width !== currentWidth || height !== currentHeight ) {
-
-			width = currentWidth;
-			height = currentHeight;
-
-			// Resize canvas to match dimensions
-			domCanvas.width = width;
-			domCanvas.height = height;
-
-			// Recreate pixel buffer
-			clampedPixels = new Uint8ClampedArray( 4 * width * height );
-
-		}
-
-		// Update dimensions display
-		title.textContent = `${config.title} (${width}×${height})`;
-
-	}
-
-	/**
-	 * Decode a 16-bit half-float to a 32-bit float.
-	 */
-	function halfToFloat( h ) {
-
-		const s = ( h & 0x8000 ) >> 15;
-		const e = ( h & 0x7C00 ) >> 10;
-		const f = h & 0x03FF;
-
-		if ( e === 0 ) return ( s ? - 1 : 1 ) * Math.pow( 2, - 14 ) * ( f / 1024 );
-		if ( e === 31 ) return f ? NaN : ( s ? - Infinity : Infinity );
-		return ( s ? - 1 : 1 ) * Math.pow( 2, e - 15 ) * ( 1 + f / 1024 );
-
-	}
-
-	/**
-	 * Draw a pixel buffer to the 2D canvas.
-	 * Handles Float32Array (float 0-1), Uint16Array (half-float), and Uint8Array (0-255).
-	 */
-	function drawPixelBuffer( buffer ) {
-
-		const len = Math.min( buffer.length, clampedPixels.length );
-
-		if ( buffer instanceof Uint8Array || buffer instanceof Uint8ClampedArray ) {
-
-			// Values already in 0-255 range
-			clampedPixels.set( buffer.subarray( 0, len ) );
-
-		} else if ( buffer instanceof Uint16Array ) {
-
-			// Half-float values — decode then scale to 0-255
-			for ( let i = 0; i < len; i ++ ) {
-
-				const val = halfToFloat( buffer[ i ] );
-				clampedPixels[ i ] = Math.min( 255, Math.max( 0, ( val || 0 ) * 255 ) );
-
-			}
-
-		} else {
-
-			// Float32 values — scale to 0-255
-			for ( let i = 0; i < len; i ++ ) {
-
-				clampedPixels[ i ] = Math.min( 255, Math.max( 0, buffer[ i ] * 255 ) );
-
-			}
-
-		}
-
-		if ( width === 0 || height === 0 ) return;
-
-		const imageData = new ImageData( clampedPixels, width, height );
-		context.putImageData( imageData, 0, 0 );
-
-	}
-
-	// Update the display with the current render target contents
-	container.update = function update() {
-
-		if ( ! renderTarget ) return;
-
-		handleResize();
-
-		try {
-
-			// Asynchronous pixel readback
-			if ( pendingRead ) return; // skip if previous read is still in flight
-			pendingRead = true;
-
-			renderer.readRenderTargetPixelsAsync( renderTarget, 0, 0, width, height, textureIndex )
-				.then( ( buffer ) => {
-
-					pendingRead = false;
-					drawPixelBuffer( buffer );
-
-				} )
-				.catch( ( err ) => {
-
-					pendingRead = false;
-					console.error( 'RenderTargetHelper: readback error:', err );
-
-				} );
-
-		} catch ( error ) {
-
-			console.error( 'Error updating render target helper:', error );
-
-		}
-
-	};
-
-	function onContainerMouseDown() {
-
-		window.addEventListener( 'mousemove', handleResize );
-
-	}
-
-	function onMouseUp() {
-
-		window.removeEventListener( 'mousemove', handleResize );
-
-	}
-
-	container.addEventListener( 'mousedown', onContainerMouseDown );
-	window.addEventListener( 'mouseup', onMouseUp );
-	window.addEventListener( 'resize', handleResize );
-
-	// Auto-update animation frame
-	let animFrameId = null;
-
-	/**
-     * Show the helper if hidden
-     */
-	container.show = function show() {
-
-		container.style.display = 'flex';
-		if ( config.autoUpdate && ! animFrameId ) {
-
-			container.startAutoUpdate();
-
-		}
-
-	};
-
-	/**
-     * Hide the helper
-     */
-	container.hide = function hide() {
-
-		container.style.display = 'none';
-		if ( config.autoUpdate && animFrameId ) {
-
-			cancelAnimationFrame( animFrameId );
-			animFrameId = null;
-
-		}
-
-	};
-
-	/**
-     * Toggle visibility
-     */
-	container.toggle = function toggle() {
-
-		if ( container.style.display === 'none' ) {
-
-			container.show();
-
-		} else {
-
-			container.hide();
-
-		}
-
-		return container.style.display !== 'none';
-
-	};
-
-	/**
-     * Start auto-updating
-     */
-	container.startAutoUpdate = function startAutoUpdate() {
-
-		if ( animFrameId ) return;
-
-		const updateLoop = () => {
-
-			container.update();
-			animFrameId = requestAnimationFrame( updateLoop );
-
-		};
-
-		animFrameId = requestAnimationFrame( updateLoop );
-
-	};
-
-	/**
-     * Stop auto-updating
-     */
-	container.stopAutoUpdate = function stopAutoUpdate() {
-
-		if ( animFrameId ) {
-
-			cancelAnimationFrame( animFrameId );
-			animFrameId = null;
-
-		}
-
-	};
-
-	/**
-     * Dispose and clean up resources
-     */
-	container.dispose = function dispose() {
-
-		if ( animFrameId ) {
-
-			cancelAnimationFrame( animFrameId );
-			animFrameId = null;
-
-		}
-
-		// Remove window listeners — these close over renderer/renderTarget/container
-		// and pin the entire helper graph alive until the page unloads if not cleaned up.
-		window.removeEventListener( 'pointermove', onPointerMove );
-		window.removeEventListener( 'pointerup', onPointerUp );
-		window.removeEventListener( 'mouseup', onMouseUp );
-		window.removeEventListener( 'mousemove', handleResize );
-		window.removeEventListener( 'resize', handleResize );
-
-		if ( container.parentNode ) {
-
-			container.parentNode.removeChild( container );
-
-		}
-
-		// Drop closures attached to the container. These close over `renderer`,
-		// `renderTargetOrTexture`, and the canvas — keeping them around after the
-		// owning stage has been disposed retains the entire Three.js WebGPU graph.
-		container.startAutoUpdate = null;
-		container.stopAutoUpdate = null;
-		container.show = null;
-		container.hide = null;
-		container.toggle = null;
-		container.update = null;
-		container.dispose = null;
-
-		if ( domCanvas ) {
-
-			domCanvas.width = 0;
-			domCanvas.height = 0;
-
-		}
-
-		clampedPixels = null;
-
-	};
-
-	// Start auto-update if configured
-	if ( config.autoUpdate ) {
-
-		container.startAutoUpdate();
-
-	}
-
-	// Maintain backward compatibility with original implementation
-	if ( container.style.display === 'none' ) {
-
-		container.style.display = 'flex';
-
-	}
-
-	return container;
-
-}
-