@woosh/meep-engine 2.71.0 → 2.73.0

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

@@ -0,0 +1,153 @@
+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 {
+
+    #counts_intrinsic = new Uint32Array(0);
+
+    get counts() {
+        return this.#counts_intrinsic;
+    }
+
+    #max_mip_level = 0;
+
+    set max_mip_level(v) {
+        this.#max_mip_level = v;
+
+        this.#ensureCapacity();
+    }
+
+    get max_mip_level() {
+        return this.#max_mip_level;
+    }
+
+    /**
+     *
+     */
+    #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;
+        }
+
+        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);
+    }
+
+    /**
+     *
+     * @param {number} fingerprint
+     * @returns {number}
+     */
+    getCountByFingerprint(fingerprint) {
+        const index = finger_print_to_tile_index(fingerprint);
+
+
+        return this.#counts_intrinsic[index];
+    }
+
+    /**
+     *
+     * @param {number} mip
+     * @param {number} x
+     * @param {number} y
+     * @returns {number}
+     */
+    getCountBy(mip, x, y) {
+        const finger_print = compose_finger_print(mip, x, y);
+
+        return this.getCountByFingerprint(finger_print);
+    }
+
+    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
+     */
+    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--) {
+
+            const mip_resolution = 1 << mip;
+
+            for (let y = 0; y < mip_resolution; y++) {
+                for (let x = 0; x < mip_resolution; x++) {
+
+                    const count = this.getCountBy(mip, x, y);
+
+                    if (count <= 0) {
+                        continue;
+                    }
+
+                    // get higher-level lod
+                    const parent_level = mip - 1;
+                    const parent_x = x >>> 1;
+                    const parent_y = y >>> 1;
+
+                    const parent_index = this.#getIndexBy(parent_level, parent_x, parent_y);
+
+                    const parent_count = this.#counts_intrinsic[parent_index];
+
+                    const expected_count = count + bias;
+
+                    if (parent_count < expected_count) {
+                        this.#counts_intrinsic[parent_index] = expected_count;
+                    }
+
+                }
+            }
+
+        }
+    }
+
+
+    /**
+     *
+     * @param {Uint8Array} data usage texture data
+     */
+    fromTexture(data) {
+        this.clear();
+
+        const data_size = data.length;
+
+        this.#ensureCapacity(data_size >> 2);
+
+        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
+            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 finger_print = compose_finger_print(mip_level, tile_x, tile_y);
+
+            const index0 = finger_print_to_tile_index(finger_print);
+
+            this.#counts_intrinsic[index0]++;
+        }
+
+    }
+}

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

@@ -0,0 +1,252 @@
+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 mip_count = this.#levels.length;
+
+        for (let mip = 0; mip < mip_count; mip++) {
+            const size = 1 << mip;
+
+            for (let y = 0; y < size; y++) {
+                for (let x = 0; x < size; x++) {
+                    const count = usage.getCountBy(mip,x,y);
+
+                    if(count === 0){
+                        continue;
+                    }
+
+                    const mipView = this.#levels[mip];
+
+                    const tile = mipView.getTile(x, y);
+
+                    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

@@ -0,0 +1,257 @@
+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;
+    #max_mip_level = 0;
+
+    get texture_resolution() {
+        return this.#texture_resolution;
+    }
+
+    get tile_resolution() {
+        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
+     * @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.#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() {
+        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 = this.#max_mip_level;
+
+
+        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();
+    }
+}

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;
+}