@woosh/meep-engine 2.73.0 → 2.75.0

package/src/engine/asset/loaders/image/png/PNGReader.js

@@ -2,13 +2,13 @@
 "use strict";
 
 import zlib from 'pako';
-
-import { PNG } from './PNG.js';
 import { BinaryBuffer } from "../../../../../core/binary/BinaryBuffer.js";
 import { isArrayEqualStrict } from "../../../../../core/collection/array/isArrayEqualStrict.js";
-import { PNG_HEADER_BYTES } from "./PNG_HEADER_BYTES.js";
 import { crc } from "./crc.js";
 
+import { PNG } from './PNG.js';
+import { PNG_HEADER_BYTES } from "./PNG_HEADER_BYTES.js";
+
 /**
  *
  * @param {Uint8Array} buffer
@@ -140,6 +140,8 @@ PNGReader.prototype.decodeChunk = function () {
 
     }
 
+    // console.log(`chunk: ${type}`);
+
 
     switch (type) {
         case 'IHDR':
@@ -157,8 +159,11 @@ PNGReader.prototype.decodeChunk = function () {
         case 'IEND':
             this.decodeIEND(chunk);
             break;
+        case 'sRGB':
+            this.decodesRGB(chunk);
+            break;
         default:
-            //console.log(`Unsupported block ${type}`);
+            console.warn(`Unsupported block ${type}`);
             break;
     }
 
@@ -166,6 +171,19 @@ PNGReader.prototype.decodeChunk = function () {
 
 };
 
+
+/**
+ * https://www.w3.org/TR/2003/REC-PNG-20031110/#11sRGB
+ * @param {Uint8Array} chunk
+ */
+PNGReader.prototype.decodesRGB = function (chunk) {
+
+    const rendering_intent = readUInt8(chunk, 0);
+
+    // TODO add metadata to the PNG representation
+}
+
+
 /**
  * https://www.w3.org/TR/PNG/#11tEXt
  * @param {Uint8Array} chunk
@@ -217,7 +235,7 @@ PNGReader.prototype.decodeiEXt = function (chunk) {
  * Interlace method    1 byte
  */
 PNGReader.prototype.decodeIHDR = function (chunk) {
-    var png = this.png;
+    const png = this.png;
 
     png.setWidth(readUInt32(chunk, 0));
     png.setHeight(readUInt32(chunk, 4));
@@ -263,7 +281,7 @@ PNGReader.prototype.decodeIEND = function () {
  * Uncompress IDAT chunks
  */
 PNGReader.prototype.decodePixels = function () {
-    var png = this.png;
+    const png = this.png;
 
     const inflator = new zlib.Inflate();
 
@@ -292,21 +310,27 @@ PNGReader.prototype.decodePixels = function () {
 
 PNGReader.prototype.interlaceNone = function (data) {
 
-    var png = this.png;
+    const png = this.png;
+
+    const depth = png.bitDepth;
+    const bits_per_line = png.colors * depth;
+    const bytes_per_pixel = bits_per_line / 8;
 
-    // bytes per pixel
-    var bytes_per_pixel = Math.max(1, png.colors * png.bitDepth / 8);
+    const width = png.width;
+    const height = png.height;
 
     // color bytes per row
-    const color_bytes_per_row = bytes_per_pixel * png.width;
+    const color_bytes_per_row = Math.ceil(bytes_per_pixel * width);
+
+    const output_bytes_per_row = Math.ceil(bytes_per_pixel) * width;
 
-    var pixels = new Uint8Array(bytes_per_pixel * png.width * png.height);
-    // var scanline;
-    var offset = 0;
+    const pixels = new Uint8Array(output_bytes_per_row * height);
+
+    let offset = 0;
 
     const data_length = data.length;
 
-    for (var i = 0; i < data_length; i += color_bytes_per_row + 1) {
+    for (let i = 0; i < data_length; i += color_bytes_per_row + 1) {
 
         const scanline_address = i + 1;
 
@@ -316,7 +340,38 @@ PNGReader.prototype.interlaceNone = function (data) {
 
         switch (header) {
             case 0:
-                this.unFilterNone(data, scanline_address, pixels, bytes_per_pixel, offset, color_bytes_per_row);
+                // NONE
+                if (depth === 1) {
+                    for (let x = 0; x < output_bytes_per_row; x++) {
+                        const q = x >>> 4;
+                        const datum = data[q + scanline_address];
+                        const shift = ((x) & 0x7);
+                        const out_value = (datum >>> shift) & 0x1;
+                        pixels[offset + x] = out_value;
+                    }
+                } else if (depth === 2) {
+                    for (let x = 0; x < output_bytes_per_row; x++) {
+                        const q = x >>> 2;
+                        const datum = data[q + scanline_address];
+                        const shift = ((~x) & 0x3) << 1;
+                        const out_value = (datum >>> shift) & 0x3;
+                        pixels[offset + x] = out_value;
+                    }
+                } else if (depth === 4) {
+                    for (let x = 0; x < output_bytes_per_row; x++) {
+                        const q = x >>> 1;
+                        const datum = data[q + scanline_address];
+                        const shift = ((~x) & 0x1) << 2;
+                        const out_value = (datum >>> shift) & 0xF;
+                        pixels[offset + x] = out_value;
+                    }
+                } else if (depth === 8) {
+                    for (let x = 0; x < output_bytes_per_row; x++) {
+                        pixels[offset + x] = data[x + scanline_address];
+                    }
+                } else {
+                    throw new Error(`unsupported bit depth ${depth}`)
+                }
                 break;
             case 1:
                 this.unFilterSub(data, scanline_address, pixels, bytes_per_pixel, offset, color_bytes_per_row);
@@ -334,7 +389,7 @@ PNGReader.prototype.interlaceNone = function (data) {
                 throw new Error(`unknown filtered scanline type '${header}'`);
         }
 
-        offset += color_bytes_per_row;
+        offset += output_bytes_per_row;
 
     }
 
@@ -352,14 +407,6 @@ PNGReader.prototype.interlaceAdam7 = function (data) {
 
 // Unfiltering
 
-/**
- * No filtering, direct copy
- */
-PNGReader.prototype.unFilterNone = function (scanline, scanline_offset, pixels, bpp, of, length) {
-    for (let i = 0; i < length; i++) {
-        pixels[of + i] = scanline[i + scanline_offset];
-    }
-};
 
 /**
  * The Sub() filter transmits the difference between each byte and the value
@@ -367,7 +414,7 @@ PNGReader.prototype.unFilterNone = function (scanline, scanline_offset, pixels,
  * Sub(x) = Raw(x) + Raw(x - bpp)
  */
 PNGReader.prototype.unFilterSub = function (scanline, scanline_offset, pixels, bpp, of, length) {
-    var i = 0;
+    let i = 0;
 
     for (; i < bpp; i++) {
         pixels[of + i] = scanline[i + scanline_offset];
@@ -387,7 +434,7 @@ PNGReader.prototype.unFilterSub = function (scanline, scanline_offset, pixels, b
  * Up(x) = Raw(x) + Prior(x)
  */
 PNGReader.prototype.unFilterUp = function (scanline, scanline_offset, pixels, bpp, of, length) {
-    var i = 0, byte, prev;
+    let i = 0, byte, prev;
     // Prior(x) is 0 for all x on the first scanline
     if ((of - length) < 0) for (; i < length; i++) {
         pixels[of + i] = scanline[i + scanline_offset];
@@ -406,7 +453,7 @@ PNGReader.prototype.unFilterUp = function (scanline, scanline_offset, pixels, bp
  * Average(x) = Raw(x) + floor((Raw(x-bpp)+Prior(x))/2)
  */
 PNGReader.prototype.unFilterAverage = function (scanline, scanline_offset, pixels, bpp, of, length) {
-    var i = 0, byte, prev, prior;
+    let i = 0, byte, prev, prior;
     if ((of - length) < 0) {
         // Prior(x) == 0 && Raw(x - bpp) == 0
         for (; i < bpp; i++) {
@@ -460,7 +507,7 @@ PNGReader.prototype.unFilterAverage = function (scanline, scanline_offset, pixel
  *  end
  */
 PNGReader.prototype.unFilterPaeth = function (scanline, scanline_offset, pixels, bpp, of, length) {
-    var i = 0, raw, a, b, c, p, pa, pb, pc, pr;
+    let i = 0, raw, a, b, c, p, pa, pb, pc, pr;
     if ((of - length) < 0) {
         // Prior(x) == 0 && Raw(x - bpp) == 0
         for (; i < bpp; i++) {
@@ -525,7 +572,7 @@ PNGReader.prototype.parse = function () {
     this.decodeHeader();
 
     while (this.buffer.position < this.buffer.length) {
-        var type = this.decodeChunk();
+        const type = this.decodeChunk();
         // stop after IHDR chunk, or after IEND
         // if (type === 'IHDR' && options.data === false || type === 'IEND') break;
         if (type === 'IEND') {
@@ -533,7 +580,7 @@ PNGReader.prototype.parse = function () {
         }
     }
 
-    var png = this.png;
+    const png = this.png;
 
     this.decodePixels();
 

package/src/engine/asset/loaders/image/png/prototypePNG.js

@@ -1,13 +1,22 @@
+import { Sampler2D } from "../../../../graphics/texture/sampler/Sampler2D.js";
 import sampler2D2Canvas from "../../../../graphics/texture/sampler/Sampler2D2Canvas.js";
+import { AssetRequestScope } from "../../../AssetRequestScope.js";
 import { ArrayBufferLoader } from "../../ArrayBufferLoader.js";
 import { PNGReader } from "./PNGReader.js";
-import { Sampler2D } from "../../../../graphics/texture/sampler/Sampler2D.js";
 
 const array_loader = new ArrayBufferLoader();
 
 
+// const path = 'moicon/ISO 7010 - Safety Signs (3)/ISO 7010 - Safety Signs/Emergency/400px/E001 – Emergency exit (left hand).png';
+// const path = 'data/textures/utility/vt/uv_map_reference/5-2-1.png';
+// const path = 'data/textures/utility/vt/uv_map_reference/6-62-60.png';
+// const path = 'data/textures/utility/vt/uv_map_reference/5-11-5.png';
+// const path = 'data/textures/utility/vt/uv_map_reference/1-0-0.png';
+// const path = 'data/textures/utility/vt/uv_map_reference/5-3-0.png';
+// const path = 'data/textures/utility/vt/uv_map_reference/5-21-14.png';
+const path = 'data/textures/utility/vt/uv_map_reference/6-39-33.png';
 
-array_loader.load('moicon/ISO 7010 - Safety Signs (3)/ISO 7010 - Safety Signs/Emergency/400px/E001 – Emergency exit (left hand).png',(asset)=>{
+array_loader.load(new AssetRequestScope(), path, (asset) => {
 
     const array = asset.create();
 
@@ -19,9 +28,9 @@ array_loader.load('moicon/ISO 7010 - Safety Signs (3)/ISO 7010 - Safety Signs/Em
 
     const uint8Data = png.getUint8Data();
 
-    const sampler = new Sampler2D(uint8Data.data,uint8Data.itemSize,png.getWidth(), png.getHeight());
+    const sampler = new Sampler2D(uint8Data.data, uint8Data.itemSize, png.getWidth(), png.getHeight());
 
-    const canvas = sampler2D2Canvas(sampler,1,0);
+    const canvas = sampler2D2Canvas(sampler, 1, 0);
 
     document.body.appendChild(canvas);
 

package/src/engine/graphics/generate_halton_jitter.js

@@ -0,0 +1,21 @@
+import { assert } from "../../core/assert.js";
+import { halton_sequence } from "../../core/math/statistics/halton_sequence.js";
+
+/**
+ * Generates a number of 2d jitter offsets in range -1...1
+ * @param {number} point_count
+ * @return {Float32Array}
+ */
+export function generate_halton_jitter(point_count) {
+    assert.isNonNegativeInteger(point_count, 'point_count');
+
+    const result = new Float32Array(point_count * 2);
+
+    for (let i = 0; i < point_count; i++) {
+        const i2 = i * 2;
+        result[i2] = halton_sequence(2, i) * 2 - 1;
+        result[i2 + 1] = halton_sequence(3, i) * 2 - 1;
+    }
+
+    return result;
+}

package/src/engine/graphics/render/buffer/simple-fx/taa/TemporalSupersamplingRenderPlugin.js

@@ -1,23 +1,6 @@
-import { EnginePlugin } from "../../../../../plugin/EnginePlugin.js";
-import { halton_sequence } from "../../../../../../core/math/statistics/halton_sequence.js";
 import { array_copy } from "../../../../../../core/collection/array/array_copy.js";
-
-/**
- * Generates a number of 2d jitter offsets in range -1...1
- * @param {number} point_count
- * @return {Float32Array}
- */
-function generate_jitter(point_count) {
-    const result = new Float32Array(point_count * 2);
-
-    for (let i = 0; i < point_count; i++) {
-        const i2 = i * 2;
-        result[i2] = halton_sequence(2, i) * 2 - 1;
-        result[i2 + 1] = halton_sequence(3, i) * 2 - 1;
-    }
-
-    return result;
-}
+import { EnginePlugin } from "../../../../../plugin/EnginePlugin.js";
+import { generate_halton_jitter } from "../../../../generate_halton_jitter.js";
 
 export class TemporalSupersamplingRenderPlugin extends EnginePlugin {
     constructor() {
@@ -31,7 +14,7 @@ export class TemporalSupersamplingRenderPlugin extends EnginePlugin {
         this.__frame_index = 0;
 
         this.__sample_count = 16;
-        this.__jitter_offset = generate_jitter(this.__sample_count);
+        this.__jitter_offset = generate_halton_jitter(this.__sample_count);
 
 
         this.__projection_modifier = {

package/src/engine/graphics/texture/virtual/v2/PageTexture.js

@@ -0,0 +1,335 @@
+import { WebGLRenderTarget } from "three";
+import { BitSet } from "../../../../../core/binary/BitSet.js";
+import { Cache } from "../../../../../core/cache/Cache.js";
+import { array_copy } from "../../../../../core/collection/array/array_copy.js";
+import { HashMap } from "../../../../../core/collection/map/HashMap.js";
+import { passThrough, strictEquals } from "../../../../../core/function/Functions.js";
+import { max2 } from "../../../../../core/math/max2.js";
+import { min2 } from "../../../../../core/math/min2.js";
+import { tile_address_to_finger_print } from "./tile/tile_address_to_finger_print.js";
+import { VirtualTextureTileLoader } from "./VirtualTextureTileLoader.js";
+
+/**
+ * How much extra data to store in cache (in bytes)
+ * @type {number}
+ */
+const DEFAULT_CACHE_SIZE = 16 * 1024 * 1024;
+
+export class PageTexture {
+    #page_texture = new WebGLRenderTarget(1, 1);
+
+    #page_texture_size = [1, 1];
+
+    /**
+     * Used internally to track number of times `update` method was called
+     * @type {number}
+     */
+    update_count = 0;
+
+    /**
+     * Track updates to page content, whenever a tile is made resident or is removed - this number goes up by 1
+     * @type {number}
+     */
+    version = 0;
+
+    /**
+     * Maximum number of new page assignments per single update cycle
+     * This helps prevent thrashing and keep performance overhead of updating pages predictable
+     * @type {number}
+     */
+    #cycle_assignment_limit = 2;
+
+
+    get page_texture_resolution() {
+        return this.#page_texture_size;
+    }
+
+    /**
+     *
+     * @type {VirtualTextureTile[]}
+     */
+    #resident_tiles = [];
+
+    get resident_tiles() {
+        return this.#resident_tiles;
+    }
+
+    /**
+     *
+     * @type {HashMap<number, VirtualTextureTile>}
+     */
+    #resident_tile_lookup = new HashMap({
+        keyHashFunction: passThrough,
+        keyEqualityFunction: strictEquals,
+    });
+
+    #page_slot_occupancy = new BitSet();
+
+    #tile_resolution = 128;
+
+    get tile_resolution() {
+        return this.#tile_resolution;
+    }
+
+    #residency_tile_capacity = 0;
+
+    /**
+     * Must be >=0
+     * When 0 - tiles that would not fit onto the page will not be loaded
+     * When >0 - same fraction of extra tiles will be fetching and put into cache, resulting in prefetching
+     * @type {number}
+     */
+    #prefetch_factor = 0.33;
+
+    #loader = new VirtualTextureTileLoader();
+
+    /**
+     *
+     * @type {AssetManager|null}
+     */
+    #asset_manager = null;
+
+    constructor() {
+        this.#loader.on.loaded.add(this.#handle_tile_loaded, this);
+    }
+
+    /**
+     *
+     * @param {VirtualTextureTile} tile
+     */
+    #handle_tile_loaded(tile) {
+        const finderPrint = tile.finder_print;
+
+        if (this.#tile_cache.has(finderPrint)) {
+            // already loaded
+            return;
+        }
+
+        this.#tile_cache.put(finderPrint, tile);
+
+    }
+
+    /**
+     *
+     * @param {string} v
+     */
+    set path(v) {
+        this.#loader.path = v;
+    }
+
+    set asset_manager(v) {
+        this.#asset_manager = v
+
+        this.#loader.asset_manager = v;
+    }
+
+    #update_residency_capacity() {
+        const tile_resolution = this.#tile_resolution;
+        const size = this.#page_texture_size;
+
+        const x = size[0] / tile_resolution;
+        const y = size[1] / tile_resolution;
+
+        this.#residency_tile_capacity = x * y;
+
+        // Limit the queue to be able to load no more than an entire page, trying to load more would be wasteful as we wouldn't be able to use that data immediately anyway
+        this.#loader.queue_limit = max2(1, this.#residency_tile_capacity);
+    }
+
+
+    /**
+     *
+     * @param {number} v
+     */
+    set tile_resolution(v) {
+        this.#tile_resolution = v;
+
+        this.#update_residency_capacity();
+    }
+
+    /**
+     * Tiles that are not currently resident live here
+     * key is the tile's "fingerprint"
+     * @type {Cache<number,VirtualTextureTile>}
+     */
+    #tile_cache = new Cache({
+        keyHashFunction: passThrough,
+        keyEqualityFunction: strictEquals,
+        maxWeight: DEFAULT_CACHE_SIZE,
+        valueWeigher: () => this.#tile_resolution * this.#tile_resolution * 4
+    });
+
+    #find_eviction_target_index() {
+        // find least-recently used
+        const tiles = this.#resident_tiles;
+        const count = tiles.length;
+
+        let min = Infinity;
+        let min_index = -1;
+
+        for (let i = 0; i < count; i++) {
+            const tile = tiles[i];
+
+            if (tile.last_used_time < min) {
+                min = tile.last_used_time;
+                min_index = i;
+            }
+        }
+
+        return min_index;
+    }
+
+    #evict_one() {
+        const index = this.#find_eviction_target_index();
+
+        if (index === -1) {
+            return false;
+        }
+
+        return this.#remove_resident_tile(index);
+    }
+
+    /**
+     *
+     * @param {number} index
+     * @returns {boolean}
+     */
+    #remove_resident_tile(index) {
+        const [removed] = this.#resident_tiles.splice(index, 1);
+
+        const pageSlot = removed.page_slot;
+
+        // mark slot as empty for next tile
+        this.#page_slot_occupancy.clear(pageSlot);
+
+        removed.page_slot = -1;
+
+        const fingerprint = removed.finder_print;
+
+        this.#resident_tile_lookup.delete(fingerprint);
+
+        // push into cache
+        this.#tile_cache.put(fingerprint, removed);
+
+        this.version++;
+
+        return true;
+    }
+
+    /**
+     *
+     * @param {VirtualTextureTile} tile
+     */
+    #make_resident(tile) {
+
+        if (this.#residency_tile_capacity === 0) {
+            throw new Error('Capacity is 0');
+        }
+
+        let slot = this.#page_slot_occupancy.nextClearBit(0);
+
+        while (slot >= this.#residency_tile_capacity) {
+            this.#evict_one();
+
+            slot = this.#page_slot_occupancy.nextClearBit(0);
+        }
+
+        tile.page_slot = slot;
+        tile.last_used_time = this.update_count;
+
+        this.#page_slot_occupancy.set(slot, true);
+        this.#resident_tiles.push(tile);
+        this.#resident_tile_lookup.set(tile.finder_print, tile);
+
+        this.version++;
+
+        return true;
+    }
+
+    /**
+     *
+     * @param {number[]} v
+     */
+    set page_texture_size(v) {
+        array_copy(
+            v, 0,
+            this.#page_texture_size, 0,
+            2
+        );
+
+        this.#page_texture.dispose();
+        this.#page_texture.setSize(this.#page_texture_size[0], this.#page_texture_size[1]);
+
+        this.#update_residency_capacity();
+    }
+
+    /**
+     *
+     * @param {VirtualTextureUsage} usage
+     */
+    update_usage(usage) {
+        const usage_occupancy = usage.occupancy;
+        const usage_occupancy_count = usage.occupancy_count;
+
+
+        // Usage occupancy is already sorted by priority, so there's no point is trying to fetch more than t
+        let fetch_limit = this.#residency_tile_capacity * (1 + this.#prefetch_factor);
+
+        let writes_remaining = min2(
+            max2(1, this.#cycle_assignment_limit),
+            this.#residency_tile_capacity
+        );
+
+        let remaining_slots = this.#residency_tile_capacity;
+
+        for (let i = 0; i < usage_occupancy_count && fetch_limit > 0; i++) {
+            const tile_address = usage_occupancy[i];
+
+            const fingerPrint = tile_address_to_finger_print(tile_address);
+
+            let tile = this.#resident_tile_lookup.get(fingerPrint);
+
+            if (tile !== undefined) {
+                // already resident
+
+                // touch to prevent eviction
+                tile.last_used_time = this.update_count;
+                remaining_slots--;
+                fetch_limit--;
+
+                continue;
+            }
+
+            tile = this.#tile_cache.get(fingerPrint);
+
+            if (tile === null) {
+                this.#loader.enqueue(fingerPrint);
+            } else if (remaining_slots > 0) {
+                // found in cache, and we have some slots remaining to write into
+
+                if (writes_remaining > 0) {
+                    // tile is not active, and we can write it
+                    writes_remaining--;
+                    this.#make_resident(tile);
+                }
+
+                fetch_limit--;
+                remaining_slots--;
+            }
+        }
+
+
+        this.#loader.update_usage(usage);
+
+        this.update_count++;
+    }
+
+    dispose() {
+        this.#page_texture.dispose();
+        this.#tile_cache.clear();
+        this.#page_slot_occupancy.reset();
+
+        this.#resident_tiles.splice(0, this.#resident_tiles.length);
+        this.#resident_tile_lookup.clear();
+    }
+}

package/src/engine/graphics/texture/virtual/v2/ResidentTileTexture.js

@@ -0,0 +1,46 @@
+import { compose_tile_address } from "./tile/compose_tile_address.js";
+
+/**
+ * Represents entire mip pyramid of tiles, where each tile slot points to an actual resident tile
+ */
+export class ResidentTileTexture {
+    #resolution = 0;
+    #pyramid = new Uint32Array(0);
+
+
+    /**
+     *
+     * @param {number} resolution
+     */
+    set resolution(resolution) {
+        this.#resolution = resolution;
+
+
+        //max mip
+        const mip_level = Math.log2(resolution);
+
+        compose_tile_address(mip_level, 0, 0);
+
+        this.#pyramid = new Uint32Array(mip_level);
+    }
+
+    get resolution() {
+        return this.#resolution;
+    }
+
+    /**
+     *
+     * @param {PageTexture} page
+     */
+    set residency(page) {
+
+        const tiles = page.resident_tiles;
+        const tile_count = tiles.length;
+
+        for (let i = 0; i < tile_count; i++) {
+            const tile = tiles[i];
+        }
+
+    }
+
+}