@woosh/meep-engine 2.73.0 → 2.75.0

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

@@ -1,12 +1,9 @@
-import { assert } from "../../../../../core/assert.js";
-import LabelView from "../../../../../view/common/LabelView.js";
-import EmptyView from "../../../../../view/elements/EmptyView.js";
-
-const ABSOLUTE_CSS = {
-    position: "absolute",
-    top: 0,
-    left: 0
-};
+import { assert } from "../../../../../../core/assert.js";
+import LabelView from "../../../../../../view/common/LabelView.js";
+import { CSS_ABSOLUTE_POSITIONING } from "../../../../../../view/CSS_ABSOLUTE_POSITIONING.js";
+import EmptyView from "../../../../../../view/elements/EmptyView.js";
+import { decompose_finger_print } from "../tile/decompose_finger_print.js";
+import { tile_address_to_finger_print } from "../tile/tile_address_to_finger_print.js";
 
 class TextureLODView extends EmptyView {
 
@@ -22,7 +19,7 @@ class TextureLODView extends EmptyView {
                     resolution = [1, 1],
                     tile_size = 8
                 }) {
-        super({ css: ABSOLUTE_CSS });
+        super({ css: CSS_ABSOLUTE_POSITIONING });
 
         this.css({
             background: "rgba(255,255,255,0.05)"
@@ -38,10 +35,11 @@ class TextureLODView extends EmptyView {
 
         for (let j = 0; j < height; j++) {
             for (let i = 0; i < width; i++) {
-                const tileView = new EmptyView({ css: ABSOLUTE_CSS });
+                const tileView = new EmptyView({ css: CSS_ABSOLUTE_POSITIONING });
 
                 // const flipped_y = height - j - 1;
                 tileView.position.set(i * tile_size, j * tile_size);
+                // tileView.position.set(i * tile_size, flipped_y * tile_size);
                 tileView.size.set(tile_size, tile_size);
 
                 this.clearTile(tileView);
@@ -57,7 +55,7 @@ class TextureLODView extends EmptyView {
 
         const label = new LabelView(`${width} x ${height}`, {
             css: {
-                ...ABSOLUTE_CSS,
+                ...CSS_ABSOLUTE_POSITIONING,
                 color: '#FFFFFF',
                 textShadow: '0 0 2px black',
                 whiteSpace: "pre"
@@ -193,17 +191,14 @@ export class UsagePyramidDebugView extends EmptyView {
 
     /**
      *
-     * @param {UsageMetadata} usage
+     * @param {VirtualTextureUsage} usage
      */
     set usage(usage) {
 
         for (let i = 0; i < this.#used_set_size; i++) {
             const finger_print = this.#used_set[i];
 
-
-            const mip = (finger_print >> 24) & 0xFF;
-            const x = (finger_print >> 16) & 0xFF;
-            const y = (finger_print >> 8) & 0xFF;
+            const { mip, x, y } = decompose_finger_print(finger_print);
 
             const mipView = this.#levels[mip];
 
@@ -214,38 +209,34 @@ export class UsagePyramidDebugView extends EmptyView {
         this.#used_set_size = 0;
 
 
-        const mip_count = this.#levels.length;
+        const occupancy = usage.occupancy;
+        const occupancyCount = usage.occupancy_count;
 
-        for (let mip = 0; mip < mip_count; mip++) {
-            const size = 1 << mip;
+        for (let i = 0; i < occupancyCount; i++) {
+            const occupancy_index = occupancy[i];
+            const fingerPrint = tile_address_to_finger_print(occupancy_index);
 
-            for (let y = 0; y < size; y++) {
-                for (let x = 0; x < size; x++) {
-                    const count = usage.getCountBy(mip,x,y);
+            const count = usage.getCountByFingerprint(fingerPrint);
+
+            if (count <= 0) {
+                continue;
+            }
 
-                    if(count === 0){
-                        continue;
-                    }
+            const { mip, x, y } = decompose_finger_print(fingerPrint);
 
-                    const mipView = this.#levels[mip];
 
-                    const tile = mipView.getTile(x, y);
+            const mipView = this.#levels[mip];
 
-                    tile.css({
-                        background: "rgba(255,0,0,0.8)"
-                    });
+            const tile = mipView.getTile(x, y);
 
-                    tile.visible = true;
+            tile.css({
+                background: "rgba(255,0,0,0.8)"
+            });
 
-                    const finger_print = (mip << 24)
-                        | (x << 16)
-                        | (y << 8)
-                    ;
+            tile.visible = true;
 
-                    this.#used_set[this.#used_set_size] = finger_print;
-                    this.#used_set_size++;
-                }
-            }
+            this.#used_set[this.#used_set_size] = fingerPrint;
+            this.#used_set_size++;
         }
 
     }

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

@@ -3,12 +3,14 @@ import {
     AmbientLight,
     Clock,
     DirectionalLight,
+    DoubleSide,
+    Matrix4,
     Mesh,
-    MeshStandardMaterial,
+    MeshBasicMaterial,
     PerspectiveCamera,
+    PlaneBufferGeometry,
     Scene,
     TextureLoader,
-    TorusGeometry,
     Vector2,
     WebGLRenderer
 } from "three";
@@ -18,9 +20,11 @@ import EmptyView from "../../../../../view/elements/EmptyView.js";
 import { AssetManager } from "../../../../asset/AssetManager.js";
 import { GameAssetType } from "../../../../asset/GameAssetType.js";
 import { ImageRGBADataLoader } from "../../../../asset/loaders/image/ImageRGBADataLoader.js";
-import { SparseTexture } from "./SparseTexture.js";
-import { UsageDebugView } from "./UsageDebugView.js";
-import { VirtualTextureManager } from "./VirtualTextureManager.js";
+import { ResidencyDebugView } from "./debug/ResidencyDebugView.js";
+import { UsageDebugView } from "./debug/UsageDebugView.js";
+import { UsagePyramidDebugView } from "./debug/UsagePyramidDebugView.js";
+import { PageTexture } from "./PageTexture.js";
+import { VirtualTextureUsageUpdater } from "./VirtualTextureUsageUpdater.js";
 
 let camera,
     /**
@@ -35,61 +39,102 @@ let camera,
 
 let mesh;
 
-const am = new AssetManager();
-am.registerLoader(GameAssetType.Image, new ImageRGBADataLoader());
-am.startup();
-
-const virtualTextureManager = new VirtualTextureManager();
-virtualTextureManager.setTextureParameters(
-    // 2048,
-    16384,
-    128,
-    3
-);
-
-const sparseTexture = new SparseTexture();
-sparseTexture.page_texture_size = [1024, 1024];
-sparseTexture.tile_resolution = virtualTextureManager.tile_resolution;
-sparseTexture.asset_manager = am;
-
-console.log(sparseTexture);
-
-// const TEXTURE_URL = "data/textures/utility/uv_map_reference.png";
+const TEXTURE_URL = "data/textures/utility/uv_map_reference.png";
 // const TEXTURE_URL = "data/textures/utility/4096x4096TexelDensityTexture1.png";
 // const TEXTURE_URL = "data/textures/utility/Lenna.png";
 // const TEXTURE_URL = "data/textures/utility/TESTIMAGES/SAMPLING/8BIT/RGB/2448x2448/SRC/img_2448x2448_3x8bit_SRC_RGB_cards_a.png";
-const TEXTURE_URL = "data/models/LowPolyTownshipSet/Town_Hall//diffuse_2048.png";
-
-const container_view = new EmptyView();
-//
-const usageDebugView = new UsageDebugView();
-usageDebugView.mip_levels = virtualTextureManager.max_mip_level;
-container_view.addChild(usageDebugView);
+// const TEXTURE_URL = "data/models/LowPolyTownshipSet/Town_Hall//diffuse_2048.png";
 
+const virtualTextureManager = new VirtualTextureUsageUpdater();
+const sparseTexture = new PageTexture();
+const residencyDebugView = new ResidencyDebugView();
 
-// const usagePyramidDebugView = new UsagePyramidDebugView();
-// usagePyramidDebugView.setImageURL(TEXTURE_URL);
-//
-// container_view.addChild(usagePyramidDebugView);
+const container_view = new EmptyView();
 
 const options = {
-    spin: true
+    spin: false
 };
 
 init();
-animate();
 
-
-function makeTorus() {
+function makeMesh() {
     const size = 0.65;
-    mesh = new Mesh(new TorusGeometry(size, 0.3, 30, 30), new MeshStandardMaterial({
-        roughness: 0.4,
-        map: new TextureLoader().load(TEXTURE_URL)
+
+    const map = new TextureLoader().load(TEXTURE_URL);
+    map.flipY = false;
+
+    // const geo = new TetrahedronBufferGeometry(size,30);
+    // const geo = new TorusGeometry(size, 0.3, 30, 30);
+    const geo = new PlaneBufferGeometry(size, size);
+
+    mesh = new Mesh(geo, new MeshBasicMaterial({
+        map,
+        side: DoubleSide
     }));
-    mesh.rotation.x = 0.3;
+    const m4 = new Matrix4();
+
+    // m4.makeRotationZ(-Math.PI/2);
+    m4.makeScale(1, -1, -1);
+
+    geo.applyMatrix4(m4);
+
+    // mesh.rotation.x = 0.3;
+
+    scene.add(mesh);
 }
 
-function init() {
+function makeGLTF(path) {
+
+    new GLTFLoader().load(path, (gltf) => {
+
+        mesh = gltf.scene;
+        scene.add(mesh);
+
+    });
+}
+
+async function init() {
+
+    const am = new AssetManager();
+    await am.registerLoader(GameAssetType.Image, new ImageRGBADataLoader());
+    am.startup();
+
+    virtualTextureManager.setTextureParameters(
+        2048,
+        // 16384,
+        32,
+        3
+    );
+
+    sparseTexture.path = "data/textures/utility/vt/uv_map_reference";
+    // sparseTexture.path = "data/textures/utility/vt/Lenna";
+    // sparseTexture.path = "data/textures/utility/vt/TexelDensity1";
+    sparseTexture.page_texture_size = [128, 768];
+    sparseTexture.tile_resolution = virtualTextureManager.tile_resolution;
+    sparseTexture.asset_manager = am;
+
+
+    console.log(sparseTexture);
+
+
+    //
+    const usageDebugView = new UsageDebugView();
+    usageDebugView.mip_levels = virtualTextureManager.max_mip_level;
+    // container_view.addChild(usageDebugView);
+
+
+    const usagePyramidDebugView = new UsagePyramidDebugView();
+    usagePyramidDebugView.setImageURL(TEXTURE_URL);
+    container_view.addChild(usagePyramidDebugView);
+
+    residencyDebugView.texture = sparseTexture;
+    residencyDebugView.css({
+        bottom: 0,
+        right: 0
+    });
+    container_view.addChild(residencyDebugView);
+
+    // ===================
 
     const container = document.body;
 
@@ -98,20 +143,17 @@ function init() {
     container.appendChild(container_view.el);
     container_view.link();
 
-    camera = new PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 300);
+    camera = new PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 100);
     camera.position.z = 4;
 
     scene = new Scene();
 
     clock = new Clock();
 
+    // makeTorus();
+    makeMesh();
 
-    new GLTFLoader().load("data/models/LowPolyTownshipSet/Town_Hall/model.gltf", (gltf) => {
-
-        mesh = gltf.scene;
-        scene.add(mesh);
-
-    });
+    // makeGLTF("data/models/LowPolyTownshipSet/Town_Hall/model.gltf");
 
     scene.add(new DirectionalLight(0xFFFFFF, 0.7));
     scene.add(new AmbientLight(0xFFFFFF, 0.2));
@@ -143,7 +185,7 @@ function init() {
         gui.add(options, key);
     });
 
-
+    animate();
 }
 
 function onWindowResize() {
@@ -185,8 +227,10 @@ function render() {
     renderer.clear();
     renderer.render(scene, camera)
 
-    usageDebugView.usage = virtualTextureManager.usage_metadata;
+    // usageDebugView.usage = virtualTextureManager.usage_metadata;
 
     // usagePyramidDebugView.setTextureParameters(virtualTextureManager.texture_resolution, virtualTextureManager.tile_resolution);
     // usagePyramidDebugView.usage = virtualTextureManager.usage_metadata;
+
+    residencyDebugView.update();
 }

package/src/engine/graphics/texture/virtual/v2/{TextureTile.js → tile/VirtualTextureTile.js}

@@ -1,4 +1,4 @@
-export class TextureTile {
+export class VirtualTextureTile {
 
     finder_print = 0;
 
@@ -8,7 +8,7 @@ export class TextureTile {
      * Currently occupied page slot, only valid when page is resident
      * @type {number}
      */
-    page_slot = 0;
+    page_slot = -1;
 
     /**
      *
@@ -18,7 +18,7 @@ export class TextureTile {
 
     /**
      *
-     * @param {TextureTile} other
+     * @param {VirtualTextureTile} other
      * @returns {boolean}
      */
     equals(other) {

package/src/engine/graphics/texture/virtual/v2/tile/compose_finger_print.js

@@ -0,0 +1,23 @@
+import { assert } from "../../../../../../core/assert.js";
+
+/**
+ *
+ * @param {number} mip
+ * @param {number} x
+ * @param {number} y
+ * @returns {number}
+ */
+export function compose_finger_print(mip, x, y) {
+    // validate
+    assert.isNonNegativeInteger(x, 'x');
+    assert.isNonNegativeInteger(y, 'y');
+    assert.isNonNegativeInteger(mip, 'mip');
+
+    assert.lessThan(x, (1 << mip), 'x');
+    assert.lessThan(y, (1 << mip), 'y');
+
+    return (mip << 24)
+        | (x << 16)
+        | (y << 8)
+        ;
+}

package/src/engine/graphics/texture/virtual/v2/tile/compose_tile_address.js

@@ -0,0 +1,26 @@
+import { assert } from "../../../../../../core/assert.js";
+import { split_by_2 } from "../../../../../../core/geom/3d/morton/split_by_2.js";
+
+/**
+ *
+ * @param {number} mip
+ * @param {number} x
+ * @param {number} y
+ * @returns {number}
+ */
+export function compose_tile_address(mip, x, y) {
+
+    // figure out resolution of this mip level
+    const mip_resolution = 1 << mip;
+
+    assert.lessThan(x, mip_resolution);
+    assert.lessThan(y, mip_resolution);
+
+    // this is basically converting something like 0100 to 0011;
+    const mip_mask = mip_resolution - 1;
+
+    // where data for this mip starts
+    const index_offset = split_by_2(mip_mask);
+
+    return index_offset + x + y * mip_resolution;
+}

package/src/engine/graphics/texture/virtual/v2/tile/decompose_finger_print.js

@@ -0,0 +1,12 @@
+/**
+ *
+ * @param {number} finger_print
+ * @returns {{mip: number, x: number, y: number}}
+ */
+export function decompose_finger_print(finger_print) {
+    const mip = (finger_print >> 24) & 0xFF;
+    const x = (finger_print >> 16) & 0xFF;
+    const y = (finger_print >> 8) & 0xFF;
+
+    return { mip, x, y };
+}

package/src/engine/graphics/texture/virtual/v2/tile/finger_print_to_tile_address.js

@@ -0,0 +1,16 @@
+import { compose_tile_address } from "./compose_tile_address.js";
+
+/**
+ *
+ * @param {number} finger_print
+ * @returns {number}
+ */
+export function finger_print_to_tile_address(finger_print) {
+    // decode fingerprint
+    const mip = (finger_print >> 24) & 0xFF;
+    const x = (finger_print >> 16) & 0xFF;
+    const y = (finger_print >> 8) & 0xFF;
+
+    return compose_tile_address(mip, x, y);
+}
+

package/src/engine/graphics/texture/virtual/v2/{tile_index_to_finger_print.js → tile/tile_address_to_finger_print.js}

@@ -1,4 +1,4 @@
-import { split_by_2 } from "../../../../../core/geom/3d/morton/split_by_2.js";
+import { split_by_2 } from "../../../../../../core/geom/3d/morton/split_by_2.js";
 import { compose_finger_print } from "./compose_finger_print.js";
 
 /**
@@ -6,7 +6,7 @@ import { compose_finger_print } from "./compose_finger_print.js";
  * @param {number} index
  * @returns {number}
  */
-export function tile_index_to_finger_print(index) {
+export function tile_address_to_finger_print(index) {
     for (let mip = 0; mip < 99; mip++) {
         const resolution = 1 << mip;
 
@@ -14,7 +14,11 @@ export function tile_index_to_finger_print(index) {
 
         const index_offset = split_by_2(mip_mask);
 
-        if (index > index_offset) {
+        const next_mip_mask = mip_mask << 1 | 0x1;
+
+        const index_offset_next = split_by_2(next_mip_mask);
+
+        if (index >= index_offset_next) {
             continue;
         }
 

package/src/view/CSS_ABSOLUTE_POSITIONING.js

@@ -0,0 +1,5 @@
+export const CSS_ABSOLUTE_POSITIONING = Object.freeze({
+    position: "absolute",
+    top: 0,
+    left: 0
+});

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

@@ -1,182 +0,0 @@
-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();
-    }
-}