rayzee 5.2.0 → 5.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayzee",
-  "version": "5.2.0",
+  "version": "5.3.2",
   "type": "module",
   "description": "Real-time WebGPU path tracing engine built on Three.js",
   "main": "dist/rayzee.umd.js",

package/src/PathTracerApp.js

@@ -128,6 +128,9 @@ export class PathTracerApp extends EventDispatcher {
 
 		// Resolution state
 		this._resizeDebounceTimer = null;
+		this._resizeObserver = null;
+		this._lastObservedWidth = 0;
+		this._lastObservedHeight = 0;
 
 	}
 
@@ -383,7 +386,7 @@ export class PathTracerApp extends EventDispatcher {
 		}
 
 		clearTimeout( this._resizeDebounceTimer );
-		window.removeEventListener( 'resize', this.resizeHandler );
+		this._resizeObserver?.disconnect();
 
 		this.isInitialized = false;
 
@@ -639,6 +642,9 @@ export class PathTracerApp extends EventDispatcher {
 		const width = this.canvas.clientWidth;
 		const height = this.canvas.clientHeight;
 		if ( width === 0 || height === 0 ) return;
+		if ( width === this._lastObservedWidth && height === this._lastObservedHeight ) return;
+		this._lastObservedWidth = width;
+		this._lastObservedHeight = height;
 
 		this.renderer.setPixelRatio( 1.0 );
 		this.renderer.setSize( width, height, false );
@@ -1014,6 +1020,7 @@ export class PathTracerApp extends EventDispatcher {
 
 		this._sdf = new SceneProcessor();
 		this.assetLoader = new AssetLoader( this.meshScene, this.cameraManager.camera, this.cameraManager.controls );
+		this.assetLoader.setRenderer( this.renderer );
 		this.assetLoader.createFloorPlane();
 
 		this.cameraManager.controls.addEventListener( 'change', () => {
@@ -1154,10 +1161,10 @@ export class PathTracerApp extends EventDispatcher {
 
 		// Resize handling
 		this.onResize();
-		this.resizeHandler = () => this.onResize();
 		if ( this._autoResize ) {
 
-			window.addEventListener( 'resize', this.resizeHandler );
+			this._resizeObserver = new ResizeObserver( () => this.onResize() );
+			this._resizeObserver.observe( this.canvas );
 
 		}
 

package/src/Processor/AssetLoader.js

@@ -4,6 +4,7 @@ import { Box3, Vector3, RectAreaLight, Color, FloatType, LinearFilter, Equirecta
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
 import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
 import { EXRLoader } from 'three/addons/loaders/EXRLoader.js';
 import { createMeshesFromMultiMaterialMesh } from 'three/addons/utils/SceneUtils.js';
 import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
@@ -41,6 +42,13 @@ export class AssetLoader extends EventDispatcher {
 		this.loaderCache = {};
 		this.uploadedFileInfo = null;
 		this.animations = [];
+		this.renderer = null;
+
+	}
+
+	setRenderer( renderer ) {
+
+		this.renderer = renderer;
 
 	}
 
@@ -698,8 +706,31 @@ export class AssetLoader extends EventDispatcher {
 		dracoLoader.setDecoderConfig( { type: 'js' } );
 		dracoLoader.setDecoderPath( 'https://www.gstatic.com/draco/v1/decoders/' );
 
+		const ktx2Loader = new KTX2Loader();
+		ktx2Loader.setTranscoderPath( 'https://cdn.jsdelivr.net/npm/three@0.183.2/examples/jsm/libs/basis/' );
+
+		if ( this.renderer ) {
+
+			ktx2Loader.detectSupport( this.renderer );
+
+			// Force RGBA output for Basis Universal textures. GPU-compressed
+			// texture arrays (CompressedArrayTexture) are blocked by a Three.js
+			// TSL limitation: the node compiler maintains global state that
+			// survives dispose(), so swapping texture array formats between
+			// DataArrayTexture and CompressedArrayTexture at runtime causes
+			// WGSL compilation failures (unresolved uniform bindings).
+			ktx2Loader.workerConfig = {
+				astcSupported: false, etc1Supported: false, etc2Supported: false,
+				dxtSupported: false, bptcSupported: false, pvrtcSupported: false,
+			};
+
+		}
+
+		this.loaderCache.ktx2 = ktx2Loader;
+
 		const loader = new GLTFLoader();
 		loader.setDRACOLoader( dracoLoader );
+		loader.setKTX2Loader( ktx2Loader );
 		loader.setMeshoptDecoder( MeshoptDecoder );
 
 		this.loaderCache.gltf = loader;

package/src/Processor/GeometryExtractor.js

@@ -542,55 +542,29 @@ export class GeometryExtractor {
 		for ( let i = 0; i < triangleCount; i ++ ) {
 
 			const i3 = i * 3;
+			const idxA = indices ? indices[ i3 + 0 ] : i3 + 0;
+			const idxB = indices ? indices[ i3 + 1 ] : i3 + 1;
+			const idxC = indices ? indices[ i3 + 2 ] : i3 + 2;
 
-			// Get vertices
-			if ( indices ) {
+			this.getVertex( positions, idxA, posA );
+			this.getVertex( positions, idxB, posB );
+			this.getVertex( positions, idxC, posC );
 
-				this.getVertexFromIndices( positions, indices[ i3 + 0 ], posA );
-				this.getVertexFromIndices( positions, indices[ i3 + 1 ], posB );
-				this.getVertexFromIndices( positions, indices[ i3 + 2 ], posC );
+			this.getVertex( normals, idxA, normalA );
+			this.getVertex( normals, idxB, normalB );
+			this.getVertex( normals, idxC, normalC );
 
-				this.getVertexFromIndices( normals, indices[ i3 + 0 ], normalA );
-				this.getVertexFromIndices( normals, indices[ i3 + 1 ], normalB );
-				this.getVertexFromIndices( normals, indices[ i3 + 2 ], normalC );
+			if ( uvs ) {
 
-				if ( uvs ) {
-
-					this.getVertexFromIndices( uvs, indices[ i3 + 0 ], uvA );
-					this.getVertexFromIndices( uvs, indices[ i3 + 1 ], uvB );
-					this.getVertexFromIndices( uvs, indices[ i3 + 2 ], uvC );
-
-				} else {
-
-					uvA.set( 0, 0 );
-					uvB.set( 0, 0 );
-					uvC.set( 0, 0 );
-
-				}
+				this.getVertex( uvs, idxA, uvA );
+				this.getVertex( uvs, idxB, uvB );
+				this.getVertex( uvs, idxC, uvC );
 
 			} else {
 
-				this.getVertex( positions, i3 + 0, posA );
-				this.getVertex( positions, i3 + 1, posB );
-				this.getVertex( positions, i3 + 2, posC );
-
-				this.getVertex( normals, i3 + 0, normalA );
-				this.getVertex( normals, i3 + 1, normalB );
-				this.getVertex( normals, i3 + 2, normalC );
-
-				if ( uvs ) {
-
-					this.getVertex( uvs, i3 + 0, uvA );
-					this.getVertex( uvs, i3 + 1, uvB );
-					this.getVertex( uvs, i3 + 2, uvC );
-
-				} else {
-
-					uvA.set( 0, 0 );
-					uvB.set( 0, 0 );
-					uvC.set( 0, 0 );
-
-				}
+				uvA.set( 0, 0 );
+				uvB.set( 0, 0 );
+				uvC.set( 0, 0 );
 
 			}
 
@@ -689,37 +663,18 @@ export class GeometryExtractor {
 	}
 
 	// Optimized attribute access methods
-	getVertexFromIndices( attribute, index, target ) {
-
-		if ( attribute.itemSize === 2 ) {
-
-			target.x = attribute.array[ index * 2 ];
-			target.y = attribute.array[ index * 2 + 1 ];
-
-		} else if ( attribute.itemSize === 3 ) {
-
-			target.x = attribute.array[ index * 3 ];
-			target.y = attribute.array[ index * 3 + 1 ];
-			target.z = attribute.array[ index * 3 + 2 ];
-
-		}
-
-		return target;
-
-	}
-
 	getVertex( attribute, index, target ) {
 
 		if ( attribute.itemSize === 2 ) {
 
-			target.x = attribute.array[ index * 2 ];
-			target.y = attribute.array[ index * 2 + 1 ];
+			target.x = attribute.getX( index );
+			target.y = attribute.getY( index );
 
-		} else if ( attribute.itemSize === 3 ) {
+		} else if ( attribute.itemSize >= 3 ) {
 
-			target.x = attribute.array[ index * 3 ];
-			target.y = attribute.array[ index * 3 + 1 ];
-			target.z = attribute.array[ index * 3 + 2 ];
+			target.x = attribute.getX( index );
+			target.y = attribute.getY( index );
+			target.z = attribute.getZ( index );
 
 		}
 

package/src/Processor/TextureCreator.js

@@ -496,8 +496,11 @@ export class TextureCreator {
 		const cached = this.textureCache.get( cacheKey );
 		if ( cached ) return cached;
 
+		// Normalize non-drawable images (KTX2 CompressedTexture RGBA, DataTexture)
+		const { normalized, bitmapsToClose } = await this._normalizeTexturesForProcessing( textures );
+
 		// Select optimal processing strategy
-		const strategy = this.selectProcessingStrategy( textures );
+		const strategy = this.selectProcessingStrategy( normalized );
 		let result;
 
 		try {
@@ -505,19 +508,19 @@ export class TextureCreator {
 			switch ( strategy.method ) {
 
 				case 'worker-direct':
-					result = await this.processWithWorkerDirect( textures );
+					result = await this.processWithWorkerDirect( normalized );
 					break;
 				case 'worker-chunked':
-					result = await this.processWithWorkerChunked( textures, strategy.chunkSize );
+					result = await this.processWithWorkerChunked( normalized, strategy.chunkSize );
 					break;
 				case 'main-batch':
-					result = await this.processOnMainThreadBatch( textures, strategy.batchSize );
+					result = await this.processOnMainThreadBatch( normalized, strategy.batchSize );
 					break;
 				case 'main-streaming':
-					result = await this.processOnMainThreadStreaming( textures );
+					result = await this.processOnMainThreadStreaming( normalized );
 					break;
 				default:
-					result = await this.processOnMainThreadSync( textures );
+					result = await this.processOnMainThreadSync( normalized );
 
 			}
 
@@ -533,7 +536,11 @@ export class TextureCreator {
 		} catch ( error ) {
 
 			console.warn( 'Texture processing failed, trying fallback:', error );
-			return await this.processOnMainThreadSync( textures );
+			return await this.processOnMainThreadSync( normalized );
+
+		} finally {
+
+			for ( const bmp of bitmapsToClose ) bmp.close();
 
 		}
 
@@ -1258,6 +1265,109 @@ export class TextureCreator {
 
 	}
 
+	// ── KTX2 / DataTexture normalization ────────────────────────────────
+
+	/**
+	 * Normalize textures so every entry has a drawable `.image`.
+	 * - RGBA CompressedTexture (KTX2 Basis → RGBA): pixel data from mipmaps[0]
+	 * - GPU-compressed texture (BC7/ASTC/ETC2): warning (should be pre-decompressed)
+	 * - DataTexture (raw RGBA pixels): pixel data from image.data
+	 * - Regular texture: passed through as-is
+	 *
+	 * Bitmap creation is parallelized via Promise.all.
+	 */
+	async _normalizeTexturesForProcessing( textures ) {
+
+		const normalized = [];
+		const bitmapsToClose = [];
+		const bitmapJobs = []; // { index, promise }
+
+		for ( const tex of textures ) {
+
+			if ( ! tex?.image ) continue;
+
+			// RGBA CompressedTexture (KTX2 Basis transcode wraps output as CompressedTexture)
+			if ( tex.isCompressedTexture && tex.format === RGBAFormat && tex.mipmaps?.[ 0 ]?.data ) {
+
+				const mip = tex.mipmaps[ 0 ];
+				const idx = normalized.length;
+				normalized.push( null ); // placeholder — filled after Promise.all
+				bitmapJobs.push( { index: idx, promise: _rawPixelsToBitmap( mip.data, mip.width, mip.height ) } );
+				continue;
+
+			}
+
+			// True GPU-compressed texture in a mixed group — can't extract pixels on CPU.
+			// All-compressed groups are handled by the CompressedArrayTexture path upstream.
+			if ( tex.isCompressedTexture ) {
+
+				console.warn( '[TextureCreator] GPU-compressed texture in mixed group — using placeholder' );
+				normalized.push( null );
+				continue;
+
+			}
+
+			// DataTexture with raw pixel array
+			if ( tex.image.data && ! ( tex.image instanceof HTMLImageElement ) &&
+				! ( tex.image instanceof HTMLCanvasElement ) &&
+				! ( typeof ImageBitmap !== 'undefined' && tex.image instanceof ImageBitmap ) ) {
+
+				const idx = normalized.length;
+				normalized.push( null );
+				bitmapJobs.push( { index: idx, promise: _rawPixelsToBitmap( tex.image.data, tex.image.width, tex.image.height ) } );
+				continue;
+
+			}
+
+			normalized.push( tex );
+
+		}
+
+		// Resolve all bitmap conversions in parallel
+		if ( bitmapJobs.length > 0 ) {
+
+			const results = await Promise.allSettled( bitmapJobs.map( j => j.promise ) );
+
+			for ( let i = 0; i < bitmapJobs.length; i ++ ) {
+
+				const { index } = bitmapJobs[ i ];
+				const result = results[ i ];
+
+				if ( result.status === 'fulfilled' ) {
+
+					const bitmap = result.value;
+					bitmapsToClose.push( bitmap );
+					normalized[ index ] = { image: bitmap };
+
+				} else {
+
+					console.warn( '[TextureCreator] Failed to create ImageBitmap:', result.reason );
+
+				}
+
+			}
+
+		}
+
+		// Replace any remaining nulls (failed conversions) with a 1x1 white placeholder
+		// to preserve array indexing alignment with material texture indices.
+		for ( let i = 0; i < normalized.length; i ++ ) {
+
+			if ( normalized[ i ] === null ) {
+
+				const placeholder = new Uint8ClampedArray( [ 255, 255, 255, 255 ] );
+				const bitmap = await createImageBitmap( new ImageData( placeholder, 1, 1 ) );
+				bitmapsToClose.push( bitmap );
+				normalized[ i ] = { image: bitmap };
+
+			}
+
+		}
+
+		return { normalized, bitmapsToClose };
+
+	}
+
 	createFallbackTexture() {
 
 		const data = new Uint8Array( [ 255, 255, 255, 255 ] );
@@ -1291,3 +1401,14 @@ export class TextureCreator {
 	}
 
 }
+
+// ── Helpers ──────────────────────────────────────────────────────────
+
+/** Convert raw RGBA pixel data to an ImageBitmap (zero-copy Uint8ClampedArray view). */
+function _rawPixelsToBitmap( data, width, height ) {
+
+	const clamped = new Uint8ClampedArray( data.buffer, data.byteOffset, data.byteLength );
+	return createImageBitmap( new ImageData( clamped, width, height ) );
+
+}
+

package/src/Stages/Display.js

@@ -111,6 +111,7 @@ export class Display extends RenderStage {
 	dispose() {
 
 		this.displayMaterial?.dispose();
+		this.displayQuad?.dispose();
 
 	}
 

package/src/managers/InteractionManager.js

@@ -699,7 +699,7 @@ export class InteractionManager extends EventDispatcher {
 
 			this.select( event.object );
 			app.refreshFrame();
-			app.dispatchEvent( { type: 'objectSelected', object: event.object, uuid: event.uuid } );
+			app.dispatchEvent( { type: EngineEvents.OBJECT_SELECTED, object: event.object, uuid: event.uuid } );
 
 		} );
 
@@ -707,7 +707,7 @@ export class InteractionManager extends EventDispatcher {
 
 			this.select( null );
 			app.refreshFrame();
-			app.dispatchEvent( { type: 'objectDeselected', object: event.object, uuid: event.uuid } );
+			app.dispatchEvent( { type: EngineEvents.OBJECT_DESELECTED, object: event.object, uuid: event.uuid } );
 
 		} );