@woosh/meep-engine 2.39.2 → 2.39.5

package/editor/tools/paint/TerrainTexturePaintTool.js

@@ -1,9 +1,9 @@
-import { clamp } from "../../../core/math/clamp.js";
-import { inverseLerp } from "../../../core/math/inverseLerp.js";
 import { TerrainPaintTool } from "./TerrainPaintTool.js";
 import { convertSampler2D2DataURL } from "../../../engine/graphics/texture/sampler/convertSampler2D2DataURL.js";
 import { obtainTerrain } from "../../../engine/ecs/terrain/util/obtainTerrain.js";
-import { ModifyPatchSampler2DAction } from "../../actions/concrete/ModifyPatchSampler2DAction.js";
+import { ModifyPatchTextureArray2DAction } from "../../actions/concrete/ModifyPatchTextureArray2DAction.js";
+import { ArrayCopyAction } from "../../actions/concrete/ArrayCopyAction.js";
+import { ActionUpdateTexture } from "../../actions/concrete/ActionUpdateTexture.js";
 
 export class TerrainTexturePaintTool extends TerrainPaintTool {
     constructor() {
@@ -68,6 +68,9 @@ export class TerrainTexturePaintTool extends TerrainPaintTool {
          */
         const layer = terrain.layers.get(this.settings.splatIndex);
 
+        if (layer === undefined) {
+            return;
+        }
 
         const url = convertSampler2D2DataURL(layer.diffuse);
 
@@ -82,7 +85,7 @@ export class TerrainTexturePaintTool extends TerrainPaintTool {
         super.shutdown();
     }
 
-    paint(timeDelta) {
+    async paint(timeDelta) {
 
         const power = this.settings.brushStrength * timeDelta;
 
@@ -133,7 +136,6 @@ export class TerrainTexturePaintTool extends TerrainPaintTool {
         const splatWidth = splat.size.x;
         const splatHeight = splat.size.y;
 
-        const splatLayerSize = splatWidth * splatHeight;
 
         const h_x0 = uv_x0 * splatWidth;
         const h_x1 = uv_x1 * splatWidth;
@@ -150,61 +152,21 @@ export class TerrainTexturePaintTool extends TerrainPaintTool {
         const splatIndex = this.settings.splatIndex;
 
         //create action
-        const patchWidth = x1 - x0;
-
-        const targetSplatLayerAddress = splatIndex * splatLayerSize;
-
-        const splat_layer_sampler = splat.getLayerWeightSampler(splatIndex);
-
-        const m_action = new ModifyPatchSampler2DAction(splat_layer_sampler, [x0, y0, x1, y1]);
-
-        const patchMaterialData = m_action.patch.data;
-
-
-        for (let y = y0; y < y1; y++) {
-
-            const v = inverseLerp(h_y0, h_y1, y);
-
-            for (let x = x0; x < x1; x++) {
-
-                const u = inverseLerp(h_x0, h_x1, x);
-
-                const markerValue = marker.sampleChannelBilinearUV(u, v, 3);
-
-                if (Number.isNaN(markerValue)) {
-                    continue;
-                }
 
-                //write weight
-                const splatTexelIndex = y * splatWidth + x;
-
-                const baseValue = weightData[targetSplatLayerAddress + splatTexelIndex];
-
-                const delta = markerValue * speed;
-
-                const value = baseValue + delta;
-
-                const clampedValue = clamp(value, 0, 255);
-
-                if (Number.isNaN(clampedValue)) {
-
-                    continue;
-                }
-
-
-                //write new weight for the material
-                weightData[targetSplatLayerAddress + splatTexelIndex] = clampedValue;
-
-
-                const patchIndex = ((y - y0) * patchWidth + (x - x0));
-
-                patchMaterialData[patchIndex] = clampedValue;
-            }
-
-        }
+        // const m_action = new ModifyPatchSampler2DAction(splat_layer_sampler, [x0, y0, x1, y1]);
+        const m_action = new ModifyPatchTextureArray2DAction(weightData, [splat.size.x, splat.size.y, splat.depth], [x0, y0, x1, y1]);
 
+        m_action.applyWeightStampToLayer(
+            uv_x * splat.size.x, uv_y * splat.size.y,
+            marker, splatIndex, speed,
+            0, 255
+        );
 
-        this.editor.actions.do(m_action);
+        await this.editor.actions.doMany([
+            m_action,
+            new ArrayCopyAction(weightData, splat.weightData),
+            new ActionUpdateTexture(splat.weightTexture)
+        ]);
     }
 
     start() {

package/editor/tools/paint/prototypeTerrainEditor.js

@@ -0,0 +1,67 @@
+import { EngineHarness } from "../../../engine/EngineHarness.js";
+import { GizmoRenderingPlugin } from "../../../engine/graphics/render/gizmo/GizmoRenderingPlugin.js";
+import { GameAssetType } from "../../../engine/asset/GameAssetType.js";
+import { TextureAssetLoader } from "../../../engine/asset/loaders/texture/TextureAssetLoader.js";
+import Vector2 from "../../../core/geom/Vector2.js";
+import { enableEditor } from "../../enableEditor.js";
+import { initializeEditor } from "../../../../model/game/initializeEditor.js";
+
+import '../../../../../../css/game.scss';
+import '../../../../../../css/editor/EntityEditorView.scss';
+import '../../../../../../css/editor/EditorView.scss';
+import { TerrainLayer } from "../../../engine/ecs/terrain/ecs/layers/TerrainLayer.js";
+import Terrain from "../../../engine/ecs/terrain/ecs/Terrain.js";
+import Vector3 from "../../../core/geom/Vector3.js";
+
+new EngineHarness()
+    .initialize({
+        configuration(config, engine) {
+
+            config.addPlugin(GizmoRenderingPlugin);
+
+            config.addLoader(GameAssetType.Texture, new TextureAssetLoader());
+        }
+    }).then(main);
+
+async function main(engine) {
+    await EngineHarness.buildBasics({
+        engine,
+        focus:new Vector3(128,0,128),
+        distance:30,
+        terrainResolution: 1,
+        terrainSize: new Vector2(128, 128),
+        enableWater: false
+    });
+
+    const terrain_entity = engine.entityManager.dataset.getAnyComponent(Terrain);
+    const terrain = terrain_entity.component;
+
+    terrain.samplerHeight.resize(256, 256);
+    await terrain.updateHeights();
+
+
+    terrain.layers.addLayer(TerrainLayer.from("data/textures/materials/terrain_township_set/512/Grass_1.png", 20, 20));
+    terrain.layers.addLayer(TerrainLayer.from("data/textures/materials/terrain_township_set/512/Ground_1.png", 20, 20));
+    terrain.layers.addLayer(TerrainLayer.from("data/textures/materials/RAYGEAS/Stylized Ground Textures/Sand_2/Sand_2_AlbedoSmoothness.png", 20, 20));
+    terrain.layers.buildTexture();
+
+
+    terrain.splat.resize(256, 256, terrain.layers.count())
+
+    await terrain.layers.loadTextureData(engine.assetManager);
+
+    terrain.splat.fillLayerWeights(0, 50);
+
+    terrain.splat.weightTexture.needsUpdate = true;
+    terrain.updateMaterial();
+
+    const editor_controls = enableEditor(engine, initializeEditor);
+
+    editor_controls.enable();
+
+    setTimeout(() => {
+        editor_controls.editor.selection.add(terrain_entity.entity);
+    }, 100);
+
+    console.warn(terrain);
+}

package/editor/view/ecs/ComponentControlView.js

@@ -5,6 +5,100 @@ import ObservedBoolean from "../../../core/model/ObservedBoolean.js";
 import LabelView from "../../../view/common/LabelView.js";
 import ButtonView from "../../../view/elements/button/ButtonView.js";
 import EmptyView from "../../../view/elements/EmptyView.js";
+import { downloadAsFile } from "../../../core/binary/ByteArrayTools.js";
+
+export async function obtainClipBoard() {
+    if (navigator.clipboard === undefined) {
+        const queries = [{
+            name: "clipboard-read"
+        }, {
+            name: "clipboard-write"
+        }];
+
+        const permission_queries = queries.map(q => navigator.permissions.query(q));
+
+        const statuses = await Promise.all(permission_queries);
+
+        for (let i = 0; i < statuses.length; i++) {
+            const permissionStatus = statuses[i];
+
+            if (permissionStatus.state !== "granted") {
+                throw new Error(`Permission for query not granted (actual state = ${permissionStatus.state}). Query:${JSON.stringify(queries[i])}`)
+            }
+        }
+    }
+
+    return navigator.clipboard;
+}
+
+/**
+ *
+ * @param {string} text
+ * @param {string} [data_name]
+ * @returns {Promise<void>}
+ */
+export async function safeClipboardWriteText(text, data_name = "data") {
+
+    return obtainClipBoard().then(
+        () => {
+            return navigator.clipboard.writeText(text);
+        },
+        () => {
+            // no clipboard available
+            console.log(`No clipboard available, downloading instead`);
+            downloadAsFile(text, `${data_name}.json`);
+        }
+    );
+}
+
+export async function safeClipboardReadText() {
+
+    return obtainClipBoard().then(() => {
+
+        return navigator.clipboard.readText();
+    }, () => {
+        // clipboard not available
+        console.log(`No clipboard available, using a prompt instead`);
+
+        function clickElem(elem) {
+            // Thx user1601638 on Stack Overflow (6/6/2018 - https://stackoverflow.com/questions/13405129/javascript-create-and-save-file )
+            var eventMouse = document.createEvent("MouseEvents")
+            eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
+            elem.dispatchEvent(eventMouse)
+        }
+
+        function openFile(func) {
+            const fileInput = document.createElement("input");
+
+            const readFile = function (e) {
+                var file = e.target.files[0];
+                if (!file) {
+                    return;
+                }
+                var reader = new FileReader();
+                reader.onload = function (e) {
+                    var contents = e.target.result;
+                    fileInput.func(contents)
+                    document.body.removeChild(fileInput)
+                }
+                reader.readAsText(file)
+            }
+            fileInput.type = 'file'
+            fileInput.style.display = 'none'
+            fileInput.onchange = readFile
+            fileInput.func = func
+            document.body.appendChild(fileInput)
+            clickElem(fileInput)
+        }
+
+        return new Promise((resolve, reject) => {
+            openFile(resolve);
+        });
+
+
+    });
+
+}
 
 /**
  * @template T
@@ -16,9 +110,10 @@ export class ComponentControlView extends View {
      * @param {T} component
      * @param {EntityManager} entityManager
      * @param {View} vController
+     * @param engine
      * @constructor
      */
-    constructor(entity, component, entityManager, vController ) {
+    constructor(entity, component, entityManager, vController, engine) {
         super();
 
         this.signal = {
@@ -54,7 +149,7 @@ export class ComponentControlView extends View {
 
         const bCopy = new ButtonView({
             classList: ['copy'],
-            action() {
+            async action() {
                 const json = component.toJSON();
 
                 const data = JSON.stringify({
@@ -62,9 +157,9 @@ export class ComponentControlView extends View {
                     data: json
                 }, 3, 3);
 
-                navigator.clipboard.writeText(data).then(
-                    () => console.log(`${entity}:${typeName} copied to clip`)
-                );
+                safeClipboardWriteText(data, typeName).then(() => {
+                    console.log(`${entity}:${typeName} dumped`);
+                });
             }
         });
 
@@ -72,8 +167,9 @@ export class ComponentControlView extends View {
 
         const bPaste = new ButtonView({
             classList: ['paste'],
-            action() {
-                navigator.clipboard.readText().then(text => {
+            async action() {
+
+                safeClipboardReadText().then(text => {
                     const json = JSON.parse(text);
 
                     if (json.type !== typeName) {
@@ -81,12 +177,11 @@ export class ComponentControlView extends View {
                     }
 
                     //get system
-                    const system = entityManager.getOwnerSystemByComponentClass(componentType);
-
-                    component.fromJSON(json.data, system);
+                    component.fromJSON(json.data, engine);
 
                     console.log(`${entity}:${typeName} pasted from clip`);
                 });
+
             }
         });
 

package/editor/view/ecs/EntityEditor.js

@@ -182,7 +182,7 @@ class EntityEditor extends View {
             });
             vBody.addChild(view);
 
-            const controlView = new ComponentControlView(entityId, component, entityManager, vBody);
+            const controlView = new ComponentControlView(entityId, component, entityManager, vBody, editor.engine);
 
             const Klass = component.constructor;
 

package/engine/ecs/fow/FogOfWarSystem.js

@@ -5,7 +5,6 @@ import { Frustum } from "three";
 import { VisibilityFilter } from "../../graphics/render/visibility/VisibilityFilter.js";
 import Vector4 from "../../../core/geom/Vector4.js";
 import { Camera } from "../../graphics/ecs/camera/Camera.js";
-import { computePerspectiveCameraFocalPosition, frustumFromCamera } from "../../graphics/ecs/camera/CameraSystem.js";
 import WaterSystem from "../../graphics/ecs/water/WaterSystem.js";
 import Vector3 from "../../../core/geom/Vector3.js";
 import { BlendingType } from "../../graphics/texture/sampler/BlendingType.js";
@@ -13,6 +12,10 @@ import { FogOfWarRenderer } from "./shader/FogOfWarRenderer.js";
 import { StandardFrameBuffers } from "../../graphics/StandardFrameBuffers.js";
 import { CompositLayer } from "../../graphics/composit/CompositLayer.js";
 import { CompositingStages } from "../../graphics/composit/CompositingStages.js";
+import {
+    compute_perspective_camera_focal_position
+} from "../../graphics/ecs/camera/compute_perspective_camera_focal_position.js";
+import { frustum_from_camera } from "../../graphics/ecs/camera/frustum_from_camera.js";
 
 
 const frustum = new Frustum();
@@ -70,7 +73,7 @@ export class FogOfWarSystem extends System {
 
             objectPredicateInitialize: (camera) => {
 
-                computePerspectiveCameraFocalPosition(camera, cameraFocalPoint);
+                compute_perspective_camera_focal_position(camera, cameraFocalPoint);
 
                 fog = null;
 
@@ -89,7 +92,7 @@ export class FogOfWarSystem extends System {
                     dataset.traverseComponents(Camera, c => {
                         if (c.active) {
 
-                            frustumFromCamera(c.object, frustum);
+                            frustum_from_camera(c.object, frustum);
 
                             const nearPlane = frustum.planes[4];
 

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

@@ -26,7 +26,7 @@ import { assert } from "../../../../core/assert.js";
 import { GameAssetType } from "../../../asset/GameAssetType.js";
 import { TerrainLayers } from "./layers/TerrainLayers.js";
 import { SplatMaterial } from "../../../graphics/material/SplatMaterial.js";
-import { loadLegacyTerrainSplats, SplatMapping } from "./splat/SplatMapping.js";
+import { SplatMapping } from "./splat/SplatMapping.js";
 import { OffsetScaleTransform2D } from "./OffsetScaleTransform2D.js";
 import { GridTransformKind } from "./GridTransformKind.js";
 import { makeTerrainWorkerProxy } from "./makeTerrainWorkerProxy.js";
@@ -36,6 +36,7 @@ import { TerrainFlags } from "./TerrainFlags.js";
 import { IllegalStateException } from "../../../../core/fsm/exceptions/IllegalStateException.js";
 import { buildLightTexture } from "./BuildLightTexture.js";
 import { promiseSamplerHeight } from "./PromiseSamplerHeight.js";
+import { loadLegacyTerrainSplats } from "./splat/loadLegacyTerrainSplats.js";
 
 let idCounter = 0;
 
@@ -592,48 +593,6 @@ class Terrain {
         result.set(x, y);
     }
 
-    /**
-     *
-     * @param opt
-     * @param {TerrainSystem} terrainSystem
-     */
-    fromJSON(opt, terrainSystem) {
-        // mark as needing rebuilding
-        this.clearFlag(TerrainFlags.Built);
-
-        if (opt === undefined) {
-            opt = {};
-        }
-
-        if (opt.preview !== undefined) {
-            this.preview.fromJSON(opt.preview);
-        }
-
-        /**
-         * Assumes lowest and highest points to be at the distance equal to half the range from 0
-         * @type {number}
-         */
-        this.heightRange = opt.heightMapRange;
-
-        this.resolution = opt.resolution !== undefined ? opt.resolution : 4;
-
-        const size = this.size;
-
-        if (opt.size !== undefined) {
-            size.fromJSON(opt.size);
-        }
-
-        this.gridScale = opt.scale !== undefined ? opt.scale : 2;
-        //
-
-        this.heightMapURL = opt.heightMap;
-        this.materialDesc = opt.material;
-
-
-        // debugSamplers(this);
-        this.build(terrainSystem.assetManager);
-    }
-
     /**
      *
      * @return {Promise}
@@ -690,6 +649,15 @@ class Terrain {
         this.layers.updateLayerScales(this.size.x * this.gridScale, this.size.y * this.gridScale);
     }
 
+    /**
+     * Should be called after modifying heights to actualize changes
+     * @returns {Promise<void>}
+     */
+    async updateHeights() {
+        this.updateHeightTexture();
+        await this.updateWorkerHeights();
+    }
+
     updateHeightTexture() {
         const sampler = this.samplerHeight;
         const texture = this.heightTexture;
@@ -925,16 +893,58 @@ class Terrain {
         return result;
     }
 
+    /**
+     *
+     * @param opt
+     * @param {Engine} engine
+     */
+    fromJSON(opt, engine) {
+        // mark as needing rebuilding
+        this.clearFlag(TerrainFlags.Built);
+
+        if (opt === undefined) {
+            opt = {};
+        }
+
+        if (opt.preview !== undefined) {
+            this.preview.fromJSON(opt.preview);
+        }
+
+        this.resolution = opt.resolution !== undefined ? opt.resolution : 4;
+
+        const size = this.size;
+
+        if (opt.size !== undefined) {
+            size.fromJSON(opt.size);
+        }
+
+        this.gridScale = opt.scale !== undefined ? opt.scale : 2;
+        //
+
+        this.materialDesc = opt.material;
+
+        this.samplerHeight.fromJSON(opt.heights);
+        this.layers.fromJSON(opt.layers);
+        this.splat.fromJSON(opt.splat);
+
+
+        // debugSamplers(this);
+        this.build(engine.assetManager);
+    }
+
     toJSON() {
-        return {
+        const result = {
             size: this.size.toJSON(),
-            heightMapRange: this.heightRange,
             scale: this.gridScale,
             resolution: this.resolution,
-            heightMap: this.heightMapURL,
             material: this.materialDesc,
-            preview: this.preview.toJSON()
+            preview: this.preview.toJSON(),
+            heights: this.samplerHeight.toJSON(),
+            layers: this.layers.toJSON(),
+            splat: this.splat.toJSON()
         };
+
+        return result;
     }
 }
 

package/engine/ecs/terrain/ecs/layers/TerrainLayer.js

@@ -58,6 +58,20 @@ export class TerrainLayer {
         this.onChanged = new Signal();
     }
 
+    toJSON() {
+        return {
+            textureDiffuseURL: this.textureDiffuseURL,
+            size: this.size.toJSON(),
+            extra: this.extra
+        };
+    }
+
+    fromJSON({ textureDiffuseURL, size, extra = {} }) {
+        this.textureDiffuseURL = textureDiffuseURL;
+        this.size.fromJSON(size);
+        this.extra = extra;
+    }
+
     /**
      *
      * @param {string} url
@@ -120,9 +134,9 @@ export class TerrainLayer {
                     this.diffuse = Sampler2D.uint8(destination_item_size, image.width, image.height);
                 }
 
-                const source = new Sampler2D(source_data,source_item_size,image.width, image.height);
+                const source = new Sampler2D(source_data, source_item_size, image.width, image.height);
 
-                copy_Sampler2D_channel_data(source,this.diffuse);
+                copy_Sampler2D_channel_data(source, this.diffuse);
 
                 this.onChanged.send0();
 

package/engine/ecs/terrain/ecs/layers/TerrainLayers.js

@@ -158,6 +158,18 @@ export class TerrainLayers {
         this.scalesTexture.generateMipmaps = false;
     }
 
+    toJSON() {
+        return {
+            resolution: this.resolution.toJSON(),
+            layers: this.layers.toJSON()
+        };
+    }
+
+    fromJSON({ resolution, layers }) {
+        this.resolution.fromJSON(resolution);
+        this.layers.fromJSON(layers, TerrainLayer);
+    }
+
     /**
      *
      * @param {number} terrainWidth
@@ -330,10 +342,15 @@ export class TerrainLayers {
 
         const arrayData = image.data;
 
+
         const resolution = this.resolution;
 
         const singleLayerByteSize = resolution.x * resolution.y * 3;
 
+        if (arrayData.length < singleLayerByteSize * index) {
+            throw new Error('Texture data is too small, make sure you rebuild texture data before attempting to write');
+        }
+
         const address = singleLayerByteSize * index;
 
         const sampler = this.__obtain_layer_data_at_resolution(layer, resolution);