@woosh/meep-engine 2.72.0 → 2.73.0

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

@@ -1,182 +1,121 @@
-import { array_get_index_in_range } from "../../../../../core/collection/array/array_get_index_in_range.js";
-import { array_swap } from "../../../../../core/collection/array/array_swap.js";
-import { arrayQuickSort } from "../../../../../core/collection/array/arrayQuickSort.js";
-import { passThrough } from "../../../../../core/function/Functions.js";
-import { split_by_2 } from "../../../../../core/geom/3d/morton/split_by_2.js";
-
-const DEFAULT_CAPACITY = 64;
-
-/**
- *
- * @param {number} finger_print
- * @returns {number}
- */
-function finger_print_to_tile_index(finger_print) {
-    // decode fingerprint
-    const mip = (finger_print >> 24) & 0xFF;
-    const x = (finger_print >> 16) & 0xFF;
-    const y = (finger_print >> 8) & 0xFF;
-
-    // figure out resolution of this mip level
-    const mip_resolution = 1 << mip;
-
-    // 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;
-}
+import { compose_finger_print } from "./compose_finger_print.js";
+import { finger_print_to_tile_index } from "./finger_print_to_tile_index.js";
 
 export class UsageMetadata {
 
-    #cursor = 0;
+    #counts_intrinsic = new Uint32Array(0);
+
+    get counts() {
+        return this.#counts_intrinsic;
+    }
 
-    #lookup = new Uint32Array(0);
-    #counts = new Uint32Array(0);
+    #max_mip_level = 0;
 
-    #counts_intrinsic = new Uint32Array(0);
+    set max_mip_level(v) {
+        this.#max_mip_level = v;
 
-    #capacity = 0;
+        this.#ensureCapacity();
+    }
 
-    constructor() {
-        this.#ensureCapacity(DEFAULT_CAPACITY);
+    get max_mip_level() {
+        return this.#max_mip_level;
     }
 
     /**
      *
-     * @param {number} min_size
      */
-    #ensureCapacity(min_size) {
-        if (this.#capacity >= min_size) {
+    #ensureCapacity() {
+
+        const finger_print = compose_finger_print(this.#max_mip_level + 1, 0, 0);
+
+        const size = finger_print_to_tile_index(finger_print);
+
+        if (this.#counts_intrinsic.length >= size) {
+            // already large enough
             return;
         }
 
-        const buffer = new ArrayBuffer(min_size * 2 * 4);
+        this.#counts_intrinsic = new Uint32Array(size);
+    }
 
-        this.#lookup = new Uint32Array(buffer, 0, min_size);
-        this.#counts = new Uint32Array(buffer, min_size * 4, min_size);
+    #getIndexBy(mip, x, y) {
+        const finger_print = compose_finger_print(mip, x, y);
 
-        this.#capacity = min_size;
+        return finger_print_to_tile_index(finger_print);
     }
 
-    get tile_count() {
-        return this.#cursor;
-    }
+    /**
+     *
+     * @param {number} fingerprint
+     * @returns {number}
+     */
+    getCountByFingerprint(fingerprint) {
+        const index = finger_print_to_tile_index(fingerprint);
 
-    getTile(index) {
-        return this.#lookup[index];
-    }
 
-    getCount(index) {
-        return this.#counts[index];
+        return this.#counts_intrinsic[index];
     }
 
-    clear() {
-        this.#cursor = 0;
-        this.#counts.fill(0);
-    }
+    /**
+     *
+     * @param {number} mip
+     * @param {number} x
+     * @param {number} y
+     * @returns {number}
+     */
+    getCountBy(mip, x, y) {
+        const finger_print = compose_finger_print(mip, x, y);
 
-    swap(a, b) {
-        array_swap(
-            this.#lookup,
-            a,
-            this.#lookup,
-            b,
-            1
-        );
-        array_swap(
-            this.#counts,
-            a,
-            this.#counts,
-            b,
-            1
-        );
+        return this.getCountByFingerprint(finger_print);
     }
 
-    sortByCount() {
-        arrayQuickSort(this.#counts, passThrough, undefined, 0, this.#cursor - 1, (counts, i, j) => {
-            this.swap(i, j);
-        });
+    clear() {
+        this.#counts_intrinsic.fill(0);
     }
 
     /**
      * Given existing usage, award same usage to all tiles up the chain all the way to the root
      * This helps avoid popping and ensures that when there's not enough space - at least the higher level LOD tiles are available
      * @param {number} bias added to the ancestor tiles to make them more likely to be loaded
-     * @returns {number} number of tiles added
      */
-    promoteAncestors(bias = 0) {
-        const start_cursor = this.#cursor;
-
-        for (let tile_index = 0; tile_index < this.#cursor; tile_index++) {
-            let finger_print = this.#lookup[tile_index];
+    promoteAncestors(bias = 1) {
 
-            let level = (finger_print >> 24) & 0xFF;
+        // traverse mip pyramid in reverse, so we can push counts to parents one level at a time
+        for (let mip = this.#max_mip_level - 1; mip > 0; mip--) {
 
-            let index = tile_index;
+            const mip_resolution = 1 << mip;
 
-            while (level > 0) {
+            for (let y = 0; y < mip_resolution; y++) {
+                for (let x = 0; x < mip_resolution; x++) {
 
-                const x = (finger_print >> 16) & 0xFF;
-                const y = (finger_print >> 8) & 0xFF;
-                const texture_id = (finger_print) & 0xFF;
+                    const count = this.getCountBy(mip, x, y);
 
-                // get higher-level lod
-                const parent_level = level - 1;
-                const parent_x = x >>> 1;
-                const parent_y = y >>> 1;
+                    if (count <= 0) {
+                        continue;
+                    }
 
-                const parent_finger_print =
-                    (parent_level << 24)
-                    | (parent_x << 16)
-                    | (parent_y << 8)
-                    | (texture_id << 0);
+                    // get higher-level lod
+                    const parent_level = mip - 1;
+                    const parent_x = x >>> 1;
+                    const parent_y = y >>> 1;
 
-                const parent_index = this.bindTileIndex(parent_finger_print);
+                    const parent_index = this.#getIndexBy(parent_level, parent_x, parent_y);
 
-                const push_value = this.#counts[tile_index] + bias;
-                const parent_count = this.#counts[parent_index];
-
-                if (parent_count >= push_value) {
-                    // already high, no need to do anything
-                    break;
-                }
+                    const parent_count = this.#counts_intrinsic[parent_index];
 
-                this.#counts[parent_index] = push_value;
+                    const expected_count = count + bias;
 
+                    if (parent_count < expected_count) {
+                        this.#counts_intrinsic[parent_index] = expected_count;
+                    }
 
-                //
-                finger_print = parent_finger_print;
-                level = parent_level;
-
-                index = parent_index;
+                }
             }
-        }
-
-        return this.#cursor - start_cursor;
-    }
-
-    /**
-     *
-     * @param {number} finger_print
-     * @returns {number}
-     */
-    bindTileIndex(finger_print) {
-
-        const lookup = this.#lookup;
 
-        let index = array_get_index_in_range(lookup, finger_print, 0, this.#cursor - 1);
-
-        if (index === -1) {
-            index = this.#cursor++;
-            lookup[index] = finger_print;
         }
-
-        return index;
     }
 
+
     /**
      *
      * @param {Uint8Array} data usage texture data
@@ -188,10 +127,13 @@ export class UsageMetadata {
 
         this.#ensureCapacity(data_size >> 2);
 
-        const counts = this.#counts;
-
         for (let offset = 0; offset < data_size; offset += 4) {
 
+            if (data[offset + 3] === 0) {
+                // no data
+                continue;
+            }
+
             const mip_level = data[offset];
 
             // we create a mask to make sure we don't end up with invalid tile position values
@@ -200,21 +142,11 @@ export class UsageMetadata {
             const tile_x = data[offset + 1] & max_tile_value;
             const tile_y = data[offset + 2] & max_tile_value;
 
-            const texture_id = data[offset + 3];
-
-            const finger_print =
-                (mip_level << 24)
-                | (tile_x << 16)
-                | (tile_y << 8)
-                | (texture_id << 0);
-
-            if (finger_print === 0) {
-                continue;
-            }
+            const finger_print = compose_finger_print(mip_level, tile_x, tile_y);
 
-            const index = this.bindTileIndex(finger_print);
+            const index0 = finger_print_to_tile_index(finger_print);
 
-            counts[index]++;
+            this.#counts_intrinsic[index0]++;
         }
 
     }

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

@@ -213,27 +213,40 @@ export class UsagePyramidDebugView extends EmptyView {
         }
         this.#used_set_size = 0;
 
-        const tile_count = usage.tile_count;
 
-        for (let i = 0; i < tile_count; i++) {
-            const finger_print = usage.getTile(i);
+        const mip_count = this.#levels.length;
 
-            const mip = (finger_print >> 24) & 0xFF;
-            const x = (finger_print >> 16) & 0xFF;
-            const y = (finger_print >> 8) & 0xFF;
+        for (let mip = 0; mip < mip_count; mip++) {
+            const size = 1 << mip;
 
-            const mipView = this.#levels[mip];
+            for (let y = 0; y < size; y++) {
+                for (let x = 0; x < size; x++) {
+                    const count = usage.getCountBy(mip,x,y);
 
-            const tile = mipView.getTile(x, y);
+                    if(count === 0){
+                        continue;
+                    }
 
-            tile.css({
-                background: "rgba(255,0,0,0.8)"
-            });
+                    const mipView = this.#levels[mip];
 
-            tile.visible = true;
+                    const tile = mipView.getTile(x, y);
 
-            this.#used_set[this.#used_set_size] = finger_print;
-            this.#used_set_size++;
+                    tile.css({
+                        background: "rgba(255,0,0,0.8)"
+                    });
+
+                    tile.visible = true;
+
+                    const finger_print = (mip << 24)
+                        | (x << 16)
+                        | (y << 8)
+                    ;
+
+                    this.#used_set[this.#used_set_size] = finger_print;
+                    this.#used_set_size++;
+                }
+            }
         }
+
     }
 }

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

@@ -95,6 +95,7 @@ export class VirtualTextureManager {
     #texture_id = 3;
     #texture_resolution = 65536;
     #tile_resolution = 256;
+    #max_mip_level = 0;
 
     get texture_resolution() {
         return this.#texture_resolution;
@@ -104,6 +105,10 @@ export class VirtualTextureManager {
         return this.#tile_resolution;
     }
 
+    get max_mip_level() {
+        return this.#max_mip_level;
+    }
+
     /**
      * Used to fetch higher resolution tiles
      * @type {number}
@@ -124,8 +129,15 @@ export class VirtualTextureManager {
         this.#texture_id = texture_id;
         this.#texture_resolution = resolution;
         this.#tile_resolution = tile_size;
+        this.#max_mip_level = Math.log2(this.#texture_resolution / this.#tile_resolution);
+
+        if (!Number.isInteger(this.#max_mip_level)) {
+            throw new Error(`texture resolution must be a power-of-two multiple of tile resolution`);
+        }
 
         this.#initialize_usage_uniforms();
+
+        this.#usage_metadata.max_mip_level = this.#max_mip_level;
     }
 
     get usage_metadata() {
@@ -144,11 +156,8 @@ export class VirtualTextureManager {
 
         const uniforms = usage_material.uniforms;
 
-        const max_mip_level = Math.log2(this.#texture_resolution / this.#tile_resolution);
+        const max_mip_level = this.#max_mip_level;
 
-        if (!Number.isInteger(max_mip_level)) {
-            throw new Error(`texture resolution must be a power-of-two multiple of tile resolution`);
-        }
 
         uniforms.u_mt_params.value.set(
             this.#usage_texture_bias,

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

@@ -0,0 +1,13 @@
+/**
+ *
+ * @param {number} mip
+ * @param {number} x
+ * @param {number} y
+ * @returns {number}
+ */
+export function compose_finger_print(mip, x, y) {
+    return (mip << 24)
+        | (x << 16)
+        | (y << 8)
+        ;
+}

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

@@ -0,0 +1,37 @@
+import { split_by_2 } from "../../../../../core/geom/3d/morton/split_by_2.js";
+
+/**
+ *
+ * @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 };
+}
+
+/**
+ *
+ * @param {number} finger_print
+ * @returns {number}
+ */
+export function finger_print_to_tile_index(finger_print) {
+    // decode fingerprint
+    const mip = (finger_print >> 24) & 0xFF;
+    const x = (finger_print >> 16) & 0xFF;
+    const y = (finger_print >> 8) & 0xFF;
+
+    // figure out resolution of this mip level
+    const mip_resolution = 1 << mip;
+
+    // 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/prototype.js

@@ -15,7 +15,11 @@ import {
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import EmptyView from "../../../../../view/elements/EmptyView.js";
-import { UsagePyramidDebugView } from "./UsagePyramidDebugView.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";
 
 let camera,
@@ -31,6 +35,10 @@ let camera,
 
 let mesh;
 
+const am = new AssetManager();
+am.registerLoader(GameAssetType.Image, new ImageRGBADataLoader());
+am.startup();
+
 const virtualTextureManager = new VirtualTextureManager();
 virtualTextureManager.setTextureParameters(
     // 2048,
@@ -39,10 +47,12 @@ virtualTextureManager.setTextureParameters(
     3
 );
 
-const container_view = new EmptyView();
-//
-// const usageDebugView = new UsageDebugView();
-// container_view.addChild(usageDebugView);
+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/4096x4096TexelDensityTexture1.png";
@@ -50,10 +60,17 @@ const container_view = new EmptyView();
 // 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 usagePyramidDebugView = new UsagePyramidDebugView();
-usagePyramidDebugView.setImageURL(TEXTURE_URL);
+const container_view = new EmptyView();
+//
+const usageDebugView = new UsageDebugView();
+usageDebugView.mip_levels = virtualTextureManager.max_mip_level;
+container_view.addChild(usageDebugView);
 
-container_view.addChild(usagePyramidDebugView);
+
+// const usagePyramidDebugView = new UsagePyramidDebugView();
+// usagePyramidDebugView.setImageURL(TEXTURE_URL);
+//
+// container_view.addChild(usagePyramidDebugView);
 
 const options = {
     spin: true
@@ -163,12 +180,13 @@ function render() {
 
     virtualTextureManager.setViewportResolution(view_port_size.x, view_port_size.y);
     virtualTextureManager.updateUsage(renderer, scene, camera);
+    sparseTexture.update_usage(virtualTextureManager.usage_metadata);
 
     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;
+    // usagePyramidDebugView.setTextureParameters(virtualTextureManager.texture_resolution, virtualTextureManager.tile_resolution);
+    // usagePyramidDebugView.usage = virtualTextureManager.usage_metadata;
 }

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

@@ -0,0 +1,31 @@
+import { split_by_2 } from "../../../../../core/geom/3d/morton/split_by_2.js";
+import { compose_finger_print } from "./compose_finger_print.js";
+
+/**
+ *
+ * @param {number} index
+ * @returns {number}
+ */
+export function tile_index_to_finger_print(index) {
+    for (let mip = 0; mip < 99; mip++) {
+        const resolution = 1 << mip;
+
+        const mip_mask = resolution - 1;
+
+        const index_offset = split_by_2(mip_mask);
+
+        if (index > index_offset) {
+            continue;
+        }
+
+        const local_index = index - index_offset;
+
+        const y = (local_index / resolution) | 0;
+        const x = local_index % resolution;
+
+        return compose_finger_print(mip, x, y,);
+    }
+
+    // not found
+    return -1;
+}

package/src/engine/graphics/ecs/camera/TiltCameraController.js

@@ -1,69 +0,0 @@
-/**
- * Created by Alex on 30/06/2015.
- */
-import { Object3D, Vector3 as ThreeVector3 } from 'three';
-
-import Vector3 from "../../../../core/geom/Vector3.js";
-import Vector2 from '../../../../core/geom/Vector2.js';
-import { DEG_TO_RAD } from "../../../../core/math/DEG_TO_RAD.js";
-
-const CC = function () {
-    this.target = new Vector3();
-    this.rotationAxis = new Vector3(0, 1, 0);
-    this.rotationAngle = DEG_TO_RAD * 0;
-    //angle between rotation axis and vector from target to position
-    this.tiltAngle = DEG_TO_RAD * 10;
-
-    this.distance = 100;
-    this.position = new Vector3();
-    this.rotation = new Vector3();
-};
-
-CC.prototype.rotate = function (deltaAngle) {
-    this.tiltAngle += deltaAngle;
-};
-
-CC.prototype.pan = function (deltaX, deltaY, cameraRotation) {
-    //vector pointing in the direction of travel
-    const vector = new ThreeVector3(deltaX, 0, deltaY);
-    //var rotationMatrix = new THREE.Matrix4().makeRotationFromQuaternion(cameraRotation);
-    //vector.applyMatrix4(rotationMatrix);
-    ////add to delta vector
-    //vector.y = 0;
-    this.target.add(vector);
-};
-
-const object = new Object3D();
-
-function eulerJSON(o) {
-    return { x: o.x, y: o.y, z: o.z };
-}
-
-CC.prototype.updatePositionAndRotation = function (transform) {
-    const distance = this.distance;
-    const target = this.target;
-    const rotationAngle = this.rotationAngle;
-    let rotationAxis = this.rotationAxis;
-    const tiltAngle = this.tiltAngle;
-
-    //position
-    const dTilt = new Vector2();
-    dTilt.x = Math.sin(tiltAngle) * distance;
-    dTilt.y = Math.cos(tiltAngle) * distance;
-
-    const position = new Vector3();
-    position.x = Math.sin(rotationAngle) * dTilt.x;
-    position.z = Math.cos(rotationAngle) * dTilt.x;
-    position.y = dTilt.y;
-
-    position.add(target);
-    //finally look at the target
-    object.position.copy(position);
-    object.lookAt(target);
-    //console.log(position.toJSON(), target.toJSON());
-
-    //
-    //transform.position.copy(position);
-    //transform.rotation.setFromEuler(object.rotation);
-};
-export default CC;

package/src/engine/graphics/ecs/camera/is_valid_distance_value.js

@@ -1,11 +0,0 @@
-/**
- *
- * @param {number} value
- * @returns {boolean}
- */
-export function is_valid_distance_value(value) {
-    return value !== Number.NEGATIVE_INFINITY
-        && value !== Number.POSITIVE_INFINITY
-        && !Number.isNaN(value)
-        ;
-}