@woosh/meep-engine 2.72.0 → 2.74.0

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,
@@ -95,6 +114,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,12 +124,17 @@ export class VirtualTextureManager {
         return this.#tile_resolution;
     }
 
+    get max_mip_level() {
+        return this.#max_mip_level;
+    }
+
     /**
      * Used to fetch higher resolution tiles
      * @type {number}
      */
     #usage_texture_bias = 0.1;
 
+
     /**
      *
      * @param {number} resolution
@@ -124,8 +149,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() {
@@ -138,17 +170,15 @@ export class VirtualTextureManager {
 
     constructor() {
         this.#initialize_usage_uniforms();
+        this.#initialize_frame_jitter();
     }
 
     #initialize_usage_uniforms() {
 
         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,
@@ -199,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
@@ -209,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];
 
@@ -213,14 +208,22 @@ 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 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);
 
-            const mip = (finger_print >> 24) & 0xFF;
-            const x = (finger_print >> 16) & 0xFF;
-            const y = (finger_print >> 8) & 0xFF;
 
             const mipView = this.#levels[mip];
 
@@ -232,8 +235,9 @@ export class UsagePyramidDebugView extends EmptyView {
 
             tile.visible = true;
 
-            this.#used_set[this.#used_set_size] = finger_print;
+            this.#used_set[this.#used_set_size] = fingerPrint;
             this.#used_set_size++;
         }
+
     }
 }

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

@@ -15,7 +15,13 @@ 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 { ResidencyDebugView } from "./debug/ResidencyDebugView.js";
+import { UsageDebugView } from "./debug/UsageDebugView.js";
+import { UsagePyramidDebugView } from "./debug/UsagePyramidDebugView.js";
+import { SparseTexture } from "./SparseTexture.js";
 import { VirtualTextureManager } from "./VirtualTextureManager.js";
 
 let camera,
@@ -31,30 +37,52 @@ 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,
+    4096,
+    // 16384,
+    32,
     3
 );
 
-const container_view = new EmptyView();
-//
-// const usageDebugView = new UsageDebugView();
-// container_view.addChild(usageDebugView);
+const sparseTexture = new SparseTexture();
+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);
+
 
 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
 };
@@ -65,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() {
@@ -88,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));
@@ -163,12 +203,15 @@ 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;
+
+    residencyDebugView.update();
 }

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

@@ -0,0 +1,31 @@
+export class TextureTile {
+
+    finder_print = 0;
+
+    last_used_time = 0;
+
+    /**
+     * Currently occupied page slot, only valid when page is resident
+     * @type {number}
+     */
+    page_slot = -1;
+
+    /**
+     *
+     * @type {Sampler2D|null}
+     */
+    data = null;
+
+    /**
+     *
+     * @param {TextureTile} other
+     * @returns {boolean}
+     */
+    equals(other) {
+        return false;
+    }
+
+    hash() {
+        return 0;
+    }
+}

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,22 @@
+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;
+
+    // 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/tile_address_to_finger_print.js

@@ -0,0 +1,35 @@
+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_address_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);
+
+        const next_mip_mask = mip_mask << 1 | 0x1;
+
+        const index_offset_next = split_by_2(next_mip_mask);
+
+        if (index >= index_offset_next) {
+            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;
+}