@woosh/meep-engine 2.33.75 → 2.34.2

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);

package/samples/terrain/from_image_2.js

@@ -0,0 +1,219 @@
+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 { AmbientOcclusionPostProcessEffect } from "../../engine/graphics/render/buffer/simple-fx/ao/AmbientOcclusionPostProcessEffect.js";
+import { TerrainLayer } from "../../engine/ecs/terrain/ecs/layers/TerrainLayer.js";
+import Mesh from "../../engine/graphics/ecs/mesh/Mesh.js";
+import { Transform } from "../../engine/ecs/transform/Transform.js";
+import { MeshSystem } from "../../engine/graphics/ecs/mesh/MeshSystem.js";
+import { enableEditor } from "../../editor/enableEditor.js";
+
+const HEIGHT_RANGE = 64;
+
+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.addSystem(new MeshSystem(engine));
+
+    r.addPlugin(AmbientOcclusionPostProcessEffect);
+
+    return r;
+}
+
+/**
+ *
+ * @param {string} path
+ * @param {AssetManager} am
+ */
+async function load_sampler(path, am) {
+
+    const asset = await am.promise(path, 'image');
+
+    /**
+     *
+     * @type {Sampler2D}
+     */
+    const sampler = asset.create();
+
+    return sampler;
+}
+
+/**
+ *
+ * @param {string} path
+ * @param {Engine} engine
+ * @param {Transform} transform
+ */
+async function load_gltf(path, engine, transform) {
+    const em = engine.entityManager;
+
+    const ecd = em.dataset;
+
+    new EntityBuilder()
+        .add(Mesh.fromJSON({
+            url: path
+        }))
+        .add(transform)
+        .build(ecd);
+}
+
+/**
+ *
+ * @param {Engine} engine
+ */
+async function main(engine) {
+    const TERRAIN_SIZE_X = 1024;
+    const TERRAIN_SIZE_Y = 512;
+
+    await EngineHarness.buildBasics({
+        engine,
+        enableWater: false,
+        enableTerrain: false,
+        focus: new Vector3(250, 40, 128),
+        yaw: -Math.PI,
+        pitch: 0.91,
+        distance: 100
+    });
+
+    /**
+     *
+     * @type {EntityComponentDataset}
+     */
+    const ecd = engine.entityManager.dataset;
+
+
+    const terrain = new Terrain();
+    terrain.size.set(TERRAIN_SIZE_X / 4, TERRAIN_SIZE_Y / 4);
+    terrain.resolution = 4;
+    terrain.gridScale = 2;
+    terrain.splat.resize(TERRAIN_SIZE_X, TERRAIN_SIZE_Y, 3);
+
+
+    // load height map
+    const am = engine.assetManager;
+
+    /**
+     *
+     * @type {Sampler2D}
+     */
+    const sampler = await load_sampler('moicon/23_Nov_21_Skogplanter/01/splat_height_2.png', am);
+
+
+    async function load_splat_layer(path, index) {
+
+        const sampler = await load_sampler(path, am);
+
+        terrain.splat.writeLayerFromSampler(sampler, index, 0);
+    }
+
+    await load_splat_layer("moicon/23_Nov_21_Skogplanter/01/splat_green.png", 0);
+    await load_splat_layer("moicon/23_Nov_21_Skogplanter/01/splat_dirt.png", 1);
+    await load_splat_layer("moicon/23_Nov_21_Skogplanter/01/splat_stone.png", 2);
+
+    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);
+
+        terrain_height_data[i] = (rotated_v / divisor) * HEIGHT_RANGE
+    }
+
+    terrain.layers.resolution.set(1024, 1024);
+
+    terrain.layers.addLayer(TerrainLayer.from(
+        "data/textures/materials/terrain_township_set/Grass_2.png",
+        20,
+        20
+    ));
+    terrain.layers.addLayer(TerrainLayer.from(
+        "data/textures/materials/terrain_township_set/1024/Ground_1_dark.png",
+        20,
+        20
+    ));
+    terrain.layers.addLayer(TerrainLayer.from(
+        "data/textures/materials/Sci-Fi Planet/Sand_01.png",
+        20,
+        20
+    ));
+
+    terrain.build(am);
+
+    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);
+
+
+    await terrain.buildLightMap(1);
+
+    const transform = Transform.fromJSON({
+        position: new Vector3(256, 45, 128),
+        scale: new Vector3(0.54, 0.54, 0.54)
+    });
+
+    load_gltf("moicon/23_Nov_21_Skogplanter/02/model.gltf", engine, transform);
+    // load_gltf("moicon/23_Nov_21_Skogplanter/03/model.gltf", engine, transform);
+    // load_gltf("moicon/23_Nov_21_Skogplanter/04/model.gltf", engine, transform);
+}
+
+/**
+ *
+ * @param {EngineHarness} harness
+ */
+async function init(harness) {
+    const engine = eh.engine;
+
+    await makeConfig(engine).apply(engine);
+
+    enableEditor(engine);
+
+    await eh.initialize();
+
+    main(engine);
+}
+
+init(eh);

package/view/elements/radial/RadialMenu.js

@@ -4,7 +4,6 @@
 
 
 import List from "../../../core/collection/list/List.js";
-import { arraySetDiff } from "../../../core/collection/Set.js";
 import Vector2 from "../../../core/geom/Vector2.js";
 import SVG from "../../SVG.js";
 
@@ -12,6 +11,7 @@ import View from "../../View.js";
 import EmptyView from "../EmptyView.js";
 import { makeDonut } from "./makeDonut.js";
 import RadialMenuElement from "./RadialMenuElement.js";
+import { arraySetDiff } from "../../../core/collection/array/arraySetDiff.js";
 
 const PI2 = Math.PI * 2;
 

package/generation/theme/TerrainThemeApplicator.js

@@ -1,6 +0,0 @@
-export class TerrainThemeApplicator {
-    constructor() {
-
-        this.theme
-    }
-}