@woosh/meep-engine 2.33.22 → 2.33.26

package/engine/graphics/render/forward_plus/plugin/ptototypeFPPlugin.js

@@ -1,4 +1,3 @@
-import { min2 } from "../../../../../core/math/min2.js";
 import { seededRandom } from "../../../../../core/math/random/seededRandom.js";
 import { EngineHarness } from "../../../../EngineHarness.js";
 import { EngineConfiguration } from "../../../../EngineConfiguration.js";
@@ -44,7 +43,15 @@ import { BehaviorSystem } from "../../../../intelligence/behavior/ecs/BehaviorSy
 import { SerializationMetadataSystem } from "../../../../ecs/systems/SerializationMetadataSystem.js";
 import { InverseKinematicsSystem } from "../../../../ecs/animation/InverseKinematicsSystem.js";
 import { PathDisplaySystem } from "../../../ecs/path/PathDisplaySystem.js";
-import { Line, LineBasicMaterial, MeshStandardMaterial, TorusKnotBufferGeometry } from "three";
+import {
+    BoxBufferGeometry,
+    Group,
+    Mesh as ThreeMesh,
+    MeshBasicMaterial,
+    MeshStandardMaterial,
+    OctahedronBufferGeometry,
+    TorusKnotBufferGeometry
+} from "three";
 import RenderSystem from "../../../../ecs/systems/RenderSystem.js";
 import { makeEngineOptionsModel } from "../../../../../../model/game/options/makeEngineOptionsModel.js";
 import { enableEditor } from "../../../../../editor/enableEditor.js";
@@ -59,26 +66,28 @@ import { BehaviorComponent } from "../../../../intelligence/behavior/ecs/Behavio
 import { Light } from "../../../ecs/light/Light.js";
 import { LightType } from "../../../ecs/light/LightType.js";
 import { parseColor } from "../../../../../core/color/ColorUtils.js";
-import { randomFloatBetween } from "../../../../../core/math/MathUtils.js";
 import Renderable from "../../../../ecs/components/Renderable.js";
 import { makeHelperSphereGeometry } from "../../../../../editor/process/symbolic/makeHelperSphereGeometry.js";
-import GUIElement from "../../../../ecs/gui/GUIElement.js";
-import View from "../../../../../view/View.js";
-import { buildLightClusterWidget } from "../debug/buildLightClusterWidget.js";
-import ViewportPosition from "../../../../ecs/gui/position/ViewportPosition.js";
 import TopDownCameraController from "../../../ecs/camera/topdown/TopDownCameraController.js";
 import ThreeFactory from "../../../three/ThreeFactory.js";
 import { obtainTerrain } from "../../../../../../model/game/scenes/SceneUtils.js";
-import Vector4 from "../../../../../core/geom/Vector4.js";
 import { JsonAssetLoader } from "../../../../asset/loaders/JsonAssetLoader.js";
 import { TextureAssetLoader } from "../../../../asset/loaders/texture/TextureAssetLoader.js";
 import { GameAssetType } from "../../../../asset/GameAssetType.js";
 import { GLTFAssetLoader } from "../../../../asset/loaders/GLTFAssetLoader.js";
 import { ImageRGBADataLoader } from "../../../../asset/loaders/image/ImageRGBADataLoader.js";
-import { MicronRenderPlugin } from "../../../micron/plugin/MicronRenderPlugin.js";
-import { buildCubeURLs } from "../../../texture/cubemap/buildCubeURLs.js";
-
+import { randomFloatBetween } from "../../../../../core/math/random/randomFloatBetween.js";
+import { ParticleEmitter } from "../../../particles/particular/engine/emitter/ParticleEmitter.js";
+import { ParticleEmitterSystem } from "../../../particles/ecs/ParticleEmitterSystem.js";
+import { ShadedGeometrySystem } from "../../../ecs/mesh-v2/ShadedGeometrySystem.js";
+import { FogOfWar } from "../../../../ecs/fow/FogOfWar.js";
+import { FogOfWarRevealer } from "../../../../ecs/fow/FogOfWarRevealer.js";
+import Team from "../../../../../../model/game/ecs/component/Team.js";
+
+const geo_light_center_octahedron = new BoxBufferGeometry(0.1, 0.1, 0.1);
 const engineHarness = new EngineHarness();
+const sphere_geometry = new OctahedronBufferGeometry(1, 5);
+const sphere_geometry_shell = makeHelperSphereGeometry(1);
 
 function makeConfig(engine) {
 
@@ -125,7 +134,7 @@ function makeConfig(engine) {
         new ClingToTerrainSystem(),
         new TerrainSystem(graphics, assetManager),
         new WaterSystem(graphics),
-        new Trail2DSystem(graphics, assetManager),
+        new Trail2DSystem(engine),
         new Foliage2System(assetManager, graphics),
         new ViewportPositionSystem(graphics.viewport.size),
         new GridPosition2TransformSystem(),
@@ -137,22 +146,24 @@ function makeConfig(engine) {
         new InputSystem(devices),
         new MeshHighlightSystem(engine),
         new LightSystem(engine, {
-            shadowResolution: 1024
+            shadowResolution: 2048
         }),
         new AnimationControllerSystem(),
         new AnimationGraphSystem(graphics.viewport.size),
         headsUpDisplaySystem,
+        new ParticleEmitterSystem(engine),
         new FogOfWarSystem(graphics),
         new FogOfWarRevealerSystem(0),
         new BehaviorSystem(engine),
         new SerializationMetadataSystem(),
         new InverseKinematicsSystem(),
         new PathDisplaySystem(engine),
+        new ShadedGeometrySystem(engine)
     );
 
     // Plugins
     config.addPlugin(ForwardPlusRenderingPlugin);
-    config.addPlugin(MicronRenderPlugin);
+    // config.addPlugin(MicronRenderPlugin);
 
     // Knowledge
 
@@ -198,19 +209,30 @@ function makeLight(position, radius, color, intensity = 1) {
     light.distance.set(radius);
     light.intensity.set(intensity);
 
-    const sphere_material = new LineBasicMaterial({
-        depthTest: true,
-        depthWrite: false,
+    const color_uint = light.color.toUint();
+    const visual_group = new Group();
+
+    const mesh_center_0 = new ThreeMesh(sphere_geometry, new MeshBasicMaterial({
+        color: color_uint
+    }));
+    mesh_center_0.scale.setScalar(0.1);
+    mesh_center_0.matrixAutoUpdate = false;
+
+    visual_group.add(mesh_center_0);
+
+    const mesh_center_1 = new ThreeMesh(sphere_geometry, new MeshBasicMaterial({
+        color: color_uint,
         transparent: true,
-        linewidth: 1,
-        fog: false,
-        color: light.color.toUint(),
-        opacity: min2(light.intensity.getValue(), 1)
-    });
+        opacity: 0.06
+    }));
+    mesh_center_1.scale.setScalar(0.3);
+    mesh_center_1.matrixAutoUpdate = false;
 
-    const geometry = makeHelperSphereGeometry(radius);
+    visual_group.add(mesh_center_1);
+
+    const renderable = new Renderable(visual_group);
+    renderable.matrixAutoUpdate = true;
 
-    const renderable = new Renderable(new Line(geometry, sphere_material));
     return new EntityBuilder()
         .add(Transform.fromJSON({
             position: {
@@ -219,8 +241,9 @@ function makeLight(position, radius, color, intensity = 1) {
                 z: position[2]
             }
         }))
+        // .add(center_geo)
         .add(light)
-    // .add(renderable)
+        .add(renderable)
 }
 
 
@@ -266,13 +289,13 @@ function setup_scene_0(engine, ecd) {
 
     console.log(terrain);
 
-    terrain.overlay.size.set(50, 50);
-    for (let i = 0; i < 50; i++) {
-        for (let j = 0; j < 50; j++) {
-
-            terrain.overlay.paintPoint(i, j, new Vector4(random(), random(), random(), 0.9));
-        }
-    }
+    // terrain.overlay.size.set(50, 50);
+    // for (let i = 0; i < 50; i++) {
+    //     for (let j = 0; j < 50; j++) {
+    //
+    //         terrain.overlay.paintPoint(i, j, new Vector4(random(), random(), random(), 0.9));
+    //     }
+    // }
 
     /**
      *
@@ -286,7 +309,7 @@ function setup_scene_0(engine, ecd) {
             "y": 1,
             "z": -0.3141130871587056
         },
-        "pitch": -0.47999999999999965,
+        "pitch": 0.47999999999999965,
         "yaw": 4.279999999999975,
         "roll": 0,
         "distance": 28,
@@ -299,16 +322,16 @@ function setup_scene_0(engine, ecd) {
     camera_controller.target.add(offset);
 
 
-    for (let i = 0; i < 200; i++) {
+    for (let i = 0; i < 10; i++) {
 
         const builder = makeLight([
                 randomFloatBetween(random, -18, 18) + offset.x,
-                randomFloatBetween(random, 0, 10) + offset.y,
+                randomFloatBetween(random, 0.5, 13) + offset.y,
                 randomFloatBetween(random, -10, 10) + offset.z
             ],
-            randomFloatBetween(random, 3, 5),
+            randomFloatBetween(random, 5, 5),
             `hsv(${random().toFixed(4)}, 1, 1)`,
-            1
+            5
         );
 
         const light = builder.getComponent(Light);
@@ -330,7 +353,154 @@ function setup_scene_0(engine, ecd) {
             .build(ecd);
     }
 
-    for (let i = 0; i < 0; i++) {
+    new EntityBuilder()
+        .add(ParticleEmitter.fromJSON({
+            "parameters": [
+                {
+                    "name": "scale",
+                    "itemSize": 1,
+                    "defaultTrackValue": {
+                        "itemSize": 1,
+                        "data": [
+                            1
+                        ],
+                        "positions": [
+                            0
+                        ]
+                    }
+                },
+                {
+                    "name": "color",
+                    "itemSize": 4,
+                    "defaultTrackValue": {
+                        "itemSize": 4,
+                        "data": [
+                            1,
+                            1,
+                            1,
+                            1
+                        ],
+                        "positions": [
+                            0
+                        ]
+                    }
+                }
+            ],
+            "preWarm": true,
+            "readDepth": true,
+            "softDepth": true,
+            "depthSort": true,
+            "velocityAlign": false,
+            "receiveLight": true,
+            "blendingMode": 0,
+            "layers": [
+                {
+                    "imageURL": "data/textures/particle/smokeparticle.png",
+                    "particleLife": {
+                        "min": 3,
+                        "max": 5
+                    },
+                    "particleSize": {
+                        "min": 0.05,
+                        "max": 0.1
+                    },
+                    "particleRotation": {
+                        "min": 0,
+                        "max": 0
+                    },
+                    "particleRotationSpeed": {
+                        "min": 0,
+                        "max": 0
+                    },
+                    "emissionShape": 1,
+                    "emissionFrom": 1,
+                    "emissionRate": 5000,
+                    "emissionImmediate": 0,
+                    "parameterTracks": [
+                        {
+                            "name": "color",
+                            "track": {
+                                "itemSize": 4,
+                                "data": [
+                                    1,
+                                    1,
+                                    1,
+                                    0,
+
+                                    1,
+                                    1,
+                                    1,
+                                    0.7,
+
+                                    1,
+                                    1,
+                                    1,
+                                    0.7,
+
+                                    1,
+                                    1,
+                                    1,
+                                    0,
+                                ],
+                                "positions": [
+                                    0,
+                                    0.2,
+                                    0.8,
+                                    1
+                                ]
+                            }
+                        },
+                        {
+                            "name": "scale",
+                            "track": {
+                                "itemSize": 1,
+                                "data": [
+                                    1
+                                ],
+                                "positions": [
+                                    0
+                                ]
+                            }
+                        }
+                    ],
+                    "position": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                    },
+                    "scale": {
+                        "x": 1,
+                        "y": 1,
+                        "z": 1
+                    },
+                    "particleVelocityDirection": {
+                        "direction": {
+                            "x": 0,
+                            "y": 1,
+                            "z": 0
+                        },
+                        "angle": 1.8
+                    },
+                    "particleSpeed": {
+                        "min": 0.03,
+                        "max": 0.2
+                    },
+                    "steps": [
+                        {
+                            "type": "FixedPhysics",
+                            "parameters": []
+                        }
+                    ]
+                }
+            ]
+        }))
+        .add(Transform.fromJSON({
+            position: new Vector3(offset.x, offset.y + 7, offset.z),
+            scale: new Vector3(40, 14, 26)
+        }))
+        .build(ecd);
+
+    for (let i = 0; i < 100; i++) {
 
         const builder = makeLight([
                 randomFloatBetween(random, -18, 18) + offset.x,
@@ -365,6 +535,370 @@ function setup_scene_0(engine, ecd) {
         .build(ecd);
 }
 
+/**
+ * @param {Engine} engine
+ * @param {EntityComponentDataset} ecd
+ */
+function setup_scene_3(engine, ecd) {
+
+    const random = seededRandom(0);
+    //
+    // const light_key = new Light();
+    // light_key.intensity.set(0.1);
+    // light_key.type.set(LightType.DIRECTION);
+    // light_key.castShadow.set(true);
+    //
+    // const key_light_transform = new Transform();
+    // key_light_transform.position.set(10, 10, 0);
+    // key_light_transform.lookAt(new Vector3(0, 0, 0));
+    //
+    // new EntityBuilder()
+    //     .add(light_key)
+    //     .add(key_light_transform)
+    //     .build(ecd);
+
+    const light_fill = new Light();
+    light_fill.intensity.set(0.03);
+    light_fill.type.set(LightType.AMBIENT);
+    light_fill.castShadow.set(false);
+
+    const fill_light_transform = new Transform();
+    fill_light_transform.position.set(40, 15, 30);
+    fill_light_transform.lookAt(new Vector3(30, 0, 20));
+
+    new EntityBuilder()
+        .add(light_fill)
+        .add(fill_light_transform)
+        .build(ecd);
+
+
+    const camera = CameraSystem.getFirstActiveCamera(ecd);
+
+    camera.component.fov.set(30);
+    camera.component.object.fov = 30;
+
+    // camera.component.autoClip = false;
+    // camera.component.object.near = 2;
+    // camera.component.object.far = 40;
+
+    EngineHarness.buildTerrain({
+        engine,
+        enableWater: false,
+        resolution: 4,
+        size: new Vector2(40, 40),
+        diffuse0: "data/textures/materials/terrain_township_set/1024/Grass_3.png"
+    });
+
+    const terrain = obtainTerrain(ecd, (terrain, entity) => {
+
+        const fow = new FogOfWar();
+
+        fow.scale.set(2);
+        fow.color.set(0.1, 0.1, 0.1, 1);
+
+        // ecd.addComponentToEntity(entity, fow);
+    });
+
+    console.log(terrain);
+
+    // terrain.overlay.size.set(50, 50);
+    // for (let i = 0; i < 50; i++) {
+    //     for (let j = 0; j < 50; j++) {
+    //
+    //         terrain.overlay.paintPoint(i, j, new Vector4(random(), random(), random(), 0.9));
+    //     }
+    // }
+
+    /**
+     *
+     * @type {TopDownCameraController|undefined}
+     */
+    const camera_controller = ecd.getComponent(camera.entity, TopDownCameraController);
+
+
+    const offset = new Vector3(40, 0, 40);
+
+    camera_controller.fromJSON({
+        "target": offset,
+        "pitch": 0.7399999999999984,
+        "yaw": 2.283185307179597,
+        "roll": 0,
+        "distance": 37,
+        "distanceMin": 0,
+        "distanceMax": 1000
+    });
+
+    const volume_dim = new Vector3(15, 2, 15);
+
+    for (let i = 0; i < 0; i++) {
+
+        const builder = makeLight([
+                randomFloatBetween(random, -volume_dim.x / 2, volume_dim.x / 2) + offset.x,
+                randomFloatBetween(random, -volume_dim.y * 0.3, +volume_dim.y * 0.3) + offset.y,
+                randomFloatBetween(random, -volume_dim.z / 2, volume_dim.z / 2) + offset.z
+            ],
+            randomFloatBetween(random, 10, 10),
+            `hsv(${random().toFixed(4)}, 1, 1)`,
+            5
+        );
+
+        const light = builder.getComponent(Light);
+
+        const b = new OrbitingBehavior();
+
+        const size = light.distance.getValue();
+
+        b.radius = randomFloatBetween(random, size, size * 3);
+        b.easing = 0;
+        b.rate = (random() < 0.5 ? 1 : -1) * randomFloatBetween(random, 2, 3) / b.radius;
+
+        const transform = builder.getComponent(Transform);
+
+        b.offset.copy(transform.position);
+
+
+        builder
+            .add(BehaviorComponent.fromOne(b))
+            // .add(BehaviorComponent.looping_function(()=>{
+            //
+            // }))
+            .build(ecd);
+    }
+
+    new EntityBuilder()
+        .add(ParticleEmitter.fromJSON({
+            "parameters": [
+                {
+                    "name": "scale",
+                    "itemSize": 1,
+                    "defaultTrackValue": {
+                        "itemSize": 1,
+                        "data": [
+                            1
+                        ],
+                        "positions": [
+                            0
+                        ]
+                    }
+                },
+                {
+                    "name": "color",
+                    "itemSize": 4,
+                    "defaultTrackValue": {
+                        "itemSize": 4,
+                        "data": [
+                            1,
+                            1,
+                            1,
+                            1
+                        ],
+                        "positions": [
+                            0
+                        ]
+                    }
+                }
+            ],
+            "preWarm": true,
+            "readDepth": true,
+            "softDepth": true,
+            "depthSort": true,
+            "velocityAlign": false,
+            "receiveLight": true,
+            "blendingMode": 0,
+            "layers": [
+                {
+                    "imageURL": "data/textures/particle/UETools/Cloud_04.png",
+                    "particleLife": {
+                        "min": 11,
+                        "max": 11
+                    },
+                    "particleSize": {
+                        "min": 0.05,
+                        "max": 0.05
+                    },
+                    "particleRotation": {
+                        "min": 0,
+                        "max": 3.14
+                    },
+                    "particleRotationSpeed": {
+                        "min": 0,
+                        "max": 0
+                    },
+                    "emissionShape": 1,
+                    "emissionFrom": 1,
+                    "emissionRate": 1000,
+                    "emissionImmediate": 0,
+                    "parameterTracks": [
+                        {
+                            "name": "color",
+                            "track": {
+                                "itemSize": 4,
+                                "data": [
+                                    1,
+                                    1,
+                                    1,
+                                    0.1,
+
+                                    1,
+                                    1,
+                                    1,
+                                    0.7,
+
+                                    1,
+                                    1,
+                                    1,
+                                    0.7,
+
+                                    1,
+                                    1,
+                                    1,
+                                    0,
+                                ],
+                                "positions": [
+                                    0,
+                                    0.1,
+                                    0.8,
+                                    1
+                                ]
+                            }
+                        },
+                        {
+                            "name": "scale",
+                            "track": {
+                                "itemSize": 1,
+                                "data": [
+                                    1.5,
+                                    1,
+                                    1,
+                                    0.2
+                                ],
+                                "positions": [
+                                    0,
+                                    0.1,
+                                    0.8,
+                                    1
+                                ]
+                            }
+                        }
+                    ],
+                    "position": {
+                        "x": 0,
+                        "y": 2.3,
+                        "z": 0
+                    },
+                    "scale": {
+                        "x": 1,
+                        "y": 0.5,
+                        "z": 1
+                    },
+                    "particleVelocityDirection": {
+                        "direction": {
+                            "x": 0,
+                            "y": -1,
+                            "z": 0
+                        },
+                        "angle": 0
+                    },
+                    "particleSpeed": {
+                        "min": 0.2,
+                        "max": 0.7
+                    },
+                    "steps": [
+                        {
+                            "type": "FixedPhysics",
+                            "parameters": []
+                        }
+                    ]
+                }
+            ]
+        }))
+        .add(Transform.fromJSON({
+            position: new Vector3(offset.x, offset.y + volume_dim.y / 2, offset.z),
+            scale: new Vector3(volume_dim.x, volume_dim.y, volume_dim.z)
+        }))
+        .build(ecd);
+
+    const light_grid_size = 6;
+    for (let i = 0; i < light_grid_size; i++) {
+        for (let j = 0; j < light_grid_size; j++) {
+
+            const builder = makeLight([
+                    ((i / (light_grid_size - 1)) - 0.5) * volume_dim.x + offset.x,
+                    volume_dim.y * 0.5 + offset.y,
+                    ((j / (light_grid_size - 1)) - 0.5) * volume_dim.z + offset.z
+                ],
+                3,
+                `hsv(${random().toFixed(4)}, 0.8, 1)`,
+                10
+            );
+
+
+            builder
+                .build(ecd);
+        }
+    }
+
+
+    new EntityBuilder()
+        .add(Transform.fromJSON({
+            position: offset,
+            scale: {
+                x: 4.5,
+                y: 4.5,
+                z: 4.5
+            }
+        }))
+        .add(FogOfWarRevealer.fromJSON({
+            radius: 5
+        }))
+        .add(new Team(0))
+        .add(Mesh.fromJSON({
+            url: 'data/models/LowPolyTownshipSet/Town_Hall/model.gltf',
+            castShadow: true,
+            receiveShadow: true
+        }))
+        .build(ecd);
+
+    const tree_grid_size = 5;
+
+    for (let i = 0; i < tree_grid_size; i++) {
+        for (let j = 0; j < tree_grid_size; j++) {
+
+            // const p = new Vector3(
+            //     offset.x + ((i / (tree_grid_size - 1)) - 0.5) * (volume_dim.x * 0.9),
+            //     offset.y,
+            //     offset.z + ((j / (tree_grid_size - 1)) - 0.5) * (volume_dim.z * 0.9)
+            // );
+
+            const p = new Vector3(
+                offset.x + randomFloatBetween(random, -volume_dim.x * 0.5, volume_dim.x * 0.5),
+                offset.y,
+                offset.x + randomFloatBetween(random, -volume_dim.z * 0.5, volume_dim.z * 0.5),
+            );
+
+            if (p.distanceTo(offset) < 3) {
+                continue;
+            }
+
+            new EntityBuilder()
+                .add(Transform.fromJSON({
+                    position: p,
+                    scale: {
+                        x: 1,
+                        y: 1,
+                        z: 1
+                    }
+                }))
+                .add(Mesh.fromJSON({
+                    url: 'data/models/LowPolyTownshipSet/Tree_1/Tree_1.gltf',
+                    castShadow: true,
+                    receiveShadow: true
+                }))
+                .build(ecd);
+        }
+    }
+}
+
 /**
  * @param {Engine} engine
  * @param {EntityComponentDataset} ecd
@@ -586,7 +1120,7 @@ function main(engine) {
         // pitch: -0.5,
         // yaw: 2.2,
         // distance: 3
-        pitch: 0.9,
+        pitch: -0.9,
         yaw: 3.1,
         distance: 20,
         enableLights: false
@@ -595,10 +1129,10 @@ function main(engine) {
 
     engine.graphics.renderer.setClearColor('rgba(99,99,99,1)');
 
-    setup_scene_0(engine, ecd);
+    setup_scene_3(engine, ecd);
     // setup_scene_1(engine, ecd);
 
-    engine.graphics.loadEnvironmentMap(buildCubeURLs('data/textures/cubemaps/hip_miramar/32/', '.png'));
+    // engine.graphics.loadEnvironmentMap(buildCubeURLs('data/textures/cubemaps/hip_miramar/32/', '.png'));
 
     /**
      *
@@ -606,26 +1140,27 @@ function main(engine) {
      */
     const plugin = engine.plugins.getPlugin(ForwardPlusRenderingPlugin);
     const lm = plugin.getLightManager();
-    lm.setTileMapResolution(24, 14, 14);
+    lm.setTileMapResolution(14, 8, 14);
 
     console.log(lm);
-
-    const v = new View();
-    const clusterWidget = buildLightClusterWidget(lm, engine.graphics.camera);
-    v.el = clusterWidget.domElement;
-    v.size.setSilent(256, 256);
-    v.css({
-        pointerEvents: 'auto'
-    });
-
-    new EntityBuilder()
-        .add(ViewportPosition.fromJSON({
-            anchor: Vector2.one,
-            offset: new Vector2(-0, -0),
-            position: new Vector2(1, 1)
-        }))
-        .add(GUIElement.fromView(v))
-        .build(ecd);
+    window.lm = lm;
+
+    // const v = new View();
+    // const clusterWidget = buildLightClusterWidget(lm, engine.graphics.camera);
+    // v.el = clusterWidget.domElement;
+    // v.size.setSilent(256, 256);
+    // v.css({
+    //     pointerEvents: 'auto'
+    // });
+
+    // new EntityBuilder()
+    //     .add(ViewportPosition.fromJSON({
+    //         anchor: Vector2.one,
+    //         offset: new Vector2(-0, -0),
+    //         position: new Vector2(1, 1)
+    //     }))
+    //     .add(GUIElement.fromView(v))
+    //     .build(ecd);
 
     engine.graphics.on.preRender.add(
         /**
@@ -657,7 +1192,7 @@ function main(engine) {
             // camera.updateProjectionMatrix();
             // camera.updateMatrixWorld(true);
 
-            clusterWidget.update();
+            // clusterWidget.update();
 
         });