@woosh/meep-engine 2.46.29 → 2.46.30

package/editor/tools/engine/ToolStateMachine.js

@@ -0,0 +1,53 @@
+import { SimpleStateMachineDescription } from "../../../src/core/fsm/simple/SimpleStateMachineDescription.js";
+import { ToolState } from "./ToolState.js";
+import { StateMachine } from "../../../src/core/fsm/StateMachine.js";
+
+const smd = new SimpleStateMachineDescription();
+
+smd.createState(ToolState.Initial);
+smd.createState(ToolState.Ready);
+smd.createState(ToolState.Running);
+
+smd.createEdge(ToolState.Initial, ToolState.Ready);
+smd.createEdge(ToolState.Ready, ToolState.Initial);
+smd.createEdge(ToolState.Ready, ToolState.Running);
+smd.createEdge(ToolState.Running, ToolState.Ready);
+
+
+/**
+ * @param {Tool} tool
+ * @returns {StateMachine}
+ */
+export function buildToolStateMachine(tool) {
+    const sm = new StateMachine(smd);
+
+    sm.addState(ToolState.Initial);
+    sm.addState(ToolState.Ready);
+    sm.addState(ToolState.Running);
+
+
+    sm.createTransition(ToolState.Initial, ToolState.Ready, () => {
+        tool.initialize();
+        return Promise.resolve();
+    });
+
+    sm.createTransition(ToolState.Ready, ToolState.Initial, () => {
+        tool.shutdown();
+        return Promise.resolve();
+    });
+
+    sm.createTransition(ToolState.Ready, ToolState.Running, () => {
+        tool.start();
+        return Promise.resolve();
+    });
+
+    sm.createTransition(ToolState.Running, ToolState.Ready, () => {
+        tool.stop();
+        return Promise.resolve();
+    });
+
+    sm.setState(ToolState.Initial);
+
+
+    return sm;
+}

package/editor/tools/paint/TerrainHeightPaintTool.js

@@ -0,0 +1,297 @@
+import { clamp } from "../../../src/core/math/clamp.js";
+import { inverseLerp } from "../../../src/core/math/inverseLerp.js";
+import { lerp } from "../../../src/core/math/lerp.js";
+import { TerrainPaintTool } from "./TerrainPaintTool.js";
+import { PatchTerrainHeightAction } from "../../actions/concrete/PatchTerrainHeightAction.js";
+import { QuadTreeNode } from "../../../src/core/geom/2d/quad-tree/QuadTreeNode.js";
+import { Transform } from "../../../src/engine/ecs/transform/Transform.js";
+import TransformModifyAction from "../../actions/concrete/TransformModifyAction.js";
+import EditorEntity from "../../ecs/EditorEntity.js";
+import { uint82float } from "../../../src/core/binary/uint82float.js";
+
+const LIMIT_VALUE = 1000;
+
+/**
+ *
+ * @param {Terrain} terrain
+ * @param {number} uv_x0
+ * @param {number} uv_y0
+ * @param {number} uv_x1
+ * @param {number} uv_y1
+ * @param {Sampler2D} marker
+ * @param {number} value_delta
+ * @param {number} limitMin
+ * @param {number} limitMax
+ * @returns {PatchTerrainHeightAction}
+ */
+function make_mod_action(terrain, uv_x0, uv_y0, uv_x1, uv_y1, marker, value_delta, limitMin, limitMax) {
+
+    const heightMap = terrain.samplerHeight;
+
+    const h_x0 = uv_x0 * heightMap.width;
+    const h_x1 = uv_x1 * heightMap.width;
+
+    const h_y0 = uv_y0 * heightMap.height;
+    const h_y1 = uv_y1 * heightMap.height;
+
+    const x0 = Math.ceil(h_x0);
+    const x1 = Math.floor(h_x1);
+
+    const y0 = Math.ceil(h_y0);
+    const y1 = Math.floor(h_y1);
+
+    const action = new PatchTerrainHeightAction(terrain, x0, y0, (x1 - x0), (y1 - y0));
+
+    const patch_destination_data = action.patch.data;
+
+    for (let y = y0; y < y1; y++) {
+
+        const v = inverseLerp(h_y0, h_y1 - 1, y);
+
+
+        for (let x = x0; x < x1; x++) {
+
+            const u = inverseLerp(h_x0, h_x1 - 1, x);
+
+            //Get alpha
+            const markerValue = marker.sampleChannelBilinearUV(u, v, 3);
+
+            const marker_value_normalized = uint82float(markerValue);
+
+            const source_address = y * heightMap.width + x;
+
+            const base = heightMap.data[source_address];
+
+            const patchAddress = (y - y0) * action.patch.width + (x - x0);
+
+            const targetValue = clamp(base + value_delta, limitMin, limitMax);
+
+
+            const value = lerp(base, targetValue, marker_value_normalized);
+
+            if (Number.isNaN(value)) {
+                // console.warn('.');
+
+                patch_destination_data[patchAddress] = base;
+
+            } else {
+
+                patch_destination_data[patchAddress] = value;
+
+            }
+        }
+
+    }
+    return action;
+}
+
+export class TerrainHeightPaintTool extends TerrainPaintTool {
+
+    constructor() {
+        super();
+
+        this.settings.limitMin = -LIMIT_VALUE;
+        this.settings.limitMax = LIMIT_VALUE;
+
+        /**
+         *
+         * @type {QuadTreeNode<number>}
+         */
+        this.transform_index = new QuadTreeNode();
+    }
+
+    buildTransformIndex() {
+        /**
+         *
+         * @type {Engine}
+         */
+        const engine = this.engine;
+
+        /**
+         *
+         * @type {EntityManager}
+         */
+        const entityManager = engine.entityManager;
+
+        /**
+         *
+         * @type {EntityComponentDataset}
+         */
+        const dataset = entityManager.dataset;
+
+        //purge existing data
+        this.transform_index.clear();
+
+        /**
+         *
+         * @type {number}
+         */
+        const gridScale = this.terrain.gridScale;
+
+        const uS = 1 / (this.terrain.size.x * gridScale);
+        const vS = 1 / (this.terrain.size.y * gridScale);
+
+        dataset.traverseComponents(Transform, (transform, entity) => {
+            if (dataset.getComponent(entity, EditorEntity) !== undefined) {
+                //it's an editor entity
+                return;
+            }
+
+            const position = transform.position;
+
+            const x = position.x;
+            const z = position.z;
+
+            const u = x * uS;
+            const v = z * vS;
+
+            const datum = this.transform_index.add(transform, u, v, u, v);
+
+            datum.entity = entity;
+        });
+    }
+
+    initialize() {
+        super.initialize();
+
+        this.buildTransformIndex();
+
+    }
+
+    shutdown() {
+        super.shutdown();
+    }
+
+    /**
+     *
+     * @param {number} timeDelta
+     */
+    async paint(timeDelta) {
+        const power = this.settings.brushStrength * timeDelta;
+
+        /**
+         *
+         * @type {Terrain}
+         */
+        const terrain = this.terrain;
+
+        const brushPosition = this.__brushPosition;
+        const brushSize = this.settings.brushSize;
+
+        const terrainSize = terrain.size;
+
+        const uv_x = brushPosition.x / terrainSize.x;
+        const uv_y = brushPosition.y / terrainSize.y;
+
+        const uv_w = brushSize / terrainSize.x;
+        const uv_h = brushSize / terrainSize.y;
+
+        const uv_x0 = uv_x - uv_w / 2;
+        const uv_x1 = uv_x + uv_w / 2;
+
+        const uv_y0 = uv_y - uv_h / 2;
+        const uv_y1 = uv_y + uv_h / 2;
+
+
+        const marker = this.settings.marker;
+
+        const direction = this.modifiers.shift ? -1 : 1;
+
+        const value_delta = power * direction;
+
+        const limitMin = this.settings.limitMin;
+        const limitMax = this.settings.limitMax;
+
+        const action = make_mod_action(terrain, uv_x0, uv_y0, uv_x1, uv_y1, marker, value_delta, limitMin, limitMax);
+
+        this.editor.actions.do(action);
+
+        const objectMoveActions = this.createObjectMoveActions(action);
+
+        this.editor.actions.doMany(objectMoveActions);
+    }
+
+    /**
+     *
+     * @param {PatchTerrainHeightAction} action
+     * @returns {Action[]}
+     */
+    createObjectMoveActions(action) {
+
+        const heightSampler = this.terrain.samplerHeight;
+
+        const x0 = action.x;
+        const y0 = action.y;
+
+        const patch = action.patch;
+
+        const patch_width = patch.width;
+        const patch_height = patch.height;
+
+        const x1 = x0 + patch_width;
+        const y1 = y0 + patch_height;
+
+
+        const u0 = x0 / heightSampler.width;
+        const v0 = y0 / heightSampler.height;
+
+        const u1 = x1 / heightSampler.width;
+        const v1 = y1 / heightSampler.height;
+
+        /**
+         *
+         * @type {QuadTreeDatum<Transform>[]}
+         */
+        const leaves = [];
+
+        /**
+         *
+         * @type {Action[]}
+         */
+        const result = [];
+
+        const overlaps = this.transform_index.requestDatumIntersectionsRectangle(leaves, u0, v0, u1, v1);
+
+        for (let i = 0; i < overlaps; i++) {
+            const leaf = leaves[i];
+
+            /**
+             *
+             * @type {Transform}
+             */
+            const transform = leaf.data;
+
+            const tX = leaf.x0 * heightSampler.width;
+            const tY = leaf.y0 * heightSampler.height;
+
+            const action_value = action.patch.sampleChannelBicubic(tX - action.x, tY - action.y, 0);
+            const existing_value = heightSampler.sampleChannelBicubic(tY, tY, 0);
+
+            const delta = action_value - existing_value;
+
+            if (delta === 0) {
+                continue;
+            }
+
+            if (Number.isNaN(delta)) {
+                console.error('Delta is NaN, skipping.', action, tX, tY);
+                continue;
+            }
+
+            const tM = new Transform();
+            tM.copy(transform);
+            tM.position._add(0, delta, 0);
+            const a = new TransformModifyAction(leaf.entity, tM);
+            result.push(a);
+        }
+
+        return result;
+    }
+
+    start() {
+        super.start();
+
+        this.editor.actions.mark('terrain height paint');
+    }
+
+}

package/editor/tools/paint/TerrainPaintTool.js

@@ -0,0 +1,211 @@
+import { max2 } from "../../../src/core/math/max2.js";
+import Tool from "../engine/Tool.js";
+import { Color } from "../../../src/core/color/Color.js";
+import { Sampler2D } from "../../../src/engine/graphics/texture/sampler/Sampler2D.js";
+import Vector2 from "../../../src/core/geom/Vector2.js";
+import convertSampler2D2Canvas from "../../../src/engine/graphics/texture/sampler/Sampler2D2Canvas.js";
+import ObservedString from "../../../src/core/model/ObservedString.js";
+import { GameAssetType } from "../../../src/engine/asset/GameAssetType.js";
+import Vector1 from "../../../src/core/geom/Vector1.js";
+import { obtainTerrain } from "../../../src/engine/ecs/terrain/util/obtainTerrain.js";
+import { pick } from "../../../src/ecs/grid/pick.js";
+
+export class TerrainPaintTool extends Tool {
+    constructor() {
+        super();
+
+        this.name = 'paint-terrain';
+
+        const marker = Sampler2D.uint8(4, 1, 1);
+
+        marker.data.fill(255);
+
+        this.settings.markerColor = new Color(0, 1, 0.8);
+        this.settings.markerOpacity = new Vector1(1);
+
+        this.settings.marker = marker;
+        this.settings.brushSize = 5;
+        this.settings.brushStrength = 1;
+        this.settings.brushURL = new ObservedString("data/textures/particle/UETools/x64/Circle_04.png");
+
+        this.__brushPosition = new Vector2();
+
+        this.__brushImage = document.createElement('canvas');
+
+        this.__paint_debt = 0;
+        this.__paint_pending = false;
+    }
+
+    /**
+     *
+     * @param {number} timeDelta
+     */
+    async paint(timeDelta) {
+
+    }
+
+    /**
+     *
+     * @param {number} timeDelta
+     */
+    update(timeDelta) {
+        this.updateBrushPosition();
+        this.updateOverlay();
+
+        if (this.isRunning()) {
+
+            this.__paint_debt += timeDelta;
+
+            if (this.__paint_pending) {
+                return;
+            }
+
+            this.__paint_pending = true;
+
+            const paint_promise = this.paint(timeDelta);
+            this.__paint_debt = 0;
+
+            paint_promise.finally(() => {
+                this.__paint_pending = false;
+            });
+        }
+
+    }
+
+    updateBrushImage() {
+        /**
+         *
+         * @type {Sampler2D}
+         */
+        const marker = this.settings.marker;
+
+        const temp = new Sampler2D(new Uint8ClampedArray(marker.data), marker.itemSize, marker.width, marker.height);
+
+        const markerColor = this.settings.markerColor;
+        const markerAlpha = this.settings.markerOpacity.getValue();
+
+        const brushData = temp.data;
+
+        //apply tint
+        for (let y = 0; y < temp.height; y++) {
+            const lineAddress = y * temp.itemSize * temp.width;
+
+            for (let x = 0; x < temp.width; x++) {
+
+                const address = lineAddress + x * temp.itemSize;
+
+                brushData[address] = brushData[address] * markerColor.r;
+                brushData[address + 1] = brushData[address + 1] * markerColor.g;
+                brushData[address + 2] = brushData[address + 2] * markerColor.b;
+                brushData[address + 3] = brushData[address + 3] * markerAlpha;
+            }
+        }
+
+        const brushImage = this.__brushImage;
+
+        convertSampler2D2Canvas(temp, 1, 0, brushImage);
+
+    }
+
+    updateBrushPosition() {
+
+        const p = new Vector2(0, 0);
+        const engine = this.engine;
+
+        engine.gameView.positionGlobalToLocal(engine.devices.pointer.position, p);
+
+        pick(p.x, p.y, engine.graphics, this.terrain, (gridPosition) => {
+
+            this.__brushPosition.set(gridPosition.x, gridPosition.y);
+
+        });
+    }
+
+    updateOverlay() {
+
+        const terrain = this.terrain;
+
+        const overlay = terrain.overlay;
+
+        overlay.clear();
+
+        const dx = overlay.size.x / terrain.size.x;
+        const dy = overlay.size.y / terrain.size.y;
+
+        const overlayPositionX = this.__brushPosition.x * dx;
+        const overlayPositionY = this.__brushPosition.y * dy;
+
+        const brushSize = this.settings.brushSize;
+
+        const brushRadius = brushSize / 2;
+
+        const brushSizeX = brushRadius * dx;
+        const brushSizeY = brushRadius * dy;
+
+
+        overlay.paintImage(this.__brushImage, overlayPositionX - brushSizeX, overlayPositionY - brushSizeY, brushSize * dx, brushSize * dy);
+    }
+
+    /**
+     *
+     * @param {Vector3} delta
+     * @private
+     */
+    __handleMouseWheel(delta) {
+
+        const settings = this.settings;
+
+        const brushSize = settings.brushSize;
+
+        settings.brushSize = max2(1, brushSize + delta.y);
+
+        // this.updateBrushImage();
+        this.updateOverlay();
+
+    }
+
+    initialize() {
+        super.initialize();
+
+        const engine = this.engine;
+        const editor = this.editor;
+
+        this.__paint_debt = 0;
+
+        this.terrain = obtainTerrain(engine.entityManager.dataset, (t, entity) => {
+            this.terrainEntity = entity;
+        });
+
+        const overlay = this.terrain.overlay;
+
+        overlay.push();
+
+        overlay.size.set(this.terrain.size.x * 16, this.terrain.size.y * 16);
+        overlay.borderWidth.set(0);
+        overlay.tileImage.set("data/textures/utility/white_pixel.png");
+
+        engine.assetManager.promise('data/textures/particle/UETools/x64/Circle_04.png', GameAssetType.Image)
+            .then(asset => {
+                const image = asset.create();
+
+                this.settings.marker = new Sampler2D(image.data, 4, image.width, image.height);
+
+                this.updateBrushImage();
+            });
+
+        this.updateBrushImage();
+
+        engine.devices.pointer.on.wheel.add(this.__handleMouseWheel, this);
+    }
+
+    shutdown() {
+        super.shutdown();
+
+
+        this.terrain.overlay.pop();
+
+
+        engine.devices.pointer.on.wheel.remove(this.__handleMouseWheel, this);
+    }
+
+}