@woosh/meep-engine 2.43.1 → 2.43.4

package/core/process/task/util/randomCountTask.js

@@ -1,7 +1,7 @@
 import { seededRandom } from "../../../math/random/seededRandom.js";
 import { TaskSignal } from "../TaskSignal.js";
 import Task from "../Task.js";
-import { randomizeArrayElementOrder } from "../../../collection/ArrayUtils.js";
+import { randomizeArrayElementOrder } from "../../../collection/array/randomizeArrayElementOrder.js";
 
 /**
  *

package/editor/Editor.js

@@ -71,6 +71,8 @@ import { ObservedIntegerEditor } from "./ecs/component/editors/ObservedIntegerEd
 
 import '../../../../css/editor/EntityEditorView.scss';
 import '../../../../css/editor/EditorView.scss';
+import {ParameterTrackSet} from "../engine/graphics/particles/particular/engine/parameter/ParameterTrackSet.js";
+import {ParameterTrackSetEditor} from "./ecs/component/editors/ecs/ParameterTrackSetEditor.js";
 
 /**
  * @template T
@@ -369,6 +371,7 @@ function initialize_basic_registry(registry) {
     registry.set(Quaternion, new QuaternionEditor());
 
     registry.set(Sampler2D, new Sampler2DEditor());
+    registry.set(ParameterTrackSet, new ParameterTrackSetEditor());
 
     registry.set(HTMLElement, new HTMLElementEditor());
     registry.set(HTMLCanvasElement, new HTMLElementEditor());

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

@@ -2,6 +2,11 @@ import { TypeEditor } from "../../TypeEditor.js";
 import { CanvasView } from "../../../../../view/elements/CanvasView.js";
 import { plot_data } from "../../../../../engine/animation/curve/draw/plot_data.js";
 import Vector2 from "../../../../../core/geom/Vector2.js";
+import {ColorEditor} from "../ColorEditor.js";
+import {ColorPickerView} from "../../../../../view/elements/ColorPickerView.js";
+import {AutoCanvasView} from "../../../../view/ecs/components/common/AutoCanvasView.js";
+import EmptyView from "../../../../../view/elements/EmptyView.js";
+import {MouseEvents} from "../../../../../engine/input/devices/events/MouseEvents.js";
 
 export class ParameterLookupTableEditor extends TypeEditor {
     get schema() {
@@ -16,29 +21,208 @@ export class ParameterLookupTableEditor extends TypeEditor {
 
     build(parent, field,registry) {
 
-        const canvasView = new CanvasView();
-        canvasView.size.set(200, 100);
-        const ctx = canvasView.context2d;
-
-        const data = [];
-
         /**
          * @type {ParameterLookupTable}
          */
         const lut = field.adapter.read(parent, field.name);
+        const trackName = field.adapter.read(parent, "name");
 
-        const sample = [];
+        // if it is a track scale
+        if (trackName === "scale"){
+            const canvasView = new CanvasView();
+            canvasView.size.set(200, 100);
+            const ctx = canvasView.context2d;
+
+            const data = [];
+
+            const sample = [];
+            for (let i = 0; i < canvasView.size.x; i++) {
+                const f = i / (canvasView.size.x - 1);
+
+                lut.sample(f, sample);
+
+                data[i] = sample[0];
+            }
+
+            plot_data({ ctx, data, width: canvasView.size.x, height: canvasView.size.y, margin: new Vector2(4, 4) });
+
+            return canvasView;
+        } else if (trackName === "color"){
+            // if it is color track
+            const resultView = new EmptyView();
+            const canvasView = new CanvasView();
+            canvasView.css({borderColor: 'white', borderStyle: 'solid', borderWidth: '1px',});
+            canvasView.size.set(200, 70);
+
+            const ctx = canvasView.context2d;
+
+            const colorView = new EmptyView({tag: "input", attr: {type: "color"}, css: {padding: "0px", border: "0px"}});
+
+            resultView.addChild(canvasView);
+            resultView.addChild(colorView);
+
+            //canvas internal configuration, such as background
+            let config = {
+                tileSize: new Vector2(10, 10),
+                tileColor1: "rgb(255, 255, 255)",
+                tileColor2: "rgb(119,119,119)",
+                gradientBoxYRange: new Vector2(30, canvasView.size.y),
+            };
+
+            this.DrawBackground(canvasView, ctx, config);
+            this.DrawGradient(canvasView, lut, ctx, config);
+            let stops = this.DrawStops(canvasView, lut, ctx, colorView, config, 0);
+
+            canvasView.el.addEventListener(MouseEvents.Click, (e) => {
+                const rect = canvasView.el.getBoundingClientRect();
+                let x = e.clientX - rect.left,
+                    y = e.clientY - rect.top;
+                for (let i = 0; i < stops.length; i++) {
+                    if (stops[i].x <= x && stops[i].x + stops[i].width >= x &&
+                        stops[i].y <= y && stops[i].y + stops[i].height >= y){
+                        let s = [];
+                        lut.sample(lut.positions[i], s);
+
+                        this.convertRGB(s);
+
+                        colorView.el.value = this.RGBToHex(s[0], s[1], s[2]);
+                        canvasView.clear();
+
+                        this.DrawBackground(canvasView, ctx, config);
+                        this.DrawGradient(canvasView, lut, ctx, config);
+                        stops = this.DrawStops(canvasView, lut, ctx, colorView, config, i);
+
+                        break;
+                    }
+                }
+            });
+
+            return resultView;
+        }
+    }
+    /**
+     * converts rgb to hex string
+     * @param {Float} r
+     * @param {Float} g
+     * @param {Float} b
+     */
+    RGBToHex(r,g,b) {
+        r = r.toString(16);
+        g = g.toString(16);
+        b = b.toString(16);
+
+        if (r.length == 1)
+            r = "0" + r;
+        if (g.length == 1)
+            g = "0" + g;
+        if (b.length == 1)
+            b = "0" + b;
+
+        return "#" + r + g + b;
+    }
+
+    /**
+     * converts lut color sample to RGB
+     * @param {[]} sample
+     */
+    convertRGB(sample){
+        sample[0] = Math.floor(sample[0] * 255);
+        sample[1] = Math.floor(sample[1] * 255);
+        sample[2] = Math.floor(sample[2] * 255);
+    }
+    /**
+     * draws tiled background
+     * @param {CanvasView} canvasView
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {{}} config
+     */
+    DrawBackground(canvasView, ctx, config){
+        for (let i = 0; i < canvasView.size.x; i += config.tileSize.x) {
+            for (let j = config.gradientBoxYRange.x; j < config.gradientBoxYRange.y; j += config.tileSize.y){
+                ctx.fillStyle = (((i / config.tileSize.x) + (j / config.tileSize.y)) % 2 === 0 ? config.tileColor1 : config.tileColor2);
+                ctx.fillRect(i, j, config.tileSize.x, config.tileSize.y);
+            }
+        }
+    }
 
+    /**
+     * draws gradient
+     * @param {CanvasView} canvasView
+     * @param {ParameterLookupTable} lut
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {{}} config
+     */
+    DrawGradient(canvasView, lut, ctx, config){
+        const sample = [];
         for (let i = 0; i < canvasView.size.x; i++) {
             const f = i / (canvasView.size.x - 1);
-
             lut.sample(f, sample);
 
-            data[i] = sample[0];
+            this.convertRGB(sample);
+
+            ctx.fillStyle = `rgba(${sample[0]},${sample[1]},${sample[2]}, ${sample[3]})`;
+            ctx.fillRect(i, config.gradientBoxYRange.x, 1, config.gradientBoxYRange.y - config.gradientBoxYRange.x);
         }
+    }
+
+    /**
+     * draws gradient stops
+     * @param {CanvasView} canvasView
+     * @param {ParameterLookupTable} lut
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {EmptyView} colorView
+     * @param {{}} config
+     * @param {Integer} selectedInd
+     * @returns {*[]}
+     */
+    DrawStops(canvasView, lut, ctx, colorView, config, selectedInd){
+        const sample = [];
 
-        plot_data({ ctx, data, width: canvasView.size.x, height: canvasView.size.y, margin: new Vector2(4, 4) });
+        let stops = [];
+        for (let i = 0; i < lut.positions.length; i++){
+            const posX = lut.positions[i] * canvasView.size.x;
+            if (i === selectedInd){
+                lut.sample(lut.positions[i], sample);
 
-        return canvasView;
+                this.convertRGB(sample);
+
+                colorView.el.value = this.RGBToHex(sample[0], sample[1], sample[2]);
+            }
+            stops.push(this.DrawStop(ctx, config, posX, i=== selectedInd));
+        }
+        return stops;
+    }
+    /**
+     * draws gradient stop
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {Object} config
+     * @param {Integer} posX
+     * @param {Boolean} isSelected
+     */
+    DrawStop(ctx, config, posX, isSelected){
+        ctx.beginPath();
+        ctx.moveTo(posX, config.gradientBoxYRange.x + 7);
+        ctx.lineTo(posX - 5, config.gradientBoxYRange.x);
+        ctx.lineTo(posX - 5, config.gradientBoxYRange.x - 12);
+        ctx.lineTo(posX + 5, config.gradientBoxYRange.x - 12);
+        ctx.lineTo(posX + 5, config.gradientBoxYRange.x);
+        ctx.closePath();
+
+        ctx.lineWidth = (isSelected ? 4 : 2);
+        if (!isSelected)
+            ctx.strokeStyle = "rgb(114,114,114)";
+        else
+            ctx.strokeStyle = "rgb(0,23,255)";
+        ctx.stroke();
+        ctx.fillStyle = "rgb(255, 255, 255)";
+        ctx.fill();
+
+        return {
+            x: posX - 5,
+            y: config.gradientBoxYRange.x - 12,
+            width: 10,
+            height: 12,
+            posX: posX,
+        };
     }
 }

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

@@ -0,0 +1,16 @@
+import List from "../../../../../core/collection/list/List.js";
+import { ObjectEditor } from "../primitive/ObjectEditor.js";
+import {ParameterTrack} from "../../../../../engine/graphics/particles/particular/engine/parameter/ParameterTrack.js";
+
+export class ParameterTrackSetEditor extends ObjectEditor {
+    get schema() {
+        return {
+            properties: {
+                tracks: {
+                    type: List,
+                    type_parameters: [ParameterTrack],
+                },
+            }
+        };
+    }
+}

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

@@ -12,6 +12,7 @@ import {
     EmissionFromType
 } from "../../../../../engine/graphics/particles/particular/engine/emitter/EmissionFromType.js";
 import { DataType } from "../../../../../core/collection/table/DataType.js";
+import {ParameterTrackSetEditor} from "./ParameterTrackSetEditor.js";
 
 export class ParticleEmitterLayerEditor extends ObjectEditor {
     get schema() {
@@ -35,6 +36,9 @@ export class ParticleEmitterLayerEditor extends ObjectEditor {
                     type: Number,
                     numeric_type: DataType.Uint32
                 },
+                parameterTracks: {
+                    editor: new ParameterTrackSetEditor()
+                },
                 scaledSpriteHalfSize: {
                     transient: true
                 },

package/editor/ecs/component/editors/primitive/ArrayEditor.js

@@ -13,7 +13,7 @@ export class ArrayEditor extends TypeEditor {
     build(parent, field, registry) {
 
         /**
-         * @type {[]}
+         * @type {Array}
          */
         const array = field.adapter.read(parent, field.name);
 

package/editor/tools/v2/BlenderCameraOrientationGizmo.js

@@ -315,6 +315,12 @@ export class BlenderCameraOrientationGizmo extends CanvasView {
         this.__try_update();
 
         if (this.selectedAxis !== null) {
+
+            if (this.on.axisSelected.hasHandlers()) {
+                // axis selection will be handled, stop propagation
+                evt.stopPropagation();
+            }
+
             this.on.axisSelected.send2(
                 this.selectedAxis.axis,
                 this.selectedAxis.direction.clone()

package/editor/view/ecs/components/common/AutoCanvasView.js

@@ -1,54 +1,42 @@
-import View from "../../../../../view/View.js";
 import { DomSizeObserver } from "../../../../../view/util/DomSizeObserver.js";
+import { CanvasView } from "../../../../../view/elements/CanvasView.js";
 
 /**
+ * Automatically tracks size on the screen, including that computed from CSS and - re-renders content when size changes
  * @extends View
  */
-export class AutoCanvasView extends View {
+export class AutoCanvasView extends CanvasView {
     constructor({ classList = [] } = {}) {
         super();
 
-        this.el = document.createElement('canvas');
-        classList.forEach(c => this.addClass(c));
-
-        /**
-         *
-         * @type {CanvasRenderingContext2D}
-         */
-        this.context2d = this.el.getContext('2d');
+        this.addClasses(classList);
 
         const sizeObserver = new DomSizeObserver();
+        this.__sizeObserver = sizeObserver;
 
         const size = sizeObserver.dimensions.size;
-        size.onChanged.add(() => {
-            this.render();
-        });
-
-        sizeObserver.attach(this.el);
 
-        this.sizeObserver = sizeObserver;
+        // subscribe to visual dimension changes
+        size.onChanged.add(this.render, this);
 
-        this.on.linked.add(() => {
-            sizeObserver.start();
-            this.render();
-        });
-        this.on.unlinked.add(() => sizeObserver.stop());
+        sizeObserver.watchView(this);
+        this.on.linked.add(this.render,this);
     }
 
     render() {
-        const dimensions = this.sizeObserver.dimensions;
+        const dimensions = this.__sizeObserver.dimensions;
         const size = dimensions.size;
 
         const width = size.x;
         const height = size.y;
 
-        if (width < 0 || height < 0) {
+        if (width <= 0 || height <= 0) {
             //canvas too small
             return;
         }
 
-        this.el.width = width;
-        this.el.height = height;
+        // resize canvas as necessary
+        this.size.set(width, height);
 
         this.draw(this.context2d, width, height);
     }

package/engine/EngineHarness.js

@@ -236,6 +236,8 @@ export class EngineHarness {
      * @param {number} [cameraFieldOfView]
      * @param {number} [cameraFarDistance]
      * @param {boolean} [cameraController=true]
+     * @param {boolean} [cameraAutoClip]
+     * @param shadowmapResolution
      */
     static async buildBasics({
                                  engine,
@@ -252,11 +254,13 @@ export class EngineHarness {
                                  enableLights = true,
                                  cameraFieldOfView,
                                  cameraFarDistance,
-                                 cameraController = true
+                                 cameraController = true,
+                                 cameraAutoClip = false,
+                                 shadowmapResolution
                              }) {
 
         if (enableLights) {
-            EngineHarness.buildLights({ engine: engine });
+            EngineHarness.buildLights({ engine: engine, shadowmapResolution });
         }
 
         const camera = EngineHarness.buildCamera({
@@ -266,7 +270,8 @@ export class EngineHarness {
             yaw,
             distance,
             fieldOfView: cameraFieldOfView,
-            distanceMax: cameraFarDistance
+            distanceMax: cameraFarDistance,
+            autoClip: cameraAutoClip
         });
 
         const cameraEntity = camera.entity;
@@ -300,13 +305,14 @@ export class EngineHarness {
      *
      * @param {Engine} engine
      * @param {EntityComponentDataset} ecd
+     * @param shadowmapResolution
      */
-    static buildLights({ engine, ecd = engine.entityManager.dataset }) {
+    static buildLights({ engine, ecd = engine.entityManager.dataset, shadowmapResolution = 1024 }) {
         const em = engine.entityManager;
 
         if (em.getSystem(LightSystem) === null) {
             em.addSystem(new LightSystem(engine, {
-                shadowResolution: 1024
+                shadowResolution: shadowmapResolution
             }));
         }
 

package/engine/asset/AssetManager.d.ts

@@ -4,6 +4,10 @@ import {CrossOriginConfig} from "./CORS/CrossOriginConfig";
 import {AssetTransformer} from "./AssetTransformer";
 import Engine from "../Engine";
 
+interface PromiseOptions {
+    skip_queue: boolean
+}
+
 export class AssetManager {
     constructor(engine: Engine)
 
@@ -11,7 +15,7 @@ export class AssetManager {
 
     load_concurrency: number
 
-    promise<T>(path: string, type: string): Promise<Asset<T>>
+    promise<T>(path: string, type: string, options?: PromiseOptions): Promise<Asset<T>>
 
     remove(path: string, type: string): boolean
 

package/engine/asset/AssetManager.js

@@ -16,7 +16,7 @@ import { noop } from "../../core/function/Functions.js";
 import { Deque } from "../../core/collection/queue/Deque.js";
 import Task from "../../core/process/task/Task.js";
 import { TaskSignal } from "../../core/process/task/TaskSignal.js";
-import { AssetRequest } from "./AssetRequest.js";
+import { AssetRequest, AssetRequestFlags } from "./AssetRequest.js";
 import FastBinaryHeap from "../../core/collection/heap/FastBinaryHeap.js";
 
 /**
@@ -38,12 +38,18 @@ class PendingAsset {
      * @constructor
      */
     constructor(description) {
+        /**
+         *
+         * @type {AssetDescription}
+         */
         this.description = description;
+
         /**
          *
          * @type {AssetRequest[]}
          */
         this.requests = [];
+
         /**
          *
          * @type {BoundedValue}
@@ -297,9 +303,10 @@ export class AssetManager {
     /**
      * @param {String} path
      * @param {String} type
+     * @param {boolean} [skip_queue] if true will skip the queue and dispatch request immediately
      * @returns {Promise<Asset>}
      */
-    promise(path, type) {
+    promise(path, type, { skip_queue = false } = {}) {
         return new Promise((resolve, reject) => {
             this.get(path, type, resolve, reject);
         });
@@ -312,8 +319,9 @@ export class AssetManager {
      * @param {function(asset:Asset<T>)} callback
      * @param {function(*)} [failure]
      * @param {function(loaded:number, total:number)} [progress]
+     * @param {boolean} [skip_queue]
      */
-    get(path, type, callback, failure = console.error, progress = noop) {
+    get(path, type, callback, failure = console.error, progress = noop, skip_queue = false) {
         if (typeof path !== "string") {
             throw new Error("Path must be string. Path = " + JSON.stringify(path));
         }
@@ -327,6 +335,9 @@ export class AssetManager {
         } else {
             //create request object
             const assetRequest = new AssetRequest(callback, failure, progress);
+
+            assetRequest.writeFlag(AssetRequestFlags.SkipQueue, skip_queue);
+
             //submit request
             this.submitRequest(assetDescription, assetRequest);
         }
@@ -387,6 +398,25 @@ export class AssetManager {
         }
     }
 
+    /**
+     * Force load of the asset
+     * @param {PendingAsset} asset
+     * @private
+     */
+    __force_load(asset) {
+        // check if the asset is already being loaded
+        if (this.__pending_asset_active_load_set.has(asset)) {
+            return;
+        }
+
+        // remove from queue
+        this.__pending_asset_wait_queue.delete(asset);
+
+        // dispatch
+        this.__dispatch_pending_asset(asset);
+
+    }
+
     /**
      * Asset has been loaded successfully, failed, or aborted
      * @param {PendingAsset} pending_asset
@@ -584,28 +614,33 @@ export class AssetManager {
     submitRequest(assetDescription, request) {
         const requestMap = this.request_map;
 
+        let shouldSchedule = false;
         let pendingAsset = requestMap.get(assetDescription);
-        if (pendingAsset !== undefined) {
-            //already loading
-            pendingAsset.requests.push(request);
 
-            // update priority queue if necessary
-            this.__pending_asset_wait_queue.updateElementScore(pendingAsset);
+        if (pendingAsset === undefined) {
+            pendingAsset = new PendingAsset(assetDescription);
+            requestMap.set(assetDescription, pendingAsset);
 
-            return;
+            shouldSchedule = true;
         }
 
-        // not loading yet, lets create a load container and schedule it
-        pendingAsset = new PendingAsset(assetDescription);
+        pendingAsset.requests.push(request);
 
-        requestMap.set(assetDescription, pendingAsset);
+        if (shouldSchedule) {
+            // not loading yet, lets create a load container and schedule it
+            this.__schedule_load(pendingAsset);
+        } else {
+            // update priority queue if necessary
+            this.__pending_asset_wait_queue.updateElementScore(pendingAsset);
+        }
 
-        const requests = pendingAsset.requests;
-        requests.push(request);
 
-        this.__schedule_load(pendingAsset);
+        if (request.getFlag(AssetRequestFlags.SkipQueue)) {
+            this.__force_load(pendingAsset);
+        }
     }
 
+
     /**
      *
      * @param {string} type

package/engine/asset/AssetManager.spec.js

@@ -1,19 +1,25 @@
 import { Asset } from "./Asset.js";
 import { AssetManager } from "./AssetManager.js";
+import { AssetLoader } from "./loaders/AssetLoader.js";
+
+/**
+ *
+ * @return {Engine}
+ */
+function dummyEngine() {
+    return {};
+}
 
-function succeedingLoader(path, success, failure, progress) {
-    success(new Asset(
-        function () {
-            return 1;
-        },
-        0
-    ));
+class DummyLoader extends AssetLoader {
+    load(path, success, failure, progress) {
+        success(new Asset(() => 1));
+    }
 }
 
 test('successful get', () => {
-    const am = new AssetManager();
+    const am = new AssetManager(dummyEngine());
 
-    am.registerLoader('a', succeedingLoader);
+    am.registerLoader('a', new DummyLoader());
 
 
     return new Promise(function (resolve, reject) {
@@ -22,9 +28,9 @@ test('successful get', () => {
 });
 
 test('tryGet loaded resource', async () => {
-    const am = new AssetManager();
+    const am = new AssetManager(dummyEngine());
 
-    am.registerLoader('a', succeedingLoader);
+    am.registerLoader('a', new DummyLoader());
 
     await am.promise('bla', 'a');