@woosh/meep-engine 2.71.0 → 2.72.0

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

@@ -0,0 +1,221 @@
+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;
+}
+
+export class UsageMetadata {
+
+    #cursor = 0;
+
+    #lookup = new Uint32Array(0);
+    #counts = new Uint32Array(0);
+
+    #counts_intrinsic = new Uint32Array(0);
+
+    #capacity = 0;
+
+    constructor() {
+        this.#ensureCapacity(DEFAULT_CAPACITY);
+    }
+
+    /**
+     *
+     * @param {number} min_size
+     */
+    #ensureCapacity(min_size) {
+        if (this.#capacity >= min_size) {
+            return;
+        }
+
+        const buffer = new ArrayBuffer(min_size * 2 * 4);
+
+        this.#lookup = new Uint32Array(buffer, 0, min_size);
+        this.#counts = new Uint32Array(buffer, min_size * 4, min_size);
+
+        this.#capacity = min_size;
+    }
+
+    get tile_count() {
+        return this.#cursor;
+    }
+
+    getTile(index) {
+        return this.#lookup[index];
+    }
+
+    getCount(index) {
+        return this.#counts[index];
+    }
+
+    clear() {
+        this.#cursor = 0;
+        this.#counts.fill(0);
+    }
+
+    swap(a, b) {
+        array_swap(
+            this.#lookup,
+            a,
+            this.#lookup,
+            b,
+            1
+        );
+        array_swap(
+            this.#counts,
+            a,
+            this.#counts,
+            b,
+            1
+        );
+    }
+
+    sortByCount() {
+        arrayQuickSort(this.#counts, passThrough, undefined, 0, this.#cursor - 1, (counts, i, j) => {
+            this.swap(i, j);
+        });
+    }
+
+    /**
+     * 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];
+
+            let level = (finger_print >> 24) & 0xFF;
+
+            let index = tile_index;
+
+            while (level > 0) {
+
+                const x = (finger_print >> 16) & 0xFF;
+                const y = (finger_print >> 8) & 0xFF;
+                const texture_id = (finger_print) & 0xFF;
+
+                // get higher-level lod
+                const parent_level = level - 1;
+                const parent_x = x >>> 1;
+                const parent_y = y >>> 1;
+
+                const parent_finger_print =
+                    (parent_level << 24)
+                    | (parent_x << 16)
+                    | (parent_y << 8)
+                    | (texture_id << 0);
+
+                const parent_index = this.bindTileIndex(parent_finger_print);
+
+                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;
+                }
+
+                this.#counts[parent_index] = push_value;
+
+
+                //
+                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
+     */
+    fromTexture(data) {
+        this.clear();
+
+        const data_size = data.length;
+
+        this.#ensureCapacity(data_size >> 2);
+
+        const counts = this.#counts;
+
+        for (let offset = 0; offset < data_size; offset += 4) {
+
+            const mip_level = data[offset];
+
+            // we create a mask to make sure we don't end up with invalid tile position values
+            const max_tile_value = (1 << mip_level) - 1;
+
+            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 index = this.bindTileIndex(finger_print);
+
+            counts[index]++;
+        }
+
+    }
+}

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

@@ -0,0 +1,239 @@
+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
+};
+
+class TextureLODView extends EmptyView {
+
+    /**
+     *
+     * @type {View[]}
+     */
+    #tiles = [];
+
+    #resolution = [1, 1];
+
+    constructor({
+                    resolution = [1, 1],
+                    tile_size = 8
+                }) {
+        super({ css: ABSOLUTE_CSS });
+
+        this.css({
+            background: "rgba(255,255,255,0.05)"
+        });
+
+        this.#resolution = resolution;
+
+        const width = resolution[0];
+        const height = resolution[1];
+
+        assert.isNonNegativeInteger(width, 'width');
+        assert.isNonNegativeInteger(height, 'height');
+
+        for (let j = 0; j < height; j++) {
+            for (let i = 0; i < width; i++) {
+                const tileView = new EmptyView({ css: ABSOLUTE_CSS });
+
+                // const flipped_y = height - j - 1;
+                tileView.position.set(i * tile_size, j * tile_size);
+                tileView.size.set(tile_size, tile_size);
+
+                this.clearTile(tileView);
+
+                this.#tiles.push(tileView)
+
+                this.addChild(tileView);
+            }
+        }
+
+        this.size.set(width * tile_size, height * tile_size);
+
+
+        const label = new LabelView(`${width} x ${height}`, {
+            css: {
+                ...ABSOLUTE_CSS,
+                color: '#FFFFFF',
+                textShadow: '0 0 2px black',
+                whiteSpace: "pre"
+            }
+        });
+
+        label.position.set(this.size.x + 4, (this.size.y - 20) * 0.5);
+
+        this.addChild(label);
+    }
+
+    clear() {
+        const resolution = this.#resolution;
+        const count = resolution[0] * resolution[1];
+        for (let i = 0; i < count; i++) {
+
+            const view = this.#tiles[i];
+
+            this.clearTile(view);
+        }
+    }
+
+    /**
+     *
+     * @param {View} view
+     */
+    clearTile(view) {
+
+        view.css({
+            background: "none"
+        });
+
+        view.visible = false;
+    }
+
+    getTile(x, y) {
+        assert.isNonNegativeInteger(x, 'x');
+        assert.isNonNegativeInteger(y, 'y');
+
+        const resolution = this.#resolution;
+
+        // assert.lessThan(x, resolution[0]);
+        // assert.lessThan(y, resolution[1]);
+
+        const width = resolution[0];
+
+        const view = this.#tiles[x + width * y];
+
+        if (view === undefined) {
+            debugger
+        }
+
+        return view;
+
+    }
+
+}
+
+export class UsagePyramidDebugView extends EmptyView {
+    #levels = [];
+    #resolution = [1, 1];
+    #tile_size = 0;
+
+    #used_set = [];
+    #used_set_size = 0;
+
+    #image_url = null
+
+    setImageURL(url) {
+        this.#image_url = url;
+
+        this.#applyImageURL();
+    }
+
+    #applyImageURL() {
+
+        const background = {
+            backgroundImage: this.#image_url === null ? "none" : `url(${this.#image_url})`,
+            backgroundSize: "contain"
+        };
+
+        this.#levels.forEach(l => {
+
+            l.css(background);
+
+        });
+    }
+
+    setTextureParameters(resolution, tile_size) {
+        if (this.#resolution[0] === resolution && this.#resolution[1] === resolution && this.#tile_size === tile_size) {
+            return;
+        }
+
+        this.#tile_size = tile_size;
+        this.#resolution = [resolution, resolution];
+
+        this.#levels.splice(0, this.#levels.length);
+        this.removeAllChildren();
+
+        let size = resolution / tile_size;
+
+        assert.isNonNegativeInteger(size, 'size');
+
+        while (size > 0) {
+            const lod = new TextureLODView({
+                resolution: [size, size],
+            });
+
+            lod.css({
+                border: "1px solid rgba(0,0,0,0.7)"
+            });
+
+            this.#levels.push(lod);
+
+            this.addChild(lod);
+
+            size >>>= 1;
+        }
+
+        this.#levels.reverse();
+
+        let y = 0;
+        for (let i = 0; i < this.#levels.length; i++) {
+            const level = this.#levels[i];
+
+            level.position.set(2, y);
+
+            y += level.size.y + 4;
+        }
+
+        this.#applyImageURL();
+    }
+
+    /**
+     *
+     * @param {UsageMetadata} 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 mipView = this.#levels[mip];
+
+            const tile = mipView.getTile(x, y);
+
+            mipView.clearTile(tile);
+        }
+        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 = (finger_print >> 24) & 0xFF;
+            const x = (finger_print >> 16) & 0xFF;
+            const y = (finger_print >> 8) & 0xFF;
+
+            const mipView = this.#levels[mip];
+
+            const tile = mipView.getTile(x, y);
+
+            tile.css({
+                background: "rgba(255,0,0,0.8)"
+            });
+
+            tile.visible = true;
+
+            this.#used_set[this.#used_set_size] = finger_print;
+            this.#used_set_size++;
+        }
+    }
+}

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

@@ -0,0 +1,248 @@
+import {
+    ClampToEdgeWrapping,
+    GLSL3,
+    Matrix4,
+    NearestFilter,
+    NoBlending,
+    RawShaderMaterial,
+    RGBAIntegerFormat,
+    UnsignedByteType,
+    Vector2,
+    Vector4,
+    WebGLRenderTarget
+} from "three";
+import { assert } from "../../../../../core/assert.js";
+import { clamp } from "../../../../../core/math/clamp.js";
+import { max2 } from "../../../../../core/math/max2.js";
+import { renderScreenSpace } from "../../../render/utils/renderScreenSpace.js";
+import { Sampler2D } from "../../sampler/Sampler2D.js";
+import { fragment, vertex } from "./ShaderUsage.js";
+import { UsageMetadata } from "./UsageMetadata.js";
+
+const usage_material_uniforms = {
+    "u_mt_params": { value: new Vector2(0.1, 1) },
+    /**
+     * Format: VT_WIDTH, VT_HEIGHT, VT_TILE_SIZE, VT_ID
+     *   - VT_WIDTH :       width of the virtual texture
+     *   - VT_HEIGHT :      height of the virtual texture
+     *   - VT_TILE_SIZE :   resolution of a single tile
+     *   - 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) },
+    "modelViewMatrix": { value: new Matrix4() },
+    "projectionMatrix": { value: new Matrix4() }
+};
+const usage_material = new RawShaderMaterial({
+
+    uniforms: usage_material_uniforms,
+    vertexShader: vertex(),
+    fragmentShader: fragment(),
+    glslVersion: GLSL3
+
+});
+usage_material.blending = NoBlending;
+
+
+const clear_usage_material = new RawShaderMaterial({
+    vertexShader: `    
+        precision mediump float;    
+        in vec2 uv;
+        void main() {
+               
+            gl_Position = vec4( (uv - 0.5)*2.0, 0.0, 1.0 );
+            
+        }`,
+    fragmentShader: `
+    
+    precision mediump int;
+    out uvec4 out_decoded;
+        
+    void main(){
+        out_decoded =  uvec4(0u);
+    }
+    `,
+    glslVersion: GLSL3
+});
+
+export class VirtualTextureManager {
+
+    #usage_buffer = new WebGLRenderTarget(1, 1, {
+        wrapT: ClampToEdgeWrapping,
+        wrapS: ClampToEdgeWrapping,
+        generateMipmaps: false,
+        minFilter: NearestFilter,
+        magFilter: NearestFilter,
+        format: RGBAIntegerFormat,
+        depthBuffer: true,
+        stencilBuffer: false,
+        type: UnsignedByteType,
+        internalFormat: "RGBA8UI"
+    });
+
+    #usage_pixel_data = Sampler2D.uint8(4, 1, 1);
+
+    #viewport_resolution = [1, 1];
+
+    /**
+     *
+     * @type {number}
+     */
+    #usage_resolution_scale = 32;
+
+    #usage_metadata = new UsageMetadata();
+
+    #texture_id = 3;
+    #texture_resolution = 65536;
+    #tile_resolution = 256;
+
+    get texture_resolution() {
+        return this.#texture_resolution;
+    }
+
+    get tile_resolution() {
+        return this.#tile_resolution;
+    }
+
+    /**
+     * Used to fetch higher resolution tiles
+     * @type {number}
+     */
+    #usage_texture_bias = 0.1;
+
+    /**
+     *
+     * @param {number} resolution
+     * @param {number} tile_size
+     * @param {number} texture_id
+     */
+    setTextureParameters(
+        resolution,
+        tile_size,
+        texture_id
+    ) {
+        this.#texture_id = texture_id;
+        this.#texture_resolution = resolution;
+        this.#tile_resolution = tile_size;
+
+        this.#initialize_usage_uniforms();
+    }
+
+    get usage_metadata() {
+        return this.#usage_metadata;
+    }
+
+    get usage_data() {
+        return this.#usage_pixel_data;
+    }
+
+    constructor() {
+        this.#initialize_usage_uniforms();
+    }
+
+    #initialize_usage_uniforms() {
+
+        const uniforms = usage_material.uniforms;
+
+        const max_mip_level = Math.log2(this.#texture_resolution / this.#tile_resolution);
+
+        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,
+            max_mip_level
+        );
+
+        uniforms.u_mt_tex.value.set(
+            this.#texture_resolution,
+            this.#texture_resolution,
+            this.#tile_resolution,
+            this.#texture_id
+        );
+    }
+
+    /**
+     *
+     * @param {number} x
+     * @param {number} y
+     */
+    setViewportResolution(x, y) {
+        assert.isNumber(x, 'x');
+        assert.isNumber(y, 'y');
+
+        assert.notNaN(x, 'x');
+        assert.notNaN(y, 'y');
+
+        const _x = max2(1, Math.floor(x));
+        const _y = max2(1, Math.floor(y));
+
+        const viewport = this.#viewport_resolution;
+
+        if (_x === viewport[0] && _y === viewport[1]) {
+            // no change, do nothing
+            return;
+        }
+
+        viewport[0] = _x;
+        viewport[1] = _y;
+
+        const usage_resolution_x = clamp(Math.floor(_x / this.#usage_resolution_scale), 1, _x);
+        const usage_resolution_y = clamp(Math.floor(_y / this.#usage_resolution_scale), 1, _y);
+
+        this.#usage_buffer.setSize(usage_resolution_x, usage_resolution_y);
+        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);
+
+    }
+
+    /**
+     *
+     * @param {WebGLRenderer} renderer
+     * @param {Scene} scene
+     * @param {Camera} camera
+     */
+    updateUsage(renderer, scene, camera) {
+
+        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);
+
+        // remember existing state
+        const _old_render_target = renderer.getRenderTarget();
+        const _auto_clear = renderer.autoClear;
+
+        const _old_material = scene.overrideMaterial;
+
+        renderer.autoClear = false;
+        renderer.setRenderTarget(usage_buffer);
+        scene.overrideMaterial = usage_material;
+
+        // clear out usage texture
+        renderScreenSpace(renderer, clear_usage_material);
+
+        renderer.clearDepth();
+
+        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.setRenderTarget(_old_render_target);
+        renderer.autoClear = _auto_clear;
+
+        this.#usage_metadata.fromTexture(this.#usage_pixel_data.data);
+        this.#usage_metadata.promoteAncestors(1);
+    }
+
+    dispose() {
+        this.#usage_buffer.dispose();
+    }
+}