@woosh/meep-engine 2.100.0 → 2.100.2

package/build/meep.module.js

@@ -41384,6 +41384,133 @@ class FileLoader extends Loader {
 
 }
 
+/**
+ * Abstract Base class to block based textures loader (dds, pvr, ...)
+ *
+ * Sub classes have to implement the parse() method which will be used in load().
+ */
+
+class CompressedTextureLoader extends Loader {
+
+	constructor( manager ) {
+
+		super( manager );
+
+	}
+
+	load( url, onLoad, onProgress, onError ) {
+
+		const scope = this;
+
+		const images = [];
+
+		const texture = new CompressedTexture();
+
+		const loader = new FileLoader( this.manager );
+		loader.setPath( this.path );
+		loader.setResponseType( 'arraybuffer' );
+		loader.setRequestHeader( this.requestHeader );
+		loader.setWithCredentials( scope.withCredentials );
+
+		let loaded = 0;
+
+		function loadTexture( i ) {
+
+			loader.load( url[ i ], function ( buffer ) {
+
+				const texDatas = scope.parse( buffer, true );
+
+				images[ i ] = {
+					width: texDatas.width,
+					height: texDatas.height,
+					format: texDatas.format,
+					mipmaps: texDatas.mipmaps
+				};
+
+				loaded += 1;
+
+				if ( loaded === 6 ) {
+
+					if ( texDatas.mipmapCount === 1 ) texture.minFilter = LinearFilter;
+
+					texture.image = images;
+					texture.format = texDatas.format;
+					texture.needsUpdate = true;
+
+					if ( onLoad ) onLoad( texture );
+
+				}
+
+			}, onProgress, onError );
+
+		}
+
+		if ( Array.isArray( url ) ) {
+
+			for ( let i = 0, il = url.length; i < il; ++ i ) {
+
+				loadTexture( i );
+
+			}
+
+		} else {
+
+			// compressed cubemap texture stored in a single DDS file
+
+			loader.load( url, function ( buffer ) {
+
+				const texDatas = scope.parse( buffer, true );
+
+				if ( texDatas.isCubemap ) {
+
+					const faces = texDatas.mipmaps.length / texDatas.mipmapCount;
+
+					for ( let f = 0; f < faces; f ++ ) {
+
+						images[ f ] = { mipmaps: [] };
+
+						for ( let i = 0; i < texDatas.mipmapCount; i ++ ) {
+
+							images[ f ].mipmaps.push( texDatas.mipmaps[ f * texDatas.mipmapCount + i ] );
+							images[ f ].format = texDatas.format;
+							images[ f ].width = texDatas.width;
+							images[ f ].height = texDatas.height;
+
+						}
+
+					}
+
+					texture.image = images;
+
+				} else {
+
+					texture.image.width = texDatas.width;
+					texture.image.height = texDatas.height;
+					texture.mipmaps = texDatas.mipmaps;
+
+				}
+
+				if ( texDatas.mipmapCount === 1 ) {
+
+					texture.minFilter = LinearFilter;
+
+				}
+
+				texture.format = texDatas.format;
+				texture.needsUpdate = true;
+
+				if ( onLoad ) onLoad( texture );
+
+			}, onProgress, onError );
+
+		}
+
+		return texture;
+
+	}
+
+}
+
 class ImageLoader extends Loader {
 
 	constructor( manager ) {
@@ -53659,14 +53786,15 @@ function sRGB_to_linear(
 }
 
 /**
+ * @extends {Array.<number>}
  * @class
  */
 class Color {
     /**
      *
-     * @param {number} r value from 0 to 1
-     * @param {number} g value from 0 to 1
-     * @param {number} b value from 0 to 1
+     * @param {number} [r] Red from 0 to 1
+     * @param {number} [g] Green from 0 to 1
+     * @param {number} [b] Blue from 0 to 1
      * @param {number} [a] value from 0 to 1 Alpha channel (transparency)
      */
     constructor(r = 0, g = 0, b = 0, a = 1) {
@@ -53786,6 +53914,20 @@ class Color {
         this.set(r, g, b, this.a);
     }
 
+    /**
+     *
+     * @param {number} r
+     * @param {number} g
+     * @param {number} b
+     */
+    setRGBUint8(r, g, b) {
+        this.setRGB(
+            uint82float(r),
+            uint82float(g),
+            uint82float(b),
+        );
+    }
+
     /**
      * set alpha
      * @param {number} a
@@ -53803,11 +53945,23 @@ class Color {
      */
     set(r, g, b, a) {
 
+        // remember old values
         const _r = this.r;
         const _g = this.g;
         const _b = this.b;
         const _a = this.a;
 
+        if (
+            _r === r
+            && _g === g
+            && _b === b
+            && _a === a
+        ) {
+            // no change
+            return;
+        }
+
+        // set new values
         this.r = r;
         this.g = g;
         this.b = b;
@@ -54049,7 +54203,7 @@ class Color {
         const g = (value >> 8) & 0xFF;
         const b = (value) & 0xFF;
 
-        this.setRGB(r / 255, g / 255, b / 255);
+        this.setRGBUint8(r, g, b);
     }
 
     /**
@@ -54114,8 +54268,7 @@ class Color {
     }
 
     fromJSON({ r, g, b, a = 1 }) {
-        this.setRGB(r, g, b);
-        this.a = a;
+        this.set(r, g, b, a);
     }
 
     toJSON() {
@@ -54169,8 +54322,7 @@ class Color {
         const b = buffer.readFloat32();
         const a = buffer.readFloat32();
 
-        this.setRGB(r, g, b);
-        this.a = a;
+        this.set(r, g, b, a);
     }
 
     /**
@@ -67673,13 +67825,17 @@ class ArrayBufferLoader extends AssetLoader {
 
             }
 
+            /**
+             * @type {ReadableStreamDefaultReader<Uint8Array>}
+             */
             const reader = response.body.getReader();
+
             const contentLength = response.headers.get('Content-Length');
             const total = contentLength ? parseInt(contentLength) : 0;
             let loaded = 0;
 
             // periodically read data into the new stream tracking while download progress
-            const stream = new ReadableStream({
+            const stream_prototype = {
                 type: "bytes",
                 start(controller) {
 
@@ -67708,7 +67864,22 @@ class ArrayBufferLoader extends AssetLoader {
 
                 }
 
-            });
+            };
+
+            /**
+             * @type {ReadableStream}
+             */
+            let stream;
+
+            try {
+                stream = new ReadableStream(stream_prototype);
+            } catch (e) {
+                /*
+                 Workaround for Safari bug: "TypeError: ReadableByteStreamController is not implemented"
+                 By not wrapping the response we lose the ability to track progress, but that's not a critical issue in most cases
+                 */
+                return response;
+            }
 
             return new Response(stream);
         }
@@ -68174,6 +68345,377 @@ class ImageRGBADataLoader extends AssetLoader {
     }
 }
 
+class DDSLoader extends CompressedTextureLoader {
+
+	constructor( manager ) {
+
+		super( manager );
+
+	}
+
+	parse( buffer, loadMipmaps ) {
+
+		const dds = { mipmaps: [], width: 0, height: 0, format: null, mipmapCount: 1 };
+
+		// Adapted from @toji's DDS utils
+		// https://github.com/toji/webgl-texture-utils/blob/master/texture-util/dds.js
+
+		// All values and structures referenced from:
+		// http://msdn.microsoft.com/en-us/library/bb943991.aspx/
+
+		const DDS_MAGIC = 0x20534444;
+
+		// let DDSD_CAPS = 0x1;
+		// let DDSD_HEIGHT = 0x2;
+		// let DDSD_WIDTH = 0x4;
+		// let DDSD_PITCH = 0x8;
+		// let DDSD_PIXELFORMAT = 0x1000;
+		const DDSD_MIPMAPCOUNT = 0x20000;
+		// let DDSD_LINEARSIZE = 0x80000;
+		// let DDSD_DEPTH = 0x800000;
+
+		// let DDSCAPS_COMPLEX = 0x8;
+		// let DDSCAPS_MIPMAP = 0x400000;
+		// let DDSCAPS_TEXTURE = 0x1000;
+
+		const DDSCAPS2_CUBEMAP = 0x200;
+		const DDSCAPS2_CUBEMAP_POSITIVEX = 0x400;
+		const DDSCAPS2_CUBEMAP_NEGATIVEX = 0x800;
+		const DDSCAPS2_CUBEMAP_POSITIVEY = 0x1000;
+		const DDSCAPS2_CUBEMAP_NEGATIVEY = 0x2000;
+		const DDSCAPS2_CUBEMAP_POSITIVEZ = 0x4000;
+		const DDSCAPS2_CUBEMAP_NEGATIVEZ = 0x8000;
+		// let DDSCAPS2_VOLUME = 0x200000;
+
+		// let DDPF_ALPHAPIXELS = 0x1;
+		// let DDPF_ALPHA = 0x2;
+		const DDPF_FOURCC = 0x4;
+		// let DDPF_RGB = 0x40;
+		// let DDPF_YUV = 0x200;
+		// let DDPF_LUMINANCE = 0x20000;
+
+		function fourCCToInt32( value ) {
+
+			return value.charCodeAt( 0 ) +
+				( value.charCodeAt( 1 ) << 8 ) +
+				( value.charCodeAt( 2 ) << 16 ) +
+				( value.charCodeAt( 3 ) << 24 );
+
+		}
+
+		function loadARGBMip( buffer, dataOffset, width, height ) {
+
+			const dataLength = width * height * 4;
+			const srcBuffer = new Uint8Array( buffer, dataOffset, dataLength );
+			const byteArray = new Uint8Array( dataLength );
+			let dst = 0;
+			let src = 0;
+			for ( let y = 0; y < height; y ++ ) {
+
+				for ( let x = 0; x < width; x ++ ) {
+
+					const b = srcBuffer[ src ]; src ++;
+					const g = srcBuffer[ src ]; src ++;
+					const r = srcBuffer[ src ]; src ++;
+					const a = srcBuffer[ src ]; src ++;
+					byteArray[ dst ] = r; dst ++;	//r
+					byteArray[ dst ] = g; dst ++;	//g
+					byteArray[ dst ] = b; dst ++;	//b
+					byteArray[ dst ] = a; dst ++;	//a
+
+				}
+
+			}
+
+			return byteArray;
+
+		}
+
+		const FOURCC_DXT1 = fourCCToInt32( 'DXT1' );
+		const FOURCC_DXT3 = fourCCToInt32( 'DXT3' );
+		const FOURCC_DXT5 = fourCCToInt32( 'DXT5' );
+		const FOURCC_ETC1 = fourCCToInt32( 'ETC1' );
+
+		const headerLengthInt = 31; // The header length in 32 bit ints
+
+		// Offsets into the header array
+
+		const off_magic = 0;
+
+		const off_size = 1;
+		const off_flags = 2;
+		const off_height = 3;
+		const off_width = 4;
+
+		const off_mipmapCount = 7;
+
+		const off_pfFlags = 20;
+		const off_pfFourCC = 21;
+		const off_RGBBitCount = 22;
+		const off_RBitMask = 23;
+		const off_GBitMask = 24;
+		const off_BBitMask = 25;
+		const off_ABitMask = 26;
+
+		// let off_caps = 27;
+		const off_caps2 = 28;
+		// let off_caps3 = 29;
+		// let off_caps4 = 30;
+
+		// Parse header
+
+		const header = new Int32Array( buffer, 0, headerLengthInt );
+
+		if ( header[ off_magic ] !== DDS_MAGIC ) {
+			return dds;
+
+		}
+
+		if ( ! header[ off_pfFlags ] & DDPF_FOURCC ) {
+			return dds;
+
+		}
+
+		let blockBytes;
+
+		const fourCC = header[ off_pfFourCC ];
+
+		let isRGBAUncompressed = false;
+
+		switch ( fourCC ) {
+
+			case FOURCC_DXT1:
+
+				blockBytes = 8;
+				dds.format = RGB_S3TC_DXT1_Format;
+				break;
+
+			case FOURCC_DXT3:
+
+				blockBytes = 16;
+				dds.format = RGBA_S3TC_DXT3_Format;
+				break;
+
+			case FOURCC_DXT5:
+
+				blockBytes = 16;
+				dds.format = RGBA_S3TC_DXT5_Format;
+				break;
+
+			case FOURCC_ETC1:
+
+				blockBytes = 8;
+				dds.format = RGB_ETC1_Format;
+				break;
+
+			default:
+
+				if ( header[ off_RGBBitCount ] === 32
+					&& header[ off_RBitMask ] & 0xff0000
+					&& header[ off_GBitMask ] & 0xff00
+					&& header[ off_BBitMask ] & 0xff
+					&& header[ off_ABitMask ] & 0xff000000 ) {
+
+					isRGBAUncompressed = true;
+					blockBytes = 64;
+					dds.format = RGBAFormat;
+
+				} else {
+					return dds;
+
+				}
+
+		}
+
+		dds.mipmapCount = 1;
+
+		if ( header[ off_flags ] & DDSD_MIPMAPCOUNT && loadMipmaps !== false ) {
+
+			dds.mipmapCount = Math.max( 1, header[ off_mipmapCount ] );
+
+		}
+
+		const caps2 = header[ off_caps2 ];
+		dds.isCubemap = caps2 & DDSCAPS2_CUBEMAP ? true : false;
+		if ( dds.isCubemap && (
+			! ( caps2 & DDSCAPS2_CUBEMAP_POSITIVEX ) ||
+			! ( caps2 & DDSCAPS2_CUBEMAP_NEGATIVEX ) ||
+			! ( caps2 & DDSCAPS2_CUBEMAP_POSITIVEY ) ||
+			! ( caps2 & DDSCAPS2_CUBEMAP_NEGATIVEY ) ||
+			! ( caps2 & DDSCAPS2_CUBEMAP_POSITIVEZ ) ||
+			! ( caps2 & DDSCAPS2_CUBEMAP_NEGATIVEZ )
+		) ) {
+			return dds;
+
+		}
+
+		dds.width = header[ off_width ];
+		dds.height = header[ off_height ];
+
+		let dataOffset = header[ off_size ] + 4;
+
+		// Extract mipmaps buffers
+
+		const faces = dds.isCubemap ? 6 : 1;
+
+		for ( let face = 0; face < faces; face ++ ) {
+
+			let width = dds.width;
+			let height = dds.height;
+
+			for ( let i = 0; i < dds.mipmapCount; i ++ ) {
+
+				let byteArray, dataLength;
+
+				if ( isRGBAUncompressed ) {
+
+					byteArray = loadARGBMip( buffer, dataOffset, width, height );
+					dataLength = byteArray.length;
+
+				} else {
+
+					dataLength = Math.max( 4, width ) / 4 * Math.max( 4, height ) / 4 * blockBytes;
+					byteArray = new Uint8Array( buffer, dataOffset, dataLength );
+
+				}
+
+				const mipmap = { 'data': byteArray, 'width': width, 'height': height };
+				dds.mipmaps.push( mipmap );
+
+				dataOffset += dataLength;
+
+				width = Math.max( width >> 1, 1 );
+				height = Math.max( height >> 1, 1 );
+
+			}
+
+		}
+
+		return dds;
+
+	}
+
+}
+
+/**
+ *
+ * @param {Texture} t
+ * @returns {Texture}
+ */
+function cloneTexture(t) {
+    const clone = t.clone();
+
+    //apparently cloned textures need this trick to work
+    clone.needsUpdate = true;
+
+    return clone;
+}
+
+function loadDDSTexture(path, success, failure, progress) {
+    function computeByteSize(texture) {
+        let result = 0;
+        const images = texture.image;
+        for (let i = 0; i < images.length; i++) {
+            const image = images[i];
+            const mipmaps = image.mipmaps;
+            for (let j = 0; j < mipmaps.length; j++) {
+                const mipmap = mipmaps[j];
+                /**
+                 * @type {Uint8Array}
+                 */
+                const data = mipmap.data;
+                result += data.length;
+            }
+        }
+        return result;
+    }
+
+    const loader = new DDSLoader();
+    loader.load(path, function (texture) {
+        const byteSize = computeByteSize(texture);
+
+        function factory() {
+            return cloneTexture(texture);
+        }
+
+        const asset = new Asset(factory, byteSize);
+
+        success(asset);
+
+    }, progress, failure);
+}
+
+const textureLoader = new TextureLoader();
+
+/**
+ *
+ * @param {Texture} texture
+ * @return {number}
+ */
+function computeTextureByteSize(texture) {
+    const image = texture.image;
+    if (image instanceof ImageData) {
+        return image.array.length;
+    } else {
+        //TODO do actual computation
+        //don't know
+        return 1;
+    }
+}
+function loadStandardImageTexture(path, success, failure, progress) {
+
+
+
+    textureLoader.load(path, function (texture) {
+
+        texture.flipY = false;
+
+        const byteSize = computeTextureByteSize(texture);
+
+        const asset = new Asset(function () {
+            return cloneTexture(texture);
+        }, byteSize);
+
+        success(asset);
+    }, progress, failure);
+}
+
+class TextureAssetLoader extends AssetLoader {
+    load(scope, path, success, failure, progress) {
+        //figure out what kind of a texture it is
+        let fileExtension = computeFileExtension(path);
+
+        if (fileExtension === null) {
+            //check if it's a data path
+
+            const match = path.match(/^data\:image\/([a-zA-Z0-9]+)\;/);
+
+            if (match === null) {
+                throw new Error(`no file extension on path '${path}'`);
+
+            } else {
+                //seems ok
+                fileExtension = match[1];
+            }
+
+        }
+
+        const lowerCaseExtension = fileExtension.toLowerCase();
+        switch (lowerCaseExtension) {
+            case  'dds':
+                loadDDSTexture(path, success, failure, progress);
+                break;
+            case 'png':
+            case 'jpg':
+                loadStandardImageTexture(path, success, failure, progress);
+                break;
+            default:
+                throw new Error(`Unsupported texture file format: '${lowerCaseExtension}'`);
+
+        }
+    }
+}
+
 /**
  * Utility class for managing connection between listeners to signals
  */
@@ -69744,9 +70286,8 @@ class TerrainSystem extends System {
 
         const am = this.assetManager;
 
-        if (!am.hasLoaderForType('image')) {
-            await am.registerLoader('image', new ImageRGBADataLoader());
-        }
+        await am.tryRegisterLoader('image', new ImageRGBADataLoader());
+        await am.tryRegisterLoader('texture', new TextureAssetLoader());
 
         readyCallback();
     }
@@ -72773,6 +73314,7 @@ class Entity {
 
     /**
      * Similar to {@link #getComponent}, instead of returning null - throws an exception
+     * @template T
      * @param {Class<T>} klass
      * @returns {T}
      */
@@ -85823,6 +86365,23 @@ class AssetManager {
         return true;
     }
 
+    /**
+     * Will register loader only if none exists for this type
+     * @template T
+     * @param {string} type
+     * @param {AssetLoader<T>} loader
+     * @returns {Promise<boolean>} true if registered , false otherwise
+     */
+    async tryRegisterLoader(type, loader) {
+        if (this.hasLoaderForType(type)) {
+            return false;
+        }
+
+        await this.registerLoader(type, loader);
+
+        return true;
+    }
+
     /**
      * @template T
      * @param {string} type
@@ -114120,12 +114679,8 @@ function getOrCreateProxy(proxies, path, signal) {
      * @param {InputControllerBinding} binding
      */
     Proxy.prototype.add = function (binding) {
-        if (this.signal.isDispatching()) {
-            // handler is currently running, adding the binding could trigger it immediately. Deferring the registration allows us to avoid this
-            this.deferred.push(binding);
-        } else {
-            this.registerBinding(binding);
-        }
+        //TODO handle case where binding is added mid-dispatch
+        this.registerBinding(binding);
     };
 
     /**

package/package.json

@@ -5,7 +5,7 @@
   "description": "Fully featured ECS game engine written in JavaScript",
   "type": "module",
   "author": "Alexander Goldring",
-  "version": "2.100.0",
+  "version": "2.100.2",
   "main": "build/meep.module.js",
   "module": "build/meep.module.js",
   "exports": {