@woosh/meep-engine 2.93.2 → 2.94.0

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

@@ -7,21 +7,22 @@ import {
     PerspectiveCamera,
     PlaneBufferGeometry,
     Scene,
-    Vector2,
     WebGLRenderer
 } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import "../../../../../../../../css/main.scss";
 import Signal from "../../../../core/events/signal/Signal.js";
+import { computePathDirectory } from "../../../../core/path/computePathDirectory.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 SmoothProgressBar from "../../../../view/elements/progress/SmoothProgressBar.js";
 import { AssetManager } from "../../../asset/AssetManager.js";
 import { GameAssetType } from "../../../asset/GameAssetType.js";
 import { ImageRGBADataLoader } from "../../../asset/loaders/image/ImageRGBADataLoader.js";
 import { buildCanvasViewFromTexture } from "../../render/visibility/hiz/buildCanvasViewFromTexture.js";
-import { VirtualTextureMaterial } from "./VirtualTextureMaterial.js";
-import { VirtualTextureMemoryMapping } from "./VirtualTextureMemoryMapping.js";
-import { VirtualTexturePage } from "./VirtualTexturePage.js";
-import { VirtualTextureUsageUpdater } from "./VirtualTextureUsageUpdater.js";
+import { VirtualTextureSystem } from "./VirtualTextureSystem.js";
 
 let camera,
     /**
@@ -45,18 +46,13 @@ const signal_render = new Signal();
 // 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 virtualTextureManager = new VirtualTextureUsageUpdater();
-const virtualTexturePage = new VirtualTexturePage();
-// const residencyDebugView = new ResidencyDebugView({ scale: 1 });
-const memoryMapping = new VirtualTextureMemoryMapping();
-
 
 // const usageDebugView = new UsageDebugView();
 // usageDebugView.position.set(0,256);
-
-window.page = virtualTexturePage;
-window.mapping = memoryMapping;
-window.usage = virtualTextureManager.usage_metadata;
+//
+// window.page = virtualTexturePage;
+// window.mapping = memoryMapping;
+// window.usage = virtualTextureManager.usage_metadata;
 
 const container_view = new EmptyView();
 
@@ -95,25 +91,125 @@ function makeMesh(mat) {
     return mesh;
 }
 
-async function init() {
+/**
+ *
+ * @type {VirtualTextureSystem[]}
+ */
+const virtual_texture_managers = [];
 
-    const am = new AssetManager();
-    await am.registerLoader(GameAssetType.Image, new ImageRGBADataLoader());
-    am.startup();
+async function loadGLTF({
+                            path
+                        }) {
 
-    virtualTextureManager.setTextureParameters(
-        // 32768,
-        // 16384,
-        // 8192,
-        // 2048,
-        // 16384,
-        512,
-        32,
-        // 128,
-        3
-    );
+    const loader = new GLTFLoader();
+
+    const base_path = computePathDirectory(path);
+
+    const progress = new SmoothProgressBar();
+
+    function layout() {
+        progress.size.set(100, 20);
+        progress.position.set((container_view.size.x - progress.size.x) * 0.5, (container_view.size.y - progress.size.y) * 0.5);
+    }
+
+    layout();
+    container_view.size.onChanged.add(layout);
+
+    container_view.addChild(progress);
+
+    const gltf = await new Promise((resolve, reject) => {
+
+        loader.load(path, resolve, event => {
+            console.log(event);
+
+            progress.max = event.total;
+            progress.value = event.loaded;
+        }, reject);
+    })
+
+    container_view.removeChild(progress);
+
+
+    console.warn(gltf);
+
+    const materials = new Set();
+
+    /**
+     *
+     * @type {Map<Material, Mesh[]>}
+     */
+    const material_users = new Map();
+
+    /**
+     *
+     * @type {Map<Material, Material>}
+     */
+    const replacement_materials = new Map();
+
+    gltf.scene.traverse(n => {
+        if (!n.isMesh) {
+            return;
+        }
+
+        const mat = n.material;
+        if (mat === undefined) {
+            return;
+        }
+
+        if (materials.has(mat)) {
+            return;
+        }
+
+        const extensionVT = mat.userData?.gltfExtensions?.meepVirtualTexture;
+        if (extensionVT === undefined) {
+            return;
+        }
+
+        materials.add(mat);
+
+        const vts = {};
+
+        for (const textureKey in extensionVT) {
+            const textureMeta = extensionVT[textureKey];
+
+            const vt = new VirtualTextureSystem();
+
+            vt.setTexture({
+                path: base_path + '/' + textureMeta.path,
+                texture_resolution: textureMeta.texture_resolution,
+                tile_resolution: textureMeta.tile_size,
+                tile_margin: textureMeta.tile_margin
+            });
+
+            virtual_texture_managers.push(vt);
+
+            vts[textureKey] = vt;
+        }
 
-    virtualTexturePage.tile_resolution = virtualTextureManager.tile_resolution;
+        if (vts.baseColorTexture !== undefined) {
+            replacement_materials.set(mat, vts.baseColorTexture.makeMaterial())
+        }
+    })
+
+    // replace materials
+    gltf.scene.traverse(n => {
+        if (n.isMesh) {
+
+            const replacement = replacement_materials.get(n.material);
+
+            if (replacement !== undefined) {
+                n.material = replacement;
+            }
+
+        }
+    });
+
+    return gltf.scene;
+}
+
+function flatSample({
+                        am
+                    }) {
 
     // virtualTexturePage.path = "data/textures/utility/maurus_uv_checker_8k/vt-01-32";
     // virtualTexturePage.path = "data/textures/utility/maurus_uv_checker_8k/vt-01-128";
@@ -121,25 +217,63 @@ async function init() {
     // virtualTexturePage.path = "data/textures/utility/aco-greece/vt-01-128";
     // sparseTexture.path = "data/textures/utility/vt/uv_map_reference";
     // virtualTexturePage.path = "data/textures/utility/vt/Lenna";
-    virtualTexturePage.path = "data/textures/utility/Lenna/vt-01-32";
+    // virtualTexturePage.path = "data/textures/utility/Lenna/vt-01-32";
     // sparseTexture.path = "data/textures/utility/vt/TexelDensity1";
-    // virtualTexturePage.page_texture_size = [32, 64];
-    // virtualTexturePage.page_texture_size = [256, 256];
-    // virtualTexturePage.page_texture_size = [280, 280];
-    // virtualTexturePage.page_texture_size = [256,512];
-    virtualTexturePage.page_texture_size = [512, 512];
-    // virtualTexturePage.page_texture_size = [480, 480];
-    // virtualTexturePage.page_texture_size = [384, 1280];
-    // virtualTexturePage.page_texture_size = [1024, 1024];
-    // virtualTexturePage.page_texture_size = [2048, 2048];
-    // virtualTexturePage.page_texture_size = [4096, 4096];
-    virtualTexturePage.asset_manager = am;
 
-    memoryMapping.resolution = virtualTextureManager.texture_resolution / virtualTextureManager.tile_resolution;
+    const vts = new VirtualTextureSystem();
+
+    vts.setTexture({
+        path: "data/textures/utility/Lenna/vt-01-32",
+        texture_resolution: 512,
+        tile_resolution: 32,
+    });
+    vts.initialize({
+        asset_manager: am,
+        // page_resolution: 1024
+    })
+    // console.log(virtualTexturePage);
+
+    const material = vts.makeMaterial();
 
+    console.log(material.uniforms);
+
+    const virt = makeMesh(material);
+
+
+    virtual_texture_managers.push(vts);
+
+}
+
+async function init() {
+
+    const am = new AssetManager();
+    await am.registerLoader(GameAssetType.Image, new ImageRGBADataLoader());
+    am.startup();
+
+    const container = document.body;
+
+    container.style.margin = "0";
+
+    container.appendChild(container_view.el);
+    container_view.link();
+
+    scene = new Scene();
+
+    const gltf = await loadGLTF({ path: "data/models/Scans/green_car_wreck/converted/model.gltf" })
+
+
+    virtual_texture_managers.forEach(vt => {
+        vt.initialize({
+            asset_manager: am,
+            page_resolution: 4096
+        })
+    });
 
-    console.log(virtualTexturePage);
+    console.log(virtual_texture_managers);
 
+    const manager = virtual_texture_managers[0];
+
+    scene.add(gltf);
 
     //
     // usageDebugView.mip_levels = virtualTextureManager.max_mip_level;
@@ -147,29 +281,41 @@ async function init() {
 
 
     // const usagePyramidDebugView = new UsagePyramidDebugView();
-    // usagePyramidDebugView.setImageURL(TEXTURE_URL);
+    // usagePyramidDebugView.setImageURL("data/models/Scans/green_car_wreck/converted/merged_1024.png");
     // container_view.addChild(usagePyramidDebugView);
+    //
+    // signal_render.add(()=>{
+    //
+    //     usagePyramidDebugView.setTextureParameters(manager.updater.texture_resolution, manager.updater.tile_resolution);
+    //     usagePyramidDebugView.usage = manager.updater.usage_metadata;
+    // })
 
-    // residencyDebugView.texture = virtualTexturePage;
+    // const residencyDebugView = new ResidencyDebugView();
+    // residencyDebugView.texture = manager.page;
     // residencyDebugView.css({
     //     bottom: 0,
     //     right: 0
     // });
     // container_view.addChild(residencyDebugView);
+    //
+    // signal_render.add(()=> residencyDebugView.update());
 
     // ===================
 
-    const container = document.body;
-
-    container.style.margin = "0";
-
-    container.appendChild(container_view.el);
-    container_view.link();
 
     camera = new PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 100);
-    camera.position.z = 30;
+    camera.position.set(
+        12.022084899129627,
+        9.60952583639588,
+        -0.04984304693423923
+    );
+    camera.rotation.set(
+        -1.5687013871667483,
+        0.9201500864954011,
+        1.5681634783563936);
+
+    window.camera = camera;
 
-    scene = new Scene();
     // scene.background = new Color("#002D62");
 
     clock = new Clock();
@@ -183,15 +329,8 @@ async function init() {
     //     side: DoubleSide
     // });
 
-    const material = new VirtualTextureMaterial({
-        page: virtualTexturePage,
-        mapping: memoryMapping
-    })
-
-    console.log(material.uniforms);
 
     // makeTorus();
-    const virt = makeMesh(material);
     // virt.position.x = -0.4
 
     // const original_texture = new TextureLoader().load("data/textures/utility/maurus_uv_checker_8k/UV-CheckerMap_Maurus_01_8K.png");
@@ -216,7 +355,7 @@ async function init() {
     //
 
     renderer = new WebGLRenderer({ antialias: true });
-    renderer.setClearColor("#002D62",1);
+    renderer.setClearColor("#002D62", 1);
 
     renderer.setPixelRatio(window.devicePixelRatio);
     container.appendChild(renderer.domElement);
@@ -242,13 +381,12 @@ async function init() {
     //     gui.add(options, key);
     // });
 
-    virtualTexturePage.renderer = renderer;
-
 
     animate();
 
+
     const mappingPreview = buildCanvasViewFromTexture({
-        texture: virtualTexturePage.texture,
+        texture: manager.page.texture,
         renderer,
         swizzle: ['r', 'g', 'b', 1],
         width: 256,
@@ -259,15 +397,29 @@ async function init() {
     mappingPreview.view.css(CSS_ABSOLUTE_POSITIONING);
     mappingPreview.view.css({
         // border: "1px solid red"
-        boxShadow: "0 0 8px rgba(0,0,0,0.4)"
+        boxShadow: "0 0 8px rgba(0,0,0,0.4)",
     });
-    mappingPreview.view.position.set(0, 0);
+    mappingPreview.view.position.set(4, 4);
+
 
     signal_render.add(() => {
         mappingPreview.render();
     });
 
     container_view.addChild(mappingPreview.view);
+
+    // credits
+    container_view.addChild(new LabelView(`MODEL: Green car wreck, by matousekfoto, CC-BY-4.0`, {
+        css: {
+            position: "absolute",
+            bottom: "4px",
+            width: "100%",
+            textAlign: "center",
+            color: "#88e1d2",
+            textShadow: "0 0 3px black",
+            fontFamily: "monospace"
+        }
+    }));
 }
 
 function onWindowResize() {
@@ -292,20 +444,13 @@ function animate() {
 function render() {
 
     const delta = 5 * clock.getDelta();
-    //
+
     // if (options.spin && mesh !== undefined) {
     //     mesh.rotation.y += 0.0125 * delta;
     //     mesh.rotation.x += 0.05 * delta;
     // }
 
-    const view_port_size = renderer.getSize(new Vector2());
-    view_port_size.multiplyScalar(renderer.getPixelRatio());
-
-
-    virtualTextureManager.setViewportResolution(view_port_size.x, view_port_size.y);
-    virtualTextureManager.updateUsage(renderer, scene, camera);
-    virtualTexturePage.update_usage(virtualTextureManager.usage_metadata);
-    memoryMapping.residency = virtualTexturePage;
+    virtual_texture_managers.forEach(vts => vts.update(renderer, scene, camera));
 
     // renderer.setViewport(0, 0, view_port_size.x, view_port_size.y);
     renderer.clear();
@@ -313,9 +458,6 @@ function render() {
 
     // usageDebugView.usage = virtualTextureManager.usage_metadata;
 
-    // usagePyramidDebugView.setTextureParameters(virtualTextureManager.texture_resolution, virtualTextureManager.tile_resolution);
-    // usagePyramidDebugView.usage = virtualTextureManager.usage_metadata;
-
     // residencyDebugView.update();
 
     signal_render.send0();

package/src/generation/filtering/numeric/CellFilterCache.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellFilterCache.d.ts","sourceRoot":"","sources":["../../../../../src/generation/filtering/numeric/CellFilterCache.js"],"names":[],"mappings":"AAIA;IAeI;;;;;OAKG;IACH,wCAHW,MAAM,GACJ,eAAe,CAU3B;IA3BD;;;;OAIG;IACH,gBAAqC;IAErC;;;OAGG;IACH,OAFU,MAAM,CAEN;CAyDb;yCA1EwC,qCAAqC"}
+{"version":3,"file":"CellFilterCache.d.ts","sourceRoot":"","sources":["../../../../../src/generation/filtering/numeric/CellFilterCache.js"],"names":[],"mappings":"AAIA;IAeI;;;;;OAKG;IACH,wCAHW,MAAM,GACJ,eAAe,CAU3B;IA3BD;;;;OAIG;IACH,gBAAqC;IAErC;;;OAGG;IACH,OAFU,MAAM,CAEN;CAyDb;yCAxEwC,qCAAqC"}

package/src/generation/filtering/numeric/CellFilterCache.js

@@ -1,6 +1,6 @@
-import { CellFilterUnaryOperation } from "../core/CellFilterUnaryOperation.js";
-import { Sampler2D } from "../../../engine/graphics/texture/sampler/Sampler2D.js";
 import { assert } from "../../../core/assert.js";
+import { Sampler2D } from "../../../engine/graphics/texture/sampler/Sampler2D.js";
+import { CellFilterUnaryOperation } from "../core/CellFilterUnaryOperation.js";
 
 export class CellFilterCache extends CellFilterUnaryOperation {
 
@@ -49,24 +49,24 @@ export class CellFilterCache extends CellFilterUnaryOperation {
 
         const scale_1 = 1 / this.scale;
 
-        console.time('Cache filter build');
+        // console.time('Cache filter build');
 
         let x = 0;
         let y = 0;
 
         for (y = 0; y < target_h; y++) {
-            const g_y = y * scale_1;
+            const grid_y = y * scale_1;
 
             for (x = 0; x < target_w; x++) {
-                const g_x = x * scale_1;
+                const grid_x = x * scale_1;
 
-                const sampleValue = source.execute(grid, g_x, g_y, 0);
+                const sampleValue = source.execute(grid, grid_x, grid_y, 0);
 
                 cache.writeChannel(x, y, 0, sampleValue);
             }
         }
 
-        console.timeEnd('Cache filter build');
+        // console.timeEnd('Cache filter build');
     }
 
     execute(grid, x, y, rotation) {

package/src/generation/filtering/numeric/complex/CellFilterFXAA.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellFilterFXAA.d.ts","sourceRoot":"","sources":["../../../../../../src/generation/filtering/numeric/complex/CellFilterFXAA.js"],"names":[],"mappings":"AAKA;;GAEG;AACH;IAiCI;;;;OAIG;IACH,oBAHW,UAAU,GACR,cAAc,CAY1B;IA7CD;;;OAGG;IACH,QAFU,UAAU,CAEN;IAEd;;;;OAIG;IACH,gBAFU,MAAM,CAEM;IAEtB;;;;;OAKG;IACH,4BAFU,MAAM,CAEkB;IAElC;;;;;OAKG;IACH,wBAFU,MAAM,CAEW;IAoB3B,uCAMC;IAED,0DAwDC;CACJ;2BAxH0B,qBAAqB"}
+{"version":3,"file":"CellFilterFXAA.d.ts","sourceRoot":"","sources":["../../../../../../src/generation/filtering/numeric/complex/CellFilterFXAA.js"],"names":[],"mappings":"AAQA;;GAEG;AACH;IAiCI;;;;OAIG;IACH,oBAHW,UAAU,GACR,cAAc,CAY1B;IA7CD;;;OAGG;IACH,QAFU,UAAU,CAEN;IAEd;;;;OAIG;IACH,gBAFU,MAAM,CAEM;IAEtB;;;;;OAKG;IACH,4BAFU,MAAM,CAEkB;IAElC;;;;;OAKG;IACH,wBAFU,MAAM,CAEW;IAoB3B,uCAMC;IAED,0DAwDC;CACJ;2BAxH0B,qBAAqB"}

package/src/generation/filtering/numeric/complex/CellFilterFXAA.js

@@ -1,6 +1,9 @@
 import { assert } from "../../../../core/assert.js";
+import { clamp } from "../../../../core/math/clamp.js";
 import { max2 } from "../../../../core/math/max2.js";
+import { max3 } from "../../../../core/math/max3.js";
 import { min2 } from "../../../../core/math/min2.js";
+import { min3 } from "../../../../core/math/min3.js";
 import { CellFilter } from "../../CellFilter.js";
 
 /**
@@ -84,8 +87,8 @@ export class CellFilterFXAA extends CellFilter {
         const lumaMaxNeSe = max2(lumaNE, lumaSE);
         const lumaMinNeSe = min2(lumaNE, lumaSE);
 
-        const lumaMin = min2(lumaM, min2(lumaMinNeSe, lumaMinNwSw));
-        const lumaMax = max2(lumaM, max2(lumaMaxNeSe, lumaMaxNwSw));
+        const lumaMin = min3(lumaM, lumaMinNeSe, lumaMinNwSw);
+        const lumaMax = max3(lumaM, lumaMaxNeSe, lumaMaxNwSw);
 
         if (lumaMin === lumaMax) {
             //no luma difference across the sampled region
@@ -97,13 +100,13 @@ export class CellFilterFXAA extends CellFilter {
 
         const dirReduce = max2(
             (lumaNW + lumaNE + lumaSW + lumaSE) * (0.25 * this.edge_threshold),
-            this.console_edge_threshold_min);
+            this.console_edge_threshold_min
+        );
 
         const rcpDirMin = 1.0 / (min2(Math.abs(dir_x), Math.abs(dir_y)) + dirReduce);
 
-        const dir1_x = min2(this.console_edge_sharpness, max2(-this.console_edge_sharpness, dir_x * rcpDirMin));
-        const dir1_y = min2(this.console_edge_sharpness, max2(-this.console_edge_sharpness, dir_y * rcpDirMin));
-
+        const dir1_x = clamp(dir_x * rcpDirMin, -this.console_edge_sharpness, this.console_edge_sharpness);
+        const dir1_y = clamp(dir_y * rcpDirMin, -this.console_edge_sharpness, this.console_edge_sharpness);
 
         const valueN1 = this.source.execute(grid, x + dir1_x * (1 / 3 - 0.5), y + dir1_y * (1 / 3 - 0.5), rotation);
         const valueP1 = this.source.execute(grid, x + dir1_x * (2 / 3 - 0.5), y + dir1_y * (2 / 3 - 0.5), rotation);

package/src/generation/filtering/numeric/complex/CellFilterGaussianBlur.d.ts

@@ -21,22 +21,10 @@ export class CellFilterGaussianBlur extends CellFilter {
     size_y: number;
     /**
      *
-     * @type {number[]|ArrayLike<number>}
+     * @type {Float32Array}
      * @private
      */
     private __kernel;
-    /**
-     *
-     * @type {number}
-     * @private
-     */
-    private __kernel_total_power;
-    /**
-     *
-     * @type {number}
-     * @private
-     */
-    private __inv_kernel_total_power;
     /**
      * Written by 'initialize' stage
      * @type {number}

package/src/generation/filtering/numeric/complex/CellFilterGaussianBlur.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellFilterGaussianBlur.d.ts","sourceRoot":"","sources":["../../../../../../src/generation/filtering/numeric/complex/CellFilterGaussianBlur.js"],"names":[],"mappings":"AA6DA;IA8EI;;;;;;;OAOG;IACH,oBANW,UAAU,KACV,MAAM,KACN,MAAM,YACN,MAAM,GACJ,sBAAsB,CAkBlC;IAlGG,kBAAkB;IAClB,kBAAkB;IAElB,gBAAiB;IACjB,gBAAiB;IAEjB;;;OAGG;IACH,QAFU,UAAU,CAEF;IAElB,eAAe;IACf,eAAe;IAEf;;;;OAIG;IACH,iBAAkB;IAElB;;;;OAIG;IACH,6BAA6B;IAE7B;;;;OAIG;IACH,iCAAiC;IAEjC;;;;OAIG;IACH,wBAAwB;IAExB;;;;OAIG;IACH,wBAAwB;IAG5B,uCAoBC;IA6BD,0DA8CC;CACJ;2BAhN0B,qBAAqB"}
+{"version":3,"file":"CellFilterGaussianBlur.d.ts","sourceRoot":"","sources":["../../../../../../src/generation/filtering/numeric/complex/CellFilterGaussianBlur.js"],"names":[],"mappings":"AAMA;IA+DI;;;;;;;OAOG;IACH,oBANW,UAAU,KACV,MAAM,KACN,MAAM,YACN,MAAM,GACJ,sBAAsB,CAkBlC;IAtFD,kBAAc;IACd,kBAAc;IAEd,gBAAa;IACb,gBAAa;IAEb;;;OAGG;IACH,QAFU,UAAU,CAEN;IAEd,eAAW;IACX,eAAW;IAEX;;;;OAIG;IACH,iBAA+B;IAE/B;;;;OAIG;IACH,wBAAoB;IAEpB;;;;OAIG;IACH,wBAAoB;IAEpB,uCAuBC;IA6BD,0DA4CC;CACJ;2BAxI0B,qBAAqB"}