@woosh/meep-engine 2.33.76 → 2.34.3

package/samples/terrain/editor.js

@@ -0,0 +1,346 @@
+import { EngineHarness } from "../../engine/EngineHarness.js";
+import EmptyView from "../../view/elements/EmptyView.js";
+import { EngineConfiguration } from "../../engine/EngineConfiguration.js";
+import { buildCubeURLs } from "../../engine/graphics/texture/cubemap/buildCubeURLs.js";
+import { ArrayBufferLoader } from "../../engine/asset/loaders/ArrayBufferLoader.js";
+import { TerrainFlags } from "../../engine/ecs/terrain/ecs/TerrainFlags.js";
+import Signal from "../../core/events/signal/Signal.js";
+import { NativeListController } from "../../view/controller/controls/NativeListController.js";
+import { TerrainLayer } from "../../engine/ecs/terrain/ecs/layers/TerrainLayer.js";
+import CheckersTextureURI from "../../engine/graphics/texture/CheckersTextureURI.js";
+import { obtainTerrain } from "../../engine/ecs/terrain/util/obtainTerrain.js";
+import { Cache } from "../../core/cache/Cache.js";
+import { computeStringHash } from "../../core/primitives/strings/computeStringHash.js";
+import { noop, strictEquals } from "../../core/function/Functions.js";
+import { scaleSampler2D } from "../../engine/graphics/texture/sampler/scaleSampler2D.js";
+import { Sampler2D } from "../../engine/graphics/texture/sampler/Sampler2D.js";
+import { DataType } from "../../core/collection/table/DataType.js";
+import { compute_typed_array_constructor_from_data_type } from "../../core/collection/table/DataType2TypedArrayConstructorMapping.js";
+import { copy_Sampler2D_channel_data } from "../../engine/graphics/texture/sampler/copy_Sampler2D_channel_data.js";
+import { TextureAssetLoader } from "../../engine/asset/loaders/texture/TextureAssetLoader.js";
+import { CanvasView } from "../../view/elements/CanvasView.js";
+import convertSampler2D2Canvas from "../../engine/graphics/texture/sampler/Sampler2D2Canvas.js";
+
+const engineHarness = new EngineHarness();
+
+/**
+ *
+ * @param {Engine} engine
+ */
+function makeConfig(engine) {
+
+    const config = new EngineConfiguration();
+
+    config.addLoader('arraybuffer', new ArrayBufferLoader());
+    config.addLoader('texture', new TextureAssetLoader());
+
+    return config;
+}
+
+class EditorTextureSlot {
+    constructor() {
+        this.onChanged = new Signal();
+
+        this.sampler = null;
+
+        this.__read = noop;
+        this.__write = noop;
+
+        /**
+         *
+         * @type {number}
+         */
+        this.itemSize = 1;
+    }
+
+    read() {
+        this.__read(this.sampler);
+
+        this.onChanged.send0();
+    }
+
+    write() {
+        this.__write(this.sampler);
+    }
+
+    /**
+     *
+     * @param {(Sampler2D)=>any} read
+     * @param {(Sampler2D)=>any} write
+     * @param {number} [itemSize]
+     * @param {DataType} [dataType]
+     * @return {EditorTextureSlot}
+     */
+    static from({ read, write, itemSize = 1, dataType = DataType.Uint8 }) {
+        const r = new EditorTextureSlot();
+
+        r.__read = read;
+        r.__write = write;
+
+        const TA = compute_typed_array_constructor_from_data_type(dataType);
+
+        r.sampler = new Sampler2D(new TA(itemSize), itemSize, 1, 1);
+
+        return r;
+    }
+}
+
+class TextureLayerEditor {
+    constructor() {
+        this.index = 0;
+
+        /**
+         *
+         * @type {Terrain|null}
+         * @private
+         */
+        this.__terrain = null;
+
+        this.__splat = EditorTextureSlot.from({
+            read: (target) => {
+                const terrain = this.__terrain;
+
+                target.resize(terrain.splat.size.x, terrain.splat.size.y)
+
+                terrain.splat.readLayerToSampler(target, this.index, 0);
+            },
+            write: (source) => {
+                this.__terrain.splat.writeLayerFromSampler(source, this.index, 0);
+            },
+            itemSize: 1
+        });
+        this.__diffuse = EditorTextureSlot.from({
+            read: (target) => {
+
+                const layers = this.__terrain.layers;
+
+                const layer = layers.get(this.index);
+
+                target.resize(layer.diffuse.width, layer.diffuse.height);
+                copy_Sampler2D_channel_data(layer.diffuse, target);
+            },
+            write: (source) => {
+                const layer = this.__terrain.layers.get(this.index);
+
+                copy_Sampler2D_channel_data(source, layer.diffuse);
+
+                this.__terrain.layers.writeLayerDataIntoTexture(this.index);
+            },
+            itemSize: 3
+        });
+    }
+
+    /**
+     * @param {Terrain} t
+     */
+    set terrain(t) {
+        this.__terrain = t;
+    }
+
+    init() {
+        this.__splat.read();
+        this.__diffuse.read();
+    }
+}
+
+/**
+ *
+ * @param {EditorTextureSlot} slot
+ */
+function makeTextureSlotView({ slot }) {
+
+    const preview = new CanvasView();
+    preview.size.set(64, 64);
+
+
+    function update() {
+        convertSampler2D2Canvas(slot.sampler, 1, 0, preview.el);
+    }
+
+    preview.on.linked.add(update);
+    preview.bindSignal(slot.onChanged, update);
+
+
+    return preview;
+}
+
+/**
+ *
+ * @param {View} root
+ * @param {Terrain} terrain
+ * @param {Engine} engine
+ */
+function makeTerrainEditor(root, terrain, engine) {
+    /**
+     *
+     * @type {Cache<string, Sampler2D>}
+     */
+    const PREVIEW_CACHE = new Cache({
+        keyHashFunction: computeStringHash,
+        keyEqualityFunction: strictEquals
+    });
+
+    const PREVIEW_SIZE = 64;
+
+    /**
+     *
+     * @param {string} url
+     * @return {Promise<Sampler2D>}
+     */
+    async function getPreviewFromURL(url) {
+        if (PREVIEW_CACHE.contains(url)) {
+            return PREVIEW_CACHE.get(url);
+        }
+
+        const asset = await engine.assetManager.promise(url, 'image');
+
+        // check cache again, might have been loaded in the meanwhile
+        if (PREVIEW_CACHE.contains(url)) {
+            return PREVIEW_CACHE.get(url);
+        }
+
+        const source = asset.create();
+
+        const preview = Sampler2D.uint8(4, PREVIEW_SIZE, PREVIEW_SIZE);
+
+        scaleSampler2D(source, preview);
+
+        PREVIEW_CACHE.put(url, preview);
+
+        return preview;
+    }
+
+    /**
+     *
+     * @type {EditorTextureSlot|null}
+     */
+    let active_slot = null;
+
+    function rebuild() {
+        // rebuild terrain
+        terrain.clearFlag(TerrainFlags.Built);
+        terrain.build(engine.assetManager);
+    }
+
+    function build_splat_editor() {
+        /**
+         *
+         * @type {Map<TerrainLayer, TextureLayerEditor>}
+         */
+        const editors = new Map();
+
+        return new NativeListController({
+            model: terrain.layers.layers,
+            elementFactory() {
+                return TerrainLayer.from(CheckersTextureURI, 1, 1);
+            },
+            /**
+             *
+             * @param {TerrainLayer} layer
+             */
+            elementViewFactory(layer) {
+                const e = new TextureLayerEditor();
+
+                editors.set(layer, e);
+
+                const layer_index = terrain.layers.layers.indexOf(layer);
+
+                e.terrain = terrain;
+                e.index = layer_index;
+
+
+                e.init();
+
+                const view = new EmptyView();
+
+
+                view.addChild(makeTextureSlotView({
+                    slot: e.__diffuse
+                }));
+                view.addChild(makeTextureSlotView({
+                    slot: e.__splat
+                }));
+
+                view.bindSignal(layer.onChanged, e.__diffuse.read, e.__diffuse);
+
+                return view;
+            },
+            operationAdd(list, el) {
+                terrain.layers.addLayer(el);
+                terrain.splat.addWeightLayer();
+            },
+            operationRemove(list, el) {
+                const index = terrain.layers.layers.indexOf(el);
+                terrain.layers.removeLayer(el);
+                terrain.splat.removeWeightLayer(index);
+
+                editors.delete(el);
+
+                // re-shuffle remaining editors
+
+                for (const [layer, editor] of editors) {
+                    if (editor.index > index) {
+                        editor.index--;
+                        editor.init();
+                    }
+                }
+            }
+        });
+    }
+
+    root.addChild(build_splat_editor());
+}
+
+/**
+ *
+ * @param {Engine} engine
+ * @return {string}
+ */
+async function main(engine) {
+
+    //disable drag and drop on game canvas
+    engine.graphics.domElement.addEventListener('dragover', (e) => e.preventDefault());
+    engine.graphics.domElement.addEventListener('drop', (e) => e.preventDefault());
+
+
+    EngineHarness.buildLights({ engine });
+    const camera = EngineHarness.buildCamera({ engine });
+    EngineHarness.buildOrbitalCameraController({ engine, cameraEntity: camera.entity })
+
+    await EngineHarness.buildTerrain({ engine });
+
+    const vMain = new EmptyView({ classList: ['ui-texture-testing-tool-view'] });
+
+    vMain.css({
+        position: "absolute",
+        left: "0",
+        top: "0",
+        pointerEvents: "initial"
+    });
+
+    makeTerrainEditor(vMain, obtainTerrain(engine.entityManager.dataset), engine);
+
+
+    document.body.appendChild(vMain.el);
+    vMain.link();
+}
+
+
+/**
+ *
+ * @param {EngineHarness} harness
+ */
+async function init(harness) {
+
+    const engine = harness.engine;
+
+    await makeConfig(engine).apply(engine);
+
+    await engine.graphics.loadEnvironmentMap(buildCubeURLs('data/textures/cubemaps/hip_miramar/32/', '.png'));
+
+    await harness.initialize();
+
+    main(engine);
+}
+
+init(engineHarness);

package/samples/terrain/from_image.js

@@ -0,0 +1,289 @@
+import { EngineConfiguration } from "../../engine/EngineConfiguration.js";
+import { EngineHarness } from "../../engine/EngineHarness.js";
+import { GameAssetType } from "../../engine/asset/GameAssetType.js";
+import { TextureAssetLoader } from "../../engine/asset/loaders/texture/TextureAssetLoader.js";
+import Vector3 from "../../core/geom/Vector3.js";
+import EntityBuilder from "../../engine/ecs/EntityBuilder.js";
+import Terrain from "../../engine/ecs/terrain/ecs/Terrain.js";
+import { ImageRGBADataLoader } from "../../engine/asset/loaders/image/ImageRGBADataLoader.js";
+import TerrainSystem from "../../engine/ecs/terrain/ecs/TerrainSystem.js";
+import WaterSystem from "../../engine/graphics/ecs/water/WaterSystem.js";
+import Water from "../../engine/graphics/ecs/water/Water.js";
+import { ThemeEngine } from "../../generation/theme/ThemeEngine.js";
+import { Theme } from "../../generation/theme/Theme.js";
+import { TerrainTheme } from "../../generation/theme/TerrainTheme.js";
+import { AreaTheme } from "../../generation/theme/AreaTheme.js";
+import { GridData } from "../../generation/grid/GridData.js";
+import { TerrainLayerRule } from "../../generation/theme/TerrainLayerRule.js";
+import { TerrainLayerDescription } from "../../generation/theme/TerrainLayerDescription.js";
+import Vector2 from "../../core/geom/Vector2.js";
+import { CellFilterLiteralFloat } from "../../generation/filtering/numeric/CellFilterLiteralFloat.js";
+import { GridDataLayer } from "../../generation/grid/layers/GridDataLayer.js";
+import { CellFilterReadGridLayer } from "../../generation/filtering/numeric/CellFilterReadGridLayer.js";
+import { CellFilterSmoothStep } from "../../generation/filtering/numeric/math/CellFilterSmoothStep.js";
+import { CellFilterOneMinus } from "../../generation/filtering/numeric/math/CellFilterOneMinus.js";
+import { CellFilterMultiply } from "../../generation/filtering/numeric/math/algebra/CellFilterMultiply.js";
+import { CellFilterCurvature } from "../../generation/filtering/numeric/complex/CellFilterCurvature.js";
+import { CellFilterMax2 } from "../../generation/filtering/numeric/math/CellFilterMax2.js";
+import { CellFilterMin2 } from "../../generation/filtering/numeric/math/CellFilterMin2.js";
+import { AmbientOcclusionPostProcessEffect } from "../../engine/graphics/render/buffer/simple-fx/ao/AmbientOcclusionPostProcessEffect.js";
+import { CellFilterAngleToNormal } from "../../generation/filtering/numeric/complex/CellFilterAngleToNormal.js";
+import { CellFilterCache } from "../../generation/filtering/numeric/CellFilterCache.js";
+
+const HEIGHT_RANGE = 100;
+
+const eh = new EngineHarness();
+
+/**
+ *
+ * @param {Engine} engine
+ * @return {EngineConfiguration}
+ */
+function makeConfig(engine) {
+    const r = new EngineConfiguration();
+
+    // configure engine here, add systems, loaders etc.
+    r.addLoader(GameAssetType.Texture, new TextureAssetLoader());
+    r.addLoader(GameAssetType.Image, new ImageRGBADataLoader());
+
+
+    r.addSystem(new TerrainSystem(engine.graphics, engine.assetManager));
+    r.addSystem(new WaterSystem(engine.graphics));
+
+    r.addPlugin(AmbientOcclusionPostProcessEffect);
+
+    return r;
+}
+
+function makeTheme() {
+    const theme = new Theme();
+
+
+    const terrainTheme = new TerrainTheme();
+
+    const height = CellFilterReadGridLayer.from('height');
+    const curvature = CellFilterCurvature.from(height);
+
+    const slope = CellFilterAngleToNormal.from(height, Vector3.forward);
+
+    const filterNotVerySharpSlope = CellFilterCache.from(
+        CellFilterOneMinus.from(
+            CellFilterSmoothStep.from(
+                CellFilterLiteralFloat.from(Math.PI / 9),
+                CellFilterLiteralFloat.from(Math.PI / 5),
+                slope
+            )
+        )
+    );
+
+    const main_dress_weights = CellFilterMin2.from(
+        CellFilterSmoothStep.from(
+            CellFilterLiteralFloat.from(0.125 * HEIGHT_RANGE),
+            CellFilterLiteralFloat.from(0.175 * HEIGHT_RANGE),
+            height
+        ),
+        CellFilterOneMinus.from(curvature)
+    );
+
+    terrainTheme.rules.push(
+        // RIVER
+        TerrainLayerRule.from(
+            CellFilterOneMinus.from(
+                CellFilterSmoothStep.from(
+                    CellFilterLiteralFloat.from(0.115 * HEIGHT_RANGE),
+                    CellFilterLiteralFloat.from(0.125 * HEIGHT_RANGE),
+                    height
+                )
+            ),
+            TerrainLayerDescription.from({
+                diffuse: "data/textures/materials/water-pool-texture-seamless-and-free.jpg",
+                size: new Vector2(100, 100)
+            })
+        ),
+        // WET AREAS
+        TerrainLayerRule.from(
+            CellFilterMax2.from(
+                CellFilterMultiply.from(
+                    CellFilterSmoothStep.from(
+                        CellFilterLiteralFloat.from(0.125 * HEIGHT_RANGE),
+                        CellFilterLiteralFloat.from(0.15 * HEIGHT_RANGE),
+                        height
+                    ),
+                    CellFilterOneMinus.from(
+                        CellFilterSmoothStep.from(
+                            CellFilterLiteralFloat.from(0.175 * HEIGHT_RANGE),
+                            CellFilterLiteralFloat.from(0.2 * HEIGHT_RANGE),
+                            height
+                        )
+                    )
+                ),
+                CellFilterSmoothStep.from(
+                    CellFilterLiteralFloat.from(0.2),
+                    CellFilterLiteralFloat.from(0.5),
+                    curvature
+                )
+            ),
+            TerrainLayerDescription.from({
+                diffuse: "data/textures/materials/terrain_township_set/512/Ground_1_dark.png",
+                size: new Vector2(40, 40)
+            })
+        ),
+        // TOP SOIL
+        TerrainLayerRule.from(
+            CellFilterMultiply.from(
+                main_dress_weights,
+                filterNotVerySharpSlope
+            ),
+            TerrainLayerDescription.from({
+                diffuse: "data/textures/materials/terrain_township_set/512/Grass_1.png",
+                size: new Vector2(40, 40)
+            })
+        ),
+        // SLOPE SOIL
+        TerrainLayerRule.from(
+            CellFilterMultiply.from(
+                main_dress_weights,
+                CellFilterOneMinus.from(filterNotVerySharpSlope)
+            ),
+            TerrainLayerDescription.from({
+                diffuse: "data/textures/materials/terrain_township_set/512/Grass_3.png",
+                size: new Vector2(40, 40)
+            })
+        )
+    );
+
+    theme.terrain = terrainTheme;
+
+    return theme;
+}
+
+/**
+ *
+ * @param {Engine} engine
+ */
+async function main(engine) {
+    const TERRAIN_SIZE = 256;
+
+    await EngineHarness.buildBasics({
+        engine,
+        enableWater: false,
+        enableTerrain: false,
+        focus: new Vector3(250, 0, 250),
+        yaw: -Math.PI,
+        pitch: 0.91,
+        distance: 770
+    });
+
+    /**
+     *
+     * @type {EntityComponentDataset}
+     */
+    const ecd = engine.entityManager.dataset;
+
+
+    const terrain = new Terrain();
+    terrain.size.set(TERRAIN_SIZE, TERRAIN_SIZE);
+    terrain.resolution = 2;
+    terrain.gridScale = 2;
+    terrain.splat.resize(TERRAIN_SIZE, TERRAIN_SIZE, 1);
+    terrain.splat.fillLayerWeights(0, 255);
+
+    // load height map
+    const asset = await engine.assetManager.promise('moicon/heightmap.png', 'image');
+
+    /**
+     *
+     * @type {Sampler2D}
+     */
+    const sampler = asset.create();
+
+    terrain.samplerHeight.resize(sampler.width, sampler.height);
+    const source_height_data = sampler.data;
+    const sampler_pixel_count = source_height_data.length;
+    const terrain_height_data = terrain.samplerHeight.data;
+
+    let divisor;
+    if (source_height_data instanceof Uint8Array) {
+        divisor = 255;
+    } else if (source_height_data instanceof Uint16Array) {
+        divisor = 65536 - 1;
+    }
+
+    for (let i = 0; i < sampler_pixel_count; i++) {
+        const source_v = source_height_data[i];
+
+        const b0 = source_v & 0xFF;
+        const b1 = (source_v >> 8) & 0xFF;
+
+        let rotated_v;
+        rotated_v = b1 | (b0 << 8);
+
+        if (rotated_v <= 7000) {
+            rotated_v = 0;
+        }
+
+        terrain_height_data[i] = (rotated_v / divisor) * HEIGHT_RANGE
+    }
+
+    const grid = new GridData();
+    grid.resize(TERRAIN_SIZE, TERRAIN_SIZE);
+
+    //inject height map into grid layer
+    const layer = new GridDataLayer();
+    layer.id = 'height';
+
+    grid.addLayer(layer);
+
+    layer.sampler = terrain.samplerHeight;
+
+    const theme_engine = new ThemeEngine();
+
+    const areaTheme = new AreaTheme();
+    areaTheme.theme = makeTheme();
+    areaTheme.mask.resize(grid.width, grid.height);
+    areaTheme.mask.mask.data.fill(255);
+    areaTheme.mask.distanceField.data.fill(0);
+    areaTheme.mask.bounds.set(0, 0, grid.width, grid.height);
+
+    theme_engine.add(areaTheme);
+
+
+    terrain.build(engine.assetManager);
+
+    const water = new Water();
+
+    water.level.set(5);
+    water.shoreDepthTransition.set(0.1, 0.3);
+    water.scattering.set(3);
+
+    new EntityBuilder()
+        .add(terrain)
+        // .add(water)
+        .build(ecd);
+
+    const task = theme_engine.apply(grid, ecd);
+
+    const promise_load = engine.loadSlowTask(task);
+
+    engine.executor.runGroup(task);
+
+    await promise_load;
+
+    await terrain.buildLightMap(1);
+}
+
+/**
+ *
+ * @param {EngineHarness} harness
+ */
+async function init(harness) {
+    const engine = eh.engine;
+
+    await makeConfig(engine).apply(engine);
+
+    await eh.initialize();
+
+    main(engine);
+}
+
+init(eh);