@woosh/meep-engine 2.74.0 → 2.75.0

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

@@ -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
@@ -294,17 +312,19 @@ PNGReader.prototype.interlaceNone = function (data) {
 
     const png = this.png;
 
-    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 depth = png.bitDepth;
+    const bits_per_line = png.colors * depth;
+    const bytes_per_pixel = bits_per_line / 8;
 
     const width = png.width;
     const height = png.height;
 
     // color bytes per row
-    const color_bytes_per_row = bytes_per_pixel * width;
+    const color_bytes_per_row = Math.ceil(bytes_per_pixel * width);
 
-    const pixels = new Uint8Array(bytes_per_pixel * width * height);
+    const output_bytes_per_row = Math.ceil(bytes_per_pixel) * width;
+
+    const pixels = new Uint8Array(output_bytes_per_row * height);
 
     let offset = 0;
 
@@ -320,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);
@@ -338,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;
 
     }
 
@@ -356,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

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/texture/virtual/v2/{SparseTexture.js → PageTexture.js}

@@ -2,11 +2,12 @@ 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 { TileLoader } from "./TileLoader.js";
+import { VirtualTextureTileLoader } from "./VirtualTextureTileLoader.js";
 
 /**
  * How much extra data to store in cache (in bytes)
@@ -14,12 +15,22 @@ import { TileLoader } from "./TileLoader.js";
  */
 const DEFAULT_CACHE_SIZE = 16 * 1024 * 1024;
 
-export class SparseTexture {
+export class PageTexture {
     #page_texture = new WebGLRenderTarget(1, 1);
 
     #page_texture_size = [1, 1];
 
-    #version = 0;
+    /**
+     * 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
@@ -35,7 +46,7 @@ export class SparseTexture {
 
     /**
      *
-     * @type {TextureTile[]}
+     * @type {VirtualTextureTile[]}
      */
     #resident_tiles = [];
 
@@ -43,6 +54,15 @@ export class SparseTexture {
         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;
@@ -61,7 +81,7 @@ export class SparseTexture {
      */
     #prefetch_factor = 0.33;
 
-    #loader = new TileLoader();
+    #loader = new VirtualTextureTileLoader();
 
     /**
      *
@@ -75,7 +95,7 @@ export class SparseTexture {
 
     /**
      *
-     * @param {TextureTile} tile
+     * @param {VirtualTextureTile} tile
      */
     #handle_tile_loaded(tile) {
         const finderPrint = tile.finder_print;
@@ -112,7 +132,8 @@ export class SparseTexture {
 
         this.#residency_tile_capacity = x * y;
 
-        this.#loader.queue_limit = max2(16, this.#residency_tile_capacity);
+        // 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);
     }
 
 
@@ -129,7 +150,7 @@ export class SparseTexture {
     /**
      * Tiles that are not currently resident live here
      * key is the tile's "fingerprint"
-     * @type {Cache<number,TextureTile>}
+     * @type {Cache<number,VirtualTextureTile>}
      */
     #tile_cache = new Cache({
         keyHashFunction: passThrough,
@@ -183,15 +204,21 @@ export class SparseTexture {
 
         removed.page_slot = -1;
 
+        const fingerprint = removed.finder_print;
+
+        this.#resident_tile_lookup.delete(fingerprint);
+
         // push into cache
-        this.#tile_cache.put(removed.finder_print, removed);
+        this.#tile_cache.put(fingerprint, removed);
+
+        this.version++;
 
         return true;
     }
 
     /**
      *
-     * @param {TextureTile} tile
+     * @param {VirtualTextureTile} tile
      */
     #make_resident(tile) {
 
@@ -208,9 +235,13 @@ export class SparseTexture {
         }
 
         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;
     }
@@ -234,7 +265,7 @@ export class SparseTexture {
 
     /**
      *
-     * @param {UsageMetadata} usage
+     * @param {VirtualTextureUsage} usage
      */
     update_usage(usage) {
         const usage_occupancy = usage.occupancy;
@@ -256,17 +287,27 @@ export class SparseTexture {
 
             const fingerPrint = tile_address_to_finger_print(tile_address);
 
-            const tile = this.#tile_cache.get(fingerPrint);
+            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
 
-
-                // touch to prevent eviction
-                tile.last_used_time = this.#version;
-
-                if (tile.page_slot === -1 && writes_remaining > 0) {
+                if (writes_remaining > 0) {
                     // tile is not active, and we can write it
                     writes_remaining--;
                     this.#make_resident(tile);
@@ -280,12 +321,15 @@ export class SparseTexture {
 
         this.#loader.update_usage(usage);
 
-        this.#version++;
+        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];
+        }
+
+    }
+
+}

package/src/engine/graphics/texture/virtual/v2/{TileLoader.js → VirtualTextureTileLoader.js}

@@ -5,9 +5,12 @@ import { AssetManager } from "../../../../asset/AssetManager.js";
 import { GameAssetType } from "../../../../asset/GameAssetType.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";
+import { VirtualTextureTile } from "./tile/VirtualTextureTile.js";
 
-export class TileLoader {
+/**
+ * Facilitates prioritized queueing and loading of individual texture tiles
+ */
+export class VirtualTextureTileLoader {
     /**
      * Where the tiles are stored
      * @type {string}
@@ -38,7 +41,7 @@ export class TileLoader {
      * How many tiles can be loaded at the same time
      * @type {number}
      */
-    #concurrency = 2;
+    #concurrency = 4;
 
     /**
      * Tiles that are currently being loaded
@@ -59,7 +62,7 @@ export class TileLoader {
      */
     on = {
         /**
-         * @type {Signal<TextureTile>}
+         * @type {Signal<VirtualTextureTile>}
          */
         loaded: new Signal()
     };
@@ -127,7 +130,7 @@ export class TileLoader {
 
     /**
      *
-     * @param {UsageMetadata} usage
+     * @param {VirtualTextureUsage} usage
      */
     #sort_queue_by_usage(usage) {
 
@@ -147,7 +150,7 @@ export class TileLoader {
 
     /**
      *
-     * @param {UsageMetadata} usage
+     * @param {VirtualTextureUsage} usage
      */
     update_usage(usage) {
         this.#sort_queue_by_usage(usage);
@@ -192,7 +195,7 @@ export class TileLoader {
      * @param {number} mip
      * @param {number} x
      * @param {number} y
-     * @returns {Promise<TextureTile>}
+     * @returns {Promise<VirtualTextureTile>}
      */
     #load(mip, x, y) {
         const file_name = this.#build_file_name(mip, x, y);
@@ -206,7 +209,7 @@ export class TileLoader {
 
                 const sampler = asset.create();
 
-                const tile = new TextureTile();
+                const tile = new VirtualTextureTile();
 
 
                 tile.data = sampler;

package/src/engine/graphics/texture/virtual/v2/{UsageMetadata.js → VirtualTextureUsage.js}

@@ -1,15 +1,9 @@
 import { arrayQuickSort } from "../../../../../core/collection/array/arrayQuickSort.js";
-import { compose_finger_print } from "./tile/compose_finger_print.js";
+import { compose_tile_address } from "./tile/compose_tile_address.js";
 import { finger_print_to_tile_address } from "./tile/finger_print_to_tile_address.js";
 
 
-function compose_tile_address(mip, x, y) {
-    const finger_print = compose_finger_print(mip, x, y);
-
-    return finger_print_to_tile_address(finger_print);
-}
-
-export class UsageMetadata {
+export class VirtualTextureUsage {
 
     #counts_intrinsic = new Uint32Array(0);
     /**

package/src/engine/graphics/texture/virtual/v2/{VirtualTextureManager.js → VirtualTextureUsageUpdater.js}

@@ -1,5 +1,6 @@
 import {
     ClampToEdgeWrapping,
+    DoubleSide,
     GLSL3,
     Matrix4,
     NearestFilter,
@@ -18,8 +19,8 @@ import { max2 } from "../../../../../core/math/max2.js";
 import { generate_halton_jitter } from "../../../generate_halton_jitter.js";
 import { renderScreenSpace } from "../../../render/utils/renderScreenSpace.js";
 import { Sampler2D } from "../../sampler/Sampler2D.js";
-import { fragment, vertex } from "./ShaderUsage.js";
-import { UsageMetadata } from "./UsageMetadata.js";
+import { VirtualTextureUsage } from "./VirtualTextureUsage.js";
+import { fragment, vertex } from "./VirtualTextureUsageShader.js";
 
 const usage_material_uniforms = {
     "u_mt_params": { value: new Vector2(0.1, 1) },
@@ -40,6 +41,7 @@ const usage_material = new RawShaderMaterial({
     uniforms: usage_material_uniforms,
     vertexShader: vertex(),
     fragmentShader: fragment(),
+    side: DoubleSide,
     glslVersion: GLSL3
 
 });
@@ -69,7 +71,7 @@ const clear_usage_material = new RawShaderMaterial({
 
 const scratch_matrix = new Float32Array(16);
 
-export class VirtualTextureManager {
+export class VirtualTextureUsageUpdater {
 
     #frame_index = 0;
 
@@ -79,7 +81,7 @@ export class VirtualTextureManager {
      */
     #frame_jitter_offsets = new Float32Array([0, 0]);
     #frame_jitter_samples = 1;
-    #frame_jitter_enabled = true;
+    #frame_jitter_enabled = false;
 
     #initialize_frame_jitter() {
         this.#frame_jitter_samples = this.#usage_resolution_scale;
@@ -109,7 +111,7 @@ export class VirtualTextureManager {
      */
     #usage_resolution_scale = 32;
 
-    #usage_metadata = new UsageMetadata();
+    #usage_metadata = new VirtualTextureUsage();
 
     #texture_id = 3;
     #texture_resolution = 65536;

package/src/engine/graphics/texture/virtual/v2/debug/ResidencyDebugView.js

@@ -6,22 +6,28 @@ import { sampler2d_write_to_canvas_raw } from "../../../sampler/sampler2d_write_
 export class ResidencyDebugView extends EmptyView {
     /**
      *
-     * @type {SparseTexture|null}
+     * @type {PageTexture|null}
      */
     texture = null;
 
     #canvas = new CanvasView();
 
+    #previous_residency = new Uint32Array(1024);
+
     constructor() {
         super({
             css: {
-                position: "absolute"
+                position: "absolute",
+                boxShadow: "0 0 8px black",
+                background: "black"
             }
         });
 
         this.#canvas.css(CSS_ABSOLUTE_POSITIONING);
 
         this.addChild(this.#canvas);
+
+        this.#previous_residency.fill(-1);
     }
 
     update() {
@@ -47,12 +53,18 @@ export class ResidencyDebugView extends EmptyView {
         for (let i = 0; i < residentTiles.length; i++) {
             const tile = residentTiles[i];
 
-            sampler2d_write_to_canvas_raw(tile.data, temp.el);
+            const page_slot = tile.page_slot;
+            if (this.#previous_residency[page_slot] === tile.finder_print) {
+                continue;
+            }
 
-            const column = tile.page_slot % tile_columns;
-            const row = (tile.page_slot / tile_columns) | 0;
+            sampler2d_write_to_canvas_raw(tile.data, temp.el);
+            const column = page_slot % tile_columns;
+            const row = (page_slot / tile_columns) | 0;
 
             canvas.context2d.drawImage(temp.el, 0, 0, tile_resolution, tile_resolution, tile_resolution * column, tile_resolution * row, tile_resolution, tile_resolution);
+
+            this.#previous_residency[page_slot] = tile.finder_print;
         }
     }
 }

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

@@ -31,7 +31,7 @@ export class UsageDebugView extends EmptyView {
 
     /**
      *
-     * @param {UsageMetadata} usage
+     * @param {VirtualTextureUsage} usage
      */
     set usage(usage) {
 

package/src/engine/graphics/texture/virtual/v2/debug/UsagePyramidDebugView.js

@@ -191,7 +191,7 @@ export class UsagePyramidDebugView extends EmptyView {
 
     /**
      *
-     * @param {UsageMetadata} usage
+     * @param {VirtualTextureUsage} usage
      */
     set usage(usage) {