@woosh/meep-engine 2.33.24 → 2.33.25

package/engine/graphics/particles/particular/engine/utils/volume/prototypeParticleVolume.js

@@ -2,47 +2,29 @@ import { EngineHarness } from "../../../../../../EngineHarness.js";
 import { EngineConfiguration } from "../../../../../../EngineConfiguration.js";
 import GUIElementSystem from "../../../../../../ecs/gui/GUIElementSystem.js";
 import HeadsUpDisplaySystem from "../../../../../../ecs/gui/hud/HeadsUpDisplaySystem.js";
-import ScriptSystem from "../../../../../../ecs/systems/ScriptSystem.js";
-import FacingDirectionSystem from "../../../../../../../../model/game/ecs/system/FacingDirectionSystem.js";
-import PathFollowingSystem from "../../../../../../navigation/ecs/path_following/PathFollowingSystem.js";
-import SteeringSystem from "../../../../../../ecs/systems/SteeringSystem.js";
-import MotionSystem from "../../../../../../ecs/systems/MotionSystem.js";
 import TagSystem from "../../../../../../ecs/systems/TagSystem.js";
 import { AttachmentSocketsSystem } from "../../../../../../ecs/sockets/AttachmentSocketsSystem.js";
 import { AttachmentSystem } from "../../../../../../ecs/attachment/AttachmentSystem.js";
 import { SoundEmitterSystem } from "../../../../../../sound/ecs/emitter/SoundEmitterSystem.js";
 import SoundControllerSystem from "../../../../../../sound/ecs/SoundControllerSystem.js";
 import SoundListenerSystem from "../../../../../../sound/ecs/SoundListenerSystem.js";
-import TimerSystem from "../../../../../../ecs/systems/TimerSystem.js";
 import AnimationSystem from "../../../../../../ecs/systems/AnimationSystem.js";
 import TopDownCameraControllerSystem from "../../../../../ecs/camera/topdown/TopDownCameraControllerSystem.js";
-import { TopDownCameraLanderSystem } from "../../../../../ecs/camera/topdown/TopDownCameraLanderSystem.js";
 import { CameraSystem } from "../../../../../ecs/camera/CameraSystem.js";
 import { MeshSystem } from "../../../../../ecs/mesh/MeshSystem.js";
 import ClingToTerrainSystem from "../../../../../../ecs/terrain/ecs/ClingToTerrainSystem.js";
 import TerrainSystem from "../../../../../../ecs/terrain/ecs/TerrainSystem.js";
-import WaterSystem from "../../../../../ecs/water/WaterSystem.js";
 import Trail2DSystem from "../../../../../ecs/trail2d/Trail2DSystem.js";
 import { Foliage2System } from "../../../../../../ecs/foliage/ecs/Foliage2System.js";
 import ViewportPositionSystem from "../../../../../../ecs/gui/position/ViewportPositionSystem.js";
-import { GridPosition2TransformSystem } from "../../../../../../grid/systems/GridPosition2TransformSystem.js";
-import { Transform2GridPositionSystem } from "../../../../../../grid/transform2grid/Transform2GridPositionSystem.js";
 import SynchronizePositionSystem from "../../../../../../ecs/systems/SynchronizePositionSystem.js";
-import GridObstacleSystem from "../../../../../../grid/systems/GridObstacleSystem.js";
-import GridPositionSystem from "../../../../../../grid/systems/GridPositionSystem.js";
 import InputControllerSystem from "../../../../../../input/ecs/systems/InputControllerSystem.js";
 import { InputSystem } from "../../../../../../input/ecs/systems/InputSystem.js";
 import MeshHighlightSystem from "../../../../../ecs/highlight/system/MeshHighlightSystem.js";
 import LightSystem from "../../../../../ecs/light/LightSystem.js";
-import AnimationControllerSystem from "../../../../../ecs/animation/AnimationControllerSystem.js";
-import { AnimationGraphSystem } from "../../../../../ecs/animation/animator/AnimationGraphSystem.js";
-import { FogOfWarSystem } from "../../../../../../ecs/fow/FogOfWarSystem.js";
-import { FogOfWarRevealerSystem } from "../../../../../../ecs/fow/FogOfWarRevealerSystem.js";
 import { BehaviorSystem } from "../../../../../../intelligence/behavior/ecs/BehaviorSystem.js";
 import { SerializationMetadataSystem } from "../../../../../../ecs/systems/SerializationMetadataSystem.js";
-import { InverseKinematicsSystem } from "../../../../../../ecs/animation/InverseKinematicsSystem.js";
 import { PathDisplaySystem } from "../../../../../ecs/path/PathDisplaySystem.js";
-import { MicronRenderPlugin } from "../../../../../micron/plugin/MicronRenderPlugin.js";
 import RenderSystem from "../../../../../../ecs/systems/RenderSystem.js";
 import { makeEngineOptionsModel } from "../../../../../../../../model/game/options/makeEngineOptionsModel.js";
 import { enableEditor } from "../../../../../../../editor/enableEditor.js";
@@ -55,7 +37,7 @@ import { Transform } from "../../../../../../ecs/transform/Transform.js";
 import Mesh from "../../../../../ecs/mesh/Mesh.js";
 import { AABB3 } from "../../../../../../../core/bvh2/aabb3/AABB3.js";
 import { ParticleVolume } from "./ParticleVolume.js";
-import { ParticleEmitterSystem2 } from "../../../../ecs/ParticleEmitterSystem2.js";
+import { ParticleEmitterSystem } from "../../../../ecs/ParticleEmitterSystem.js";
 import { BehaviorComponent } from "../../../../../../intelligence/behavior/ecs/BehaviorComponent.js";
 import { RepeatBehavior } from "../../../../../../intelligence/behavior/decorator/RepeatBehavior.js";
 import { ActionBehavior } from "../../../../../../intelligence/behavior/primitive/ActionBehavior.js";
@@ -67,11 +49,34 @@ import GUIElement from "../../../../../../ecs/gui/GUIElement.js";
 import EmptyView from "../../../../../../../view/elements/EmptyView.js";
 import HeadsUpDisplay from "../../../../../../ecs/gui/hud/HeadsUpDisplay.js";
 import ViewportPosition from "../../../../../../ecs/gui/position/ViewportPosition.js";
-import { Sampler2D } from "../../../../../texture/sampler/Sampler2D.js";
 import { CanvasView } from "../../../../../../../view/elements/CanvasView.js";
 import convertSampler2D2Canvas from "../../../../../texture/sampler/Sampler2D2Canvas.js";
 import Vector1 from "../../../../../../../core/geom/Vector1.js";
 import { clamp } from "../../../../../../../core/math/clamp.js";
+import { UnitCubeShape3D } from "../../../../../../../core/geom/3d/shape/UnitCubeShape3D.js";
+import { ShadedGeometrySystem } from "../../../../../ecs/mesh-v2/ShadedGeometrySystem.js";
+import { lut_to_sampler } from "./lut_to_sampler.js";
+import {
+    shape_to_visual_entity,
+    SHAPE_VISUAL_ENTITY_TAG
+} from "../../../../../../../core/geom/3d/shape/util/shape_to_visual_entity.js";
+import { seededRandom } from "../../../../../../../core/math/random/seededRandom.js";
+import { TransformedShape3D } from "../../../../../../../core/geom/3d/shape/TransformedShape3D.js";
+import { mat4 } from "gl-matrix";
+import { CompositeShape3D } from "../../../../../../../core/geom/3d/shape/CompositeShape.js";
+import { ShadedGeometry } from "../../../../../ecs/mesh-v2/ShadedGeometry.js";
+import { DrawMode } from "../../../../../ecs/mesh-v2/DrawMode.js";
+import { makeHelperBoxGeometry } from "../../../../../../../editor/process/symbolic/makeHelperBoxGeometry.js";
+import { LineBasicMaterial } from "three";
+import Renderable from "../../../../../../ecs/components/Renderable.js";
+import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
+import { threeUpdateTransform } from "../../../../../util/threeUpdateTransform.js";
+import InputController from "../../../../../../input/ecs/components/InputController.js";
+import { computeStatisticalMean } from "../../../../../../../core/math/statistics/computeStatisticalMean.js";
+import ButtonView from "../../../../../../../view/elements/button/ButtonView.js";
+import { UnitSphereShape3D } from "../../../../../../../core/geom/3d/shape/UnitSphereShape3D.js";
+import TopDownCameraController from "../../../../../ecs/camera/topdown/TopDownCameraController.js";
+import { randomFloatBetween } from "../../../../../../../core/math/random/randomFloatBetween.js";
 
 const engineHarness = new EngineHarness();
 
@@ -92,55 +97,40 @@ function makeConfig(engine) {
     const headsUpDisplaySystem = new HeadsUpDisplaySystem(graphics);
 
     config.systems.push(
-        new ScriptSystem(),
-        new FacingDirectionSystem(),
-        new PathFollowingSystem(),
-        new SteeringSystem(),
-        new MotionSystem(),
         new TagSystem(),
         new AttachmentSocketsSystem(),
         new AttachmentSystem(),
         new SoundEmitterSystem(assetManager, sound.destination, sound.context),
         new SoundControllerSystem(),
         new SoundListenerSystem(sound.context),
-        new TimerSystem(),
         guiSystem,
         new AnimationSystem(graphics.viewport.size),
         new TopDownCameraControllerSystem(graphics),
-        new TopDownCameraLanderSystem(),
         new CameraSystem(graphics.scene, graphics),
         new MeshSystem(engine),
         new ClingToTerrainSystem(),
         new TerrainSystem(graphics, assetManager),
-        new WaterSystem(graphics),
         new Trail2DSystem(engine),
         new Foliage2System(assetManager, graphics),
         new ViewportPositionSystem(graphics.viewport.size),
-        new GridPosition2TransformSystem(),
-        new Transform2GridPositionSystem(),
         new SynchronizePositionSystem(),
-        new GridObstacleSystem(),
-        new GridPositionSystem(),
         new InputControllerSystem(devices),
         new InputSystem(devices),
         new MeshHighlightSystem(engine),
         new LightSystem(engine, {
             shadowResolution: 2048
         }),
-        new AnimationControllerSystem(),
-        new AnimationGraphSystem(graphics.viewport.size),
         headsUpDisplaySystem,
-        new FogOfWarSystem(graphics),
-        new FogOfWarRevealerSystem(0),
         new BehaviorSystem(engine),
         new SerializationMetadataSystem(),
-        new InverseKinematicsSystem(),
         new PathDisplaySystem(engine),
+        new ParticleEmitterSystem(engine),
+        new ShadedGeometrySystem(engine)
     );
 
 
     // Plugins
-    config.addPlugin(MicronRenderPlugin);
+    // config.addPlugin(MicronRenderPlugin);
 
 
     // Knowledge
@@ -186,19 +176,19 @@ heatmap_lut_0.write([
 ]);
 heatmap_lut_0.computeUniformPositions();
 
-const heatmap_lut_1 = new ParameterLookupTable(4);
-heatmap_lut_1.write([
+const heatmap_lut_orange_to_red = new ParameterLookupTable(4);
+heatmap_lut_orange_to_red.write([
     255, 127, 0, 100,
     206, 2, 86, 100
 ]);
-heatmap_lut_1.computeUniformPositions();
+heatmap_lut_orange_to_red.computeUniformPositions();
 
-const heatmap_lut_2 = new ParameterLookupTable(4);
-heatmap_lut_2.write([
+const heatmap_lut_pink_to_blue = new ParameterLookupTable(4);
+heatmap_lut_pink_to_blue.write([
     255, 151, 213, 50,
     2, 243, 255, 50
 ]);
-heatmap_lut_2.computeUniformPositions();
+heatmap_lut_pink_to_blue.computeUniformPositions();
 
 const heatmap_lut_3 = new ParameterLookupTable(4);
 heatmap_lut_3.write(
@@ -220,75 +210,113 @@ heatmap_lut_3.write(
     ]
 );
 
+
 /**
  *
  * @param {Engine} engine
  */
-async function main(engine) {
-    EngineHarness.buildBasics({
-        engine,
-        enableWater: false,
-        // enableTerrain: false,
-        enableTerrain: true,
-        terrainSize: new Vector2(100, 100),
-        focus: new Vector3(102, 0, 61),
-        // pitch: -0.5,
-        // yaw: 2.2,
-        // distance: 3
-        pitch: 0.9,
-        yaw: 3.1,
-        distance: 20
-    });
+function make_shape_vis_toggle(engine) {
+    const ecd = engine.entityManager.dataset;
+    const entities = TagSystem.find_entities_with_tag(SHAPE_VISUAL_ENTITY_TAG, ecd);
 
 
-    engine.graphics.renderer.setClearColor('rgba(99,99,99,1)');
+    const builders = entities.map(e => EntityBuilder.readFromDataset(e, ecd));
 
+    function toggle() {
+        if (builders.length <= 1) {
+            return;
+        }
 
-    const ecd = engine.entityManager.dataset;
+        if (builders[0].isBuilt) {
+            builders.forEach(b => b.destroy());
+        } else {
+            builders.forEach(b => b.build(ecd));
+        }
+    }
+
+    const buttonView = new ButtonView({
+        action: toggle,
+        name: 'Toggle Shapes',
+        css: {
+            position: 'absolute',
+            bottom: '10px',
+            right: '10px',
+            background: 'rgba(255,255,255,0.8)',
+            border: '1px solid rgba(0,0,0,1)',
+            padding: '2px'
+        }
+    });
 
     new EntityBuilder()
-        .add(Transform.fromJSON({
-            position: {
-                x: 20,
-                y: -5.8,
-                z: 100
-            },
-            scale: {
-                x: 1,
-                y: 1,
-                z: 1
-            }
-        }))
-        .add(Mesh.fromJSON({
-            url: 'data/models/moicon/05-ground-floor/model.gltf',
-            castShadow: true,
-            receiveShadow: true
-        }))
-        // .build(ecd);
-    new EntityBuilder()
-        .add(Transform.fromJSON({
-            position: {
-                x: 20,
-                y: -5.8,
-                z: 100
-            },
-            scale: {
-                x: 1,
-                y: 1,
-                z: 1
-            }
-        }))
+        .add(GUIElement.fromView(buttonView))
+        .build(ecd);
+
+    return {
+        toggle
+    };
+}
+
+function mat_from_aabb3(aabb3) {
+    const m4 = mat4.create();
+
+    mat4.fromRotationTranslationScale(m4, [0, 0, 0, 1], [(aabb3.x0 + aabb3.x1) / 2, (aabb3.y0 + aabb3.y1) / 2, (aabb3.z0 + aabb3.z1) / 2], [aabb3.getExtentsX(), aabb3.getExtentsY(), aabb3.getExtentsZ()]);
+
+    return m4;
+}
+
+/**
+ *
+ * @param {string} url
+ * @param {EntityComponentDataset} ecd
+ * @returns {EntityBuilder}
+ */
+function load_model(url, ecd) {
+
+    const b = new EntityBuilder();
+    b
+        .add(new Transform())
         .add(Mesh.fromJSON({
-            url: 'data/models/moicon/08-clickable-assets/model.gltf',
+            url: url,
             castShadow: true,
             receiveShadow: true
         }))
-        // .build(ecd);
+        .build(ecd);
+
+    return b;
+}
+
+/**
+ *
+ * @param {Engine} engine
+ * @returns {Promise<void>}
+ */
+async function sample_scene_0(engine) {
+    const ecd = engine.entityManager.dataset;
+
+    function load_model_s(url, y_offset = 0) {
+        const b = load_model(url, ecd);
+        b.getComponent(Transform).position.set(
+            20,
+            -5.8 + y_offset,
+            100
+        );
+
+        return b;
+    }
+
+    // load_model('moicon/06_04_hapro/00-environment/model.gltf', -0.1);
+    load_model_s('moicon/06_04_hapro/05-ground-floor/model.gltf');
+    // load_model('moicon/06_04_hapro/02-bearers/model.gltf');
+    // load_model('moicon/06_04_hapro/04-1st-floor/model.gltf');
+
 
     await make_demo_volume({
         ecd: ecd,
         lut: heatmap_lut_0,
-        bounds: new AABB3(67.73, 0, 89, 115.84, 3, 118.34),
+        shape: CompositeShape3D.from([
+            TransformedShape3D.from_m4(new UnitCubeShape3D(), mat_from_aabb3(new AABB3(67.73, 0, 89, 115.84, 3, 118.34))),
+            TransformedShape3D.from_m4(new UnitCubeShape3D(), mat_from_aabb3(new AABB3(98, 0, 76.5, 109.5, 3, 89)))
+        ]),
         particle_size: 4,
         density: 4,
         period: 10
@@ -297,7 +325,11 @@ async function main(engine) {
     await make_demo_volume({
         ecd: ecd,
         lut: heatmap_lut_0,
-        bounds: new AABB3(43.8, 0, 89, 67.40, 3, 131),
+        shape: CompositeShape3D.from([
+            TransformedShape3D.from_m4(new UnitCubeShape3D(), [14.980091485108495, 0, 0, 0, 0, 2.812495250139616, 0, 0, 0, 0, 7.469446746375293, 0, 54.83080514238756, 1.568241402881399, 92.51937192481576, 1]),
+            TransformedShape3D.from_m4(new UnitCubeShape3D(), [6.644515553810907, 0, 0, 0, 0, 2.812495250139616, 0, 0, 0, 0, 5.507507223409315, 0, 46.95032009188344, 1.568241402881399, 95.54148649329517, 1]),
+            TransformedShape3D.from_m4(new UnitCubeShape3D(), [23.762890107594952, 0, 0, 0, 0, 2.812495250139616, 0, 0, 0, 0, 34.57956316503163, 0, 55.436098243647756, 1.568241402881399, 113.46988143189215, 1])
+        ]),
         particle_size: 2,
         density: 1,
         period: 10,
@@ -306,8 +338,8 @@ async function main(engine) {
 
     await make_demo_volume({
         ecd: ecd,
-        lut: heatmap_lut_1,
-        bounds: new AABB3(97.68, 0, 67.71, 115.76, 3, 76.14),
+        lut: heatmap_lut_orange_to_red,
+        shape: TransformedShape3D.from_m4(new UnitCubeShape3D(), mat_from_aabb3(new AABB3(97.68, 0, 67.71, 115.76, 3, 76.14))),
         particle_size: 1,
         density: 1.2,
         period: 7,
@@ -316,121 +348,436 @@ async function main(engine) {
 
     await make_demo_volume({
         ecd: ecd,
-        lut: heatmap_lut_2,
-        bounds: new AABB3(79.0, 0, 67.71, 97.35, 3, 76.14),
+        lut: heatmap_lut_pink_to_blue,
+        shape: CompositeShape3D.from([
+            TransformedShape3D.from_m4(new UnitCubeShape3D(), [15.218520811592711, 0, 0, 0, 0, 3.058639690434693, 0, 0, 0, 0, 5.828701399328644, 0, 89.53848861962253, 2.0721850959505907, 73.05504876489894, 1]),
+            TransformedShape3D.from_m4(new UnitCubeShape3D(), [18.10977091153633, 0, 0, 0, 0, 3.058639690434693, 0, 0, 0, 0, 2.5862076050328002, 0, 88.03260126722904, 2.0721850959505907, 69.0797462656922, 1])
+        ]),
         particle_size: 4,
         density: 4,
         period: 7,
         period_offset: 2,
     });
 
+    // large open room, dense particles
     await make_demo_volume({
         ecd: ecd,
         lut: heatmap_lut_3,
-        bounds: new AABB3(67.85, 0, 31.1, 109.8, 3, 67.02),
-        particle_size: 0.1,
+        shape: CompositeShape3D.from([
+            TransformedShape3D.from_m4(new UnitCubeShape3D(), [20.977896627021547, 0, 0, 0, 0, 2.956899734575006, 0, 0, 0, 0, 36.201589869571954, 0, 99.2120028317975, 1.5919924971428276, 49.21655402009093, 1]),
+            TransformedShape3D.from_m4(new UnitCubeShape3D(), [24.455615450514458, 0, 0, 0, 0, 2.956899734575006, 0, 0, 0, 0, 28.081536987027807, 0, 80.11618755300161, 1.5919924971428276, 45.13808745329574, 1]),
+            TransformedShape3D.from_m4(new UnitCubeShape3D(), [5.562874425497998, 0, 0, 0, 0, 2.956899734575006, 0, 0, 0, 0, 2.654155224548708, 0, 70.80986716000054, 1.5919924971428276, 59.679876796143446, 1])
+        ]),
+        particle_size: 0.15,
         density: 5,
         period: 7,
         period_offset: 2,
     });
 
+    // popsicle
+    await make_demo_volume({
+        ecd: ecd,
+        lut: heatmap_lut_orange_to_red,
+        shape: CompositeShape3D.from([
+            TransformedShape3D.from_m4(new UnitCubeShape3D(), [-3.8971594611231577, -1.9562533614625899, -0.5725042419276598, 0, -8.346390838999248, 16.986127440019352, -1.226109479938015, 0, 0.12112312197093604, 0, -0.8245111322851176, 0, 55.83305788880312, 9.579537179233043, 83.59013920067233, 1]),
+            TransformedShape3D.from_m4(new UnitSphereShape3D(), [10.237283879346698, 0, 0, 0, 0, 10.237283879346698, 0, 0, 0, 0, 10.237283879346698, 0, 51.783732965076716, 18.028888481196716, 82.91084586075068, 1])
+        ]),
+        particle_size: 0.7,
+        density: 5,
+        period: 3,
+        period_offset: 2,
+        sort: true
+    });
+
     engine.devices.pointer.on.down.add((p) => {
         pick(p.x, p.y, engine.graphics, obtainTerrain(ecd), (grid_position, position, normal) => {
             console.log(position.toJSON());
         });
     });
+
+    make_shape_vis_toggle(engine).toggle(); // turn off shape vis initially
+
+    // editing box
+    make_box_editor(engine, Transform.fromJSON({
+        position: {
+            x: 20,
+            y: 5,
+            z: 100
+        },
+        scale: {
+            x: 1,
+            y: 1,
+            z: 1
+        }
+    }));
 }
 
+
 /**
  *
- * @param {ParameterLookupTable} lut
- * @param {number} width
- * @param {number} height
- * @returns {Sampler2D}
+ * @param {Engine} engine
+ * @returns {Promise<void>}
  */
-function lut_to_sampler(lut, width, height) {
-    const sampler = Sampler2D.uint8(4, width, height);
+async function sample_scene_nam(engine) {
+    const ecd = engine.entityManager.dataset;
 
-    const s = [];
+    ecd.getAnyComponent(TopDownCameraController).component.fromJSON({
+        "target": {
+            "x": 21.09522080045099,
+            "y": -0.6327784109623013,
+            "z": 6.138907038731565
+        },
+        "pitch": 1.1099999999999923,
+        "yaw": -3.143185307179591,
+        "roll": 0,
+        "distance": 29,
+        "distanceMin": 0,
+        "distanceMax": 1000
+    });
 
-    for (let i = 0; i < width; i++) {
+    load_model('moicon/20_Dec_2021_Nammo/with_assets(for_alex)/model.gltf', ecd)
 
-        lut.sample(i / (width - 1), s);
-        s[3] = 255;
+    const P_SIZE_SMALL = 0.15;
+    const P_SIZE_MEDIUM = 0.6;
+    const P_SIZE_LARGE = 2;
 
-        for (let j = 0; j < height; j++) {
-            sampler.set(i, j, s);
-        }
+    const random = seededRandom(42);
 
-    }
+    const PERIOD_LONG = 13;
+
+    await make_demo_volume({
+        ecd: ecd,
+        lut: heatmap_lut_pink_to_blue,
+        shape: TransformedShape3D.from_m4(new UnitCubeShape3D(), [5.267098043281134, 0, 0, 0, 0, 2.3166487265965343, 0, 0, 0, 0, 6.606365126660234, 0, 2.8037239954452864, 1.4169994923726943, 11.460158766988037, 1]),
+        particle_size: P_SIZE_MEDIUM,
+        density: 3,
+        period: PERIOD_LONG,
+        period_offset: randomFloatBetween(random, 0, PERIOD_LONG),
+        sprite: 'data/textures/particle/UETools/Hexagon_01.png'
+    });
+    await make_demo_volume({
+        ecd: ecd,
+        lut: heatmap_lut_orange_to_red,
+        shape: TransformedShape3D.from_m4(new UnitCubeShape3D(), [4.7577406314060395, 0, 0, 0, 0, 2.3166487265965343, 0, 0, 0, 0, 6.606365126660234, 0, 8.075207307031247, 1.4169994923726943, 11.460158766988037, 1]),
+        particle_size: P_SIZE_MEDIUM,
+        density: 3,
+        period: PERIOD_LONG,
+        period_offset: randomFloatBetween(random, 0, PERIOD_LONG),
+        sprite: 'data/textures/particle/UETools/Circle_04.png'
+    });
+
+    await make_demo_volume({
+        ecd: ecd,
+        lut: heatmap_lut_pink_to_blue,
+        shape: TransformedShape3D.from_m4(new UnitCubeShape3D(), [6.956797095914032, 0, 0, 0, 0, 2.3166487265965343, 0, 0, 0, 0, 6.606365126660234, 0, 14.17733466985805, 1.4169994923726943, 11.460158766988037, 1]),
+        particle_size: P_SIZE_MEDIUM,
+        density: 3,
+        period: PERIOD_LONG,
+        period_offset: randomFloatBetween(random, 0, PERIOD_LONG),
+        sprite: 'data/textures/particle/travnik/plus_2.png'
+    });
+
+    await make_demo_volume({
+        ecd: ecd,
+        lut: heatmap_lut_pink_to_blue,
+        shape: TransformedShape3D.from_m4(new UnitCubeShape3D(), [4.733772190018377, 0, 0, 0, 0, 2.3166487265965343, 0, 0, 0, 0, 6.606365126660234, 0, 20.284613387782148, 1.4169994923726943, 11.460158766988037, 1]),
+        particle_size: P_SIZE_MEDIUM,
+        density: 3,
+        period: PERIOD_LONG,
+        period_offset: randomFloatBetween(random, 0, PERIOD_LONG),
+        sprite: 'data/textures/particle/UETools/Circle_04.png'
+    });
 
-    return sampler;
+    await make_demo_volume({
+        ecd: ecd,
+        lut: heatmap_lut_pink_to_blue,
+        shape: TransformedShape3D.from_m4(new UnitCubeShape3D(), [5.924905976332568, 0, 0, 0, 0, 2.3166487265965343, 0, 0, 0, 0, 6.606365126660234, 0, 31.662442543335885, 1.4169994923726943, 11.460158766988037, 1]),
+        particle_size: P_SIZE_MEDIUM,
+        density: 3,
+        period: PERIOD_LONG,
+        period_offset: randomFloatBetween(random, 0, PERIOD_LONG),
+        sprite: 'data/textures/particle/UETools/Circle_04.png'
+    });
+
+    await make_demo_volume({
+        ecd: ecd,
+        lut: heatmap_lut_0,
+        shape: TransformedShape3D.from_m4(new UnitCubeShape3D(), [5.7305058801925, 0, 0, 0, 0, 2.3166487265965343, 0, 0, 0, 0, 6.606365126660234, 0, 37.70942297505848, 1.4169994923726943, 11.460158766988037, 1]),
+        particle_size: P_SIZE_MEDIUM,
+        density: 8,
+        period: PERIOD_LONG,
+        period_offset: randomFloatBetween(random, 0, PERIOD_LONG),
+        sprite: 'data/textures/particle/UETools/Circle_04.png'
+    });
+    await make_demo_volume({
+        ecd: ecd,
+        lut: heatmap_lut_0,
+        shape: TransformedShape3D.from_m4(new UnitCubeShape3D(), [6.575632395877399, 0, 0, 0, 0, 2.3166487265965343, 0, 0, 0, 0, 4.51714948412602, 0, 37.272800538855826, 1.4169994923726943, 2.4066558057134095, 1]),
+        particle_size: P_SIZE_MEDIUM,
+        density: 8,
+        period: PERIOD_LONG,
+        period_offset: randomFloatBetween(random, 0, PERIOD_LONG),
+        sprite: 'data/textures/particle/UETools/Circle_04.png'
+    });
+
+    await make_demo_volume({
+        ecd: ecd,
+        lut: heatmap_lut_0,
+        shape: TransformedShape3D.from_m4(new UnitCubeShape3D(), [6.410614101275306, 0, 0, 0, 0, 2.3166487265965343, 0, 0, 0, 0, 4.51714948412602, 0, 30.458756650580582, 1.4169994923726943, 2.4066558057134095, 1]),
+        particle_size: P_SIZE_MEDIUM,
+        density: 8,
+        period: PERIOD_LONG,
+        period_offset: randomFloatBetween(random, 0, PERIOD_LONG),
+        sprite: 'data/textures/particle/UETools/Circle_04.png'
+    });
+
+    await make_demo_volume({
+        ecd: ecd,
+        lut: heatmap_lut_3,
+        shape: TransformedShape3D.from_m4(new UnitCubeShape3D(), [4.260857135913424, 0, 0, 0, 0, 2.3166487265965343, 0, 0, 0, 0, 4.51714948412602, 0, 24.82865688356064, 1.4169994923726943, 2.4066558057134095, 1]),
+        particle_size: P_SIZE_SMALL,
+        density: 3,
+        period: PERIOD_LONG,
+        period_offset: randomFloatBetween(random, 0, PERIOD_LONG),
+        sprite: 'data/textures/particle/UETools/Circle_01.png'
+    });
+
+    await make_demo_volume({
+        ecd: ecd,
+        lut: heatmap_lut_3,
+        shape: TransformedShape3D.from_m4(new UnitCubeShape3D(), [4.870266350649175, 0, 0, 0, 0, 2.3166487265965343, 0, 0, 0, 0, 4.51714948412602, 0, 20.022408905267525, 1.4169994923726943, 2.4066558057134095, 1]),
+        particle_size: P_SIZE_SMALL,
+        density: 3,
+        period: PERIOD_LONG,
+        period_offset: randomFloatBetween(random, 0, PERIOD_LONG),
+        sprite: 'data/textures/particle/UETools/Cross_04.png'
+    });
+    await make_demo_volume({
+        ecd: ecd,
+        lut: heatmap_lut_pink_to_blue,
+        shape: CompositeShape3D.from([
+            TransformedShape3D.from_m4(new UnitCubeShape3D(), [5.985827128973811, 0, 0, 0, 0, 2.435269776236539, 0, 0, 0, 0, 4.669621139110231, 0, 11.08356834576874, 1.2643565739307023, 2.4360416869081885, 1]),
+            TransformedShape3D.from_m4(new UnitCubeShape3D(), [8.413758403821523, 0, 0, 0, 0, 2.3166487265965343, 0, 0, 0, 0, 7.775469675813772, 0, 4.313201108449287, 1.4169994923726943, 4.011630095541064, 1]),
+            TransformedShape3D.from_m4(new UnitCubeShape3D(), [8.413758403821523, 0, 0, 0, 0, 2.3166487265965343, 0, 0, 0, 0, 2.925065210015915, 0, 12.417224289491141, 1.4169994923726943, 6.432483110925785, 1])
+        ]),
+        particle_size: P_SIZE_LARGE,
+        density: 4,
+        period: PERIOD_LONG,
+        period_offset: randomFloatBetween(random, 0, PERIOD_LONG),
+        sprite: 'data/textures/particle/UETools/Circle_04.png'
+    });
+
+    make_shape_vis_toggle(engine).toggle(); // turn off shape vis initially
+
+    // editing box
+    // make_box_editor(engine, Transform.fromJSON({
+    //     position: {
+    //         x: -2,
+    //         y: 5,
+    //         z: 0
+    //     },
+    //     scale: {
+    //         x: 1,
+    //         y: 1,
+    //         z: 1
+    //     }
+    // }));
+}
+
+/**
+ *
+ * @param {Engine} engine
+ */
+async function main(engine) {
+    EngineHarness.buildBasics({
+        engine,
+        enableWater: false,
+        enableTerrain: false,
+        // enableTerrain: true,
+        terrainSize: new Vector2(100, 100),
+        focus: new Vector3(102, 0, 61),
+        // pitch: -0.5,
+        // yaw: 2.2,
+        // distance: 3
+        pitch: 0.9,
+        yaw: 3.1,
+        distance: 20
+    });
+
+
+    engine.graphics.renderer.setClearColor('rgba(99,99,99,1)');
+
+    await sample_scene_nam(engine);
 }
 
-async function create_volume({
-                                 bounds = new AABB3(0, 0, 0, 1, 1, 1),
-                                 density = 10,
-                                 particle_size = 1
-                             }) {
+/**
+ *
+ * @param {Engine} engine
+ * @param {Transform} [transform]
+ */
+function make_box_editor(engine, transform = new Transform()) {
+    const controls = new TransformControls(engine.graphics.camera, engine.graphics.domElement);
 
-    const aabb_bounds = new AABB3();
-    aabb_bounds.fromJSON(bounds);
+    const eb = new EntityBuilder();
+    const g_unit_cube = makeHelperBoxGeometry(1, 1, 1);
 
-    const hs = particle_size / 4;
+    const ecd = engine.entityManager.dataset;
 
-    aabb_bounds.x0 += hs;
-    aabb_bounds.z0 += hs;
+    const lineMaterial = new LineBasicMaterial({
+        depthTest: true,
+        depthWrite: false,
+        transparent: true,
+        linewidth: 1,
+        fog: false,
+        color: '#4aff51',
+        opacity: 1
+    });
 
-    aabb_bounds.x1 -= hs;
-    aabb_bounds.z1 -= hs;
+    const box_transform = transform.clone();
+    eb.add(box_transform);
+    const sg = ShadedGeometry.from(g_unit_cube, lineMaterial, DrawMode.LineSegments);
+    eb.add(sg);
 
-    const adjusted_density = density / particle_size;
+    eb.build(ecd);
 
-    const v = new ParticleVolume();
+    const cachedObject = sg.__cached_object;
+    cachedObject.frustumCulled = false;
+    controls.attach(cachedObject);
 
-    const dx = aabb_bounds.x1 - aabb_bounds.x0;
-    const dy = aabb_bounds.y1 - aabb_bounds.y0;
-    const dz = aabb_bounds.z1 - aabb_bounds.z0;
 
-    v.transform.scale.set(
-        dx,
-        dy,
-        dz
-    );
+    controls.setSize(1);
+    const r_controls = new Renderable(controls);
+    r_controls.matrixAutoUpdate = true;
+    r_controls.boundingBoxNeedsUpdate = false;
+    r_controls.boundingBox.setBounds(0, 0, 0, 1, 1, 1);
 
-    v.transform.position.set(
-        aabb_bounds.x0 + dx / 2,
-        aabb_bounds.y0 + dy / 2,
-        aabb_bounds.z0 + dz / 2
-    );
+    // make camera controller holder
+    const entity = TagSystem.find_entities_with_tag('CameraController', ecd)[0];
 
+    const camera_controls = EntityBuilder.readFromDataset(entity, ecd);
 
-    const em = engine.entityManager;
 
-    if (em.getSystem(ParticleEmitterSystem2) === null) {
-        await em.addSystem(new ParticleEmitterSystem2(engine.assetManager, engine.graphics));
-    }
+    new EntityBuilder()
+        .add(r_controls)
+        .add(new Transform())
+        .add(new InputController([
+            {
+                path: 'keyboard/keys/w/down',
+                listener() {
+                    controls.setMode('translate');
+                }
+            },
+            {
+                path: 'keyboard/keys/e/down',
+                listener() {
+                    controls.setMode('scale');
+                }
+            },
+            {
+                path: 'keyboard/keys/r/down',
+                listener() {
+                    controls.setMode('rotate');
+                }
+            },
+            {
+                path: 'keyboard/keys/s/down',
+                listener() {
+                    // output current box
+
+                    const code_snippet = `TransformedShape3D.from_m4(new UnitCubeShape3D(), ${JSON.stringify(cachedObject.matrix.elements)})`;
+                    console.warn(code_snippet);
+
+                    navigator.clipboard.writeText(code_snippet);
+                }
+            },
+            {
+                path: 'keyboard/keys/space/down',
+                listener() {
+                    // reset scale and rotation
+                    box_transform.scale.setScalar(1);
+                    box_transform.rotation.set(0, 0, 0, 1);
+                }
+            }
+        ]))
+        .add(BehaviorComponent.looping_function(() => {
+
+            threeUpdateTransform(controls);
+
+            if (controls.dragging) {
+                if (camera_controls.isBuilt) {
+                    camera_controls.destroy();
+                }
+            } else {
+                if (!camera_controls.isBuilt) {
+                    camera_controls.build(ecd);
+                }
+            }
+
+            cachedObject.updateMatrix();
+            const matrix = cachedObject.matrix;
+            const t = eb.getComponent(Transform);
+
+            t.position.onChanged.mute();
+            t.rotation.onChanged.mute();
+            t.scale.onChanged.mute();
+
+            t.fromMatrix4(matrix.elements);
+
+            t.position.onChanged.unmute();
+            t.rotation.onChanged.unmute();
+            t.scale.onChanged.unmute();
+
+            sg.updateTransform();
+
+        }))
+        .build(ecd);
+}
+
+/**
+ *
+ * @param {EntityComponentDataset} ecd
+ * @param {AbstractShape3D} shape
+ * @param {number} density
+ * @param {number} particle_size
+ * @param {boolean} sort
+ * @returns {ParticleVolume}
+ */
+function create_volume({
+                           ecd,
+                           shape = new UnitCubeShape3D(),
+                           density = 10,
+                           particle_size = 1,
+                           sort = false,
+                           sprite
+                       }) {
+
+    const adjusted_density = density / particle_size;
+
+    const v = new ParticleVolume();
 
     v.from({
         density: adjusted_density,
-        particle_size
+        particle_size,
+        shape: shape,
+        sort,
+        sprite
     });
 
     v.build();
 
-    v.entity.build(em.dataset);
+    v.entity.build(ecd);
 
     return v;
 }
 
 /**
  *
- * @param {AABB3} bounds
+ * @param {Vector3} position
  * @param {ParameterLookupTable} lut
  * @return {{position: Vector1}}
  */
 function make_symbol_view({
-                              bounds,
+                              position,
                               lut
                           }) {
 
@@ -494,7 +841,7 @@ function make_symbol_view({
     symbol_view.addChild(view_cursor);
 
     const symbol_transform = new Transform();
-    bounds.getCenter(symbol_transform.position);
+    symbol_transform.position.copy(position);
 
     const vp = new ViewportPosition();
     vp.anchor.set(0.5, 1);
@@ -512,29 +859,59 @@ function make_symbol_view({
 
 async function make_demo_volume({
                                     ecd,
-                                    bounds = new AABB3(0, 0, 0, 20, 10, 20),
+                                    shape,
                                     lut,
                                     period = 5,
                                     period_offset = 0,
                                     density,
-                                    particle_size
+                                    particle_size,
+                                    sort = false,
+                                    sprite
                                 }) {
 
-    const v = await create_volume({
-        bounds,
+    // estimate bounds
+    const bounds = new AABB3();
+    bounds.setNegativelyInfiniteBounds();
+
+    const sample = [];
+    const samples_x = [];
+    const samples_y = [];
+    const samples_z = [];
+
+    const random = seededRandom(0xBEEF);
+
+    for (let i = 0; i < 1024; i++) {
+        shape.sample_random_point_in_volume(sample, 0, random);
+
+        samples_x.push(sample[0]);
+        samples_y.push(sample[1]);
+        samples_z.push(sample[2]);
+    }
+
+    const v = create_volume({
+        ecd,
+        shape,
         density,
-        particle_size
+        particle_size,
+        sort,
+        sprite
     });
 
     let time_total = 0;
 
     const symbol = make_symbol_view({
-        bounds,
+        position: new Vector3(
+            computeStatisticalMean(samples_x),
+            computeStatisticalMean(samples_y),
+            computeStatisticalMean(samples_z),
+        ),
         lut
     });
 
     symbol.entity.build(ecd);
 
+    v.attributes.color.lookup = lut;
+
     new EntityBuilder()
         .add(BehaviorComponent.fromOne(RepeatBehavior.from(new ActionBehavior((time) => {
             time_total += time;
@@ -545,14 +922,14 @@ async function make_demo_volume({
 
             symbol.position.set(f);
 
-            const s = [];
-            lut.sample(f, s);
-
-            // console.log(JSON.stringify(s));
-
-            v.setColor(s[0] , s[1] , s[2] , s[3] );
+            v.attributes.color.write_lookup_value(f);
         }))))
         .build(ecd);
+
+    const shape_entity = shape_to_visual_entity(v.shape, ecd);
+    shape_entity
+        .getComponent(Transform)
+        .copy(v.transform);
 }
 
 init(engineHarness);