@woosh/meep-engine 2.39.18 → 2.39.19

package/editor/tools/v2/BlenderCameraOrientationGizmo.js

@@ -0,0 +1,420 @@
+import { CanvasView } from "../../../view/elements/CanvasView.js";
+import Vector3 from "../../../core/geom/Vector3.js";
+import { compose_matrix4_array } from "../../../core/geom/3d/compose_matrix4_array.js";
+import { mat4 } from "gl-matrix";
+import { readPositionFromMouseEvent } from "../../../engine/input/devices/PointerDevice.js";
+import Vector2, { v2_distance } from "../../../core/geom/Vector2.js";
+import { Color } from "../../../core/color/Color.js";
+import { inverseLerp } from "../../../core/math/inverseLerp.js";
+import { clamp01 } from "../../../core/math/clamp01.js";
+import { lerp } from "../../../core/math/lerp.js";
+import Signal from "../../../core/events/signal/Signal.js";
+import Quaternion from "../../../core/geom/Quaternion.js";
+import { invertQuaternionOrientation } from "../../../engine/graphics/ecs/camera/InvertQuaternionOrientation.js";
+
+const scratch_color = new Color();
+const scratch_quat = new Quaternion();
+const scratch_m4 = new Float32Array(16);
+
+class DirectionStyle {
+    constructor() {
+        this.near = {
+            fill: new Color(1, 0, 0),
+            stroke_width: 0,
+            stroke_color: new Color(0, 0, 0)
+        };
+        this.far = {
+            fill: new Color(1, 0, 0),
+            stroke_width: 0,
+            stroke_color: new Color(0, 0, 0)
+        };
+    }
+
+    fromJSON({
+                 near_fill = '#FF0000',
+                 near_stroke_width = 0,
+                 near_stroke_color = '#000000',
+                 far_fill = '#FF0000',
+                 far_stroke_width = 0,
+                 far_stroke_color = '#000000'
+             }) {
+
+        this.near.fill.parse(near_fill);
+        this.near.stroke_width = near_stroke_width;
+        this.near.stroke_color.parse(near_stroke_color);
+
+        this.far.fill.parse(far_fill);
+        this.far.stroke_width = far_stroke_width;
+        this.far.stroke_color.parse(far_stroke_color);
+    }
+
+    static fromJSON(j) {
+        const r = new DirectionStyle();
+
+        r.fromJSON(j);
+
+        return r;
+    }
+}
+
+
+/**
+ * Modelled on https://github.com/jrj2211/three-orientation-gizmo/blob/master/src/OrientationGizmo.js
+ */
+export class BlenderCameraOrientationGizmo extends CanvasView {
+    /**
+     *
+     * @param {Quaternion} quaternion
+     */
+    constructor(quaternion = null) {
+        super();
+
+        /**
+         *
+         * @type {Quaternion}
+         */
+        this.orientation = quaternion;
+
+        this.options = {
+            size: 100,
+            padding: 8,
+            bubbleSizePrimary: 10,
+            bubbleSizeSecondary: 8,
+            showSecondary: true,
+            lineWidth: 2,
+            fontSize: "11px",
+            fontFamily: "arial",
+            fontWeight: "bold",
+            fontColor: "rgba(0,0,0,0.8)",
+            fontYAdjust: 1,
+            selectionFontColor: "#FFFFFF",
+            invertOrientation: true,
+            axisStyles: {
+                px: DirectionStyle.fromJSON({
+                    near_fill: "#FF3653",
+                    far_fill: "#9D3B4A"
+                }),
+                py: DirectionStyle.fromJSON({
+                    near_fill: "#8ADB00",
+                    far_fill: "#648C23"
+                }),
+                pz: DirectionStyle.fromJSON({
+                    near_fill: "#2C8FFF",
+                    far_fill: "#36679D"
+                }),
+                nx: DirectionStyle.fromJSON({
+                    near_stroke_color: "#FF3653",
+                    near_stroke_width: 1,
+                    near_fill: "#6E3D44",
+                    far_stroke_color: "#9D3B4A",
+                    far_stroke_width: 1,
+                    far_fill: 'rgba(0,0,0,0)'
+                }),
+                ny: DirectionStyle.fromJSON({
+                    near_stroke_color: "#8ADB00",
+                    near_stroke_width: 1,
+                    near_fill: "#526532",
+                    far_stroke_color: "#648C23",
+                    far_stroke_width: 1,
+                    far_fill: 'rgba(0,0,0,0)'
+                }),
+                nz: DirectionStyle.fromJSON({
+                    near_stroke_color: "#2C8FFF",
+                    near_stroke_width: 1,
+                    near_fill: "#3B536E",
+                    far_stroke_color: "#36679D",
+                    far_stroke_width: 1,
+                    far_fill: 'rgba(0,0,0,0)'
+                })
+            }
+        };
+
+        // Generate list of axes
+        this.bubbles = [
+            {
+                axis: "x",
+                direction: new Vector3(1, 0, 0),
+                size: this.options.bubbleSizePrimary,
+                style: this.options.axisStyles.px,
+                line: this.options.lineWidth,
+                label: "X",
+                primary: true
+            },
+            {
+                axis: "y",
+                direction: new Vector3(0, 1, 0),
+                size: this.options.bubbleSizePrimary,
+                style: this.options.axisStyles.py,
+                line: this.options.lineWidth,
+                label: "Y",
+                primary: true
+            },
+            {
+                axis: "z",
+                direction: new Vector3(0, 0, 1),
+                size: this.options.bubbleSizePrimary,
+                style: this.options.axisStyles.pz,
+                line: this.options.lineWidth,
+                label: "Z",
+                primary: true
+            },
+            {
+                axis: "-x",
+                direction: new Vector3(-1, 0, 0),
+                size: this.options.bubbleSizeSecondary,
+                style: this.options.axisStyles.nx,
+                label: "-X",
+                labelHideUnselected: true,
+                primary: false
+            },
+            {
+                axis: "-y",
+                direction: new Vector3(0, -1, 0),
+                size: this.options.bubbleSizeSecondary,
+                style: this.options.axisStyles.ny,
+                label: "-Y",
+                labelHideUnselected: true,
+                primary: false
+            },
+            {
+                axis: "-z",
+                direction: new Vector3(0, 0, -1),
+                size: this.options.bubbleSizeSecondary,
+                style: this.options.axisStyles.nz,
+                label: "-Y",
+                labelHideUnselected: true,
+                primary: false
+            },
+        ];
+
+        /**
+         *
+         * @type {Vector3|null}
+         */
+        this.mouse = null;
+
+        this.center = new Vector3(this.options.size / 2, this.options.size / 2, 0);
+        this.selectedAxis = null;
+
+        this.size.setScalar(this.options.size);
+
+        this.onMouseMove = this.onMouseMove.bind(this);
+        this.onMouseOut = this.onMouseOut.bind(this);
+        this.onMouseClick = this.onMouseClick.bind(this);
+
+        /**
+         *
+         * Invoked when axis is clicked
+         * @type {Signal<string,Vector3>}
+         */
+        this.on.axisSelected = new Signal();
+    }
+
+    link() {
+        super.link();
+
+        const el = this.el;
+        el.addEventListener('mousemove', this.onMouseMove, false);
+        el.addEventListener('mouseout', this.onMouseOut, false);
+        el.addEventListener('click', this.onMouseClick, false);
+    }
+
+    unlink() {
+        const el = this.el;
+        el.removeEventListener('mousemove', this.onMouseMove, false);
+        el.removeEventListener('mouseout', this.onMouseOut, false);
+        el.removeEventListener('click', this.onMouseClick, false);
+
+        super.unlink();
+    }
+
+    /**
+     *
+     * @param {MouseEvent} evt
+     */
+    onMouseMove(evt) {
+        const v2 = new Vector2();
+        readPositionFromMouseEvent(v2, evt);
+
+        this.mouse = new Vector3(v2.x, v2.y, 0);
+    }
+
+    /**
+     *
+     * @param {MouseEvent} evt
+     */
+    onMouseOut(evt) {
+        this.mouse = null;
+    }
+
+    /**
+     *
+     * @param {MouseEvent} evt
+     */
+    onMouseClick(evt) {
+        if (this.selectedAxis !== null) {
+            this.on.axisSelected.send2(
+                this.selectedAxis.axis,
+                this.selectedAxis.direction.clone()
+            );
+        }
+    }
+
+    drawCircle(p, radius = 10, fill_color = "#FF0000", stroke_width = 0, stroke_color = "#FFFFFF") {
+        const ctx = this.context2d;
+
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, radius, 0, 2 * Math.PI, false);
+        ctx.fillStyle = fill_color;
+        ctx.fill();
+
+        if (stroke_width > 0) {
+            ctx.lineWidth = stroke_width;
+            ctx.strokeStyle = stroke_color;
+            ctx.stroke();
+        }
+
+        ctx.closePath();
+    }
+
+    drawLine(p1, p2, width = 1, color = "#FF0000") {
+        const ctx = this.context2d;
+
+        ctx.beginPath();
+        ctx.moveTo(p1.x, p1.y);
+        ctx.lineTo(p2.x, p2.y);
+        ctx.lineWidth = width;
+        ctx.strokeStyle = color;
+        ctx.stroke();
+        ctx.closePath();
+    }
+
+    update() {
+        this.clear();
+
+        // Calculate the rotation matrix from the camera
+        const rotation_matrix = scratch_m4;
+        let rotation = this.orientation;
+
+        if (rotation === null) {
+            // not connected
+            return;
+        }
+
+        if (this.options.invertOrientation) {
+            const q = scratch_quat;
+
+            invertQuaternionOrientation(q, rotation);
+
+            rotation = q;
+        }
+
+        compose_matrix4_array(rotation_matrix, Vector3.zero, rotation, Vector3.one);
+        mat4.invert(rotation_matrix, rotation_matrix);
+
+        for (let bubble of this.bubbles) {
+            const direction = bubble.direction.clone();
+            direction.applyMatrix4(rotation_matrix);
+
+            bubble.position = this.getBubblePosition(direction);
+        }
+
+        // Generate a list of layers to draw
+        const layers = [];
+        for (let axis in this.bubbles) {
+            // Check if the name starts with a negative and dont add it to the layer list if secondary axis is turned off
+            if (this.options.showSecondary === true || axis[0] !== "-") {
+                layers.push(this.bubbles[axis]);
+            }
+        }
+
+        // Sort the layers where the +Z position is last so its drawn on top of anything below it
+        layers.sort((a, b) => (a.position.z > b.position.z) ? 1 : -1);
+
+        // If the mouse is over the gizmo, find the closest axis and highlight it
+        this.selectedAxis = null;
+
+        if (this.mouse) {
+            let closestDist = Infinity;
+            let closestZ = -Infinity;
+
+            // Loop through each layer
+            for (let bubble of layers) {
+                const distance = v2_distance(this.mouse.x, this.mouse.y, bubble.position.x, bubble.position.y);
+
+                // Only select the axis if its closer to the mouse than the previous or if its within its bubble circle
+                if (
+                    distance < closestDist
+                    && closestZ < bubble.position.z
+                    && distance <= bubble.size
+                ) {
+
+                    closestDist = distance;
+                    closestZ = bubble.position.z;
+                    this.selectedAxis = bubble;
+
+                }
+            }
+        }
+
+        // Draw the layers
+        this.drawLayers(layers);
+    }
+
+    /**
+     *
+     * @param {{style:DirectionStyle, position:Vector3, size:number,line:boolean, label?:string,labelHideUnselected?:boolean}[]} layers
+     */
+    drawLayers(layers) {
+        // For each layer, draw the bubble
+        for (let bubble of layers) {
+
+            // Find the color
+            const is_selected = this.selectedAxis === bubble;
+
+            const closeness = clamp01(inverseLerp(-1, 0.8, bubble.position.z));
+
+            const style = bubble.style;
+
+            scratch_color.lerpColors(style.far.fill, style.near.fill, closeness);
+            const fill_color = scratch_color.toCssRGBAString();
+
+            scratch_color.lerpColors(style.far.stroke_color, style.near.stroke_color, closeness);
+            const stroke_color = scratch_color.toCssRGBAString();
+
+            const stroke_width = lerp(style.far.stroke_width, style.near.stroke_width, closeness);
+
+            // Draw the circle for the bubbble
+            this.drawCircle(bubble.position, bubble.size, fill_color, stroke_width, stroke_color);
+
+            // Draw the line that connects it to the center if enabled
+            if (bubble.line) {
+                this.drawLine(this.center, bubble.position, bubble.line, fill_color);
+            }
+
+            // Write the axis label (X,Y,Z) if provided
+            if (bubble.label && (is_selected || (bubble.labelHideUnselected !== true))) {
+                const ctx = this.context2d;
+
+                ctx.font = [this.options.fontWeight, this.options.fontSize, this.options.fontFamily].join(" ");
+                ctx.fillStyle = is_selected ? this.options.selectionFontColor : this.options.fontColor;
+                ctx.textBaseline = 'middle';
+                ctx.textAlign = 'center';
+                ctx.fillText(bubble.label, bubble.position.x, bubble.position.y + this.options.fontYAdjust);
+            }
+        }
+    }
+
+    /**
+     *
+     * @param {Vector3} position
+     * @returns {Vector3}
+     */
+    getBubblePosition(position) {
+        return new Vector3(
+            (position.x * (this.center.x - (this.options.bubbleSizePrimary / 2) - this.options.padding)) + this.center.x,
+            this.center.y - (position.y * (this.center.y - (this.options.bubbleSizePrimary / 2) - this.options.padding)),
+            position.z
+        );
+    }
+}

package/editor/tools/v2/TransformControls.d.ts

@@ -3,7 +3,7 @@ import {EntityComponentDataset} from "../../../engine/ecs/EntityComponentDataset
 import {EntityNode} from "../../../engine/ecs/parent/EntityNode";
 
 export class TransformControls extends EntityNode {
-    constructor(camera: PerspectiveCamera | OrthographicCamera, domElement: HTMLElement)
+    constructor(camera: PerspectiveCamera | OrthographicCamera, domElement: HTMLElement, autoUpdate?: boolean)
 
     build(ecd: EntityComponentDataset): void
 
@@ -12,4 +12,9 @@ export class TransformControls extends EntityNode {
     attach(entity: number): void
 
     detach(): void
+
+    /**
+     * Can be triggered manually if `autoUpdate` was not set in the constructor
+     */
+    update(): void
 }

package/editor/view/EditorView.js

@@ -428,8 +428,8 @@ class EditorView extends View {
             this.toolBar.size.set(this.gameView.size.x, 36);
             this.toolBar.position.set(this.gameView.position.x + 5, this.gameView.position.y + this.gameView.size.y - (this.toolBar.size.y + 5));
 
-            this.processBar.size.set(this.gameView.size.x, 36);
-            this.processBar.position.set(this.toolBar.position.x, 5);
+            // this.processBar.size.set(this.gameView.size.x, 36);
+            // this.processBar.position.set(this.toolBar.position.x, 5);
 
             this.meshLibraryView.position.set(this.gameView.position.x + this.gameView.size.x - (this.meshLibraryView.size.x + 5), 5);
         }

package/engine/graphics/ecs/camera/Camera.js

@@ -12,6 +12,7 @@ import { computePointDistanceToPlane } from "../../../../core/geom/Plane.js";
 import { unprojectPoint } from "./unprojectPoint.js";
 import Vector3 from "../../../../core/geom/Vector3.js";
 import { frustum_from_camera } from "./frustum_from_camera.js";
+import { invertQuaternionOrientation } from "./InvertQuaternionOrientation.js";
 
 /**
  *
@@ -75,6 +76,15 @@ export class Camera {
         this.__clip_near = 0.1;
     }
 
+    /**
+     *
+     * @param {Quaternion} output
+     * @param {Quaternion} input
+     */
+    getReciprocalRotation(output, input) {
+        invertQuaternionOrientation(output, input);
+    }
+
     get clip_far() {
         return this.__clip_far;
     }
@@ -200,7 +210,7 @@ export class Camera {
             source.copy(scratch_v3_1);
             direction.copy(scratch_v3_0);
 
-        }  else {
+        } else {
             throw new Error('Unsupported camera type');
         }
     }

package/engine/graphics/ecs/camera/CameraSystem.js

@@ -6,20 +6,15 @@
 import { System } from '../../../ecs/System.js';
 import { Camera } from './Camera.js';
 import { Transform } from '../../../ecs/transform/Transform.js';
-import { Frustum as ThreeFrustum, Matrix4, } from 'three';
+import { Frustum as ThreeFrustum, } from 'three';
 import { assert } from "../../../../core/assert.js";
 import { SignalBinding } from "../../../../core/events/signal/SignalBinding.js";
-import Vector3 from "../../../../core/geom/Vector3.js";
 import { set_camera_aspect_ratio } from "./set_camera_aspect_ratio.js";
 import { build_three_camera_object } from "./build_three_camera_object.js";
 import { update_camera_transform } from "./update_camera_transform.js";
 import { auto_set_camera_clipping_planes } from "./auto_set_camera_clipping_planes.js";
 import { frustum_from_camera } from "./frustum_from_camera.js";
-
-const m4_scratch = new Matrix4();
-
-const v3_scratch_0 = new Vector3();
-const v3_scratch_1 = new Vector3();
+import { invertQuaternionOrientation } from "./InvertQuaternionOrientation.js";
 
 export class CameraSystem extends System {
     /**
@@ -114,22 +109,9 @@ export class CameraSystem extends System {
             See: https://github.com/mrdoob/three.js/blob/412b99a7f26e117ea97f40eb53d010ab81aa3279/src/core/Object3D.js#L282
              */
 
-            // get forward and up vectors
-
-
-            const forward = v3_scratch_0;
-            const up = v3_scratch_1;
-
-            forward.copy(Vector3.forward);
-            up.copy(Vector3.up);
-
-            forward.applyQuaternion(rotation);
-            up.applyQuaternion(rotation);
-
-            m4_scratch.lookAt(Vector3.zero, forward, up);
+            invertQuaternionOrientation(camera.object.quaternion, rotation);
 
-            camera.object.rotation.setFromRotationMatrix(m4_scratch);
-            camera.object.quaternion.setFromRotationMatrix(m4_scratch);
+            camera.object.rotation.setFromQuaternion(camera.object.quaternion);
 
             // rotation.__setThreeEuler(camera.object.rotation); // seems unnecessary, based on Object3D.lookAt implementation
             // camera.object.quaternion.set(rotation.x, rotation.y, rotation.z, rotation.w);

package/engine/graphics/ecs/camera/InvertQuaternionOrientation.js

@@ -0,0 +1,26 @@
+import Vector3 from "../../../../core/geom/Vector3.js";
+import { Matrix4 } from "three";
+
+const m4_scratch = new Matrix4();
+const v3_scratch_0 = new Vector3();
+const v3_scratch_1 = new Vector3();
+
+/**
+ *
+ * @param {Quaternion} output
+ * @param {Quaternion} input
+ */
+export function invertQuaternionOrientation(output, input) {
+    const forward = v3_scratch_0;
+    const up = v3_scratch_1;
+
+    forward.copy(Vector3.forward);
+    up.copy(Vector3.up);
+
+    forward.applyQuaternion(input);
+    up.applyQuaternion(input);
+
+    m4_scratch.lookAt(Vector3.zero, forward, up);
+
+    output.setFromRotationMatrix(m4_scratch);
+}

package/engine/input/devices/PointerDevice.js

@@ -306,7 +306,7 @@ function observeDrag(up, down, move, dragStart, dragEnd, drag) {
  * @param {MouseEvent} event
  * @param {Element} source
  */
-function readPositionFromMouseEvent(result, event, source = event.target) {
+export function readPositionFromMouseEvent(result, event, source = event.target) {
     let x = event.clientX;
     let y = event.clientY;
 

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

package/view/SVG.js

@@ -2,6 +2,7 @@
  * Created by Alex on 13/12/2016.
  */
 
+export const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 
 /**
  *
@@ -111,7 +112,7 @@ function svgArc2(r0, r1, a0, b0, a1, b1) {
  * @returns {Element}
  */
 function createSVGElement(tag) {
-    return document.createElementNS("http://www.w3.org/2000/svg", tag);
+    return document.createElementNS(SVG_NAMESPACE, tag);
 }
 
 export default {

package/view/View.d.ts

@@ -1,4 +1,10 @@
 import Vector2 from "../core/geom/Vector2";
+import Signal from "../core/events/signal/Signal";
+
+export interface IViewSignals {
+    readonly linked: Signal
+    readonly unlinked: Signal
+}
 
 export default class View<T extends Element = HTMLElement> {
     size: Vector2
@@ -6,6 +12,8 @@ export default class View<T extends Element = HTMLElement> {
 
     el: T
 
+    readonly on: IViewSignals
+
     public link(): void
 
     public unlink(): void

package/view/elements/EmptyView.js

@@ -3,32 +3,38 @@
  */
 
 import View from "../View.js";
-import dom from "../DOM.js";
 
 class EmptyView extends View {
     /**
-     *
-     * @param options
+     * @param {string[]} [classList]
+     * @param {Element} [el]
+     * @param {string} [tag]
+     * @param {string} [tagNamespace]
+     * @param {Object<string>} [css]
+     * @param {Object<string>} [attr]
      * @extends {View}
      * @constructor
      */
-    constructor({ classList = [], tag = 'div', css } = {}) {
+    constructor({ classList = [], el, tag = 'div', tagNamespace = undefined, css, attr } = {}) {
         super();
 
-        this.dRoot = dom(tag);
-
-        const elClassList = this.dRoot.el.classList;
-
-        for (let i = 0, l = classList.length; i < l; i++) {
-            const className = classList[i];
-            elClassList.add(className);
+        if (el !== undefined) {
+            this.el = el;
+        } else if (tagNamespace !== undefined) {
+            this.el = document.createElementNS(tagNamespace, tag);
+        } else {
+            this.el = document.createElement(tag);
         }
 
-        this.el = this.dRoot.el;
+        this.addClasses(classList);
 
         if (css !== undefined) {
             this.css(css);
         }
+
+        if (attr !== undefined) {
+            this.attr(attr);
+        }
     }
 
     /**

package/view/elements/progress/SmoothProgressBar.js

@@ -17,6 +17,15 @@ function makeTextAbsolute(value, max, process) {
 }
 
 class ProgressBarView extends View {
+    /**
+     *
+     * @param {number[]|BoundedValue} model
+     * @param classList
+     * @param displayLabel
+     * @param displayLabelType
+     * @param displayTipMarker
+     * @param process
+     */
     constructor(model, {
         classList = [],
         displayLabel = false,