@woosh/meep-engine 2.34.2 → 2.34.6

package/core/geom/3d/topology/TopoVertex.spec.js

@@ -88,9 +88,15 @@ test('replaceAnotherVertex', () => {
     v_b.addEdge(e_b);
 
     f_a.setVertexAt(0, v_a);
+    f_a.setVertexAt(1, new TopoVertex());
+    f_a.setVertexAt(2, new TopoVertex());
+
     e_a.v0 = v_a;
 
     f_b.setVertexAt(0, v_b);
+    f_b.setVertexAt(1, new TopoVertex());
+    f_b.setVertexAt(2, new TopoVertex());
+
     e_b.v0 = v_b;
 
     // verify assumptions about topology

package/core/model/object/objectDeepEquals.spec.js

@@ -1,4 +1,4 @@
-import { objectDeepEquals } from "./objectDeepEquals.d.ts";
+import { objectDeepEquals } from "./objectDeepEquals.js";
 
 test('objectDeepEquals', () => {
     expect(objectDeepEquals({}, {})).toBe(true);

package/editor/Editor.js

@@ -25,7 +25,7 @@ import TopDownCameraController from "../engine/graphics/ecs/camera/topdown/TopDo
 import { Transform } from "../engine/ecs/transform/Transform.js";
 import TopDownCameraControllerSystem, { setCameraControllerFromTransform } from "../engine/graphics/ecs/camera/topdown/TopDownCameraControllerSystem.js";
 import { downloadAsFile } from "../core/binary/ByteArrayTools.js";
-import BinaryBufferSerialization from "../engine/ecs/storage/BinaryBufferSerializer.js";
+import BinaryBufferSerializer from "../engine/ecs/storage/BinaryBufferSerializer.js";
 import { EncodingBinaryBuffer } from "../core/binary/EncodingBinaryBuffer.js";
 import { EntityComponentDataset } from "../engine/ecs/EntityComponentDataset.js";
 import InputControllerSystem from "../engine/input/ecs/systems/InputControllerSystem.js";
@@ -383,7 +383,7 @@ function Editor() {
             // Set music tracks back to time=0
             resetSoundEmitterTracks(dataset);
 
-            const serializer = new BinaryBufferSerialization();
+            const serializer = new BinaryBufferSerializer();
             serializer.registry = engine.binarySerializationRegistry;
 
             const state = new EncodingBinaryBuffer();

package/engine/EngineHarness.js

@@ -328,7 +328,6 @@ export class EngineHarness {
      * @param {number} [cameraEntity]
      * @param {Engine} engine
      * @param {number} [sensitivity]
-     * @param {Element} domElement
      * @param {EntityComponentDataset} [ecd]
      * @returns {EntityBuilder}
      */

package/engine/asset/loaders/image/ImageDecoderWorker.js

@@ -23,7 +23,7 @@ async function decode_png(png_bytes) {
             width,
             height,
             itemSize: uint_channels.itemSize,
-            bitDepth: uint_channels.bitDepth
+            bitDepth: png.bitDepth
         });
     });
 }

package/engine/asset/loaders/image/ImageRGBADataLoader.js

@@ -41,6 +41,12 @@ export class ImageRGBADataLoader extends AssetLoader {
         return await this.decoder.decode(new Uint8Array(array_buffer));
     }
 
+    /**
+     *
+     * @param {String} path
+     * @return {Promise<ImageRGBADataAsset>}
+     * @private
+     */
     async __standard(path) {
 
         const bitmap = await this.__decode_via_worker(path);
@@ -48,19 +54,19 @@ export class ImageRGBADataLoader extends AssetLoader {
 
         let data;
 
-        switch (bitmap.bitDepth) {
-            case 8:
+        const bitDepth = bitmap.bitDepth;
 
+        switch (bitDepth) {
+            case 8:
                 data = new Uint8Array(bitmap.data);
                 break
             case 16:
                 data = new Uint16Array(bitmap.data);
                 break;
             default:
-                throw new Error(`Unsupported bit depth '${bitmap.bitDepth}'`);
+                throw new Error(`Unsupported bit depth '${bitDepth}'. path='${path}'`);
         }
 
-
         return new ImageRGBADataAsset(data, bitmap.width, bitmap.height, bitmap.itemSize);
     }
 

package/engine/asset/loaders/image/codec/NativeImageDecoder.js

@@ -2,7 +2,7 @@ import { Codec } from "./Codec.js";
 
 /**
  *
- * @param {Image|ImageBitmap} img
+ * @param {Image|ImageBitmap|HTMLImageElement} img
  * @returns {Uint8Array}
  */
 function decode(img) {
@@ -28,10 +28,12 @@ export class NativeImageDecoder extends Codec {
     async decode(data) {
         const image = new Image();
 
+        // convert binary data to image URL that we can load
         const url = URL.createObjectURL(new Blob([data]));
 
         image.src = url;
 
+        // give browser a chance to decode image in async
         await image.decode();
 
         const rgba_data = decode(image);

package/engine/asset/loaders/image/codec/ThreadedImageDecoder.js

@@ -24,6 +24,7 @@ export class ThreadedImageDecoder extends Codec {
     }
 
     async decode(data) {
-        return await this.worker.request('decode', [data.buffer]);
+        const result = await this.worker.request('decode', [data.buffer]);
+        return result;
     }
 }

package/engine/asset/loaders/image/png/PNG.js

@@ -343,7 +343,9 @@ PNG.prototype.getUint8Data_case3 = function () {
     for (let i = 0; i < pixel_count; i++) {
         const destination_address = i * itemSize;
 
-        const lookup_value = pixels[i * d];
+        const lookup_index = pixels[i * d];
+
+        const lookup_value = lookup_index * 3;
 
         result_data[destination_address] = palette[lookup_value];
         result_data[destination_address + 1] = palette[lookup_value + 1];
@@ -381,7 +383,12 @@ PNG.prototype.getUint8Data = function () {
             break;
         case 3:
             // palette
-            return this.getUint8Data_case3();
+            const c3 = this.getUint8Data_case3();
+
+            data = c3.data;
+            itemSize = c3.itemSize;
+
+            break;
         case 4:
             // grayscale with alpha
             data = this.pixels;
@@ -397,7 +404,6 @@ PNG.prototype.getUint8Data = function () {
 
     return {
         data,
-        itemSize,
-        bitDepth: this.bitDepth
+        itemSize
     };
 };

package/engine/ecs/storage/BinaryBufferSerializer.js

@@ -48,7 +48,7 @@ function isEntityTransient(entity, dataset, smComponentIndex, componentInstance)
     return isTransient;
 }
 
-class BinaryBufferSerialization {
+class BinaryBufferSerializer {
     constructor() {
         /**
          *
@@ -171,4 +171,4 @@ class BinaryBufferSerialization {
     }
 }
 
-export default BinaryBufferSerialization;
+export default BinaryBufferSerializer;

package/engine/ecs/terrain/ecs/layers/TerrainLayers.js

@@ -267,6 +267,15 @@ export class TerrainLayers {
         return index;
     }
 
+    /**
+     *
+     * @param {TerrainLayer} layer
+     * @return {boolean}
+     */
+    removeLayer(layer) {
+        return this.layers.removeOneOf(layer);
+    }
+
     /**
      *
      * @param {TerrainLayer} layer

package/engine/ecs/terrain/ecs/splat/SplatMapping.js

@@ -159,6 +159,39 @@ export class SplatMapping {
 
     }
 
+    /**
+     *
+     * @param {Sampler2D} destination
+     * @param {number} index
+     * @param {number} channel
+     */
+    readLayerToSampler(destination, index, channel = 0) {
+        const weightData = this.weightData;
+
+        const width = this.size.x;
+        const height = this.size.y;
+
+        assert.equal(destination.width, width, 'destination dimensions mismatch');
+        assert.equal(destination.height, height, 'destination dimensions mismatch');
+
+        const dataOffset = index * width * height;
+
+        for (let y = 0; y < height; y++) {
+
+            for (let x = 0; x < width; x++) {
+
+                const targetIndex = y * width + x;
+                const targetAddress = dataOffset + targetIndex;
+
+                const value = weightData[targetAddress];
+
+                destination.writeChannel(x, y, channel, value);
+
+            }
+        }
+
+    }
+
     /**
      *
      * @param {Uint8Array} source

package/engine/graphics/micron/format/MicronGeometry.js

@@ -180,6 +180,29 @@ export class MicronGeometry {
         return hits;
     }
 
+    /**
+     *
+     * @param {number} lod
+     * @returns {number}
+     */
+    computeLodFaceCount(lod) {
+        let r = 0;
+
+        const patches = this.patches;
+        const patch_count = patches.length;
+        for (let i = 0; i < patch_count; i++) {
+            const patch = patches[i];
+
+            if (patch.lod !== lod) {
+                continue;
+            }
+
+            r += patch.polygon_count;
+        }
+
+        return r;
+    }
+
     get patches() {
         return this.__patches;
     }
@@ -209,17 +232,21 @@ export class MicronGeometry {
 
     /**
      * Build geometry proxy from the patches
-     * @param {number} percent percentage of the original geometry to keep
+     * @param {number} fraction percentage of the original geometry to keep
+     * @param {number} min minimum number of triangles to keep, this will be respected first before percentage value
      */
-    buildProxy(percent) {
+    buildProxy(fraction, min) {
         throw new Error('Not Implemented');
     }
 
     computeByteSize() {
         let result = 0;
 
-        for (let i = 0; i < this.__patches.length; i++) {
-            result += this.__patches[i].computeByteSize();
+        const patches = this.__patches;
+        const patch_count = patches.length;
+
+        for (let i = 0; i < patch_count; i++) {
+            result += patches[i].computeByteSize();
         }
 
         return result;

package/engine/graphics/micron/plugin/MicronRenderPlugin.js

@@ -125,15 +125,15 @@ class GLTFAssetTransformer extends AssetTransformer {
     /**
      *
      * @param {Asset} source
-     * @param asset_description
+     * @param {AssetDescription} asset_description
      * @return {Promise<Asset>}
      */
     async transform(source, asset_description) {
         const animationClips = source.animations;
 
         if (animationClips !== undefined && animationClips.length > 0) {
-            // not suitable
-            return source;
+            // animations might cause trouble
+            console.warn(`model '${asset_description.path}' contains animations, these animations might not works as intended with micron.`);
         }
 
         /**

package/package.json

@@ -5,7 +5,7 @@
   "productName": "Meep",
   "description": "production-ready JavaScript game engine based on Entity Component System Architecture",
   "author": "Alexander Goldring",
-  "version": "2.34.2",
+  "version": "2.34.6",
   "dependencies": {
     "gl-matrix": "3.4.3",
     "fast-levenshtein": "2.0.6",

package/samples/terrain/editor.js

@@ -0,0 +1,347 @@
+import { EngineHarness } from "../../engine/EngineHarness.js";
+import EmptyView from "../../view/elements/EmptyView.js";
+import { EngineConfiguration } from "../../engine/EngineConfiguration.js";
+import { buildCubeURLs } from "../../engine/graphics/texture/cubemap/buildCubeURLs.js";
+import { ArrayBufferLoader } from "../../engine/asset/loaders/ArrayBufferLoader.js";
+import { TerrainFlags } from "../../engine/ecs/terrain/ecs/TerrainFlags.js";
+import Signal from "../../core/events/signal/Signal.js";
+import { NativeListController } from "../../view/controller/controls/NativeListController.js";
+import { TerrainLayer } from "../../engine/ecs/terrain/ecs/layers/TerrainLayer.js";
+import CheckersTextureURI from "../../engine/graphics/texture/CheckersTextureURI.js";
+import { obtainTerrain } from "../../engine/ecs/terrain/util/obtainTerrain.js";
+import { Cache } from "../../core/cache/Cache.js";
+import { computeStringHash } from "../../core/primitives/strings/computeStringHash.js";
+import { noop, strictEquals } from "../../core/function/Functions.js";
+import { scaleSampler2D } from "../../engine/graphics/texture/sampler/scaleSampler2D.js";
+import { Sampler2D } from "../../engine/graphics/texture/sampler/Sampler2D.js";
+import { DataType } from "../../core/collection/table/DataType.js";
+import { compute_typed_array_constructor_from_data_type } from "../../core/collection/table/DataType2TypedArrayConstructorMapping.js";
+import { copy_Sampler2D_channel_data } from "../../engine/graphics/texture/sampler/copy_Sampler2D_channel_data.js";
+import { TextureAssetLoader } from "../../engine/asset/loaders/texture/TextureAssetLoader.js";
+import { CanvasView } from "../../view/elements/CanvasView.js";
+import convertSampler2D2Canvas from "../../engine/graphics/texture/sampler/Sampler2D2Canvas.js";
+import { drawSamplerHTML } from "../../engine/graphics/texture/sampler/util/drawSamplerHTML.js";
+
+const engineHarness = new EngineHarness();
+
+/**
+ *
+ * @param {Engine} engine
+ */
+function makeConfig(engine) {
+
+    const config = new EngineConfiguration();
+
+    config.addLoader('arraybuffer', new ArrayBufferLoader());
+    config.addLoader('texture', new TextureAssetLoader());
+
+    return config;
+}
+
+class EditorTextureSlot {
+    constructor() {
+        this.onChanged = new Signal();
+
+        this.sampler = null;
+
+        this.__read = noop;
+        this.__write = noop;
+
+        /**
+         *
+         * @type {number}
+         */
+        this.itemSize = 1;
+    }
+
+    read() {
+        this.__read(this.sampler);
+
+        this.onChanged.send0();
+    }
+
+    write() {
+        this.__write(this.sampler);
+    }
+
+    /**
+     *
+     * @param {(Sampler2D)=>any} read
+     * @param {(Sampler2D)=>any} write
+     * @param {number} [itemSize]
+     * @param {DataType} [dataType]
+     * @return {EditorTextureSlot}
+     */
+    static from({ read, write, itemSize = 1, dataType = DataType.Uint8 }) {
+        const r = new EditorTextureSlot();
+
+        r.__read = read;
+        r.__write = write;
+
+        const TA = compute_typed_array_constructor_from_data_type(dataType);
+
+        r.sampler = new Sampler2D(new TA(itemSize), itemSize, 1, 1);
+
+        return r;
+    }
+}
+
+class TextureLayerEditor {
+    constructor() {
+        this.index = 0;
+
+        /**
+         *
+         * @type {Terrain|null}
+         * @private
+         */
+        this.__terrain = null;
+
+        this.__splat = EditorTextureSlot.from({
+            read: (target) => {
+                const terrain = this.__terrain;
+
+                target.resize(terrain.splat.size.x, terrain.splat.size.y)
+
+                terrain.splat.readLayerToSampler(target, this.index, 0);
+            },
+            write: (source) => {
+                this.__terrain.splat.writeLayerFromSampler(source, this.index, 0);
+            },
+            itemSize: 1
+        });
+        this.__diffuse = EditorTextureSlot.from({
+            read: (target) => {
+
+                const layers = this.__terrain.layers;
+
+                const layer = layers.get(this.index);
+
+                target.resize(layer.diffuse.width, layer.diffuse.height);
+                copy_Sampler2D_channel_data(layer.diffuse, target);
+            },
+            write: (source) => {
+                const layer = this.__terrain.layers.get(this.index);
+
+                copy_Sampler2D_channel_data(source, layer.diffuse);
+
+                this.__terrain.layers.writeLayerDataIntoTexture(this.index);
+            },
+            itemSize: 3
+        });
+    }
+
+    /**
+     * @param {Terrain} t
+     */
+    set terrain(t) {
+        this.__terrain = t;
+    }
+
+    init() {
+        this.__splat.read();
+        this.__diffuse.read();
+    }
+}
+
+/**
+ *
+ * @param {EditorTextureSlot} slot
+ */
+function makeTextureSlotView({ slot }) {
+
+    const preview = new CanvasView();
+    preview.size.set(64, 64);
+
+
+    function update() {
+        convertSampler2D2Canvas(slot.sampler, 1, 0, preview.el);
+    }
+
+    preview.on.linked.add(update);
+    preview.bindSignal(slot.onChanged, update);
+
+
+    return preview;
+}
+
+/**
+ *
+ * @param {View} root
+ * @param {Terrain} terrain
+ * @param {Engine} engine
+ */
+function makeTerrainEditor(root, terrain, engine) {
+    /**
+     *
+     * @type {Cache<string, Sampler2D>}
+     */
+    const PREVIEW_CACHE = new Cache({
+        keyHashFunction: computeStringHash,
+        keyEqualityFunction: strictEquals
+    });
+
+    const PREVIEW_SIZE = 64;
+
+    /**
+     *
+     * @param {string} url
+     * @return {Promise<Sampler2D>}
+     */
+    async function getPreviewFromURL(url) {
+        if (PREVIEW_CACHE.contains(url)) {
+            return PREVIEW_CACHE.get(url);
+        }
+
+        const asset = await engine.assetManager.promise(url, 'image');
+
+        // check cache again, might have been loaded in the meanwhile
+        if (PREVIEW_CACHE.contains(url)) {
+            return PREVIEW_CACHE.get(url);
+        }
+
+        const source = asset.create();
+
+        const preview = Sampler2D.uint8(4, PREVIEW_SIZE, PREVIEW_SIZE);
+
+        scaleSampler2D(source, preview);
+
+        PREVIEW_CACHE.put(url, preview);
+
+        return preview;
+    }
+
+    /**
+     *
+     * @type {EditorTextureSlot|null}
+     */
+    let active_slot = null;
+
+    function rebuild() {
+        // rebuild terrain
+        terrain.clearFlag(TerrainFlags.Built);
+        terrain.build(engine.assetManager);
+    }
+
+    function build_splat_editor() {
+        /**
+         *
+         * @type {Map<TerrainLayer, TextureLayerEditor>}
+         */
+        const editors = new Map();
+
+        return new NativeListController({
+            model: terrain.layers.layers,
+            elementFactory() {
+                return TerrainLayer.from(CheckersTextureURI, 1, 1);
+            },
+            /**
+             *
+             * @param {TerrainLayer} layer
+             */
+            elementViewFactory(layer) {
+                const e = new TextureLayerEditor();
+
+                editors.set(layer, e);
+
+                const layer_index = terrain.layers.layers.indexOf(layer);
+
+                e.terrain = terrain;
+                e.index = layer_index;
+
+
+                e.init();
+
+                const view = new EmptyView();
+
+
+                view.addChild(makeTextureSlotView({
+                    slot: e.__diffuse
+                }));
+                view.addChild(makeTextureSlotView({
+                    slot: e.__splat
+                }));
+
+                view.bindSignal(layer.onChanged, e.__diffuse.read, e.__diffuse);
+
+                return view;
+            },
+            operationAdd(list, el) {
+                terrain.layers.addLayer(el);
+                terrain.splat.addWeightLayer();
+            },
+            operationRemove(list, el) {
+                const index = terrain.layers.layers.indexOf(el);
+                terrain.layers.removeLayer(el);
+                terrain.splat.removeWeightLayer(index);
+
+                editors.delete(el);
+
+                // re-shuffle remaining editors
+
+                for (const [layer, editor] of editors) {
+                    if (editor.index > index) {
+                        editor.index--;
+                        editor.init();
+                    }
+                }
+            }
+        });
+    }
+
+    root.addChild(build_splat_editor());
+}
+
+/**
+ *
+ * @param {Engine} engine
+ * @return {string}
+ */
+async function main(engine) {
+
+    //disable drag and drop on game canvas
+    engine.graphics.domElement.addEventListener('dragover', (e) => e.preventDefault());
+    engine.graphics.domElement.addEventListener('drop', (e) => e.preventDefault());
+
+
+    EngineHarness.buildLights({ engine });
+    const camera = EngineHarness.buildCamera({ engine });
+    EngineHarness.buildOrbitalCameraController({ engine, cameraEntity: camera.entity })
+
+    await EngineHarness.buildTerrain({ engine });
+
+    const vMain = new EmptyView({ classList: ['ui-texture-testing-tool-view'] });
+
+    vMain.css({
+        position: "absolute",
+        left: "0",
+        top: "0",
+        pointerEvents: "initial"
+    });
+
+    makeTerrainEditor(vMain, obtainTerrain(engine.entityManager.dataset), engine);
+
+
+    document.body.appendChild(vMain.el);
+    vMain.link();
+}
+
+
+/**
+ *
+ * @param {EngineHarness} harness
+ */
+async function init(harness) {
+
+    const engine = harness.engine;
+
+    await makeConfig(engine).apply(engine);
+
+    await engine.graphics.loadEnvironmentMap(buildCubeURLs('data/textures/cubemaps/hip_miramar/32/', '.png'));
+
+    await harness.initialize();
+
+    main(engine);
+}
+
+init(engineHarness);

package/view/controller/controls/NativeListController.js

@@ -27,8 +27,8 @@ export class NativeListController extends View {
     /**
      * @template T
      * @param {List<T>} model
-     * @param {function} elementViewFactory
-     * @param {function} elementFactory
+     * @param {(T)=>View} elementViewFactory
+     * @param {()=>T} elementFactory
      * @param {string[]} [classList]
      * @param {function(List<T>, T)} [operationAdd] Allows user to supply a special operation for adding an element to the list
      * @param {function(List<T>, T)} [operationRemove] Allows user to supply a special operation for removing an element from the list
@@ -43,7 +43,7 @@ export class NativeListController extends View {
                 }) {
         super();
 
-        assert.isFunction(elementViewFactory,'elementViewFactory');
+        assert.isFunction(elementViewFactory, 'elementViewFactory');
 
         this.el = document.createElement('div');
 
@@ -55,6 +55,9 @@ export class NativeListController extends View {
             elementFactory(el) {
                 const elementView = elementViewFactory(el);
 
+                assert.defined(elementView, 'elementView');
+                assert.equal(elementView.isView, true, 'elementView.isView !== true');
+
                 const vWrapper = new EmptyView({ classList: ['element-wrapper'] });
 
                 elementView.addClass('wrapped-element');

package/engine/graphics/texture/sampler/debug/paintSamplerOnHTML.js

@@ -1,32 +0,0 @@
-import { Sampler2D } from "../Sampler2D.js";
-import { scaleSampler2D } from "../scaleSampler2D.js";
-import convertSampler2D2Canvas from "../Sampler2D2Canvas.js";
-import { typedArrayConstructorByInstance } from "../typedArrayConstructorByInstance.js";
-
-/**
- *
- * @param {Sampler2D} s
- * @param {number} x
- * @param {number} y
- * @param scale
- * @param offset
- * @param {number} resolution
- */
-export function paintSamplerOnHTML(s, x, y, scale, offset, resolution=256) {
-
-    const d = resolution;
-
-    const TA = typedArrayConstructorByInstance(s.data);
-
-    const target = new Sampler2D(new TA(d * d * s.itemSize), s.itemSize, d, d);
-
-    scaleSampler2D(s, target);
-
-    const c = convertSampler2D2Canvas(target, scale, offset);
-    c.style.zIndex = 1000;
-    c.style.position = "absolute";
-    c.style.left = `${x}px`;
-    c.style.top = `${y}px`;
-
-    document.body.appendChild(c);
-}