@woosh/meep-engine 2.39.11 → 2.39.12

package/editor/ecs/component/createFieldEditor.js

@@ -57,6 +57,8 @@ export function createFieldEditor(object, field, registry) {
         return null;
     }
 
+    vValue.addClass('field-value');
+
     const vResult = new EmptyView({
         classList: ['auto-field-editor']
     });

package/editor/ecs/component/editors/Sampler2DEditor.js

@@ -6,74 +6,169 @@ import { Sampler2D } from "../../../../engine/graphics/texture/sampler/Sampler2D
 import {
     typedArrayConstructorByInstance
 } from "../../../../engine/graphics/texture/sampler/typedArrayConstructorByInstance.js";
-import { typedArrayToDataType } from "../../../../core/collection/array/typedArrayToDataType.js";
-import { DataType } from "../../../../core/collection/table/DataType.js";
-import { min2 } from "../../../../core/math/min2.js";
-import { max2 } from "../../../../core/math/max2.js";
-import { isTypedArray } from "../../../../core/collection/array/typed/isTypedArray.js";
 import { FrameRunner } from "../../../../engine/graphics/FrameRunner.js";
+import canvas2Sampler2D from "../../../../engine/graphics/texture/Canvas2Sampler2D.js";
+import {
+    copy_Sampler2D_channel_data
+} from "../../../../engine/graphics/texture/sampler/copy_Sampler2D_channel_data.js";
+import { MouseEvents } from "../../../../engine/input/devices/events/MouseEvents.js";
+import { downloadSampler2DAsPNG } from "../../../../engine/graphics/texture/sampler/downloadSamplerAsPNG.js";
+import {
+    sampler2d_compute_texel_value_conversion_scale_to_uint8
+} from "../../../../engine/graphics/texture/sampler/sampler2d_compute_texel_value_conversion_scale_to_uint8.js";
+import EmptyView from "../../../../view/elements/EmptyView.js";
 
 const UPDATE_DELAY = 200;
 
-export class Sampler2DEditor extends TypeEditor {
-    build(parent, field, context) {
+/**
+ *
+ * @param {Sampler2D} sampler
+ * @param {HTMLCanvasElement} domElement
+ */
+function draw_sampler(sampler, domElement) {
+
+
+    let TypedArrayConstructor = typedArrayConstructorByInstance(sampler.data);
+
+    if (TypedArrayConstructor === Uint8Array) {
+        // use clamped array to avoid filtering artifacts
+        TypedArrayConstructor = Uint8ClampedArray;
+    }
+
+    const res = 32;
+    const result_sampler = new Sampler2D(new TypedArrayConstructor(sampler.itemSize * res * res), sampler.itemSize, res, res);
+
+    scaleSampler2D(sampler, result_sampler);
+
+
+    const { scale, offset } = sampler2d_compute_texel_value_conversion_scale_to_uint8(result_sampler);
+
+    sampler2D2Canvas(result_sampler, scale, offset, domElement);
+
+}
+
+/**
+ *
+ * @param {*} parent
+ * @param {HTMLCanvasElement} element
+ * @param {FieldDescriptor} field
+ */
+function enable_drop(parent, element, field) {
+    /**
+     *
+     * @param {DragEvent} ev
+     */
+    function handleDrop(ev) {
+        ev.preventDefault();
+
+        let processed = false;
 
         /**
-         * @type {Sampler2D}
+         *
+         * @param {File} file
          */
-        const sampler = field.adapter.read(parent, field.name);
+        function processFile(file) {
+            if (processed) {
+                return;
+            }
 
-        let last_version = -1;
-        let last_update_time = 0;
-        let last_update_duration = 0;
+            var img = new Image();
+            // URL @ Mozilla, webkitURL @ Chrome
+            img.src = (window.webkitURL ? webkitURL : URL).createObjectURL(file);
 
-        const view = new CanvasView();
-        view.css({
-            background: 'black'
-        });
+            // call ctx.drawImage when the image got loaded
+            img.onload = function () {
+                var canvas = document.createElement("canvas");
+                var ctx = canvas.getContext("2d");
 
-        function draw() {
-            const draw_start_time = performance.now();
+                const width = img.width;
+                const height = img.height;
 
-            let dataType;
+                canvas.style.width = `${width}px`;
+                canvas.style.height = `${height}px`;
 
-            if (isTypedArray(sampler.data)) {
-                dataType = typedArrayToDataType(sampler.data);
-            } else {
-                dataType = DataType.Float32;
-            }
+                canvas.width = width;
+                canvas.height = height;
 
-            let TypedArrayConstructor = typedArrayConstructorByInstance(sampler.data);
+                // ctx.drawImage(img, 0, 0);
+                ctx.drawImage(img, 0, 0, width, height, 0, 0, width, height); // stretch img to canvas size
 
-            if (TypedArrayConstructor === Uint8Array) {
-                // use clamped array to avoid filtering artifacts
-                TypedArrayConstructor = Uint8ClampedArray;
-            }
+                const file_data_sampler = canvas2Sampler2D(canvas);
+
+                /**
+                 * @type {Sampler2D}
+                 */
+                const sampler = field.adapter.read(parent, field.name);
+
+                sampler.resize(width, height, false);
 
-            const res = 32;
-            const result_sampler = new Sampler2D(new TypedArrayConstructor(sampler.itemSize * res * res), sampler.itemSize, res, res);
+                copy_Sampler2D_channel_data(file_data_sampler, sampler);
+            };
 
-            scaleSampler2D(sampler, result_sampler);
 
+            processed = true;
+        }
 
-            let min = 0, max = 0;
-            if (dataType === DataType.Float32) {
-                min = Infinity;
-                max = -Infinity;
-                for (let i = 0; i < result_sampler.itemSize; i++) {
+        if (ev.dataTransfer.items) {
+            // Use DataTransferItemList interface to access the file(s)
+            for (var i = 0; i < ev.dataTransfer.items.length; i++) {
+                // If dropped items aren't files, reject them
+                if (ev.dataTransfer.items[i].kind === 'file') {
+                    var file = ev.dataTransfer.items[i].getAsFile();
 
-                    min = min2(min, result_sampler.computeMin(i).value)
-                    max = max2(min, result_sampler.computeMax(i).value)
+                    processFile(file);
                 }
-            } else if (dataType === DataType.Uint8) {
-                min = 0;
-                max = 255;
             }
+        } else {
+            // Use DataTransfer interface to access the file(s)
+            for (var i = 0; i < ev.dataTransfer.files.length; i++) {
+                const file = ev.dataTransfer.files[i];
+
+                processFile(file);
+            }
+        }
+    }
+
+    function handleDragOver(ev) {
+
+        // Prevent default behavior (Prevent file from being opened)
+        ev.preventDefault();
+    }
+
+    element.addEventListener('dragover', handleDragOver);
+    element.addEventListener('drop', handleDrop);
+}
+
+export class Sampler2DEditor extends TypeEditor {
+
+    build(parent, field, context) {
+
+        /**
+         * @type {Sampler2D}
+         */
+        const sampler = field.adapter.read(parent, field.name);
+
+        let last_version = -1;
+        let last_update_time = 0;
+        let last_update_duration = 0;
+
+        const view_container = new EmptyView({
+            css:{
+                width: "min-content",
+                height:"min-content"
+            }
+        });
+
+        const canvas_view = new CanvasView();
+        canvas_view.css({
+            background: 'black',
+            position: 'relative',
+        });
 
-            const scale = 255 / (max - min);
-            const offset = min;
+        function draw() {
+            const draw_start_time = performance.now();
 
-            sampler2D2Canvas(result_sampler, scale, offset, view.el);
+            draw_sampler(sampler, canvas_view.el);
 
             last_version = sampler.version;
 
@@ -84,7 +179,7 @@ export class Sampler2DEditor extends TypeEditor {
         }
 
 
-        view.on.linked.add(try_update);
+        canvas_view.on.linked.add(try_update);
 
         function try_update() {
             if (sampler.version !== last_version) {
@@ -99,9 +194,28 @@ export class Sampler2DEditor extends TypeEditor {
 
         const frameRunner = new FrameRunner(try_update);
 
-        view.on.linked.add(frameRunner.startup, frameRunner);
-        view.on.unlinked.add(frameRunner.shutdown, frameRunner);
+        canvas_view.on.linked.add(frameRunner.startup, frameRunner);
+        canvas_view.on.unlinked.add(frameRunner.shutdown, frameRunner);
+
+        //drop target
+        const allow_drop = true;
+        if (allow_drop) {
+
+            enable_drop(parent, canvas_view.el, field);
+
+        }
+
+        const allow_download = true;
+        if (allow_download) {
+            canvas_view.el.addEventListener(MouseEvents.Click, () => {
+                downloadSampler2DAsPNG(sampler, field.name);
+            });
+            // add download marker
+            view_container.addClass('downloadable');
+        }
+
+        view_container.addChild(canvas_view);
 
-        return view;
+        return view_container;
     }
 }

package/editor/ecs/component/editors/three/TextureEditor.js

@@ -3,6 +3,12 @@ import { convertTexture2Sampler2D } from "../../../../../engine/graphics/texture
 import { Sampler2D } from "../../../../../engine/graphics/texture/sampler/Sampler2D.js";
 import { CanvasView } from "../../../../../view/elements/CanvasView.js";
 import sampler2D2Canvas from "../../../../../engine/graphics/texture/sampler/Sampler2D2Canvas.js";
+import { MouseEvents } from "../../../../../engine/input/devices/events/MouseEvents.js";
+import { downloadSampler2DAsPNG } from "../../../../../engine/graphics/texture/sampler/downloadSamplerAsPNG.js";
+import EmptyView from "../../../../../view/elements/EmptyView.js";
+import { FrameRunner } from "../../../../../engine/graphics/FrameRunner.js";
+
+const UPDATE_DELAY = 200;
 
 export class TextureEditor extends TypeEditor {
     inline = true;
@@ -10,7 +16,7 @@ export class TextureEditor extends TypeEditor {
     build(parent, field, registry) {
         const size = 32;
 
-        const texture = field.adapter.read(parent, field.name);
+        let texture = field.adapter.read(parent, field.name);
         let sampler;
         if (texture) {
 
@@ -21,12 +27,84 @@ export class TextureEditor extends TypeEditor {
             sampler.fill_channel(3, 255);
         }
 
+        const vContainer = new EmptyView({
+            css: {
+                width: "min-content",
+                height: "min-content"
+            }
+        });
+
         const canvasView = new CanvasView();
+        canvasView.css({
+            position: "relative",
+            background: 'black'
+        });
+        vContainer.addChild(canvasView);
 
         canvasView.size.set(sampler.width, sampler.height);
 
-        sampler2D2Canvas(sampler, 1, 0, canvasView.el);
 
-        return canvasView;
+        let last_version = -1;
+        let last_update_time = 0;
+        let last_update_duration = 0;
+
+        function draw() {
+            const draw_start_time = performance.now();
+
+            sampler = convertTexture2Sampler2D(texture, size, size);
+            sampler2D2Canvas(sampler, 1, 0, canvasView.el);
+
+            last_version = texture.version;
+
+            const draw_end_time = performance.now();
+            last_update_duration = draw_end_time - draw_start_time;
+
+            last_update_time = draw_end_time;
+        }
+
+
+        function try_update() {
+            const time_now = performance.now();
+
+            if ((time_now - last_update_time) < UPDATE_DELAY) {
+                return;
+            }
+
+            texture = field.adapter.read(parent, field.name);
+
+            if (texture === undefined || texture === null) {
+                sampler.fill(0);
+                return;
+            }
+
+            if (texture.version !== last_version) {
+                draw();
+            }
+        }
+
+        const frameRunner = new FrameRunner(try_update);
+
+        canvasView.on.linked.add(frameRunner.startup, frameRunner);
+        canvasView.on.unlinked.add(frameRunner.shutdown, frameRunner);
+
+
+        const allow_download = true;
+        if (allow_download) {
+            vContainer.el.addEventListener(MouseEvents.Click, () => {
+                const texture = field.adapter.read(parent, field.name);
+                if (texture === undefined || texture == null) {
+                    return;
+                }
+
+                const sampler = convertTexture2Sampler2D(texture);
+
+                downloadSampler2DAsPNG(sampler, field.name);
+            });
+            // add download marker
+            vContainer.addClass('downloadable');
+        }
+
+
+        return vContainer;
     }
 }

package/engine/ecs/terrain/ecs/Terrain.js

@@ -30,7 +30,6 @@ import { SplatMapping } from "./splat/SplatMapping.js";
 import { OffsetScaleTransform2D } from "./OffsetScaleTransform2D.js";
 import { GridTransformKind } from "./GridTransformKind.js";
 import { makeTerrainWorkerProxy } from "./makeTerrainWorkerProxy.js";
-import { MeepSettings } from "../../../MeepSettings.js";
 import { loadLegacyTerrainLayers } from "./layers/loadLegacyTerrainLayers.js";
 import { TerrainFlags } from "./TerrainFlags.js";
 import { IllegalStateException } from "../../../../core/fsm/exceptions/IllegalStateException.js";
@@ -798,8 +797,6 @@ class Terrain {
         //
         this.overlay.size.copy(this.size);
 
-        this.overlay.tileImage.set(MeepSettings.ecs.Terrain['tile-decal']);
-
         this.__tiles.totalSize.copy(this.size);
         this.__tiles.scale.set(this.gridScale, this.gridScale);
         this.__tiles.resolution.set(this.resolution);
@@ -960,12 +957,19 @@ class Terrain {
         this.layers.fromJSON(opt.layers);
         this.splat.fromJSON(opt.splat);
 
+        if (opt.overlayTileImage !== undefined) {
+
+            this.overlay.baseTileImage(opt.overlayTileImage);
+
+        }
+
 
         // debugSamplers(this);
         this.build(engine.assetManager);
     }
 
     toJSON() {
+
         const result = {
             size: this.size.toJSON(),
             scale: this.gridScale,
@@ -974,7 +978,8 @@ class Terrain {
             preview: this.preview.toJSON(),
             heights: this.samplerHeight.toJSON(),
             layers: this.layers.toJSON(),
-            splat: this.splat.toJSON()
+            splat: this.splat.toJSON(),
+            overlayTileImage: this.overlay.baseTileImage
         };
 
         return result;

package/engine/ecs/terrain/ecs/TerrainSystem.js

@@ -42,7 +42,6 @@ class TerrainSystem extends System {
         this.graphics = graphics;
 
         this.dependencies = [Terrain];
-        this.entityManager = null;
         this.assetManager = assetManager;
 
         this.gridScaleX = 1;

package/engine/ecs/terrain/overlay/TerrainOverlay.js

@@ -116,6 +116,26 @@ export class TerrainOverlay {
         });
     }
 
+    /**
+     *
+     * @returns {string}
+     */
+    get baseTileImage(){
+        return this.stack.length === 0 ? this.tileImage.getValue() : this.stack[0].tileImage
+    }
+
+    /**
+     *
+     * @param {string} v
+     */
+    set baseTileImage(v){
+        if (this.stack.length === 0) {
+            this.tileImage.set(v);
+        } else {
+            this.stack[0].tileImage = v;
+        }
+    }
+
     /**
      * @returns {HTMLCanvasElement}
      */

package/engine/graphics/ecs/path/testPathDisplaySystem.js

@@ -70,7 +70,7 @@ import { BasicMaterialDefinition } from "./tube/BasicMaterialDefinition.js";
 import '../../../../../../../css/game.scss';
 import { GizmoRenderingPlugin } from "../../render/gizmo/GizmoRenderingPlugin.js";
 import { PathNormalType } from "./tube/PathNormalType.js";
-import { Camera, ProjectionType } from "../camera/Camera.js";
+import { Camera } from "../camera/Camera.js";
 
 const engineHarness = new EngineHarness();
 

package/engine/graphics/ecs/path/tube/TubePathStyle.spec.js

@@ -0,0 +1,5 @@
+import { TubePathStyle } from "./TubePathStyle.js";
+
+test("constructor doesn't throw",()=>{
+    expect(()=>new TubePathStyle()).not.toThrow();
+});

package/engine/graphics/texture/sampler/Sampler2D2Canvas.js

@@ -12,9 +12,9 @@
  * @param {function(index:int, array:ArrayLike<number>, x:int, y:int)} [fillDD] allows you to supply mapping function, if none is given - one will be created from sampler using {@link Sampler2D#makeArrayFiller}
  * @returns {HTMLCanvasElement} canvas
  */
-function convertSampler2D2Canvas(sampler, scale, offset, canvas, fillDD) {
-    scale = scale || 255;
-    offset = offset || 0;
+function convertSampler2D2Canvas(sampler, scale=255, offset=0, canvas, fillDD) {
+    const source_data = sampler.data;
+
     //generate canvas
     if (canvas === undefined) {
         canvas = document.createElement("canvas");
@@ -39,11 +39,12 @@ function convertSampler2D2Canvas(sampler, scale, offset, canvas, fillDD) {
     const imageData = context.createImageData(width, height);
     const array = imageData.data;
     //
-    if (sampler.itemSize === 4 && offset === 0 && scale === 1) {
+    const source_channel_count = sampler.itemSize;
+    if (source_channel_count === 4 && offset === 0 && scale === 1) {
         // shortcut or straight forward case
-        array.set(sampler.data);
+        array.set(source_data);
     } else {
-        if (sampler.itemSize < 4) {
+        if (source_channel_count < 4) {
             //sampler lacks alpha channel, set alpha values to fully opaque
             const n = width * height * 4;
 
@@ -53,17 +54,44 @@ function convertSampler2D2Canvas(sampler, scale, offset, canvas, fillDD) {
 
         }
 
-        if (fillDD === undefined) {
-            fillDD = sampler.makeArrayFiller(scale, offset);
-        }
 
-        let index = 0;
-        for (let y = 0; y < height; y++) {
-            for (let x = 0; x < width; x++) {
-                fillDD(index, array, x, y);
-                index += 4;
+        if (source_channel_count === 1) {
+            let index = 0;
+            for (let y = 0; y < height; y++) {
+                for (let x = 0; x < width; x++) {
+                    const texel_address = (y * width + x);
+
+                    const source_value = source_data[texel_address];
+                    const transformed_value = Math.round((source_value + offset) * scale);
+
+                    // write identical RGB for grayscale image
+                    array[index + 0] = transformed_value;
+                    array[index + 1] = transformed_value;
+                    array[index + 2] = transformed_value;
+
+
+                    index += 4;
+                }
+            }
+        } else {
+
+            let index = 0;
+            for (let y = 0; y < height; y++) {
+                for (let x = 0; x < width; x++) {
+                    const texel_address = (y * width + x) * source_channel_count;
+
+                    for (let i = 0; i < source_channel_count; i++) {
+                        const source_value = source_data[texel_address + i];
+                        const transformed_value = Math.round((source_value + offset) * scale);
+                        array[index + i] = transformed_value;
+                    }
+
+
+                    index += 4;
+                }
             }
         }
+
     }
 
     context.putImageData(imageData, 0, 0);

package/engine/graphics/texture/sampler/convertSampler2D2DataURL.js

@@ -1,4 +1,7 @@
 import convertSampler2D2Canvas from "./Sampler2D2Canvas.js";
+import {
+    sampler2d_compute_texel_value_conversion_scale_to_uint8
+} from "./sampler2d_compute_texel_value_conversion_scale_to_uint8.js";
 
 /**
  *
@@ -11,7 +14,10 @@ export function convertSampler2D2DataURL(sampler) {
 
     var ctx = canvasElement.getContext("2d");
 
-    convertSampler2D2Canvas(sampler, 1, 0, canvasElement);
+
+    const { scale, offset } = sampler2d_compute_texel_value_conversion_scale_to_uint8(sampler);
+
+    convertSampler2D2Canvas(sampler, scale, offset, canvasElement);
 
     return ctx.canvas.toDataURL('image/png');
 

package/engine/graphics/texture/sampler/copy_Sampler2D_channel_data.js

@@ -63,4 +63,7 @@ export function copy_Sampler2D_channel_data(source, destination) {
     } else {
         throw new Error('Unsupported channel layout combination');
     }
+
+    // register data change
+    destination.version++;
 }

package/engine/graphics/texture/sampler/sampler2d_compute_texel_value_conversion_scale_to_uint8.js

@@ -0,0 +1,47 @@
+import { DataType } from "../../../../core/collection/table/DataType.js";
+import { min2 } from "../../../../core/math/min2.js";
+import { max2 } from "../../../../core/math/max2.js";
+import { isTypedArray } from "../../../../core/collection/array/typed/isTypedArray.js";
+import { typedArrayToDataType } from "../../../../core/collection/array/typedArrayToDataType.js";
+
+/**
+ *
+ * @param {Sampler2D} sampler
+ * @returns {{offset: number, scale: number}}
+ */
+export function sampler2d_compute_texel_value_conversion_scale_to_uint8(sampler) {
+
+    let dataType;
+
+    if (isTypedArray(sampler.data)) {
+        dataType = typedArrayToDataType(sampler.data);
+    } else {
+        // plain numeric array
+        dataType = DataType.Float32;
+    }
+
+    let min = 0, max = 0;
+
+    if (dataType === DataType.Uint8) {
+        min = 0;
+        max = 255;
+    } else {
+        // unknown input type, compute min and max
+        min = Infinity;
+        max = -Infinity;
+        for (let i = 0; i < sampler.itemSize; i++) {
+
+            min = min2(min, sampler.computeMin(i).value)
+            max = max2(min, sampler.computeMax(i).value)
+        }
+    }
+
+    const span = max - min;
+
+    const scale = span === 0 ? 0 : 255 / span;
+    const offset = min;
+
+    return {
+        scale, offset
+    };
+}

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.39.11",
+  "version": "2.39.12",
   "dependencies": {
     "gl-matrix": "3.4.3",
     "fast-levenshtein": "2.0.6",

package/view/View.js

@@ -26,7 +26,7 @@ function setElementTransform(domElement, position, scale, rotation) {
 
     const m3 = scratch_m3_0;
 
-    m3_cm_compose_transform(m3, position.x, position.y, scale.x, scale.y,0,0, rotation);
+    m3_cm_compose_transform(m3, position.x, position.y, scale.x, scale.y, 0, 0, rotation);
 
 
     /*
@@ -644,7 +644,7 @@ class View {
      * @param {string} name
      */
     addClass(name) {
-        assert.typeOf(name, 'string', 'name');
+        assert.isString(name, 'name');
 
         this.el.classList.add(name);
     }
@@ -660,7 +660,7 @@ class View {
         for (let i = 0; i < n; i++) {
             const name = names[i];
 
-            assert.typeOf(name, 'string', 'name');
+            assert.isString(name, 'name');
 
             classList.add(name);
         }