@woosh/meep-engine 2.75.2 → 2.75.4

package/src/engine/graphics/texture/virtual/v2/{PageTexture.js → VirtualTexturePage.js}

@@ -1,4 +1,5 @@
-import { WebGLRenderTarget } from "three";
+import { ClampToEdgeWrapping, DataTexture, LinearFilter, NearestFilter, Vector2 } from "three";
+import { assert } from "../../../../../core/assert.js";
 import { BitSet } from "../../../../../core/binary/BitSet.js";
 import { Cache } from "../../../../../core/cache/Cache.js";
 import { array_copy } from "../../../../../core/collection/array/array_copy.js";
@@ -6,20 +7,36 @@ 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 { Sampler2D } from "../../sampler/Sampler2D.js";
+import { writeSample2DDataToDataTexture } from "../../sampler/writeSampler2DDataToDataTexture.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)
+ * IMPORTANT: MAKE SURE THAT THE CACHE CAN HOLD AT LEAST 1 TILE!
  * @type {number}
  */
-const DEFAULT_CACHE_SIZE = 16 * 1024 * 1024;
+const DEFAULT_CACHE_SIZE = 256 * 1024 * 1024;
 
-export class PageTexture {
-    #page_texture = new WebGLRenderTarget(1, 1);
+export class VirtualTexturePage {
+    #page_texture = new DataTexture(new Uint8Array(4), 1, 1);
+
+    #tile_copy_sampler = Sampler2D.uint8(4, 1, 1);
+    #tile_copy_texture = new DataTexture(this.#tile_copy_sampler.data, 1, 1);
 
     #page_texture_size = [1, 1];
 
+    /**
+     *
+     * @type {number[]}
+     */
+    #page_texture_resolution_in_tiles = [1, 1];
+
+    get page_texture_resolution_in_tiles() {
+        return this.#page_texture_resolution_in_tiles;
+    }
+
     /**
      * Used internally to track number of times `update` method was called
      * @type {number}
@@ -37,19 +54,37 @@ export class PageTexture {
      * This helps prevent thrashing and keep performance overhead of updating pages predictable
      * @type {number}
      */
-    #cycle_assignment_limit = 2;
+    #cycle_assignment_limit = 4;
+
+    /**
+     *
+     * @type {THREE.WebGLRenderer|null}
+     */
+    #renderer = null;
+
+    set renderer(v) {
+        this.#renderer = v;
+    }
 
 
     get page_texture_resolution() {
         return this.#page_texture_size;
     }
 
+    get texture() {
+        return this.#page_texture;
+    }
+
     /**
      *
      * @type {VirtualTextureTile[]}
      */
     #resident_tiles = [];
 
+    /**
+     *
+     * @returns {VirtualTextureTile[]}
+     */
     get resident_tiles() {
         return this.#resident_tiles;
     }
@@ -71,6 +106,34 @@ export class PageTexture {
         return this.#tile_resolution;
     }
 
+    /**
+     *
+     * @param {number} v
+     */
+    set tile_resolution(v) {
+        this.#tile_resolution = v;
+
+        this.#update_tile_slot_resolution();
+        this.clear_resident();
+    }
+
+    /**
+     * Extra padding on repeated pixels around each tile on each side (top, left, right, bottom)
+     * Used to enable texture filtering
+     * @type {number}
+     */
+    #tile_margin = 4;
+
+    get tile_margin() {
+        return this.#tile_margin;
+    }
+
+    #tile_slot_resolution = this.#tile_resolution + this.#tile_margin * 2;
+
+    #update_tile_slot_resolution() {
+        this.#tile_slot_resolution = this.#tile_resolution + this.#tile_margin * 2;
+    }
+
     #residency_tile_capacity = 0;
 
     /**
@@ -90,6 +153,17 @@ export class PageTexture {
     #asset_manager = null;
 
     constructor() {
+        const texture = this.#page_texture;
+
+        texture.generateMipmaps = false;
+        texture.minFilter = NearestFilter;
+        texture.magFilter = LinearFilter;
+        // texture.magFilter = NearestFilter;
+        texture.anisotropy = this.#tile_margin*2;
+
+        this.#tile_copy_texture.wrapT = ClampToEdgeWrapping;
+        this.#tile_copy_texture.wrapS = ClampToEdgeWrapping;
+
         this.#loader.on.loaded.add(this.#handle_tile_loaded, this);
     }
 
@@ -100,6 +174,10 @@ export class PageTexture {
     #handle_tile_loaded(tile) {
         const finderPrint = tile.finder_print;
 
+        assert.notNull(tile.data, 'tile.data');
+        assert.equal(tile.data.width, this.#tile_slot_resolution);
+        assert.equal(tile.data.height, this.#tile_slot_resolution);
+
         if (this.#tile_cache.has(finderPrint)) {
             // already loaded
             return;
@@ -124,11 +202,14 @@ export class PageTexture {
     }
 
     #update_residency_capacity() {
-        const tile_resolution = this.#tile_resolution;
+        const slot_resolution = this.#tile_slot_resolution;
         const size = this.#page_texture_size;
 
-        const x = size[0] / tile_resolution;
-        const y = size[1] / tile_resolution;
+        const x = Math.floor(size[0] / slot_resolution);
+        const y = Math.floor(size[1] / slot_resolution);
+
+        this.#page_texture_resolution_in_tiles[0] = x;
+        this.#page_texture_resolution_in_tiles[1] = y;
 
         this.#residency_tile_capacity = x * y;
 
@@ -138,17 +219,7 @@ export class PageTexture {
 
 
     /**
-     *
-     * @param {number} v
-     */
-    set tile_resolution(v) {
-        this.#tile_resolution = v;
-
-        this.#update_residency_capacity();
-    }
-
-    /**
-     * Tiles that are not currently resident live here
+     * Tiles that are not currently resident live here, this is essentially a second level cache
      * key is the tile's "fingerprint"
      * @type {Cache<number,VirtualTextureTile>}
      */
@@ -241,6 +312,42 @@ export class PageTexture {
         this.#resident_tiles.push(tile);
         this.#resident_tile_lookup.set(tile.finder_print, tile);
 
+        const res_x = this.#page_texture_resolution_in_tiles[0];
+
+        const position_tile_x = slot % res_x;
+        const position_tile_y = (slot - position_tile_x) / res_x;
+
+        const slot_resolution = this.#tile_slot_resolution;
+
+        const copy_sampler = this.#tile_copy_sampler;
+        if (copy_sampler.width !== slot_resolution || copy_sampler.height !== slot_resolution) {
+            copy_sampler.resize(slot_resolution, slot_resolution);
+
+            writeSample2DDataToDataTexture(copy_sampler, this.#tile_copy_texture);
+        }
+
+        //
+        // const tile_margin = this.#tile_margin;
+        //
+        // copy_sampler.copyWithMargin(
+        //     tile.data, 0, 0,
+        //     tile_margin, tile_margin,
+        //     this.#tile_resolution, this.#tile_resolution,
+        //     tile_margin, tile_margin, tile_margin, tile_margin
+        // );
+
+        this.#tile_copy_texture.image.data.set(tile.data.data);
+        this.#tile_copy_texture.needsUpdate = true;
+
+        const write_position = new Vector2(
+            position_tile_x * slot_resolution,
+            position_tile_y * slot_resolution,
+        );
+
+        this.#renderer.copyTextureToTexture(
+            write_position, this.#tile_copy_texture, this.#page_texture
+        );
+
         this.version++;
 
         return true;
@@ -257,12 +364,26 @@ export class PageTexture {
             2
         );
 
+        this.clear_resident();
+
         this.#page_texture.dispose();
-        this.#page_texture.setSize(this.#page_texture_size[0], this.#page_texture_size[1]);
+
+        const width = this.#page_texture_size[0];
+        const height = this.#page_texture_size[1];
+
+        this.#page_texture.image.data = new Uint8Array(width * height * 4);
+        this.#page_texture.image.width = width;
+        this.#page_texture.image.height = height;
+
+        this.#page_texture.needsUpdate = true;
 
         this.#update_residency_capacity();
     }
 
+    get page_texture_size() {
+        return this.#page_texture_size;
+    }
+
     /**
      *
      * @param {VirtualTextureUsage} usage
@@ -324,12 +445,20 @@ export class PageTexture {
         this.update_count++;
     }
 
+    clear_resident() {
+
+        while (this.#resident_tiles.length > 0) {
+            this.#evict_one();
+        }
+
+    }
+
     dispose() {
+        this.clear_resident();
+
         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/VirtualTextureTileLoader.js

@@ -3,6 +3,8 @@ 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 { Sampler2D } from "../../sampler/Sampler2D.js";
+import { sampler2d_to_uint8_RGBA } from "../../sampler/sampler2d_to_uint8_RGBA.js";
 import { compose_finger_print } from "./tile/compose_finger_print.js";
 import { decompose_finger_print } from "./tile/decompose_finger_print.js";
 import { VirtualTextureTile } from "./tile/VirtualTextureTile.js";
@@ -211,8 +213,15 @@ export class VirtualTextureTileLoader {
 
                 const tile = new VirtualTextureTile();
 
+                let rgba = sampler;
 
-                tile.data = sampler;
+                if (rgba.itemSize !== 4) {
+                    rgba = Sampler2D.uint8(4, sampler.width, sampler.height);
+
+                    sampler2d_to_uint8_RGBA(rgba, sampler);
+                }
+
+                tile.data = rgba;
                 tile.finder_print = finger_print;
 
                 this.on.loaded.send1(tile);

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

@@ -1,6 +1,8 @@
-import { arrayQuickSort } from "../../../../../core/collection/array/arrayQuickSort.js";
+import { array_quick_sort_by_comparator, arrayQuickSort } from "../../../../../core/collection/array/arrayQuickSort.js";
 import { compose_tile_address } from "./tile/compose_tile_address.js";
+import { decompose_finger_print } from "./tile/decompose_finger_print.js";
 import { finger_print_to_tile_address } from "./tile/finger_print_to_tile_address.js";
+import { tile_address_to_finger_print } from "./tile/tile_address_to_finger_print.js";
 
 
 export class VirtualTextureUsage {
@@ -96,7 +98,8 @@ export class VirtualTextureUsage {
     promoteAncestors(bias = 1) {
 
         // traverse mip pyramid in reverse, so we can push counts to parents one level at a time
-        for (let mip = this.#max_mip_level; mip > 0; mip--) {
+        const max_mip = this.#max_mip_level;
+        for (let mip = max_mip; mip > 0; mip--) {
 
             const mip_resolution = 1 << mip;
 
@@ -118,14 +121,10 @@ export class VirtualTextureUsage {
 
                     const parent_count = this.#counts_intrinsic[parent_index];
 
-                    const expected_count = count + bias;
+                    this.#counts_intrinsic[parent_index] = parent_count + count + bias;
 
-                    if (parent_count < expected_count) {
-                        this.#counts_intrinsic[parent_index] = expected_count;
-
-                        if (parent_count === 0) {
-                            this.#append_to_occupancy(parent_index);
-                        }
+                    if (parent_count === 0) {
+                        this.#append_to_occupancy(parent_index);
                     }
 
                 }
@@ -147,13 +146,47 @@ export class VirtualTextureUsage {
      * Sort occupancy list in descending order
      */
     sortOccupancy() {
+        // array_quick_sort_by_comparator(this.#occupancy, (a, b) => {
+        //
+        //     return a-b;
+        //
+        //
+        // }, null, 0, this.#occupancy_cursor - 1);
+
+        //
+        // arrayQuickSort(this.#occupancy, v => -v, null, 0, this.#occupancy_cursor - 1);
         arrayQuickSort(
             this.#occupancy,
-            (index) => -this.#counts_intrinsic[index], null,
+            (index) => {
+                return -this.#counts_intrinsic[index]
+            }, null,
             0, this.#occupancy_cursor - 1
         );
     }
 
+    sortOccupancyByLOD() {
+        array_quick_sort_by_comparator(this.#occupancy, (a, b) => {
+
+            const fingerprint_a = tile_address_to_finger_print(a);
+            const fingerprint_b = tile_address_to_finger_print(b);
+
+            const { mip: mip_a } = decompose_finger_print(fingerprint_a);
+            const { mip: mip_b } = decompose_finger_print(fingerprint_b);
+
+            const mip_delta = mip_a - mip_b;
+
+            if (mip_delta !== 0) {
+                return mip_delta;
+            }
+
+            const count_a = this.#counts_intrinsic[a];
+            const count_b = this.#counts_intrinsic[b];
+            return count_b - count_a;
+
+        }, null, 0, this.#occupancy_cursor - 1);
+
+    }
+
 
     /**
      *

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

@@ -27,7 +27,7 @@ function fragment() {
     
     uniform uvec4 u_mt_tex; // [ width, height, tileSize, id ]
     uniform vec2 u_mt_params; // [ bias, maxLevel ]
-    uniform vec2 u_mt_viewport_size;
+    uniform vec2 u_mt_viewport_scale;
     in vec2 vUv;
     
     out uvec4 out_decoded;
@@ -37,8 +37,8 @@ function fragment() {
         float scale_x = float(u_mt_tex.x) ;
         float scale_y = float(u_mt_tex.y) ;
         
-        vec2 dx = dFdx( uv * scale_x)/ u_mt_viewport_size.x;
-        vec2 dy = dFdy( uv * scale_y)/ u_mt_viewport_size.y;
+        vec2 dx = dFdx( uv * scale_x ) * u_mt_viewport_scale.x;
+        vec2 dy = dFdy( uv * scale_y ) * u_mt_viewport_scale.y;
         
         float d = max( dot( dx, dx ), dot( dy, dy ) );
         

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

@@ -23,7 +23,7 @@ import { VirtualTextureUsage } from "./VirtualTextureUsage.js";
 import { fragment, vertex } from "./VirtualTextureUsageShader.js";
 
 const usage_material_uniforms = {
-    "u_mt_params": { value: new Vector2(0.1, 1) },
+    "u_mt_params": { value: new Vector2(0, 1) },
     /**
      * Format: VT_WIDTH, VT_HEIGHT, VT_TILE_SIZE, VT_ID
      *   - VT_WIDTH :       width of the virtual texture
@@ -32,7 +32,7 @@ const usage_material_uniforms = {
      *   - VT_ID :          multiple different virtual textures may be used, this identifies current texture
      */
     "u_mt_tex": { value: new Vector4(1, 1, 1, 3) },
-    "u_mt_viewport_size": { value: new Vector2(1, 1) },
+    "u_mt_viewport_scale": { value: new Vector2(1, 1) },
     "modelViewMatrix": { value: new Matrix4() },
     "projectionMatrix": { value: new Matrix4() }
 };
@@ -49,6 +49,8 @@ usage_material.blending = NoBlending;
 
 
 const clear_usage_material = new RawShaderMaterial({
+    depthTest: false,
+    depthWrite: false,
     vertexShader: `    
         precision mediump float;    
         in vec2 uv;
@@ -83,6 +85,18 @@ export class VirtualTextureUsageUpdater {
     #frame_jitter_samples = 1;
     #frame_jitter_enabled = false;
 
+    get frame_jitter_enabled() {
+        return this.#frame_jitter_enabled;
+    }
+
+    /**
+     *
+     * @param {boolean} v
+     */
+    set frame_jitter_enabled(v) {
+        this.#frame_jitter_enabled = v;
+    }
+
     #initialize_frame_jitter() {
         this.#frame_jitter_samples = this.#usage_resolution_scale;
         this.#frame_jitter_offsets = generate_halton_jitter(this.#frame_jitter_samples);
@@ -91,14 +105,15 @@ export class VirtualTextureUsageUpdater {
     #usage_buffer = new WebGLRenderTarget(1, 1, {
         wrapT: ClampToEdgeWrapping,
         wrapS: ClampToEdgeWrapping,
-        generateMipmaps: false,
         minFilter: NearestFilter,
         magFilter: NearestFilter,
         format: RGBAIntegerFormat,
+        type: UnsignedByteType,
+        internalFormat: "RGBA8UI",
+        anisotropy: 1,
         depthBuffer: true,
         stencilBuffer: false,
-        type: UnsignedByteType,
-        internalFormat: "RGBA8UI"
+        generateMipmaps: false,
     });
 
     #usage_pixel_data = Sampler2D.uint8(4, 1, 1);
@@ -131,10 +146,10 @@ export class VirtualTextureUsageUpdater {
     }
 
     /**
-     * Used to fetch higher resolution tiles
+     * Used to fetch higher/lower resolution tiles, negative value will fetch higher resolution tiles, and vice-versa
      * @type {number}
      */
-    #usage_texture_bias = 0.1;
+    #usage_texture_bias = 0;
 
 
     /**
@@ -148,6 +163,8 @@ export class VirtualTextureUsageUpdater {
         tile_size,
         texture_id
     ) {
+        assert.lessThanOrEqual(tile_size, resolution, `tile_size(=${tile_size}) must be <= than the overall texture resolution(=${resolution})`);
+
         this.#texture_id = texture_id;
         this.#texture_resolution = resolution;
         this.#tile_resolution = tile_size;
@@ -171,8 +188,14 @@ export class VirtualTextureUsageUpdater {
     }
 
     constructor() {
+
+        const target = this.#usage_buffer;
+        target.scissorTest = false;
+
+
         this.#initialize_usage_uniforms();
         this.#initialize_frame_jitter();
+
     }
 
     #initialize_usage_uniforms() {
@@ -227,7 +250,7 @@ export class VirtualTextureUsageUpdater {
         this.#usage_pixel_data.resize(usage_resolution_x, usage_resolution_y, true);
 
         const usage_material_uniforms = usage_material.uniforms;
-        usage_material_uniforms.u_mt_viewport_size.value.set(_x / usage_resolution_x, _y / usage_resolution_y);
+        usage_material_uniforms.u_mt_viewport_scale.value.set(usage_resolution_x / _x, usage_resolution_y / _y);
 
     }
 
@@ -289,11 +312,16 @@ export class VirtualTextureUsageUpdater {
 
         renderer.render(scene, camera);
 
-        scene.overrideMaterial = _old_material;
 
-        renderer.readRenderTargetPixels(usage_buffer, 0, 0, usage_buffer.width, usage_buffer.height, this.#usage_pixel_data.data);
+        renderer.readRenderTargetPixels(
+            usage_buffer, 0, 0,
+            usage_buffer.width, usage_buffer.height,
+            this.#usage_pixel_data.data
+        );
 
         // restore state
+        scene.overrideMaterial = _old_material;
+
         renderer.setRenderTarget(_old_render_target);
         renderer.autoClear = _auto_clear;
         array_copy(scratch_matrix, 0, camera_projection_matrix, 0, 16);
@@ -303,7 +331,7 @@ export class VirtualTextureUsageUpdater {
         //
         this.#usage_metadata.fromTexture(this.#usage_pixel_data.data);
         this.#usage_metadata.promoteAncestors(1);
-        this.#usage_metadata.sortOccupancy();
+        this.#usage_metadata.sortOccupancyByLOD();
 
         this.#frame_index++;
     }

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

@@ -6,7 +6,7 @@ import { sampler2d_write_to_canvas_raw } from "../../../sampler/sampler2d_write_
 export class ResidencyDebugView extends EmptyView {
     /**
      *
-     * @type {PageTexture|null}
+     * @type {VirtualTexturePage|null}
      */
     texture = null;
 
@@ -14,15 +14,21 @@ export class ResidencyDebugView extends EmptyView {
 
     #previous_residency = new Uint32Array(1024);
 
-    constructor() {
+    #scale =1;
+
+    constructor({
+                    scale = 1
+                } = {}) {
+
         super({
             css: {
                 position: "absolute",
                 boxShadow: "0 0 8px black",
                 background: "black"
-            }
+            },
         });
 
+        this.#scale = scale;
         this.#canvas.css(CSS_ABSOLUTE_POSITIONING);
 
         this.addChild(this.#canvas);
@@ -38,7 +44,12 @@ export class ResidencyDebugView extends EmptyView {
         }
 
         const canvas = this.#canvas;
-        canvas.size.readFromArray(t.page_texture_resolution);
+        const scale = this.#scale;
+
+        canvas.size.set(
+            t.page_texture_resolution[0] * scale,
+            t.page_texture_resolution[1] * scale,
+        );
 
         this.size.copy(canvas.size);
 
@@ -62,7 +73,11 @@ export class ResidencyDebugView extends EmptyView {
             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);
+            canvas.context2d.drawImage(
+                temp.el, 0, 0, tile_resolution, tile_resolution,
+                tile_resolution * column * scale, tile_resolution * row * scale,
+                tile_resolution * scale, tile_resolution * scale
+            );
 
             this.#previous_residency[page_slot] = tile.finder_print;
         }