@woosh/meep-engine 2.37.13 → 2.37.16

package/core/bvh2/aabb3/AABB3.d.ts

@@ -8,12 +8,26 @@ export class AABB3 {
     y1: number
     z1: number
 
+    constructor(x0?: number, y0?: number, z0?: number, x1?: number, y1?: number, z1?: number)
+
     setBounds(x0: number, y0: number, z0: number, x1: number, y1: number, z1: number): void
 
     getCenter(target: Vector3): void
 
+    getCenterX(): number
+
+    getCenterY(): number
+
+    getCenterZ(): number
+
     getExtents(target: Vector3): void
 
+    getExtentsX(): number
+
+    getExtentsY(): number
+
+    getExtentsZ(): number
+
     expandToFit(box: AABB3): void
 
     _expandToFitPoint(x: number, y: number, z: number): boolean
@@ -23,4 +37,10 @@ export class AABB3 {
     setInfiniteBounds(): void
 
     distanceToBox(other: AABB3): number
+
+    applyMatrix4(matrix: ArrayLike<number>): void
+
+    equals(other: AABB3): boolean
+
+    copy(other: AABB3): void
 }

package/core/bvh2/aabb3/AABB3.js

@@ -13,6 +13,7 @@ import { aabb3_intersects_line_segment } from "./aabb3_intersects_line_segment.j
 import { aabb3_intersects_ray } from "./aabb3_intersects_ray.js";
 import { aabb3_compute_surface_area } from "./aabb3_compute_surface_area.js";
 import { aabb3_intersects_frustum_array } from "./aabb3_intersects_frustum_array.js";
+import { aabb3_matrix4_project } from "../../geom/3d/aabb/aabb3_matrix4_project.js";
 
 
 export class AABB3 {
@@ -504,17 +505,6 @@ export class AABB3 {
         return this.getExtentsZ() / 2;
     }
 
-    /**
-     * Get center position of the box
-     * @param {Vector3} target where to write result
-     */
-    getCenter(target) {
-        const x = (this.x0 + this.x1) / 2;
-        const y = (this.y0 + this.y1) / 2;
-        const z = (this.z0 + this.z1) / 2;
-        target.set(x, y, z);
-    }
-
     /**
      *
      * @param {Vector3} target
@@ -527,6 +517,42 @@ export class AABB3 {
         target.set(x, y, z);
     }
 
+    /**
+     *
+     * @returns {number}
+     */
+    getCenterX() {
+        return (this.x0 + this.x1) * 0.5;
+    }
+
+    /**
+     *
+     * @returns {number}
+     */
+    getCenterY() {
+        return (this.y0 + this.y1) * 0.5;
+    }
+
+    /**
+     *
+     * @returns {number}
+     */
+    getCenterZ() {
+        return (this.z0 + this.z1) * 0.5;
+    }
+
+    /**
+     * Get center position of the box
+     * @param {Vector3} target where to write result
+     */
+    getCenter(target) {
+        const x = this.getCenterX();
+        const y = this.getCenterY();
+        const z = this.getCenterZ();
+        target.set(x, y, z);
+    }
+
+
     /**
      * Accepts ray description, first set of coordinates is origin (oX,oY,oZ) and second is direction (dX,dY,dZ). Algorithm from GraphicsGems by Andrew Woo
      * @param oX
@@ -736,7 +762,7 @@ export class AABB3 {
      * @param {number[]|Float32Array|Float64Array} result
      * @param {number} offset
      */
-    writeToArray(result, offset) {
+    writeToArray(result, offset = 0) {
         assert.isNonNegativeInteger(offset, 'offset');
 
         result[offset] = this.x0;
@@ -906,6 +932,21 @@ export class AABB3 {
         return aabb3_intersects_frustum_array(x0, y0, z0, x1, y1, z1, frustum);
     }
 
+    /**
+     *
+     * @param {number[]|ArrayLike<number>|Float32Array} matrix
+     */
+    applyMatrix4(matrix) {
+        const a = [];
+        const b = [];
+
+        this.writeToArray(a, 0);
+
+        aabb3_matrix4_project(b, a, matrix);
+
+        this.readFromArray(b, 0);
+    }
+
     /**
      *
      * @param {number} v

package/core/bvh2/aabb3/AABB3.spec.js

@@ -206,3 +206,22 @@ test('readFrom/writeTo Array consistency', () => {
     expect(s.y1).toEqual(5);
     expect(s.z1).toEqual(6);
 });
+
+
+test("getExtentsX", () => {
+    expect(new AABB3(0, 0, 0, 0, 0, 0).getExtentsX()).toBe(0);
+    expect(new AABB3(0, 0, 0, 1, 0, 0).getExtentsX()).toBeCloseTo(1);
+    expect(new AABB3(-1, 0, 0, 1, 0, 0).getExtentsX()).toBeCloseTo(2);
+});
+
+test("getExtentsY", () => {
+    expect(new AABB3(0, 0, 0, 0, 0, 0).getExtentsY()).toBe(0);
+    expect(new AABB3(0, 0, 0, 0, 1, 0).getExtentsY()).toBeCloseTo(1);
+    expect(new AABB3(0, -1, 0, 0, 1, 0).getExtentsY()).toBeCloseTo(2);
+});
+
+test("getExtentsZ", () => {
+    expect(new AABB3(0, 0, 0, 0, 0, 0).getExtentsZ()).toBe(0);
+    expect(new AABB3(0, 0, 0, 0, 0, 1).getExtentsZ()).toBeCloseTo(1);
+    expect(new AABB3(0, 0, -1, 0, 0, 1).getExtentsZ()).toBeCloseTo(2);
+});

package/core/bvh2/bvh3/ExplicitBinaryBoundingVolumeHierarchy.js

@@ -35,11 +35,25 @@ const CAPACITY_GROW_MULTIPLIER = 1.2;
 const CAPACITY_GROW_MIN_STEP = 64;
 
 /**
+ * How many words are used for a single NODE in the tree
+ * One "word" is 4 bytes for the sake of alignment
  * @readonly
  * @type {number}
  */
 const ELEMENT_WORD_COUNT = 10;
 
+/**
+ * How many nodes can be stored in the newly constructed tree before allocation needs to take place
+ * @readonly
+ * @type {number}
+ */
+const INITIAL_CAPACITY = 128;
+
+/**
+ * Bounding Volume Hierarchy implementation. Stores unsigned integer values at leaves, these are typically IDs or Index values.
+ * Highly optimized both in terms of memory usage and CPU. Most of the code inlined. No allocation are performed during usage (except for growing the tree capacity).
+ * RAM usage: 40 bytes per node. Compared with V8s per-object allocation size of 80 bytes (see https://blog.dashlane.com/how-is-data-stored-in-v8-js-engine-memory)
+ */
 export class ExplicitBinaryBoundingVolumeHierarchy {
     constructor() {
         /**
@@ -47,7 +61,7 @@ export class ExplicitBinaryBoundingVolumeHierarchy {
          * @type {ArrayBuffer}
          * @private
          */
-        this.__data_buffer = new ArrayBuffer(0);
+        this.__data_buffer = new ArrayBuffer(INITIAL_CAPACITY * ELEMENT_WORD_COUNT * 4);
 
         /**
          *
@@ -64,28 +78,34 @@ export class ExplicitBinaryBoundingVolumeHierarchy {
         this.__data_uint32 = new Uint32Array(this.__data_buffer);
 
         /**
-         *
+         * How many nodes are currently reserved, this will grow automatically through {@link #allocate_node} method usage
          * @type {number}
          * @private
          */
-        this.__capacity = 0;
+        this.__capacity = INITIAL_CAPACITY;
 
         /**
-         *
+         * Number of used nodes. These are either live nodes, or node sitting in the {@link #__free} pool
          * @type {number}
          * @private
          */
         this.__size = 0;
 
         /**
-         *
+         * Indices of released nodes. Nodes are pulled from here first if available, before the whole tree gets resized
          * @type {number[]}
          * @private
          */
         this.__free = [];
+        /**
+         * Pointer into __free array that's used as a stack, so this pointer represents top of the stack
+         * @type {number}
+         * @private
+         */
+        this.__free_pointer = 0;
 
         /**
-         *
+         * Root node of the hierarchy
          * @type {number}
          * @private
          */
@@ -134,12 +154,19 @@ export class ExplicitBinaryBoundingVolumeHierarchy {
      * @returns {number}
      */
     allocate_node() {
-        const free = this.__free;
-
         let result;
-        if (free.length > 0) {
+        const free_stack_top = this.__free_pointer;
+
+        if (free_stack_top > 0) {
+
             // nodes in the free pool
-            result = free.pop();
+
+            const free_index = free_stack_top - 1;
+
+            result = this.__free[free_index];
+
+            this.__free_pointer = free_index;
+
         } else {
 
             result = this.__size;
@@ -180,13 +207,14 @@ export class ExplicitBinaryBoundingVolumeHierarchy {
     }
 
     /**
-     * Release memory used by the node
+     * Release memory used by the node back into the pool
+     * NOTE: Make sure that the node is not "live" (not attached to the hierarchy), otherwise this operation may corrupt the tree
      * @param {number} id
      */
     release_node(id) {
         assert.isNonNegativeInteger(id, 'id');
         // no reset required as that's handled in the allocation method
-        this.__free.push(id);
+        this.__free[this.__free_pointer++] = id;
     }
 
     /**
@@ -561,19 +589,21 @@ export class ExplicitBinaryBoundingVolumeHierarchy {
 
         const uint32 = this.__data_uint32;
 
-        while (index !== NULL_NODE) {
+        do {
             index = this.balance(index);
 
-            const child1 = uint32[index * ELEMENT_WORD_COUNT + COLUMN_CHILD_1];
-            const child2 = uint32[index * ELEMENT_WORD_COUNT + COLUMN_CHILD_2];
+            const address = index * ELEMENT_WORD_COUNT;
+
+            const child1 = uint32[address + COLUMN_CHILD_1];
+            const child2 = uint32[address + COLUMN_CHILD_2];
 
             assert.notEqual(child1, NULL_NODE, 'child1 is null');
             assert.notEqual(child2, NULL_NODE, 'child2 is null');
 
             this.node_set_combined_aabb(index, child1, child2);
 
-            index = uint32[index * ELEMENT_WORD_COUNT + COLUMN_PARENT];
-        }
+            index = uint32[address + COLUMN_PARENT];
+        } while (index !== NULL_NODE)
     }
 
     /**
@@ -895,4 +925,12 @@ export class ExplicitBinaryBoundingVolumeHierarchy {
 
         return i - destination_offset;
     }
+
+    /**
+     * Sort live nodes in the traversal order.
+     * This makes most queries have linear access, resulting in near-optimal cache usage
+     */
+    sort_for_traversal_depth_first() {
+        throw new Error('Not Implemented');
+    }
 }

package/core/geom/3d/decompose_matrix_4_array.js

@@ -1,3 +1,5 @@
+const hypot = Math.hypot;
+
 /**
  *
  * @param {number[]} m
@@ -10,17 +12,19 @@ export function decompose_matrix_4_array(m, position, rotation, scale) {
     const m12 = m[1];
     const m13 = m[2];
 
+    const scale_x = hypot(m11, m12, m13);
+
     const m21 = m[4];
     const m22 = m[5];
     const m23 = m[6];
 
+    const scale_y = hypot(m21, m22, m23);
+
     const m31 = m[8];
     const m32 = m[9];
     const m33 = m[10];
 
-    const scale_x = Math.hypot(m11, m12, m13);
-    const scale_y = Math.hypot(m21, m22, m23);
-    const scale_z = Math.hypot(m31, m32, m33);
+    const scale_z = hypot(m31, m32, m33);
 
     // extract rotation
     const is1 = 1 / scale_x;

package/core/geom/Quaternion.js

@@ -1047,7 +1047,9 @@ class Quaternion {
     }
 
     /**
-     *
+     * This algorithm comes from  "Quaternion Calculus and Fast Animation",
+     * Ken Shoemake, 1987 SIGGRAPH course notes
+     * @see https://gitlab.com/libeigen/eigen/-/blob/master/Eigen/src/Geometry/Quaternion.h#L813
      * @param {number} m11
      * @param {number} m12
      * @param {number} m13
@@ -1066,39 +1068,51 @@ class Quaternion {
 
         if (trace > 0) {
 
-            s = 0.5 / Math.sqrt(trace + 1.0);
+            s = Math.sqrt(trace + 1.0);
+
+            w = 0.5 * s;
+
+            s = 0.5 / s;
 
-            w = 0.25 / s;
             x = (m32 - m23) * s;
             y = (m13 - m31) * s;
             z = (m21 - m12) * s;
 
         } else if (m11 > m22 && m11 > m33) {
 
-            s = 2.0 * Math.sqrt(1.0 + m11 - m22 - m33);
+            s = Math.sqrt(1.0 + m11 - m22 - m33);
+
+            x = 0.5 * s;
+
+            s = 0.5 / s;
 
-            w = (m32 - m23) / s;
-            x = 0.25 * s;
-            y = (m12 + m21) / s;
-            z = (m13 + m31) / s;
+            w = (m32 - m23) * s;
+            y = (m12 + m21) * s;
+            z = (m13 + m31) * s;
 
         } else if (m22 > m33) {
 
-            s = 2.0 * Math.sqrt(1.0 + m22 - m11 - m33);
+            s = Math.sqrt(1.0 + m22 - m11 - m33);
 
-            w = (m13 - m31) / s;
-            x = (m12 + m21) / s;
-            y = 0.25 * s;
-            z = (m23 + m32) / s;
+            y = 0.5 * s;
+
+            s = 0.5 / s;
+
+            w = (m13 - m31) * s;
+            x = (m12 + m21) * s;
+            z = (m23 + m32) * s;
 
         } else {
 
-            s = 2.0 * Math.sqrt(1.0 + m33 - m11 - m22);
+            s = Math.sqrt(1.0 + m33 - m11 - m22);
+
+            z = 0.5 * s;
+
+            s = 0.5 / s;
 
-            w = (m21 - m12) / s;
-            x = (m13 + m31) / s;
-            y = (m23 + m32) / s;
-            z = 0.25 * s;
+            w = (m21 - m12) * s;
+            x = (m13 + m31) * s;
+            y = (m23 + m32) * s;
 
         }
 

package/core/geom/Vector3.js

@@ -77,6 +77,8 @@ class Vector3 {
         const oldZ = this.z;
 
         if (x !== oldX || y !== oldY || z !== oldZ) {
+            // change has occurred
+
             this.x = x;
             this.y = y;
             this.z = z;
@@ -942,6 +944,15 @@ class Vector3 {
             input[offset + 2]
         );
     }
+
+    /**
+     *
+     * @param {number} value
+     * @returns {Vector3}
+     */
+    static fromScalar(value) {
+        return new Vector3(value, value, value);
+    }
 }
 
 Vector3.prototype.lengthSq = Vector3.prototype.lengthSqr;

package/engine/ecs/transform/Transform.js

@@ -171,12 +171,15 @@ export class Transform {
      * @param {Transform} other
      */
     copy(other) {
+        // prevent matrix from being overriden
+        this.clearFlag(TransformFlags.AutomaticChangeDetection);
+
+        this.matrix.set(other.matrix);
+
         this.position.copy(other.position);
         this.rotation.copy(other.rotation);
         this.scale.copy(other.scale);
 
-        this.matrix.set(other.matrix);
-
         this.flags = other.flags;
     }
 

package/engine/graphics/ecs/mesh-v2/ShadedGeometry.js

@@ -238,21 +238,16 @@ export class ShadedGeometry {
         const gbb = this.geometry.boundingBox;
 
         const min = gbb.min;
+
+        scratch_aabb3_array[0] = min.x;
+        scratch_aabb3_array[1] = min.y;
+        scratch_aabb3_array[2] = min.z;
+
         const max = gbb.max;
 
-        const x0 = min.x;
-        const y0 = min.y;
-        const z0 = min.z;
-        const x1 = max.x;
-        const y1 = max.y;
-        const z1 = max.z;
-
-        scratch_aabb3_array[0] = x0;
-        scratch_aabb3_array[1] = y0;
-        scratch_aabb3_array[2] = z0;
-        scratch_aabb3_array[3] = x1;
-        scratch_aabb3_array[4] = y1;
-        scratch_aabb3_array[5] = z1;
+        scratch_aabb3_array[3] = max.x;
+        scratch_aabb3_array[4] = max.y;
+        scratch_aabb3_array[5] = max.z;
 
         aabb3_matrix4_project(this.__bvh_aabb, scratch_aabb3_array, this.transform);
     }

package/engine/graphics/ecs/mesh-v2/aggregate/SGMeshSystem.js

@@ -53,6 +53,13 @@ export class SGMeshSystem extends System {
          * @private
          */
         this.__wait_queue_process_index = 0;
+
+        /**
+         * Cache THREE.js objects as we don't use them directly, so we can just keep 1 copy instead of calling {@link Asset#create} every time
+         * @type {Map<Asset, THREE.Object3D>}
+         * @private
+         */
+        this.__asset_object_cache = new Map();
     }
 
     /**
@@ -88,11 +95,28 @@ export class SGMeshSystem extends System {
 
         if (asset.boundingBox !== undefined) {
             mesh.__initial_bounds.copy(asset.boundingBox);
+
+            if (asset.has_root_transform) {
+                // TODO potentially move this to the GLTF Asset Loader to skip matrix operations here
+                mesh.__initial_bounds.applyMatrix4(asset.root_transform.matrix);
+            }
+
         } else {
             console.error(`No bounds for asset: ${asset.description}`);
         }
 
-        let entity_node = three_object_to_entity_composition(asset.create());
+        let object;
+        const cached_object = this.__asset_object_cache.get(asset);
+
+        if (cached_object !== undefined) {
+            object = cached_object;
+        } else {
+            object = asset.create();
+
+            this.__asset_object_cache.set(asset, object);
+        }
+
+        let entity_node = three_object_to_entity_composition(object);
 
         if (asset.has_root_transform) {
             // apply root transform
@@ -230,12 +254,12 @@ export class SGMeshSystem extends System {
                     continue;
                 }
 
+                waiting.splice(index, 1);
+
                 const transform = dataset.getComponent(entity, Transform);
 
                 this.process(entity, mesh, transform);
 
-                waiting.splice(index, 1);
-
             }
 
             this.__wait_queue_process_index = pointer;

package/engine/graphics/ecs/mesh-v2/aggregate/prototypeSGMesh.js

@@ -17,6 +17,14 @@ import Highlight from "../../highlight/Highlight.js";
 import { ShadedGeometryHighlightSystem } from "../../highlight/system/ShadedGeometryHighlightSystem.js";
 import Quaternion from "../../../../../core/geom/Quaternion.js";
 import { seededRandom } from "../../../../../core/math/random/seededRandom.js";
+import { BehaviorComponent } from "../../../../intelligence/behavior/ecs/BehaviorComponent.js";
+import { OrbitingBehavior } from "../../../../../../model/game/util/behavior/OrbitingBehavior.js";
+import Vector2 from "../../../../../core/geom/Vector2.js";
+import { GizmoRenderingPlugin } from "../../../render/gizmo/GizmoRenderingPlugin.js";
+import { Gizmo } from "../../../render/gizmo/Gizmo.js";
+import { AABB3 } from "../../../../../core/bvh2/aabb3/AABB3.js";
+import { MicronRenderPlugin } from "../../../micron/plugin/MicronRenderPlugin.js";
+import { randomFloatBetween } from "../../../../../core/math/random/randomFloatBetween.js";
 
 new EngineHarness().initialize({
     configuration(config, engine) {
@@ -30,23 +38,113 @@ new EngineHarness().initialize({
             new ShadedGeometryHighlightSystem(engine)
         );
 
-        config.addLoader(GameAssetType.ModelGLTF_JSON, new GLTFAssetLoader());
+        config.addPlugin(GizmoRenderingPlugin);
+        config.addPlugin(MicronRenderPlugin);
+
+        const gltfAssetLoader = new GLTFAssetLoader();
+
+        config.addLoader(GameAssetType.ModelGLTF_JSON, gltfAssetLoader);
+        config.addLoader(GameAssetType.ModelGLTF, gltfAssetLoader);
     }
 }).then(main);
 
+/**
+ *
+ * @param {EntityComponentDataset} ecd
+ * @param {Engine} engine
+ */
+function make_grid(ecd, engine) {
+    const random = seededRandom(1);
+
+    const GRID_SIZE = 20;
+    const GRID_FREQUENCY_SIZE = 7;
+
+    for (let i = 0; i < GRID_SIZE; i++) {
+        for (let j = 0; j < GRID_SIZE; j++) {
+            const quaternion = new Quaternion();
+
+            quaternion.__setFromEuler(0, random() * Math.PI, 0);
+
+            const center = new Vector3(i * 8, 0, j * 8);
+
+            const transform = Transform.fromJSON({
+                position: center,
+                rotation: quaternion,
+                scale: randomFloatBetween(random, 0.5, 2)
+            });
+
+            const orbitingBehavior = OrbitingBehavior.from({
+                center: center,
+                rate: 1,
+                radius: 5
+            });
+
+            const ctx = {
+                time: Math.sin(i * Math.PI / (GRID_FREQUENCY_SIZE - 1)) + Math.cos(j * Math.PI / (GRID_FREQUENCY_SIZE - 1))
+            };
+
+            const color = [random(), random(), random(), 1];
+
+            engine.graphics.on.preRender.add(() => {
+
+                const bounds = new AABB3();
+                mesh.getUntransformedBoundingBox(bounds);
+                bounds.applyMatrix4(transform.matrix);
+
+                // mesh.getBoundingBox(bounds);
+
+                Gizmo.color = color;
+
+                Gizmo.draw_wire_cube(
+                    [
+                        bounds.getCenterX(), bounds.getCenterY(), bounds.getCenterZ()
+                    ],
+                    [
+                        bounds.getExtentsX(), bounds.getExtentsY(), bounds.getExtentsZ()
+                    ]
+                );
+            });
+
+
+            // const mesh = SGMesh.fromURL("data/models/RTS_Buildings_Humans/18/Building_R_18_out/Building_R_18.gltf");
+            const mesh = SGMesh.fromURL("data/models/samples/transform-hierarchy.glb");
+            new EntityBuilder()
+                .add(mesh)
+                .add(transform)
+                .add(BehaviorComponent.fromOne(
+                    orbitingBehavior
+                    // RepeatBehavior.from(
+                    //     new ActionBehavior((t) => {
+                    //         ctx.time += t;
+                    //
+                    //         const f = smoothStep(0, 1, pingpong(ctx.time / 2.5, 1));
+                    //
+                    //         transform.position.set(center.x, center.y + f * 5, center.z);
+                    //
+                    //     })
+                    // )
+                ))
+                .build(ecd);
+        }
+    }
+}
+
 /**
  *
  * @param {Engine} engine
  */
 function main(engine) {
     EngineHarness.buildBasics({
-        engine
+        engine,
+        terrainResolution: 1,
+        terrainSize: new Vector2(100, 100)
     });
 
     const ecd = engine.entityManager.dataset;
 
     // const mesh = SGMesh.fromURL("data/models/RTS_Buildings_Humans/18/Building_R_18_out/Building_R_18.gltf");
-    const mesh = SGMesh.fromURL("moicon/ztest_object_many_pieces/model.gltf");
+    // const mesh = SGMesh.fromURL("moicon/ztest_object_many_pieces/model.gltf");
+    const mesh = SGMesh.fromURL("moicon/2022_04_20__Micron_from_Philippe/model.gltf");
     // const mesh = Mesh.fromURL("moicon/ztest_object_many_pieces/model.gltf");
 
     new EntityBuilder()
@@ -74,25 +172,6 @@ function main(engine) {
             });
         })
     // .build(ecd);
-    const r = seededRandom(1);
-
-    for (let i = 0; i < 10; i++) {
-        for (let j = 0; j < 10; j++) {
-            const quaternion = new Quaternion();
-
-            quaternion.__setFromEuler(0, r() * Math.PI, 0);
 
-            new EntityBuilder()
-                .add(SGMesh.fromURL("data/models/RTS_Buildings_Humans/18/Building_R_18_out/Building_R_18.gltf"))
-                .add(Transform.fromJSON({
-                    position: {
-                        x: i * 8,
-                        y: 0,
-                        z: j * 8
-                    },
-                    rotation: quaternion
-                }))
-                .build(ecd);
-        }
-    }
+    make_grid(ecd, engine);
 }

package/engine/graphics/geometry/instancing/InstancedMeshGroup.js

@@ -3,6 +3,9 @@ import {
     DynamicDrawUsage,
     InstancedBufferAttribute,
     InstancedBufferGeometry,
+    Line,
+    LineSegments,
+    Mesh,
     MeshDepthMaterial,
     RGBADepthPacking
 } from 'three';
@@ -13,6 +16,7 @@ import { typed_array_copy } from "../../../../core/collection/array/typed/typed_
 import { rewriteMaterial } from "./rewriteMaterial.js";
 import { max3 } from "../../../../core/math/max3.js";
 import { min2 } from "../../../../core/math/min2.js";
+import { DrawMode } from "../../ecs/mesh-v2/DrawMode.js";
 
 export class InstancedMeshGroup {
     /**
@@ -111,7 +115,64 @@ export class InstancedMeshGroup {
         this.indices = [];
         this.references = [];
 
+        /**
+         *
+         * @type {DrawMode}
+         * @private
+         */
+        this.__draw_mode = DrawMode.Triangles;
+
         this.mesh = ThreeFactory.createMesh();
+
+        this.use_color = true;
+    }
+
+    __build_mesh() {
+
+        let new_object;
+        switch (this.__draw_mode) {
+            case DrawMode.Triangles:
+                new_object = new Mesh(this.mesh.geometry, this.mesh.material);
+                break;
+            case DrawMode.Lines:
+                new_object = new Line(this.mesh.geometry, this.mesh.material);
+                break;
+            case DrawMode.LineSegments:
+                new_object = new LineSegments(this.mesh.geometry, this.mesh.material);
+                break;
+
+            default:
+                throw new Error(`Unsupported DrawMode '${this.__draw_mode}'`);
+        }
+
+        new_object.matrixAutoUpdate = false;
+        new_object.frustumCulled = false;
+        new_object.matrixWorldNeedsUpdate = false;
+
+        if (this.mesh !== null) {
+            new_object.castShadow = this.mesh.castShadow;
+            new_object.receiveShadow = this.mesh.receiveShadow;
+
+            new_object.customDepthMaterial = this.mesh.customDepthMaterial;
+        }
+
+        this.mesh = new_object;
+    }
+
+    /**
+     *
+     * @param {DrawMode} v
+     */
+    set draw_mode(v) {
+        if (v === this.__draw_mode) {
+            // no change
+            return;
+        }
+
+        this.__draw_mode = v;
+
+        this.__build_mesh();
+
     }
 
     /**
@@ -128,6 +189,10 @@ export class InstancedMeshGroup {
         if (this.__attributeTransform !== null) {
             this.__attributeTransform.setUsage(v);
         }
+
+        if (this.__attributeColor !== null) {
+            this.__attributeColor.setUsage(v);
+        }
     }
 
     /**
@@ -254,10 +319,41 @@ export class InstancedMeshGroup {
         this.__attributeTransformArray.set(transform, index * 16);
     }
 
+    /**
+     *
+     * @param {number} index
+     * @param {number[]|ArrayLike<number>|Float32Array} color RGBA color in uint8 format (0...255), LDR
+     */
+    setColorAt(index, color) {
+        this.__attributeColorArray.set(color, index * 4);
+    }
+
+    /**
+     *
+     * @param {number} index
+     * @param {number} r
+     * @param {number} g
+     * @param {number} b
+     * @param {number} a
+     */
+    setColorByComponentAt(index, r, g, b, a) {
+        const color_array = this.__attributeColorArray;
+
+        const i4 = index * 4;
+
+        color_array[i4] = r;
+        color_array[i4 + 1] = g;
+        color_array[i4 + 2] = b;
+        color_array[i4 + 3] = a;
+    }
+
     requestAttributeUpdate() {
         this.__attributeTransform.needsUpdate = true;
-    }
 
+        if (this.__attributeColor !== null) {
+            this.__attributeColor.needsUpdate = true;
+        }
+    }
 
     /**
      * Swap position in attribute arrays of two elements
@@ -356,6 +452,13 @@ export class InstancedMeshGroup {
             a_transform.array.copyWithin(index * 16, lastIndex * 16, lastIndex * 16 + 16);
             a_transform.needsUpdate = true;
 
+            const a_color = this.__attributeColor;
+
+            if (a_color !== null) {
+                a_color.array.copyWithin(index * 4, lastIndex * 4, lastIndex * 4 + 4);
+                a_color.needsUpdate = true;
+            }
+
 
             //update moved reference index
             const movedReference = references[lastIndex];
@@ -422,6 +525,30 @@ export class InstancedMeshGroup {
         //add attributes to newly created geometry
         geometry.setAttribute("instanceMatrix", this.__attributeTransform);
 
+        if (this.use_color) {
+
+            // color attribute
+            const newColorArray = new Uint8Array(this.capacity * 4);
+
+            if (this.__attributeColor !== null) {
+                const oldColorArray = this.__attributeColor.array;
+                typed_array_copy(oldColorArray, newColorArray);
+
+                if (newColorArray.length > oldColorArray.length) {
+                    newColorArray.fill(255, oldColorArray.length);
+                }
+            }
+
+            this.__attributeColorArray = newColorArray;
+            this.__attributeColor = new InstancedBufferAttribute(newColorArray, 4);
+            this.__attributeColor.normalized = true;
+            this.__attributeColor.setUsage(this.__instanceUsage);
+
+            geometry.setAttribute("instanceColor", this.__attributeColor);
+        } else {
+            this.__attributeColorArray = null;
+            this.__attributeColor = null;
+        }
 
         this.mesh.geometry = geometry;
     }

package/engine/graphics/geometry/instancing/rewriteMaterial.js

@@ -1,5 +1,9 @@
 const SHADER_PREAMBLE = `
+    #define USE_COLOR_ALPHA
+    #define USE_INSTANCING_COLOR 
+     
     attribute mat4 instanceMatrix;
+    attribute vec4 instanceColor;
     \n`;
 
 export function rewriteMaterial(shader) {
@@ -28,7 +32,22 @@ export function rewriteMaterial(shader) {
                     vec3 objectTangent = vec3( tangent.xyz );
                 #endif
                 `
-            );
+            )
+    .replace(
+        '#include <color_vertex>',
+        `
+            #if defined( USE_COLOR_ALPHA )
+                vColor = instanceColor;
+            #else
+                vColor = instanceColor.xyz;
+            #endif
+        `
+    );
 
     shader.vertexShader = newVertexShader;
+
+    shader.fragmentShader = `
+    #define USE_COLOR_ALPHA
+    #define USE_INSTANCING_COLOR 
+    `+shader.fragmentShader;
 }

package/engine/graphics/micron/format/MicronGeometryPatch.js

@@ -2,6 +2,9 @@ import { ConicRay } from "../../../../core/geom/ConicRay.js";
 import { vec4 } from "gl-matrix";
 import { assert } from "../../../../core/assert.js";
 
+
+const EMPTY_ARRAY_UINT8 = new Uint8Array(0);
+
 /**
  * Patches are organized into a tree hierarchy
  */
@@ -97,7 +100,7 @@ export class MicronGeometryPatch {
          *
          * @type {Uint8Array|Uint16Array|null}
          */
-        this.face_indices = null;
+        this.face_indices = EMPTY_ARRAY_UINT8;
 
         /**
          * Bounding cone of all of the face normals

package/engine/graphics/micron/format/serialization/collection/geometry_collection_serialization.spec.js

@@ -1,5 +1,17 @@
 import { deserialize_geometry_collection, serialize_geometry_collection } from "./geometry_collection_serialization.js";
 import { BinaryBuffer } from "../../../../../../core/binary/BinaryBuffer.js";
+import { MicronGeometry } from "../../MicronGeometry.js";
+import { MicronGeometryPatch } from "../../MicronGeometryPatch.js";
+
+function sample_geo() {
+
+    const geometry = new MicronGeometry();
+
+    geometry.root = new MicronGeometryPatch();
+    geometry.patches.push(geometry.root);
+
+    return geometry;
+}
 
 test('serialize empty', () => {
     const bb = new BinaryBuffer();
@@ -22,3 +34,18 @@ test('serialize/deserialize empty', () => {
 
     expect(destination.length).toBe(0);
 });
+
+test('serialize/deserialize 1', () => {
+    const bb = new BinaryBuffer();
+
+    const geometry = sample_geo();
+
+    serialize_geometry_collection([geometry], bb);
+
+    bb.position = 0;
+
+    const destination = [];
+    deserialize_geometry_collection(destination, bb);
+
+    expect(destination.length).toBe(1);
+});

package/engine/graphics/render/gizmo/GizmoRenderingPlugin.js

@@ -1,5 +1,25 @@
 import { EnginePlugin } from "../../../plugin/EnginePlugin.js";
+import { Gizmo } from "./Gizmo.js";
 
 export class GizmoRenderingPlugin extends EnginePlugin {
+    async startup() {
+        this.__layer = this.engine.graphics.layers.create('debug');
+
+        this.__layer.buildVisibleSet = (destination, destination_offset, view) => {
+            return Gizmo.collect(destination, destination_offset, view);
+        };
+
+        this.engine.graphics.on.postRender.add(Gizmo.clear, Gizmo);
+
+        return super.startup();
+    }
+
+    async shutdown() {
+        this.engine.graphics.layers.remove(this.__layer);
+
+        this.engine.graphics.on.postRender.remove(Gizmo.clear, Gizmo);
+
+        return super.shutdown();
+    }
 
 }

package/engine/graphics/render/gizmo/GizmoShapeRenderingInterface.js

@@ -1,10 +1,13 @@
 import { array_copy } from "../../../../core/collection/array/copyArray.js";
 import { assert } from "../../../../core/assert.js";
 import { InstancedMeshGroup } from "../../geometry/instancing/InstancedMeshGroup.js";
-import { BoxBufferGeometry, MeshBasicMaterial } from "three";
+import { BoxBufferGeometry, LineBasicMaterial, MeshBasicMaterial, OctahedronBufferGeometry } from "three";
 import { compose_matrix4_array } from "../../../../core/geom/3d/compose_matrix4_array.js";
 import Vector3 from "../../../../core/geom/Vector3.js";
 import Quaternion from "../../../../core/geom/Quaternion.js";
+import { makeHelperBoxGeometry } from "../../../../editor/process/symbolic/makeHelperBoxGeometry.js";
+import { DrawMode } from "../../ecs/mesh-v2/DrawMode.js";
+import { makeHelperSphereGeometry } from "../../../../editor/process/symbolic/makeHelperSphereGeometry.js";
 
 /**
  *
@@ -12,6 +15,27 @@ import Quaternion from "../../../../core/geom/Quaternion.js";
  */
 const scratch_m4 = [];
 
+/**
+ *
+ * @param {InstancedMeshGroup} group
+ * @param {number[]} matrix
+ * @param {number[]} color
+ */
+function add_instance(group, matrix, color) {
+    const i = group.count;
+
+    group.setCount(i + 1);
+    group.setTransformAt(i, matrix);
+
+    group.setColorByComponentAt(
+        i,
+        Math.round(color[0] * 255),
+        Math.round(color[1] * 255),
+        Math.round(color[2] * 255),
+        Math.round(color[3] * 255)
+    );
+}
+
 export class GizmoShapeRenderingInterface {
     constructor() {
 
@@ -23,6 +47,50 @@ export class GizmoShapeRenderingInterface {
         this.__color = [1, 1, 1, 1];
 
         this.__boxes_solid = InstancedMeshGroup.from(new BoxBufferGeometry(), new MeshBasicMaterial());
+        this.__boxes_wire = InstancedMeshGroup.from(makeHelperBoxGeometry(), new LineBasicMaterial());
+
+        this.__boxes_wire.draw_mode = DrawMode.LineSegments;
+
+        this.__sphere_solid = InstancedMeshGroup.from(new OctahedronBufferGeometry(1, 10), new MeshBasicMaterial());
+        this.__sphere_wire = InstancedMeshGroup.from(makeHelperSphereGeometry(), new LineBasicMaterial());
+
+        this.__sphere_wire.draw_mode = DrawMode.Lines;
+    }
+
+    __get_groups() {
+        return [
+            this.__boxes_wire,
+            this.__boxes_solid,
+            this.__sphere_wire,
+            this.__sphere_solid
+        ];
+    }
+
+    /**
+     *
+     * @param {THREE.Object3D[]} destination
+     * @param {number} destination_offset
+     * @param {number[]} frustum
+     */
+    collect(destination, destination_offset, frustum) {
+        let i = destination_offset;
+
+        const groups = this.__get_groups();
+
+        for (let j = 0; j < groups.length; j++) {
+            destination[i++] = groups[j].mesh;
+        }
+
+        return i - destination_offset;
+    }
+
+    clear() {
+        const groups = this.__get_groups();
+
+        for (let j = 0; j < groups.length; j++) {
+            groups[j].setCount(0);
+        }
+
     }
 
     /**
@@ -44,10 +112,7 @@ export class GizmoShapeRenderingInterface {
      */
     draw_solid_cube(center, size) {
         compose_matrix4_array(scratch_m4, Vector3.fromArray(center), Quaternion.identity, Vector3.fromArray(size));
-        const i = this.__boxes_solid.count;
-
-        this.__boxes_solid.setCount(i + 1);
-        this.__boxes_solid.setTransformAt(i, scratch_m4);
+        add_instance(this.__boxes_solid, scratch_m4, this.__color);
     }
 
     /**
@@ -56,7 +121,8 @@ export class GizmoShapeRenderingInterface {
      * @param {number[]} size
      */
     draw_wire_cube(center, size) {
-
+        compose_matrix4_array(scratch_m4, Vector3.fromArray(center), Quaternion.identity, Vector3.fromArray(size));
+        add_instance(this.__boxes_wire, scratch_m4, this.__color);
     }
 
     /**
@@ -65,7 +131,7 @@ export class GizmoShapeRenderingInterface {
      * @param {number[]} to
      */
     draw_line(from, to) {
-
+        throw new Error('Not Implemented');
     }
 
 
@@ -75,7 +141,8 @@ export class GizmoShapeRenderingInterface {
      * @param {number} radius
      */
     draw_solid_sphere(center, radius) {
-
+        compose_matrix4_array(scratch_m4, Vector3.fromArray(center), Quaternion.identity, Vector3.fromScalar(radius));
+        add_instance(this.__sphere_solid, scratch_m4, this.__color);
     }
 
     /**
@@ -83,8 +150,9 @@ export class GizmoShapeRenderingInterface {
      * @param {number[]} center
      * @param {number} radius
      */
-    draw_wire_sphere() {
-
+    draw_wire_sphere(center, radius) {
+        compose_matrix4_array(scratch_m4, Vector3.fromArray(center), Quaternion.identity, Vector3.fromScalar(radius));
+        add_instance(this.__sphere_wire, scratch_m4, this.__color);
     }
 }
 

package/engine/graphics/render/visibility/IncrementalDeltaSet.spec.js

@@ -4,8 +4,12 @@ import { compareNumbersAscending } from "../../../../core/function/Functions.js"
 test('set is sorted after insert, push 1,2', () => {
     const set = new IncrementalDeltaSet(compareNumbersAscending);
 
+    set.initializeUpdate();
+
     set.push(1);
-    set.push(2);
+    set.push(2)
+
+    set.finalizeUpdate();
 
     expect(set.elements[0]).toBe(1);
     expect(set.elements[1]).toBe(2);
@@ -14,9 +18,13 @@ test('set is sorted after insert, push 1,2', () => {
 test('set is sorted after insert, push 2,1', () => {
     const set = new IncrementalDeltaSet(compareNumbersAscending);
 
+    set.initializeUpdate();
+
     set.push(2);
     set.push(1);
 
+    set.finalizeUpdate();
+
     expect(set.elements[0]).toBe(1);
     expect(set.elements[1]).toBe(2);
 });
@@ -24,10 +32,14 @@ test('set is sorted after insert, push 2,1', () => {
 test('set is sorted after insert, push 1,2,3', () => {
     const set = new IncrementalDeltaSet(compareNumbersAscending);
 
+    set.initializeUpdate();
+
     set.push(1);
     set.push(2);
     set.push(3);
 
+    set.finalizeUpdate();
+
     expect(set.elements[0]).toBe(1);
     expect(set.elements[1]).toBe(2);
     expect(set.elements[2]).toBe(3);
@@ -36,10 +48,14 @@ test('set is sorted after insert, push 1,2,3', () => {
 test('set is sorted after insert, push 3,2,1', () => {
     const set = new IncrementalDeltaSet(compareNumbersAscending);
 
+    set.initializeUpdate();
+
     set.push(3);
     set.push(2);
     set.push(1);
 
+    set.finalizeUpdate();
+
     expect(set.elements[0]).toBe(1);
     expect(set.elements[1]).toBe(2);
     expect(set.elements[2]).toBe(3);

package/engine/intelligence/behavior/primitive/ActionBehavior.js

@@ -5,7 +5,7 @@ import { assert } from "../../../../core/assert.js";
 export class ActionBehavior extends Behavior {
     /**
      *
-     * @param {function} action
+     * @param {function(timeDelta:number)} action
      * @param {*} [context]
      */
     constructor(action, context) {

package/package.json

@@ -5,7 +5,7 @@
   "productName": "Meep",
   "description": "production-ready JavaScript game engine based on Entity Component System Architecture",
   "author": "Alexander Goldring",
-  "version": "2.37.13",
+  "version": "2.37.16",
   "dependencies": {
     "gl-matrix": "3.4.3",
     "fast-levenshtein": "2.0.6",