@woosh/meep-engine 2.73.0 → 2.74.0

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

@@ -1,9 +1,27 @@
-import { compose_finger_print } from "./compose_finger_print.js";
-import { finger_print_to_tile_index } from "./finger_print_to_tile_index.js";
+import { arrayQuickSort } from "../../../../../core/collection/array/arrayQuickSort.js";
+import { compose_finger_print } from "./tile/compose_finger_print.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 {
 
     #counts_intrinsic = new Uint32Array(0);
+    /**
+     * Stores indices of tiles with usage > 0
+     * @type {Uint32Array}
+     */
+    #occupancy = new Uint32Array(0);
+    /**
+     * Points at the end of the occupancy list
+     * @type {number}
+     */
+    #occupancy_cursor = 0;
 
     get counts() {
         return this.#counts_intrinsic;
@@ -11,6 +29,7 @@ export class UsageMetadata {
 
     #max_mip_level = 0;
 
+
     set max_mip_level(v) {
         this.#max_mip_level = v;
 
@@ -21,14 +40,21 @@ export class UsageMetadata {
         return this.#max_mip_level;
     }
 
+
+    get occupancy() {
+        return this.#occupancy;
+    }
+
+    get occupancy_count() {
+        return this.#occupancy_cursor;
+    }
+
     /**
      *
      */
     #ensureCapacity() {
 
-        const finger_print = compose_finger_print(this.#max_mip_level + 1, 0, 0);
-
-        const size = finger_print_to_tile_index(finger_print);
+        const size = compose_tile_address(this.#max_mip_level + 1, 0, 0);
 
         if (this.#counts_intrinsic.length >= size) {
             // already large enough
@@ -36,12 +62,7 @@ export class UsageMetadata {
         }
 
         this.#counts_intrinsic = new Uint32Array(size);
-    }
-
-    #getIndexBy(mip, x, y) {
-        const finger_print = compose_finger_print(mip, x, y);
-
-        return finger_print_to_tile_index(finger_print);
+        this.#occupancy = new Uint32Array(size);
     }
 
     /**
@@ -50,8 +71,7 @@ export class UsageMetadata {
      * @returns {number}
      */
     getCountByFingerprint(fingerprint) {
-        const index = finger_print_to_tile_index(fingerprint);
-
+        const index = finger_print_to_tile_address(fingerprint);
 
         return this.#counts_intrinsic[index];
     }
@@ -64,13 +84,14 @@ export class UsageMetadata {
      * @returns {number}
      */
     getCountBy(mip, x, y) {
-        const finger_print = compose_finger_print(mip, x, y);
+        const address = compose_tile_address(mip, x, y);
 
-        return this.getCountByFingerprint(finger_print);
+        return this.#counts_intrinsic[address];
     }
 
     clear() {
         this.#counts_intrinsic.fill(0);
+        this.#occupancy_cursor = 0;
     }
 
     /**
@@ -81,7 +102,7 @@ export class UsageMetadata {
     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 - 1; mip > 0; mip--) {
+        for (let mip = this.#max_mip_level; mip > 0; mip--) {
 
             const mip_resolution = 1 << mip;
 
@@ -99,7 +120,7 @@ export class UsageMetadata {
                     const parent_x = x >>> 1;
                     const parent_y = y >>> 1;
 
-                    const parent_index = this.#getIndexBy(parent_level, parent_x, parent_y);
+                    const parent_index = compose_tile_address(parent_level, parent_x, parent_y);
 
                     const parent_count = this.#counts_intrinsic[parent_index];
 
@@ -107,6 +128,10 @@ export class UsageMetadata {
 
                     if (parent_count < expected_count) {
                         this.#counts_intrinsic[parent_index] = expected_count;
+
+                        if (parent_count === 0) {
+                            this.#append_to_occupancy(parent_index);
+                        }
                     }
 
                 }
@@ -115,6 +140,26 @@ export class UsageMetadata {
         }
     }
 
+    /**
+     *
+     * @param {number} address
+     */
+    #append_to_occupancy(address) {
+        this.#occupancy[this.#occupancy_cursor] = address;
+        this.#occupancy_cursor++;
+    }
+
+    /**
+     * Sort occupancy list in descending order
+     */
+    sortOccupancy() {
+        arrayQuickSort(
+            this.#occupancy,
+            (index) => -this.#counts_intrinsic[index], null,
+            0, this.#occupancy_cursor - 1
+        );
+    }
+
 
     /**
      *
@@ -125,7 +170,9 @@ export class UsageMetadata {
 
         const data_size = data.length;
 
-        this.#ensureCapacity(data_size >> 2);
+        this.#ensureCapacity();
+
+        const counts = this.#counts_intrinsic;
 
         for (let offset = 0; offset < data_size; offset += 4) {
 
@@ -142,11 +189,16 @@ export class UsageMetadata {
             const tile_x = data[offset + 1] & max_tile_value;
             const tile_y = data[offset + 2] & max_tile_value;
 
-            const finger_print = compose_finger_print(mip_level, tile_x, tile_y);
+            const tile_address = compose_tile_address(mip_level, tile_x, tile_y);
 
-            const index0 = finger_print_to_tile_index(finger_print);
+            const previous_count = counts[tile_address];
+
+            if (previous_count === 0) {
+                // first occurrence, mark occupancy
+                this.#append_to_occupancy(tile_address);
+            }
 
-            this.#counts_intrinsic[index0]++;
+            counts[tile_address] = previous_count + 1;
         }
 
     }

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

@@ -12,8 +12,10 @@ import {
     WebGLRenderTarget
 } from "three";
 import { assert } from "../../../../../core/assert.js";
+import { array_copy } from "../../../../../core/collection/array/array_copy.js";
 import { clamp } from "../../../../../core/math/clamp.js";
 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";
@@ -65,8 +67,25 @@ const clear_usage_material = new RawShaderMaterial({
     glslVersion: GLSL3
 });
 
+const scratch_matrix = new Float32Array(16);
+
 export class VirtualTextureManager {
 
+    #frame_index = 0;
+
+    /**
+     * In order to avoid aliasing due to the fact that we render at a lower resolution, we move the camera slightly each frame to sweep across texels in-between
+     * @type {Float32Array}
+     */
+    #frame_jitter_offsets = new Float32Array([0, 0]);
+    #frame_jitter_samples = 1;
+    #frame_jitter_enabled = true;
+
+    #initialize_frame_jitter() {
+        this.#frame_jitter_samples = this.#usage_resolution_scale;
+        this.#frame_jitter_offsets = generate_halton_jitter(this.#frame_jitter_samples);
+    }
+
     #usage_buffer = new WebGLRenderTarget(1, 1, {
         wrapT: ClampToEdgeWrapping,
         wrapS: ClampToEdgeWrapping,
@@ -115,6 +134,7 @@ export class VirtualTextureManager {
      */
     #usage_texture_bias = 0.1;
 
+
     /**
      *
      * @param {number} resolution
@@ -150,6 +170,7 @@ export class VirtualTextureManager {
 
     constructor() {
         this.#initialize_usage_uniforms();
+        this.#initialize_frame_jitter();
     }
 
     #initialize_usage_uniforms() {
@@ -208,6 +229,28 @@ export class VirtualTextureManager {
 
     }
 
+    #prepareUsageUniforms(camera) {
+
+        const uniforms = usage_material.uniforms;
+        const usage_buffer = this.#usage_buffer;
+        const camera_projection_matrix = camera.projectionMatrix.elements;
+
+        if (this.#frame_jitter_enabled) {
+            // apply jitter to projection matrix
+            const jitter_index = this.#frame_index % this.#frame_jitter_samples;
+
+            const jitter_offset_x = this.#frame_jitter_offsets[jitter_index * 2];
+            const jitter_offset_y = this.#frame_jitter_offsets[jitter_index * 2 + 1];
+
+            camera_projection_matrix[8] = jitter_offset_x / usage_buffer.width;
+            camera_projection_matrix[9] = jitter_offset_y / usage_buffer.height;
+        }
+
+
+        uniforms.modelViewMatrix.value.multiplyMatrices(camera.matrixWorldInverse, camera.matrixWorld);
+        uniforms.projectionMatrix.value.copy(camera.projectionMatrix);
+    }
+
     /**
      *
      * @param {WebGLRenderer} renderer
@@ -218,37 +261,49 @@ export class VirtualTextureManager {
 
         const usage_buffer = this.#usage_buffer;
 
-        const uniforms = usage_material.uniforms;
 
-        uniforms.modelViewMatrix.value.multiplyMatrices(camera.matrixWorldInverse, camera.matrixWorld);
-        uniforms.projectionMatrix.value.copy(camera.projectionMatrix);
+        const camera_projection_matrix = camera.projectionMatrix.elements;
 
         // remember existing state
         const _old_render_target = renderer.getRenderTarget();
         const _auto_clear = renderer.autoClear;
-
+        array_copy(camera_projection_matrix, 0, scratch_matrix, 0, 16);
         const _old_material = scene.overrideMaterial;
+        const _old_camera_matrix_update = camera.matrixAutoUpdate;
+
+        camera.matrixAutoUpdate = false;
 
         renderer.autoClear = false;
         renderer.setRenderTarget(usage_buffer);
-        scene.overrideMaterial = usage_material;
 
         // clear out usage texture
         renderScreenSpace(renderer, clear_usage_material);
 
         renderer.clearDepth();
 
+        scene.overrideMaterial = usage_material;
+
+        this.#prepareUsageUniforms(camera);
+
         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);
 
+        // restore state
         renderer.setRenderTarget(_old_render_target);
         renderer.autoClear = _auto_clear;
+        array_copy(scratch_matrix, 0, camera_projection_matrix, 0, 16);
 
+        camera.matrixAutoUpdate = _old_camera_matrix_update;
+
+        //
         this.#usage_metadata.fromTexture(this.#usage_pixel_data.data);
         this.#usage_metadata.promoteAncestors(1);
+        this.#usage_metadata.sortOccupancy();
+
+        this.#frame_index++;
     }
 
     dispose() {

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

@@ -0,0 +1,58 @@
+import { CSS_ABSOLUTE_POSITIONING } from "../../../../../../view/CSS_ABSOLUTE_POSITIONING.js";
+import { CanvasView } from "../../../../../../view/elements/CanvasView.js";
+import EmptyView from "../../../../../../view/elements/EmptyView.js";
+import { sampler2d_write_to_canvas_raw } from "../../../sampler/sampler2d_write_to_canvas_raw.js";
+
+export class ResidencyDebugView extends EmptyView {
+    /**
+     *
+     * @type {SparseTexture|null}
+     */
+    texture = null;
+
+    #canvas = new CanvasView();
+
+    constructor() {
+        super({
+            css: {
+                position: "absolute"
+            }
+        });
+
+        this.#canvas.css(CSS_ABSOLUTE_POSITIONING);
+
+        this.addChild(this.#canvas);
+    }
+
+    update() {
+
+        const t = this.texture;
+        if (t === null) {
+            return;
+        }
+
+        const canvas = this.#canvas;
+        canvas.size.readFromArray(t.page_texture_resolution);
+
+        this.size.copy(canvas.size);
+
+        const residentTiles = t.resident_tiles;
+
+        const temp = new CanvasView();
+        const tile_resolution = t.tile_resolution;
+        temp.size.setScalar(tile_resolution);
+
+        const tile_columns = t.page_texture_resolution[0] / tile_resolution;
+
+        for (let i = 0; i < residentTiles.length; i++) {
+            const tile = residentTiles[i];
+
+            sampler2d_write_to_canvas_raw(tile.data, temp.el);
+
+            const column = tile.page_slot % tile_columns;
+            const row = (tile.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);
+        }
+    }
+}

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

@@ -0,0 +1,63 @@
+import LabelView from "../../../../../../view/common/LabelView.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";
+
+export class UsageDebugView extends EmptyView {
+    #tileCount = new LabelView("")
+    #tiles = new EmptyView();
+    #mip_levels = 0;
+
+
+    constructor(opt) {
+        super(opt);
+
+        this.addChild(this.#tileCount);
+        this.addChild(this.#tiles);
+
+        this.css({
+            position: "absolute",
+            left: "0",
+            top: "0",
+            background: "rgba(255,255,255,0.5)",
+            fontFamily: "monospace",
+            fontSize: "10px"
+        });
+    }
+
+    set mip_levels(v) {
+        this.#mip_levels = v;
+    }
+
+    /**
+     *
+     * @param {UsageMetadata} usage
+     */
+    set usage(usage) {
+
+
+        this.#tiles.removeAllChildren();
+
+        const occupancy = usage.occupancy;
+        const occupancyCount = usage.occupancy_count;
+
+        for (let i = 0; i < occupancyCount; i++) {
+            const occupancy_index = occupancy[i];
+            const fingerPrint = tile_address_to_finger_print(occupancy_index);
+
+            const count = usage.getCountByFingerprint(fingerPrint);
+
+            if (count <= 0) {
+                continue;
+            }
+
+            const { mip, x, y } = decompose_finger_print(fingerPrint);
+
+            this.#tiles.addChild(new LabelView(`ID: ${0} Level: ${mip} X: ${x} Y: ${y} USAGE: ${count}`));
+        }
+
+        this.#tileCount.updateText(`Tile Count: ${occupancyCount}`);
+    }
+
+
+}

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"
@@ -200,10 +198,7 @@ export class UsagePyramidDebugView extends EmptyView {
         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

@@ -18,8 +18,10 @@ 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 { ResidencyDebugView } from "./debug/ResidencyDebugView.js";
+import { UsageDebugView } from "./debug/UsageDebugView.js";
+import { UsagePyramidDebugView } from "./debug/UsagePyramidDebugView.js";
 import { SparseTexture } from "./SparseTexture.js";
-import { UsageDebugView } from "./UsageDebugView.js";
 import { VirtualTextureManager } from "./VirtualTextureManager.js";
 
 let camera,
@@ -41,36 +43,45 @@ am.startup();
 
 const virtualTextureManager = new VirtualTextureManager();
 virtualTextureManager.setTextureParameters(
-    // 2048,
-    16384,
-    128,
+    4096,
+    // 16384,
+    32,
     3
 );
 
 const sparseTexture = new SparseTexture();
-sparseTexture.page_texture_size = [1024, 1024];
+sparseTexture.path = "data/textures/utility/vt/TexelDensity1";
+sparseTexture.page_texture_size = [512, 512];
 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";
+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 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);
+// container_view.addChild(usageDebugView);
 
 
-// const usagePyramidDebugView = new UsagePyramidDebugView();
-// usagePyramidDebugView.setImageURL(TEXTURE_URL);
-//
-// container_view.addChild(usagePyramidDebugView);
+const usagePyramidDebugView = new UsagePyramidDebugView();
+usagePyramidDebugView.setImageURL(TEXTURE_URL);
+container_view.addChild(usagePyramidDebugView);
+
+const residencyDebugView = new ResidencyDebugView();
+residencyDebugView.texture = sparseTexture;
+residencyDebugView.css({
+    bottom: 0,
+    right: 0
+});
+container_view.addChild(residencyDebugView);
 
 const options = {
     spin: true
@@ -82,11 +93,27 @@ animate();
 
 function makeTorus() {
     const size = 0.65;
+
+    const map = new TextureLoader().load(TEXTURE_URL);
+    map.flipY = false;
+
     mesh = new Mesh(new TorusGeometry(size, 0.3, 30, 30), new MeshStandardMaterial({
         roughness: 0.4,
-        map: new TextureLoader().load(TEXTURE_URL)
+        map
     }));
     mesh.rotation.x = 0.3;
+
+    scene.add(mesh);
+}
+
+function makeGLTF(path) {
+
+    new GLTFLoader().load(path, (gltf) => {
+
+        mesh = gltf.scene;
+        scene.add(mesh);
+
+    });
 }
 
 function init() {
@@ -105,13 +132,9 @@ function init() {
 
     clock = new Clock();
 
+    makeTorus();
 
-    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));
@@ -187,6 +210,8 @@ function render() {
 
     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;
+
+    residencyDebugView.update();
 }