@woosh/meep-engine 2.33.60 → 2.33.64

package/engine/ecs/parent/EntityNode.js

@@ -0,0 +1,284 @@
+import { ParentEntity } from "./ParentEntity.js";
+import EntityBuilder from "../EntityBuilder.js";
+import { array_remove_first } from "../../../core/collection/array/array_remove_first.js";
+import { assert } from "../../../core/assert.js";
+import { array_push_if_unique } from "../../../core/collection/array/array_push_if_unique.js";
+import { Attachment } from "../attachment/Attachment.js";
+import { AttachmentSockets } from "../sockets/AttachmentSockets.js";
+import { AttachmentSocket } from "../sockets/AttachmentSocket.js";
+import { Transform } from "../transform/Transform.js";
+
+export class EntityNode {
+    /**
+     *
+     * @param {EntityBuilder} [entity] optional entity to be wrapped
+     */
+    constructor(entity = new EntityBuilder()) {
+        /**
+         *
+         * @type {EntityNode|null}
+         * @private
+         */
+        this.__parent = null;
+        /**
+         *
+         * @type {EntityBuilder}
+         * @private
+         */
+        this.__entity = entity;
+        /**
+         *
+         * @type {EntityNode[]}
+         * @private
+         */
+        this.__children = [];
+
+        /**
+         *
+         * @type {Transform}
+         * @private
+         */
+        this.__transform = new Transform();
+    }
+
+    /**
+     *
+     * @private
+     */
+    __transform_sync_down() {
+
+        if (this.__parent === null) {
+            const t = this.__entity.getComponent(Transform);
+            if (t !== null) {
+                t.copy(this.__transform);
+            }
+        } else {
+            this.__safe_get_attachment().transform.copy(this.__transform);
+        }
+
+    }
+
+    /**
+     *
+     * @param {*} components
+     * @return {EntityNode}
+     */
+    static fromComponents(...components) {
+        const node = new EntityNode();
+
+        for (let i = 0; i < components.length; i++) {
+            const component = components[i];
+
+            node.entity.add(component);
+        }
+
+        return node;
+    }
+
+    /**
+     *
+     * @return {Attachment}
+     * @private
+     */
+    __safe_get_attachment() {
+        let attachment = this.__entity.getComponent(Attachment);
+
+        if (attachment === null) {
+            attachment = new Attachment();
+            attachment.socket = "root";
+            attachment.immediate = true;
+
+            this.__entity.add(attachment);
+        }
+
+        return attachment;
+    }
+
+    /**
+     * @returns {Transform}
+     */
+    get transform() {
+        return this.__transform;
+    }
+
+    /**
+     *
+     * @return {EntityNode|null}
+     */
+    get parent() {
+        return this.__parent;
+    }
+
+    /**
+     *
+     * @param {EntityNode|null} node
+     */
+    set parent(node) {
+        // check if entity is built
+        if (this.__entity.isBuilt) {
+            // live re-wiring
+            let parent_entity = this.__entity.removeComponent(ParentEntity);
+            let attachment = this.__entity.removeComponent(Attachment);
+
+            if (node !== null) {
+
+                // handle component ParentEntity
+
+                if (parent_entity === null) {
+                    parent_entity = new ParentEntity();
+                }
+
+                const parent_entity_builder = node.entity;
+
+                if (!parent_entity_builder.isBuilt) {
+                    throw new Error('Parent entity is not built');
+                }
+
+                const parent_entity_id = parent_entity_builder.entity;
+                parent_entity.entity = parent_entity_id;
+
+                // add component back
+                this.__entity.add(parent_entity);
+
+
+                // handle component Attachment
+                if (attachment === null) {
+                    attachment = this.__safe_get_attachment();
+                }
+
+                attachment.parent = parent_entity_id;
+            }
+        }
+
+        this.__parent = node;
+    }
+
+    get entity() {
+        return this.__entity;
+    }
+
+    /**
+     *
+     * @param {EntityNode} node
+     * @returns {boolean}
+     */
+    addChild(node) {
+        const added = array_push_if_unique(this.__children, node);
+
+        if (added) {
+            if (node.parent !== null) {
+                // has a parent already, detach
+                node.parent.removeChild(node);
+            }
+
+            node.parent = this;
+        }
+
+        return added;
+    }
+
+    /**
+     *
+     * @param {EntityNode} node
+     * @returns {boolean}
+     */
+    removeChild(node) {
+        const removed = array_remove_first(this.__children, node);
+
+        if (removed) {
+            assert.equal(node.parent, this, 'node is a child, but parent property points to something else instead of this node');
+
+            node.parent = null;
+        }
+
+        return removed;
+    }
+
+    /**
+     *
+     * @param {EntityComponentDataset} ecd
+     */
+    build(ecd) {
+
+        // assume that parent is built
+        const parent = this.__parent;
+
+        if (parent !== null) {
+            /**
+             *
+             * @type {ParentEntity}
+             */
+            let parent_entity = this.__entity.getComponent(ParentEntity);
+            if (parent_entity === null) {
+                parent_entity = new ParentEntity();
+                this.__entity.add(parent_entity);
+            }
+
+            const parent_entity_builder = parent.__entity;
+
+            if (!parent_entity_builder.isBuilt) {
+                throw new Error('Parent entity is not built');
+            }
+
+            const parent_entity_id = parent_entity_builder.entity;
+            parent_entity.entity = parent_entity_id;
+
+
+            const attachment = this.__safe_get_attachment();
+
+            attachment.parent = parent_entity_id;
+        }
+
+        // ensure "root" socket exists for transform parenting
+        /**
+         *
+         * @type {AttachmentSockets}
+         */
+        let sockets = this.__entity.getComponent(AttachmentSockets);
+        if (sockets === null) {
+            sockets = new AttachmentSockets();
+            this.__entity.add(sockets);
+        }
+
+        if (sockets.get("root") === undefined) {
+            const socket = new AttachmentSocket();
+            socket.id = "root";
+
+            sockets.add(socket);
+        }
+
+        this.__transform_sync_down();
+        this.__transform.position.onChanged.add(this.__transform_sync_down, this);
+        this.__transform.scale.onChanged.add(this.__transform_sync_down, this);
+        this.__transform.rotation.onChanged.add(this.__transform_sync_down, this);
+
+        this.__entity.build(ecd);
+
+        // build children
+        const children = this.__children;
+        const child_count = children.length;
+        for (let i = 0; i < child_count; i++) {
+            const child = children[i];
+
+            child.build(ecd);
+        }
+    }
+
+    destroy() {
+        this.__transform.position.onChanged.remove(this.__transform_sync_down, this);
+        this.__transform.scale.onChanged.remove(this.__transform_sync_down, this);
+        this.__transform.rotation.onChanged.remove(this.__transform_sync_down, this);
+
+        // destroy children first
+        const children = this.__children;
+        const child_count = children.length;
+        for (let i = 0; i < child_count; i++) {
+            const child = children[i];
+
+            child.destroy();
+        }
+
+        // then main entity
+        this.__entity.destroy();
+    }
+}

package/engine/ecs/parent/FaceEditor.js

@@ -0,0 +1,137 @@
+import { SimpleStateMachineDescription } from "../../../core/fsm/simple/SimpleStateMachineDescription.js";
+import { SimpleStateMachine } from "../../../core/fsm/simple/SimpleStateMachine.js";
+import Vector3 from "../../../core/geom/Vector3.js";
+import { SurfacePoint3 } from "../../../core/geom/3d/SurfacePoint3.js";
+
+const smd = new SimpleStateMachineDescription();
+
+export const STATE_INITIAL = smd.createState();
+export const STATE_HOVER = smd.createState();
+export const STATE_EDIT = smd.createState();
+
+smd.createEdge(STATE_INITIAL, STATE_HOVER);
+smd.createEdge(STATE_HOVER, STATE_EDIT);
+smd.createEdge(STATE_HOVER, STATE_INITIAL);
+smd.createEdge(STATE_EDIT, STATE_HOVER);
+
+
+export class FaceEditor {
+    constructor() {
+        /**
+         *
+         * @type {ShadedGeometry|null}
+         * @private
+         */
+        this.__mesh = null;
+
+        /**
+         *
+         * @type {EntityComponentDataset|null}
+         * @private
+         */
+        this.__ecd = null;
+
+        /**
+         *
+         * @type {number}
+         * @private
+         */
+        this.__entity = -1;
+
+        /**
+         *
+         * @type {Vector3}
+         * @private
+         */
+        this.__edit_anchor_point = new Vector3();
+        /**
+         *
+         * @type {Vector3}
+         * @private
+         */
+        this.__edit_target_point = new Vector3();
+
+        /**
+         *
+         * @type {SurfacePoint3}
+         * @private
+         */
+        this.__hover_contact = new SurfacePoint3();
+
+        this.__sm = new SimpleStateMachine(smd);
+        this.__sm.setState(STATE_INITIAL);
+
+        this.__sm.addEventHandlerStateEntry(STATE_HOVER, () => {
+            console.log('+hovering');
+        });
+
+        this.__sm.addEventHandlerStateExit(STATE_HOVER, () => {
+            console.log('-hovering');
+        });
+    }
+
+    get state() {
+        return this.__sm.getState();
+    }
+
+    set state(v) {
+        this.__sm.navigateTo(v);
+    }
+
+    /**
+     * @param {ShadedGeometry} v
+     */
+    set mesh(v) {
+        this.__mesh = v;
+    }
+
+    get mesh() {
+        return this.__mesh;
+    }
+
+    /**
+     * @param {EntityComponentDataset} v
+     */
+    set ecd(v) {
+        this.__ecd = v;
+    }
+
+    /**
+     * @param {number} v
+     */
+    set entity(v) {
+        this.__entity = v;
+    }
+
+    /**
+     *
+     * @param {Vector3} v
+     */
+    set edit_anchor_point(v) {
+        this.__edit_anchor_point.copy(v);
+    }
+
+    /**
+     *
+     * @param {Vector3} v
+     */
+    set edit_target_point(v) {
+        this.__edit_target_point.copy(v);
+    }
+
+    set contact(v) {
+        this.__hover_contact.copy(v);
+    }
+
+    get contact() {
+        return this.__hover_contact;
+    }
+
+    attach() {
+        this.__sm.navigateTo(STATE_INITIAL);
+    }
+
+    detach() {
+        this.__sm.navigateTo(STATE_INITIAL);
+    }
+}

package/engine/ecs/parent/testCompositionEntityNode.js

@@ -0,0 +1,153 @@
+import { EngineHarness } from "../../EngineHarness.js";
+import { ShadedGeometrySystem } from "../../graphics/ecs/mesh-v2/ShadedGeometrySystem.js";
+import { Transform } from "../transform/Transform.js";
+import { ShadedGeometry } from "../../graphics/ecs/mesh-v2/ShadedGeometry.js";
+import { BoxBufferGeometry, MeshLambertMaterial } from "three";
+import { EngineConfiguration } from "../../EngineConfiguration.js";
+import { EntityNode } from "./EntityNode.js";
+import { AttachmentSystem } from "../attachment/AttachmentSystem.js";
+import { SurfacePoint3 } from "../../../core/geom/3d/SurfacePoint3.js";
+import Vector3 from "../../../core/geom/Vector3.js";
+import Vector2 from "../../../core/geom/Vector2.js";
+import { FaceEditor, STATE_EDIT, STATE_HOVER } from "./FaceEditor.js";
+
+const eh = new EngineHarness();
+
+function makeConfig(engine) {
+    const r = new EngineConfiguration();
+
+    r.addSystem(new ShadedGeometrySystem(engine));
+    r.addSystem(new AttachmentSystem())
+
+    return r;
+}
+
+/**
+ *
+ * @param {Engine} engine
+ */
+async function main(engine) {
+
+
+    EngineHarness.buildBasics({ engine, enableWater: false })
+
+
+    const ecd = engine.entityManager.dataset;
+
+    const block_a = EntityNode.fromComponents(
+        ShadedGeometry.from(new BoxBufferGeometry(), new MeshLambertMaterial({
+            color: 0xFFFFAA
+        })),
+        new Transform()
+    );
+
+    block_a.transform.position.set(5, 0.5, 5);
+
+    const block_b = EntityNode.fromComponents(
+        ShadedGeometry.from(new BoxBufferGeometry(), new MeshLambertMaterial({
+            color: 0xAAFFFF
+        })),
+        new Transform()
+    );
+
+    block_b.transform.position.set(1, 1, 1);
+    block_a.addChild(block_b);
+
+    block_a.build(ecd);
+
+    function pick(x, y) {
+        /**
+         *
+         * @type {ShadedGeometrySystem|null}
+         */
+        const system = engine.entityManager.getSystem(ShadedGeometrySystem);
+
+        const contact = new SurfacePoint3();
+
+        const origin = new Vector3();
+        const direction = new Vector3();
+
+        const p = new Vector2(x, y);
+        const point_2 = p.clone();
+
+        engine.graphics.normalizeViewportPoint(p, point_2);
+        engine.graphics.viewportProjectionRay(point_2.x, point_2.y, origin, direction);
+
+        const hit = system.raycastNearest(contact, origin.x, origin.y, origin.z, direction.x, direction.y, direction.z);
+
+        if (hit === undefined) {
+            return;
+        }
+
+        return Object.assign({ contact }, hit);
+    }
+
+    const editor = new FaceEditor();
+
+    function update_hover_state(x, y) {
+        const hit = pick(x, y);
+
+        if (hit === undefined) {
+            editor.detach();
+        } else {
+            if (editor.mesh !== hit.mesh) {
+                editor.detach();
+
+                editor.contact = hit.contact;
+                editor.mesh = hit.mesh;
+                editor.entity = hit.entity;
+                editor.ecd = ecd;
+
+                editor.attach();
+                editor.state = STATE_HOVER;
+            } else {
+                // update contact only
+                editor.contact = hit.contact;
+            }
+
+        }
+
+    }
+
+    engine.devices.pointer.position.onChanged.add((x, y) => {
+        if (editor.state !== STATE_EDIT) {
+            update_hover_state(x, y);
+
+        } else {
+
+        }
+    });
+
+
+    engine.devices.pointer.on.dragStart.add((p) => {
+        if (editor.state === STATE_HOVER) {
+            editor.edit_anchor_point = editor.contact.position;
+            editor.state = STATE_EDIT;
+        }
+    });
+    engine.devices.pointer.on.drag.add(p => {
+        editor.edit_target_point = p;
+    });
+    engine.devices.pointer.on.dragEnd.add(p => {
+        if (editor.state === STATE_EDIT) {
+            update_hover_state(p.x, p.y);
+        }
+    });
+
+}
+
+/**
+ *
+ * @param {EngineHarness} harness
+ */
+async function init(harness) {
+    const engine = eh.engine;
+
+    await makeConfig(engine).apply(engine);
+
+    await eh.initialize();
+
+    main(engine);
+}
+
+init(eh);

package/engine/ecs/parent/testHuDPerf.js

@@ -0,0 +1,123 @@
+import { EngineHarness } from "../../EngineHarness.js";
+import { ShadedGeometrySystem } from "../../graphics/ecs/mesh-v2/ShadedGeometrySystem.js";
+import { Transform } from "../transform/Transform.js";
+import { EngineConfiguration } from "../../EngineConfiguration.js";
+import { AttachmentSystem } from "../attachment/AttachmentSystem.js";
+import { GameAssetType } from "../../asset/GameAssetType.js";
+import { Sampler2D } from "../../graphics/texture/sampler/Sampler2D.js";
+import EntityBuilder from "../EntityBuilder.js";
+import HeadsUpDisplay from "../gui/hud/HeadsUpDisplay.js";
+import ViewportPosition from "../gui/position/ViewportPosition.js";
+import GUIElement from "../gui/GUIElement.js";
+import EmptyView from "../../../view/elements/EmptyView.js";
+import HeadsUpDisplaySystem from "../gui/hud/HeadsUpDisplaySystem.js";
+import ViewportPositionSystem from "../gui/position/ViewportPositionSystem.js";
+import GUIElementSystem from "../gui/GUIElementSystem.js";
+import { ImageRGBADataLoader } from "../../asset/loaders/image/ImageRGBADataLoader.js";
+import LightSystem from "../../graphics/ecs/light/LightSystem.js";
+import { CameraSystem } from "../../graphics/ecs/camera/CameraSystem.js";
+
+const eh = new EngineHarness();
+
+/**
+ *
+ * @param {Engine} engine
+ * @return {EngineConfiguration}
+ */
+function makeConfig(engine) {
+    const r = new EngineConfiguration();
+
+    r.addSystem(new ShadedGeometrySystem(engine));
+    r.addSystem(new AttachmentSystem());
+    r.addSystem(new HeadsUpDisplaySystem(engine.graphics));
+    r.addSystem(new ViewportPositionSystem(engine.gameView.size));
+    r.addSystem(new GUIElementSystem(engine.gui.view, engine));
+    r.addSystem(new LightSystem(engine, {
+        shadowResolution: 1024
+    }));
+
+    r.addLoader(GameAssetType.Image, new ImageRGBADataLoader());
+
+    return r;
+}
+
+/**
+ *
+ * @param {Engine} engine
+ */
+async function main(engine) {
+
+
+    EngineHarness.buildBasics({ engine, enableWater: false })
+
+
+    const ecd = engine.entityManager.dataset;
+
+    const active_camera = CameraSystem.getFirstActiveCamera(ecd);
+    const camera_component = active_camera.component;
+
+    camera_component.autoClip = false;
+    camera_component.object.far = 100;
+
+    const asset = await engine.assetManager.promise('data/textures/icons/Sci-Fi Ability Icons 1/134.PNG', GameAssetType.Image);
+
+    const sampler = asset.create();
+
+    const sampler2D = new Sampler2D(sampler.data, sampler.itemSize, sampler.width, sampler.height);
+
+    const sample = [];
+    const res = 128;
+
+    const texel_size = 5;
+    const grid_size = 18;
+
+    for (let i = 0; i < res; i++) {
+        const u = i / (res - 1);
+        for (let j = 0; j < res; j++) {
+            const v = j / (res - 1);
+
+            sampler2D.sampleBicubicUV(u, v, sample);
+
+            const view = new EmptyView({
+                css: {
+                    background: `rgb(${sample[0]}, ${sample[1]}, ${sample[2]})`,
+                    height: texel_size + 'px',
+                    width: texel_size + 'px',
+                    willChange: 'transform'
+                }
+            });
+
+            const transform = new Transform();
+
+            transform.position.set(
+                u * grid_size + 1,
+                1,
+                v * grid_size + 1
+            );
+
+            new EntityBuilder()
+                .add(transform)
+                .add(new HeadsUpDisplay())
+                .add(new ViewportPosition())
+                .add(GUIElement.fromView(view))
+                .build(ecd);
+        }
+    }
+
+}
+
+/**
+ *
+ * @param {EngineHarness} harness
+ */
+async function init(harness) {
+    const engine = eh.engine;
+
+    await makeConfig(engine).apply(engine);
+
+    await eh.initialize();
+
+    main(engine);
+}
+
+init(eh);