@woosh/meep-engine 2.72.0 → 2.73.0

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

@@ -0,0 +1,182 @@
+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 { passThrough, strictEquals } from "../../../../../core/function/Functions.js";
+import { compose_finger_print } from "./compose_finger_print.js";
+import { TileLoader } from "./TileLoader.js";
+
+/**
+ * How much extra data to store in cache (in bytes)
+ * @type {number}
+ */
+const DEFAULT_CACHE_SIZE = 16 * 1024 * 1024;
+
+export class SparseTexture {
+    #page_texture = new WebGLRenderTarget(1, 1);
+
+    #page_texture_size = [1, 1];
+
+    /**
+     *
+     * @type {TextureTile[]}
+     */
+    #resident_tiles = [];
+
+    #page_slot_occupancy = new BitSet();
+
+    #tile_resolution = 128;
+
+    #residency_tile_capacity = 0;
+
+    #loader = new TileLoader();
+
+    /**
+     *
+     * @type {AssetManager|null}
+     */
+    #asset_manager = null;
+
+    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;
+    }
+
+
+    /**
+     *
+     * @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,TextureTile>}
+     */
+    #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 max = -1;
+        let max_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;
+            }
+        }
+
+        return max_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);
+
+        // push into cache
+        this.#tile_cache.put(removed.finder_print, removed);
+
+        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[0], this.#page_texture[1]);
+
+        this.#update_residency_capacity();
+    }
+
+    /**
+     *
+     * @param {UsageMetadata} usage
+     */
+    update_usage(usage) {
+        const max_mip = usage.max_mip_level;
+
+        for (let mip = 0; mip < max_mip; mip++) {
+
+            const resolution = 1 << mip;
+
+            for (let y = 0; y < resolution; y++) {
+                for (let x = 0; x < resolution; x++) {
+
+                    const count = usage.getCountBy(mip, x, y);
+
+                    if (count === 0) {
+                        continue;
+                    }
+
+                    const fingerprint = compose_finger_print(mip, x, y);
+
+                    this.#loader.enqueue(fingerprint);
+
+                }
+            }
+
+        }
+
+        this.#loader.update_usage(usage);
+    }
+
+    dispose() {
+        this.#page_texture.dispose();
+        this.#tile_cache.clear();
+        this.#page_slot_occupancy.reset();
+    }
+}

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

@@ -0,0 +1,31 @@
+export class TextureTile {
+
+    finder_print = 0;
+
+    last_used_time = 0;
+
+    /**
+     * Currently occupied page slot, only valid when page is resident
+     * @type {number}
+     */
+    page_slot = 0;
+
+    /**
+     *
+     * @type {Sampler2D|null}
+     */
+    data = null;
+
+    /**
+     *
+     * @param {TextureTile} other
+     * @returns {boolean}
+     */
+    equals(other) {
+        return false;
+    }
+
+    hash() {
+        return 0;
+    }
+}

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

@@ -0,0 +1,215 @@
+import { assert } from "../../../../../core/assert.js";
+import { arrayQuickSort } from "../../../../../core/collection/array/arrayQuickSort.js";
+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";
+
+export class TileLoader {
+    /**
+     * Where the tiles are stored
+     * @type {string}
+     */
+    #root_path = "";
+
+    /**
+     *
+     * @type {AssetManager}
+     */
+    #asset_manager = null;
+
+    set asset_manager(v){
+        this.#asset_manager = v;
+    }
+
+    /**
+     * How many tiles can be loaded at the same time
+     * @type {number}
+     */
+    #concurrency = 4;
+
+    /**
+     * Tiles that are currently being loaded
+     * @readonly
+     * @type {number[]}
+     */
+    #in_flight = [];
+
+    /**
+     * Contains fingerprints
+     * @readonly
+     * @type {number[]}
+     */
+    #queue = [];
+
+    /**
+     * @readonly
+     */
+    on = {
+        /**
+         * @type {Signal<TextureTile>}
+         */
+        loaded: new Signal()
+    };
+
+
+    /**
+     *
+     * @param {number} fingerprint
+     * @returns {boolean}
+     */
+    #queue_remove(fingerprint) {
+        assert.isNonNegativeInteger(fingerprint, 'fingerprint');
+
+        const i = this.#queue.indexOf(fingerprint);
+
+        if (i === -1) {
+            return false;
+        }
+
+        this.#queue.splice(i, 1);
+
+        return true;
+    }
+
+    #queue_add(fingerprint) {
+        assert.isNonNegativeInteger(fingerprint, 'fingerprint');
+
+        if (this.is_queued(fingerprint)) {
+            return false;
+        }
+
+        this.#queue.push(fingerprint);
+
+        return true;
+    }
+
+    /**
+     *
+     * @param {number} fingerprint
+     */
+    enqueue(fingerprint) {
+        if (this.#in_flight.indexOf(fingerprint) !== -1) {
+            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;
+        }
+
+        this.#prod();
+
+        return true;
+    }
+
+    /**
+     *
+     * @param {number} fingerprint
+     * @returns {boolean}
+     */
+    is_queued(fingerprint) {
+        assert.isNonNegativeInteger(fingerprint, 'fingerprint');
+
+        return this.#queue.indexOf(fingerprint) !== -1;
+    }
+
+    /**
+     *
+     * @param {UsageMetadata} usage
+     */
+    #sort_queue_by_usage(usage) {
+
+        /**
+         *
+         * @param {number} fingerprint
+         */
+        const score = (fingerprint) => -usage.getCountByFingerprint(fingerprint);
+
+        arrayQuickSort(
+            this.#queue,
+            score, null,
+            0, this.#queue.length - 1
+        );
+
+    }
+
+    /**
+     *
+     * @param {UsageMetadata} usage
+     */
+    update_usage(usage) {
+        this.#sort_queue_by_usage(usage);
+    }
+
+    /**
+     *
+     * @param {number} mip
+     * @param {number} x
+     * @param {number} y
+     * @returns {string}
+     */
+    #build_file_name(mip, x, y) {
+
+        assert.isNonNegativeInteger(mip, 'mip');
+        assert.isNonNegativeInteger(x, 'x');
+        assert.isNonNegativeInteger(y, 'y');
+
+        return `${mip}-${x}-${y}.png`;
+    }
+
+    /**
+     * Initializes load of the next element in the queue if there is capacity
+     */
+    #prod() {
+        while (this.#in_flight.length < this.#concurrency && this.#queue.length > 0) {
+            const fingerprint = this.#queue.pop();
+            const { mip, x, y } = decompose_finger_print(fingerprint);
+
+            this.#load(mip, x, y);
+        }
+    }
+
+    /**
+     *
+     * @param {number} mip
+     * @param {number} x
+     * @param {number} y
+     * @returns {Promise<TextureTile>}
+     */
+    #load(mip, x, y) {
+        const file_name = this.#build_file_name(mip, x, y);
+        const finger_print = compose_finger_print(mip, x, y);
+
+        this.#queue_remove(finger_print);
+        this.#in_flight.push(finger_print);
+
+        return this.#asset_manager.promise(`${this.#root_path}/${file_name}`, GameAssetType.Image)
+            .then(asset => {
+
+                const sampler = asset.create();
+
+                const tile = new TextureTile();
+
+
+                tile.data = sampler;
+                tile.finder_print = finger_print;
+
+                this.on.loaded.send1(tile);
+
+
+                return tile;
+            })
+            .finally(() => {
+
+                const index = this.#in_flight.indexOf(finger_print);
+                this.#in_flight.splice(index, 1);
+
+                this.#prod();
+
+            })
+
+    }
+}

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

@@ -4,6 +4,7 @@ import EmptyView from "../../../../../view/elements/EmptyView.js";
 export class UsageDebugView extends EmptyView {
     #tileCount = new LabelView("")
     #tiles = new EmptyView();
+    #mip_levels = 0;
 
 
     constructor(opt) {
@@ -22,29 +23,41 @@ export class UsageDebugView extends EmptyView {
         });
     }
 
+    set mip_levels(v) {
+        this.#mip_levels = v;
+    }
+
     /**
      *
      * @param {UsageMetadata} usage
      */
     set usage(usage) {
 
-        const tileCount = usage.tile_count;
-
-        this.#tileCount.updateText(`Tile Count: ${tileCount}`);
 
         this.#tiles.removeAllChildren();
 
-        for (let i = 0; i < tileCount; i++) {
-            const finger_print = usage.getTile(i);
-            const count = usage.getCount(i);
+        let tileCount = 0;
+
+        for (let mip = 0; mip < this.#mip_levels; mip++) {
+            const resolution = 1 << mip;
 
-            const level = (finger_print >> 24) & 0xFF;
-            const x = (finger_print >> 16) & 0xFF;
-            const y = (finger_print >> 8) & 0xFF;
-            const texture_id = (finger_print) & 0xFF;
+            for (let y = 0; y < resolution; y++) {
+                for (let x = 0; x < resolution; x++) {
 
-            this.#tiles.addChild(new LabelView(`ID: ${texture_id} Level: ${level} X: ${x} Y: ${y} USAGE: ${count}`));
+                    const count = usage.getCountBy(mip, x, y);
+
+                    if (count <= 0) {
+                        continue;
+                    }
+
+                    this.#tiles.addChild(new LabelView(`ID: ${0} Level: ${mip} X: ${x} Y: ${y} USAGE: ${count}`));
+
+                    tileCount++;
+                }
+            }
         }
+
+        this.#tileCount.updateText(`Tile Count: ${tileCount}`);
     }