rayzee 5.10.2 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayzee",
-  "version": "5.10.2",
+  "version": "6.0.0",
   "type": "module",
   "description": "Real-time WebGPU path tracing engine built on Three.js",
   "main": "dist/rayzee.umd.js",
@@ -36,9 +36,6 @@
   "peerDependencies": {
     "three": ">=0.184.0"
   },
-  "dependencies": {
-    "stats-gl": "^4.0.2"
-  },
   "optionalDependencies": {
     "oidn-web": ">=0.3.0",
     "onnxruntime-web": ">=1.0.0"

package/src/AssetConfig.js

@@ -0,0 +1,56 @@
+/**
+ * Engine asset configuration. CDN URLs and cache namespaces are configurable so
+ * downstream consumers aren't pinned to the upstream Rayzee deployment's defaults.
+ *
+ * Usage:
+ *   import { configureAssets } from 'rayzee';
+ *   configureAssets({
+ *     stbnScalarAtlas: '/assets/stbn_scalar_atlas.png',
+ *     dracoDecoderPath: '/draco/',
+ *     cacheNamespace: 'my-app',
+ *   });
+ *
+ * Call before constructing PathTracerApp. Per-key partial overrides are supported.
+ */
+
+const config = {
+	// STBN blue-noise atlases (NVIDIA-RTX/STBN). Decoded as Float32 textures.
+	stbnScalarAtlas: 'https://assets.rayzee.atulmourya.com/noise/stbn_scalar_atlas.png',
+	stbnVec2Atlas: 'https://assets.rayzee.atulmourya.com/noise/stbn_vec2_atlas.png',
+
+	// onnxruntime-web (loaded lazily by AI upscaler worker via dynamic import).
+	ortRuntimeUrl: 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.24.3/dist/ort.webgpu.bundle.min.mjs',
+	ortWasmPaths: 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.24.3/dist/',
+
+	// Draco / KTX2 decoder paths for GLTFLoader.
+	dracoDecoderPath: 'https://www.gstatic.com/draco/v1/decoders/',
+	ktx2TranscoderPath: 'https://cdn.jsdelivr.net/npm/three@0.183.2/examples/jsm/libs/basis/',
+
+	// OIDN denoiser model weights (oidn-web tza files).
+	oidnWeightsBaseUrl: 'https://cdn.jsdelivr.net/npm/denoiser/tzas/',
+
+	// AI upscaler ONNX model base URL. Quality presets resolve relative paths against this.
+	upscalerModelBaseUrl: 'https://huggingface.co/notaneimu/onnx-image-models/resolve/main/',
+
+	// Prefix used when the engine writes to client-side stores (IndexedDB, etc).
+	// Set to a unique value to avoid collisions when multiple apps embed the engine on the same origin.
+	cacheNamespace: 'rayzee',
+};
+
+/**
+ * Override asset URLs and cache namespace. Partial — only provided keys are replaced.
+ * @param {Partial<typeof config>} overrides
+ */
+export function configureAssets( overrides ) {
+
+	if ( ! overrides ) return;
+	Object.assign( config, overrides );
+
+}
+
+/** Returns a snapshot of current asset config. */
+export function getAssetConfig() {
+
+	return { ...config };
+
+}

package/src/EngineDefaults.js

@@ -436,15 +436,17 @@ export const TEXTURE_CONSTANTS = {
 // Default texture matrix for materials
 export const DEFAULT_TEXTURE_MATRIX = [ 0, 0, 1, 1, 0, 0, 0, 1 ];
 
-// Render mode configurations
-export const FINAL_RENDER_CONFIG = {
+// Render quality configurations.
+// 'interactive' — low-sample, bounded bounces, no offline denoising, controls enabled.
+// 'production'  — high-sample, deep bounces, OIDN enabled, controls disabled.
+export const PRODUCTION_RENDER_CONFIG = {
 	maxSamples: 30, bounces: 20, transmissiveBounces: 8, samplesPerPixel: 1,
 	renderMode: 1, enableAlphaShadows: true, tiles: 3, tilesHelper: true,
 	enableOIDN: true, oidnQuality: 'balance',
 	interactionModeEnabled: false,
 };
 
-export const PREVIEW_RENDER_CONFIG = {
+export const INTERACTIVE_RENDER_CONFIG = {
 	maxSamples: ENGINE_DEFAULTS.maxSamples, bounces: ENGINE_DEFAULTS.bounces,
 	samplesPerPixel: ENGINE_DEFAULTS.samplesPerPixel, renderMode: ENGINE_DEFAULTS.renderMode, enableAlphaShadows: ENGINE_DEFAULTS.enableAlphaShadows,
 	transmissiveBounces: ENGINE_DEFAULTS.transmissiveBounces,

package/src/EngineEvents.js

@@ -7,6 +7,7 @@ export const EngineEvents = {
 	// Render lifecycle
 	RENDER_COMPLETE: 'engine:renderComplete',
 	RENDER_RESET: 'engine:renderReset',
+	FRAME: 'engine:frame',
 
 	// Denoiser
 	DENOISING_START: 'engine:denoisingStart',

package/src/Passes/AIUpscaler.js

@@ -1,35 +1,53 @@
 import { EventDispatcher, ACESFilmicToneMapping } from 'three';
 import { TONE_MAP_FNS, SRGB_GAMMA, applySaturation } from '../Processor/ToneMapCPU.js';
 import { fetchAsWorker } from '../Processor/Workers/fetchAsWorker.js';
+import { getAssetConfig } from '../AssetConfig.js';
 import AI_UPSCALER_WORKER_URL from '../Processor/Workers/AIUpscalerWorker.js?worker&url';
 
 
 // ─── Model Configuration ───────────────────────────────────────────────────────
+// Quality presets reference relative paths against asset-config `upscalerModelBaseUrl`.
 
-const HF_BASE = 'https://huggingface.co/notaneimu/onnx-image-models/resolve/main/';
+const QUALITY_PRESET_PATHS = {
+	fast: {
+		2: '2x-spanx2-ch48.onnx',
+		4: '4xNomos8k_span_otf_strong_fp32_opset17.onnx'
+	},
+	balanced: {
+		2: '2xNomosUni_compact_otf_medium.onnx',
+		4: 'RealESRGAN_x4plus.onnx'
+	},
+	quality: {
+		2: '2x-realesrgan-x2plus.onnx',
+		4: '4xNomos2_hq_mosr_fp32.onnx'
+	}
+};
 
-const MODEL_CONFIG = {
+function _resolveQualityPresets() {
+
+	const { upscalerModelBaseUrl } = getAssetConfig();
+	const out = {};
+	for ( const q in QUALITY_PRESET_PATHS ) {
+
+		out[ q ] = {};
+		for ( const s in QUALITY_PRESET_PATHS[ q ] ) {
+
+			out[ q ][ s ] = upscalerModelBaseUrl + QUALITY_PRESET_PATHS[ q ][ s ];
 
-	// Quality presets: each has a 2x and 4x model (all NCHW, dynamic input dims)
-	QUALITY_PRESETS: {
-		fast: {
-			// 1.6MB — SPAN
-			2: HF_BASE + '2x-spanx2-ch48.onnx',
-			// 1.6MB — SPAN
-			4: HF_BASE + '4xNomos8k_span_otf_strong_fp32_opset17.onnx'
-		},
-		balanced: {
-			// 2.4MB — SRVGGNetCompact
-			2: HF_BASE + '2xNomosUni_compact_otf_medium.onnx',
-			// 4.9MB — SRVGGNetCompact
-			4: HF_BASE + 'RealESRGAN_x4plus.onnx'
-		},
-		quality: {
-			// 67MB — RRDBNet
-			2: HF_BASE + '2x-realesrgan-x2plus.onnx',
-			// 16.5MB — MoSR
-			4: HF_BASE + '4xNomos2_hq_mosr_fp32.onnx'
 		}
+
+	}
+
+	return out;
+
+}
+
+const MODEL_CONFIG = {
+
+	get QUALITY_PRESETS() {
+
+		return _resolveQualityPresets();
+
 	},
 
 	// Larger tiles = fewer GPU dispatches = faster. 512 works on most GPUs with 4GB+ VRAM.
@@ -189,11 +207,15 @@ export class AIUpscaler extends EventDispatcher {
 
 				};
 
+				const { ortRuntimeUrl, ortWasmPaths, cacheNamespace } = getAssetConfig();
 				this._worker.addEventListener( 'message', handler );
 				this._worker.postMessage( {
 					type: 'load',
 					url,
-					sessionOptions: MODEL_CONFIG.SESSION_OPTIONS
+					sessionOptions: MODEL_CONFIG.SESSION_OPTIONS,
+					ortRuntimeUrl,
+					ortWasmPaths,
+					cacheNamespace,
 				} );
 
 			} );

package/src/Passes/OIDNDenoiser.js

@@ -42,14 +42,13 @@ function removeOidnTfjsBackend() {
 
 }
 
-import { createRenderTargetHelper } from '../Processor/createRenderTargetHelper.js';
 import { TONE_MAP_FNS, linearToSRGB, applySaturation } from '../Processor/ToneMapCPU.js';
+import { getAssetConfig } from '../AssetConfig.js';
 
 /** Reusable RGB output buffer (avoids per-pixel allocation). */
 const _tmOut = new Float32Array( 3 );
 
 const MODEL_CONFIG = {
-	BASE_URL: 'https://cdn.jsdelivr.net/npm/denoiser/tzas/',
 	// clean-aux models — first-hit albedo/normal are deterministic per pixel
 	QUALITY_MODELS: {
 		fast: 'rt_hdr_alb_nrm_small',
@@ -82,7 +81,6 @@ export class OIDNDenoiser extends EventDispatcher {
 		this.camera = camera;
 		this.input = renderer.domElement;
 		this.output = output;
-		this.debugContainer = options.debugContainer || null;
 		this.extractGBufferData = options.extractGBufferData || null;
 		this.getMRTRenderTarget = options.getMRTRenderTarget || null;
 
@@ -143,11 +141,6 @@ export class OIDNDenoiser extends EventDispatcher {
 		this.currentTZAUrl = null;
 		this.unet = null;
 
-		// For debug visualization
-		this.debugHelpers = null;
-		this._lastAlbedoTexture = null;
-		this._lastNormalTexture = null;
-
 		// Initialize asynchronously
 		this._initialize().catch( error => {
 
@@ -163,7 +156,6 @@ export class OIDNDenoiser extends EventDispatcher {
 		try {
 
 			this._setupCanvas();
-			this._initDebugVisualization();
 			await this._setupUNetDenoiser();
 
 		} catch ( error ) {
@@ -174,14 +166,6 @@ export class OIDNDenoiser extends EventDispatcher {
 
 	}
 
-	_initDebugVisualization() {
-
-		// Note: Debug helpers will be created lazily when MRT textures are available
-		// This avoids creating helpers without proper texture references
-		this.debugHelpers = null;
-
-	}
-
 	_setupCanvas() {
 
 		if ( ! this.output.getContext ) {
@@ -277,9 +261,10 @@ export class OIDNDenoiser extends EventDispatcher {
 
 	_generateTzaUrl() {
 
-		const { BASE_URL, QUALITY_MODELS } = MODEL_CONFIG;
+		const { oidnWeightsBaseUrl } = getAssetConfig();
+		const { QUALITY_MODELS } = MODEL_CONFIG;
 		const modelName = QUALITY_MODELS[ this.quality ] || QUALITY_MODELS.balance;
-		return `${BASE_URL}${modelName}.tza`;
+		return `${oidnWeightsBaseUrl}${modelName}.tza`;
 
 	}
 
@@ -900,78 +885,6 @@ export class OIDNDenoiser extends EventDispatcher {
 
 	}
 
-	/**
-	 * Update debug visualization using MRT textures directly
-	 * @param {RenderTarget} mrtRenderTarget - The MRT render target containing albedo and normal
-	 */
-	_updateDebugVisualization( mrtRenderTarget ) {
-
-		if ( ! mrtRenderTarget?.textures || mrtRenderTarget.textures.length < 3 ) {
-
-			return;
-
-		}
-
-		// Check if textures have changed (render target was recreated)
-		const texturesChanged = this.debugHelpers &&
-			( this._lastAlbedoTexture !== mrtRenderTarget.textures[ 2 ] ||
-			  this._lastNormalTexture !== mrtRenderTarget.textures[ 1 ] );
-
-		// Create or recreate helpers when textures change
-		if ( ! this.debugHelpers || texturesChanged ) {
-
-			// Dispose existing helpers if they exist
-			if ( this.debugHelpers ) {
-
-				this.debugHelpers.albedo?.dispose();
-				this.debugHelpers.normal?.dispose();
-				console.log( 'OIDNDenoiser: Recreating debug helpers due to texture change' );
-
-			}
-
-			// Pass full MRT render target with textureIndex for async readback
-			this.debugHelpers = {
-				albedo: createRenderTargetHelper( this.renderer, mrtRenderTarget, {
-					width: 250,
-					height: 250,
-					position: 'bottom-right',
-					theme: 'dark',
-					title: 'OIDN Albedo',
-					autoUpdate: false,
-					textureIndex: 2
-				} ),
-				normal: createRenderTargetHelper( this.renderer, mrtRenderTarget, {
-					width: 250,
-					height: 250,
-					position: 'bottom-left',
-					theme: 'dark',
-					title: 'OIDN Normal',
-					autoUpdate: false,
-					textureIndex: 1
-				} )
-			};
-
-			// Store references to track texture changes
-			this._lastAlbedoTexture = mrtRenderTarget.textures[ 2 ];
-			this._lastNormalTexture = mrtRenderTarget.textures[ 1 ];
-
-			// Add helpers to DOM
-			const container = this.debugContainer || document.body;
-			container.appendChild( this.debugHelpers.albedo );
-			container.appendChild( this.debugHelpers.normal );
-
-			// Hide by default (visibility state will be restored by calling code)
-			this.debugHelpers.albedo.hide();
-			this.debugHelpers.normal.hide();
-
-		}
-
-		// Update the displays
-		this.debugHelpers.albedo.update();
-		this.debugHelpers.normal.update();
-
-	}
-
 	_destroyPendingStagingBuffers() {
 
 		for ( const buf of this._pendingStagingBuffers ) {
@@ -999,19 +912,6 @@ export class OIDNDenoiser extends EventDispatcher {
 		removeOidnTfjsBackend();
 		this._destroyGPUInputBuffers();
 
-		// Dispose debug helpers
-		if ( this.debugHelpers ) {
-
-			this.debugHelpers.albedo?.dispose();
-			this.debugHelpers.normal?.dispose();
-			this.debugHelpers = null;
-
-		}
-
-		// Clear texture references
-		this._lastAlbedoTexture = null;
-		this._lastNormalTexture = null;
-
 		// Clean up DOM
 		if ( this.output?.parentNode ) {
 

package/src/PathTracerApp.js

@@ -5,7 +5,6 @@ import {
 } from 'three';
 import { RectAreaLightTexturesLib } from 'three/addons/lights/RectAreaLightTexturesLib.js';
 import { SceneHelpers } from './SceneHelpers.js';
-import { createStats } from './managers/helpers/StatsHelper.js';
 import { PathTracer } from './Stages/PathTracer.js';
 import { NormalDepth } from './Stages/NormalDepth.js';
 import { MotionVector } from './Stages/MotionVector.js';
@@ -19,7 +18,7 @@ import { SSRC } from './Stages/SSRC.js';
 import { Compositor } from './Stages/Compositor.js';
 import { RenderPipeline } from './Pipeline/RenderPipeline.js';
 import { CompletionTracker } from './Pipeline/CompletionTracker.js';
-import { ENGINE_DEFAULTS as DEFAULT_STATE, FINAL_RENDER_CONFIG, PREVIEW_RENDER_CONFIG } from './EngineDefaults.js';
+import { ENGINE_DEFAULTS as DEFAULT_STATE, PRODUCTION_RENDER_CONFIG, INTERACTIVE_RENDER_CONFIG } from './EngineDefaults.js';
 import { updateStats, updateLoading, resetLoading, setStatusCallback, getDisplaySamples, disposeObjectFromMemory } from './Processor/utils.js';
 import { BuildTimer } from './Processor/BuildTimer.js';
 import { InteractionManager } from './managers/InteractionManager.js';
@@ -64,8 +63,11 @@ export class PathTracerApp extends EventDispatcher {
 	 * @param {HTMLCanvasElement} canvas - Canvas element for rendering
 	 * @param {Object} [options] - Engine options
 	 * @param {boolean} [options.autoResize=true] - Automatically listen for window resize events
-	 * @param {boolean} [options.showStats=true] - Show the performance stats panel
-	 * @param {HTMLElement} [options.statsContainer] - DOM element to append the stats panel to (defaults to document.body)
+	 * @param {HTMLElement} [options.container] - Single DOM parent the engine mounts all auxiliary
+	 *   elements into (HUD overlay, denoiser canvas). Defaults to `canvas.parentNode`.
+	 *
+	 * The engine dispatches `EngineEvents.FRAME` after each animate() iteration so hosts can
+	 * tick external instrumentation (e.g. a stats panel) without coupling the engine to it.
 	 */
 	constructor( canvas, options = {} ) {
 
@@ -85,8 +87,7 @@ export class PathTracerApp extends EventDispatcher {
 
 		this.canvas = canvas;
 		this._autoResize = options.autoResize !== false;
-		this._showStats = options.showStats !== false;
-		this._statsContainer = options.statsContainer || null;
+		this._container = options.container || null;
 
 		// ── Settings (single source of truth for all render parameters) ──
 		this.settings = new RenderSettings( DEFAULT_STATE );
@@ -210,8 +211,6 @@ export class PathTracerApp extends EventDispatcher {
 		this.stages.pathTracer.materialData.setMaterialData( new Float32Array( 16 ) );
 		this.stages.pathTracer.setupMaterial();
 
-		if ( this._showStats ) this._initStats();
-
 		this.isInitialized = true;
 		console.log( 'WebGPU Path Tracer App initialized' );
 
@@ -228,7 +227,7 @@ export class PathTracerApp extends EventDispatcher {
 
 		if ( this._loadingInProgress || this._sdf?.isProcessing ) {
 
-			this._stats?.update();
+			this.dispatchEvent( { type: EngineEvents.FRAME } );
 			return;
 
 		}
@@ -330,7 +329,7 @@ export class PathTracerApp extends EventDispatcher {
 		}
 
 		this._renderHelperOverlay();
-		this._stats?.update();
+		this.dispatchEvent( { type: EngineEvents.FRAME } );
 
 		this.renderer.resolveTimestampsAsync?.( TimestampQuery.RENDER );
 		this.renderer.resolveTimestampsAsync?.( TimestampQuery.COMPUTE );
@@ -363,7 +362,6 @@ export class PathTracerApp extends EventDispatcher {
 
 		this._paused = true;
 		this.stopAnimation();
-		if ( this._stats ) this._stats.dom.style.display = 'none';
 
 	}
 
@@ -372,7 +370,6 @@ export class PathTracerApp extends EventDispatcher {
 
 		this._paused = false;
 		if ( ! this.animationManagerId ) this.animate();
-		if ( this._stats ) this._stats.dom.style.display = '';
 
 	}
 
@@ -513,13 +510,6 @@ export class PathTracerApp extends EventDispatcher {
 		if ( this.renderer ) this.renderer._canvasTarget = null;
 		this.renderer = null;
 
-		if ( this._stats ) {
-
-			this._stats.dom.remove();
-			this._stats = null;
-
-		}
-
 		this.stages = {};
 		this.isInitialized = false;
 
@@ -910,26 +900,16 @@ export class PathTracerApp extends EventDispatcher {
 	// ═══════════════════════════════════════════════════════════════
 
 	/**
-	 * Configures the engine for a specific rendering mode.
-	 * @param {string} mode - 'preview' | 'final-render' | 'results'
+	 * Configures the engine for a specific rendering quality tier.
+	 * @param {'interactive' | 'production'} mode
 	 * @param {Object} [options]
 	 */
 	configureForMode( mode, options = {} ) {
 
-		if ( mode === 'results' ) {
-
-			this.pauseRendering = true;
-			this.cameraManager.controls.enabled = false;
-			this.renderer?.domElement && ( this.renderer.domElement.style.display = 'none' );
-			this.denoisingManager?.denoiser?.output && ( this.denoisingManager.denoiser.output.style.display = 'none' );
-			return;
-
-		}
-
-		const isFinal = mode === 'final-render';
-		const config = isFinal ? FINAL_RENDER_CONFIG : PREVIEW_RENDER_CONFIG;
+		const isProduction = mode === 'production';
+		const config = isProduction ? PRODUCTION_RENDER_CONFIG : INTERACTIVE_RENDER_CONFIG;
 
-		this.cameraManager.controls.enabled = ! isFinal;
+		this.cameraManager.controls.enabled = ! isProduction;
 
 		// Batch uniform updates via settings
 		this.settings.setMany( {
@@ -970,9 +950,6 @@ export class PathTracerApp extends EventDispatcher {
 
 		}
 
-		this.renderer?.domElement && ( this.renderer.domElement.style.display = 'block' );
-		this.denoisingManager?.denoiser?.output && ( this.denoisingManager.denoiser.output.style.display = 'block' );
-
 		this.needsReset = false;
 		this.pauseRendering = false;
 		this.reset();
@@ -1018,26 +995,21 @@ export class PathTracerApp extends EventDispatcher {
 	}
 
 	/**
-	 * Downloads a PNG screenshot of the current render.
+	 * Captures the current render as a Blob. Returns null if no canvas is
+	 * available. The host is responsible for downloading or otherwise
+	 * consuming the result.
+	 *
+	 * @param {Object}  [options]
+	 * @param {string}  [options.type='image/png']  - MIME type for the encoded image
+	 * @param {number}  [options.quality]           - 0–1 quality hint for lossy formats
+	 * @returns {Promise<Blob|null>}
 	 */
-	screenshot() {
+	screenshot( { type = 'image/png', quality } = {} ) {
 
 		const canvas = this.getCanvas();
-		if ( ! canvas ) return;
-
-		try {
-
-			const data = canvas.toDataURL( 'image/png' );
-			const link = document.createElement( 'a' );
-			link.href = data;
-			link.download = 'screenshot.png';
-			link.click();
-
-		} catch ( error ) {
-
-			console.error( 'Screenshot failed:', error );
+		if ( ! canvas ) return Promise.resolve( null );
 
-		}
+		return new Promise( ( resolve ) => canvas.toBlob( resolve, type, quality ) );
 
 	}
 
@@ -1146,6 +1118,34 @@ export class PathTracerApp extends EventDispatcher {
 
 	}
 
+	/**
+	 * The active mesh-bearing scene. Prefer this over reading `scene`/`meshScene`
+	 * directly — the engine may swap the underlying scene between rebuilds.
+	 * @returns {import('three').Scene}
+	 */
+	getScene() {
+
+		return this.meshScene || this.scene;
+
+	}
+
+	// Sets when `visible` is a boolean; toggles when it's an updater (prev) => next.
+	/**
+	 * @param {string} uuid
+	 * @param {boolean | ((prev: boolean) => boolean)} visible
+	 * @returns {boolean | null} new visibility, or null if the mesh wasn't found
+	 */
+	setMeshVisibilityByUuid( uuid, visible ) {
+
+		const object = this.getScene()?.getObjectByProperty( 'uuid', uuid );
+		if ( ! object ) return null;
+		const next = typeof visible === 'function' ? !! visible( object.visible ) : !! visible;
+		object.visible = next;
+		this.updateAllMeshVisibility();
+		return next;
+
+	}
+
 	/**
 	 * Updates a material's texture transform (offset, repeat, rotation).
 	 * @param {number} materialIndex
@@ -1537,9 +1537,9 @@ export class PathTracerApp extends EventDispatcher {
 			stage.isComplete = false;
 			this.completion.resumeFromPause();
 
-			this.canvas.style.opacity = '1';
-			const denoiserOutput = this.denoisingManager?.denoiser?.output;
-			if ( denoiserOutput ) denoiserOutput.style.display = 'none';
+			// Restore live preview: abort() on the denoising manager already
+			// handles canvas opacity, denoiser output visibility, and upscaler reset.
+			this.denoisingManager?.abort( this.canvas );
 
 			this.dispatchEvent( { type: EngineEvents.RENDER_RESET } );
 			this.wake();
@@ -1548,13 +1548,6 @@ export class PathTracerApp extends EventDispatcher {
 
 	}
 
-	_initStats() {
-
-		const container = this._statsContainer || this.canvas.parentElement || document.body;
-		this._stats = createStats( this.renderer, container );
-
-	}
-
 	_setupAutoExposureListener() {
 
 		if ( ! this.stages.autoExposure ) return;
@@ -1592,6 +1585,9 @@ export class PathTracerApp extends EventDispatcher {
 			renderHeight: this.denoisingManager?._lastRenderHeight || this.canvas.clientHeight || 1,
 		} );
 
+		this._container = this._container || this.canvas.parentNode || null;
+		this.overlayManager.mount( this._container );
+
 	}
 
 

package/src/Processor/AssetLoader.js

@@ -11,6 +11,7 @@ import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
 import { unzipSync, strFromU8 } from 'three/addons/libs/fflate.module.js';
 import { disposeObjectFromMemory, updateLoading } from './utils';
 import { BuildTimer } from './BuildTimer.js';
+import { getAssetConfig } from '../AssetConfig.js';
 
 // Define supported file formats
 const SUPPORTED_FORMATS = {
@@ -739,12 +740,14 @@ export class AssetLoader extends EventDispatcher {
 	// worker pools. Callers must invoke _disposeGLTFLoader() to terminate them.
 	async createGLTFLoader() {
 
+		const { dracoDecoderPath, ktx2TranscoderPath } = getAssetConfig();
+
 		const dracoLoader = new DRACOLoader();
 		dracoLoader.setDecoderConfig( { type: 'js' } );
-		dracoLoader.setDecoderPath( 'https://www.gstatic.com/draco/v1/decoders/' );
+		dracoLoader.setDecoderPath( dracoDecoderPath );
 
 		const ktx2Loader = new KTX2Loader();
-		ktx2Loader.setTranscoderPath( 'https://cdn.jsdelivr.net/npm/three@0.183.2/examples/jsm/libs/basis/' );
+		ktx2Loader.setTranscoderPath( ktx2TranscoderPath );
 
 		if ( this.renderer ) {