@woosh/meep-engine 2.73.0 → 2.74.0

package/build/meep.module.js

@@ -69586,9 +69586,8 @@ class ThreadedImageDecoder extends Codec {
         return true;
     }
 
-    async decode(data) {
-        const result = await this.worker.request('decode', [data.buffer]);
-        return result;
+    decode(data) {
+        return this.worker.request('decode', [data.buffer]);
     }
 }
 
@@ -69621,7 +69620,8 @@ class NativeImageDecoder extends Codec {
         const image = new Image();
 
         // convert binary data to image URL that we can load
-        const url = URL.createObjectURL(new Blob([data]));
+        const blob = new Blob([data]);
+        const url = URL.createObjectURL(blob);
 
         image.src = url;
 

package/package.json

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

package/src/engine/asset/loaders/image/codec/NativeImageDecoder.js

@@ -29,7 +29,8 @@ export class NativeImageDecoder extends Codec {
         const image = new Image();
 
         // convert binary data to image URL that we can load
-        const url = URL.createObjectURL(new Blob([data]));
+        const blob = new Blob([data]);
+        const url = URL.createObjectURL(blob);
 
         image.src = url;
 

package/src/engine/asset/loaders/image/codec/ThreadedImageDecoder.js

@@ -1,7 +1,7 @@
-import { Codec } from "./Codec.js";
-import WorkerBuilder from "../../../../../core/process/worker/WorkerBuilder.js";
 import { OnDemandWorkerManager } from "../../../../../core/process/worker/OnDemandWorkerManager.js";
+import WorkerBuilder from "../../../../../core/process/worker/WorkerBuilder.js";
 import { PNG_HEADER_BYTES } from "../png/PNG_HEADER_BYTES.js";
+import { Codec } from "./Codec.js";
 
 export class ThreadedImageDecoder extends Codec {
     constructor() {
@@ -35,8 +35,7 @@ export class ThreadedImageDecoder extends Codec {
         return true;
     }
 
-    async decode(data) {
-        const result = await this.worker.request('decode', [data.buffer]);
-        return result;
+    decode(data) {
+        return this.worker.request('decode', [data.buffer]);
     }
 }

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
@@ -217,7 +217,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 +263,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 +292,25 @@ PNGReader.prototype.decodePixels = function () {
 
 PNGReader.prototype.interlaceNone = function (data) {
 
-    var png = this.png;
+    const png = this.png;
 
-    // bytes per pixel
-    var bytes_per_pixel = Math.max(1, png.colors * png.bitDepth / 8);
+    const bits_per_pixel = png.bitDepth;
+    const bits_per_line = png.colors * bits_per_pixel;
+    const bytes_per_pixel = Math.max(1, bits_per_line / 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 = bytes_per_pixel * width;
+
+    const pixels = new Uint8Array(bytes_per_pixel * width * height);
 
-    var pixels = new Uint8Array(bytes_per_pixel * png.width * png.height);
-    // var scanline;
-    var offset = 0;
+    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;
 
@@ -367,7 +371,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 +391,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 +410,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 +464,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 +529,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 +537,7 @@ PNGReader.prototype.parse = function () {
         }
     }
 
-    var png = this.png;
+    const png = this.png;
 
     this.decodePixels();
 

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/SparseTexture.js

@@ -3,7 +3,9 @@ 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 { passThrough, strictEquals } from "../../../../../core/function/Functions.js";
-import { compose_finger_print } from "./compose_finger_print.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 { TileLoader } from "./TileLoader.js";
 
 /**
@@ -17,18 +19,48 @@ export class SparseTexture {
 
     #page_texture_size = [1, 1];
 
+    #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 {TextureTile[]}
      */
     #resident_tiles = [];
 
+    get resident_tiles() {
+        return this.#resident_tiles;
+    }
+
     #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 TileLoader();
 
     /**
@@ -37,6 +69,34 @@ export class SparseTexture {
      */
     #asset_manager = null;
 
+    constructor() {
+        this.#loader.on.loaded.add(this.#handle_tile_loaded, this);
+    }
+
+    /**
+     *
+     * @param {TextureTile} 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
 
@@ -51,6 +111,8 @@ export class SparseTexture {
         const y = size[1] / tile_resolution;
 
         this.#residency_tile_capacity = x * y;
+
+        this.#loader.queue_limit = max2(16, this.#residency_tile_capacity);
     }
 
 
@@ -81,19 +143,19 @@ export class SparseTexture {
         const tiles = this.#resident_tiles;
         const count = tiles.length;
 
-        let max = -1;
-        let max_index = -1;
+        let min = Infinity;
+        let min_index = -1;
 
         for (let i = 0; i < count; i++) {
             const tile = tiles[i];
 
-            if (tile.last_used_time > max) {
-                max = tile.last_used_time;
-                max_index = i;
+            if (tile.last_used_time < min) {
+                min = tile.last_used_time;
+                min_index = i;
             }
         }
 
-        return max_index;
+        return min_index;
     }
 
     #evict_one() {
@@ -119,12 +181,40 @@ export class SparseTexture {
         // mark slot as empty for next tile
         this.#page_slot_occupancy.clear(pageSlot);
 
+        removed.page_slot = -1;
+
         // push into cache
         this.#tile_cache.put(removed.finder_print, removed);
 
         return true;
     }
 
+    /**
+     *
+     * @param {TextureTile} 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;
+
+        this.#page_slot_occupancy.set(slot, true);
+        this.#resident_tiles.push(tile);
+
+        return true;
+    }
+
     /**
      *
      * @param {number[]} v
@@ -137,7 +227,7 @@ export class SparseTexture {
         );
 
         this.#page_texture.dispose();
-        this.#page_texture.setSize(this.#page_texture[0], this.#page_texture[1]);
+        this.#page_texture.setSize(this.#page_texture_size[0], this.#page_texture_size[1]);
 
         this.#update_residency_capacity();
     }
@@ -147,31 +237,50 @@ export class SparseTexture {
      * @param {UsageMetadata} usage
      */
     update_usage(usage) {
-        const max_mip = usage.max_mip_level;
+        const usage_occupancy = usage.occupancy;
+        const usage_occupancy_count = usage.occupancy_count;
 
-        for (let mip = 0; mip < max_mip; mip++) {
 
-            const resolution = 1 << mip;
+        // 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);
 
-            for (let y = 0; y < resolution; y++) {
-                for (let x = 0; x < resolution; x++) {
+        let writes_remaining = min2(
+            max2(1, this.#cycle_assignment_limit),
+            this.#residency_tile_capacity
+        );
 
-                    const count = usage.getCountBy(mip, x, y);
+        let remaining_slots = this.#residency_tile_capacity;
 
-                    if (count === 0) {
-                        continue;
-                    }
+        for (let i = 0; i < usage_occupancy_count && fetch_limit > 0; i++) {
+            const tile_address = usage_occupancy[i];
 
-                    const fingerprint = compose_finger_print(mip, x, y);
+            const fingerPrint = tile_address_to_finger_print(tile_address);
 
-                    this.#loader.enqueue(fingerprint);
+            const 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
 
+
+                // touch to prevent eviction
+                tile.last_used_time = this.#version;
+
+                if (tile.page_slot === -1 && 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.#version++;
     }
 
     dispose() {

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

@@ -3,9 +3,9 @@ import { arrayQuickSort } from "../../../../../core/collection/array/arrayQuickS
 import Signal from "../../../../../core/events/signal/Signal.js";
 import { AssetManager } from "../../../../asset/AssetManager.js";
 import { GameAssetType } from "../../../../asset/GameAssetType.js";
-import { compose_finger_print } from "./compose_finger_print.js";
-import { decompose_finger_print } from "./finger_print_to_tile_index.js";
-import { TextureTile } from "./TextureTile.js";
+import { compose_finger_print } from "./tile/compose_finger_print.js";
+import { decompose_finger_print } from "./tile/decompose_finger_print.js";
+import { TextureTile } from "./tile/TextureTile.js";
 
 export class TileLoader {
     /**
@@ -14,13 +14,23 @@ export class TileLoader {
      */
     #root_path = "";
 
+    set path(v) {
+        this.#root_path = v;
+    }
+
+    /**
+     * When queue gets larger than this, we start discarding elements
+     * @type {number}
+     */
+    queue_limit = Infinity;
+
     /**
      *
      * @type {AssetManager}
      */
     #asset_manager = null;
 
-    set asset_manager(v){
+    set asset_manager(v) {
         this.#asset_manager = v;
     }
 
@@ -28,7 +38,7 @@ export class TileLoader {
      * How many tiles can be loaded at the same time
      * @type {number}
      */
-    #concurrency = 4;
+    #concurrency = 2;
 
     /**
      * Tiles that are currently being loaded
@@ -95,7 +105,6 @@ export class TileLoader {
             return false;
         }
 
-        // TODO limit queue size, if the queue grows too large we may end up with completely irrelevant tiles being loaded minutes after they were actually relevant
         if (this.#queue_add(fingerprint) === false) {
             return false;
         }
@@ -142,6 +151,12 @@ export class TileLoader {
      */
     update_usage(usage) {
         this.#sort_queue_by_usage(usage);
+
+        // truncate the queue if necessary
+        const queue_overflow = this.#queue.length - this.queue_limit;
+        if (queue_overflow > 0) {
+            this.#queue.splice(this.queue_limit, queue_overflow);
+        }
     }
 
     /**
@@ -165,7 +180,7 @@ export class TileLoader {
      */
     #prod() {
         while (this.#in_flight.length < this.#concurrency && this.#queue.length > 0) {
-            const fingerprint = this.#queue.pop();
+            const fingerprint = this.#queue[0];
             const { mip, x, y } = decompose_finger_print(fingerprint);
 
             this.#load(mip, x, y);
@@ -201,6 +216,8 @@ export class TileLoader {
 
 
                 return tile;
+            }, (reason) => {
+                console.error(`Failed to load tile ${file_name}, reason:${reason}`);
             })
             .finally(() => {