@woosh/meep-engine 2.34.49 → 2.35.2

package/engine/graphics/ecs/mesh-v2/render/InstancedRendererAdapter.js

@@ -0,0 +1,158 @@
+import { AbstractRenderAdapter } from "./AbstractRenderAdapter.js";
+import { HashMap } from "../../../../../core/collection/HashMap.js";
+import { InstancedMeshGroup } from "../../../geometry/instancing/InstancedMeshGroup.js";
+import { ShadedGeometryFlags } from "../ShadedGeometryFlags.js";
+import { DrawMode } from "../DrawMode.js";
+
+const INSTANCED_EQUALITY_FLAGS = ShadedGeometryFlags.CastShadow
+    | ShadedGeometryFlags.ReceiveShadow
+;
+
+/**
+ *
+ * @param {ShadedGeometry} a
+ * @param {ShadedGeometry} b
+ * @returns {number}
+ */
+function compare(a, b) {
+    const d_geometry = a.geometry.id - b.geometry.id;
+    if (d_geometry !== 0) {
+        return d_geometry;
+    }
+
+    const d_material = a.material.id - b.material.id;
+    if (d_material !== 0) {
+        return d_material;
+    }
+
+    const d_flags = (a.flags & INSTANCED_EQUALITY_FLAGS) - (b.flags & INSTANCED_EQUALITY_FLAGS);
+    if (d_flags !== 0) {
+        return d_flags;
+    }
+
+    const d_mode = a.mode - b.mode;
+    if (d_mode !== 0) {
+        return d_mode;
+    }
+
+    return 0;
+}
+
+export class InstancedRendererAdapter extends AbstractRenderAdapter {
+    constructor() {
+        super();
+
+        /**
+         *
+         * @type {HashMap<ShadedGeometry, InstancedMeshGroup>}
+         * @private
+         */
+        this.__instanced_meshes = new HashMap({
+            keyHashFunction(sg) {
+                return sg.geometry.id ^ sg.material.id ^ sg.mode;
+            },
+            keyEqualityFunction(a, b) {
+                return a.material.id === b.material.id
+                    && a.geometry.id === b.geometry.id
+                    && a.mode === b.mode
+                    && (a.flags & INSTANCED_EQUALITY_FLAGS) === (b.flags & INSTANCED_EQUALITY_FLAGS)
+                    ;
+            }
+        });
+
+        /**
+         *
+         * @type {Set<InstancedMeshGroup>}
+         * @private
+         */
+        this.__active_meshes = new Set();
+    }
+
+    /**
+     *
+     * @param {ShadedGeometry} sg
+     * @returns {InstancedMeshGroup}
+     * @private
+     */
+    __get_instanced_mesh(sg) {
+        let im = this.__instanced_meshes.get(sg);
+
+
+        if (im !== undefined) {
+
+            return im;
+
+        } else {
+
+            if (sg.mode !== DrawMode.Triangles) {
+                throw new Error(`Unsupported draw mode ${sg.mode}`);
+            }
+
+            im = new InstancedMeshGroup();
+            im.shrinkFactor = 0; // prevent shrinking as we're essentially rebuilding this geometry frame
+
+            im.setMaterial(sg.material);
+            im.setGeometry(sg.geometry);
+
+            im.mesh.castShadow = sg.getFlag(ShadedGeometryFlags.CastShadow);
+            im.mesh.receiveShadow = sg.getFlag(ShadedGeometryFlags.ReceiveShadow);
+
+            this.__instanced_meshes.set(sg, im);
+
+            return im;
+
+        }
+    }
+
+    add(sg) {
+        const mesh = this.__get_instanced_mesh(sg);
+
+        const index = mesh.count;
+
+        const new_size = index + 1;
+
+        if (new_size > mesh.capacity) {
+            mesh.ensureCapacity(new_size);
+        }
+
+        mesh.setTransformAt(index, sg.transform);
+
+        mesh.count++;
+
+        this.__active_meshes.add(mesh);
+    }
+
+    build_start() {
+        this.clear();
+    }
+
+    build_end() {
+        const objects = this.__objects;
+
+        for (const activeMesh of this.__active_meshes) {
+            // force underlying geometry to update
+            activeMesh.setCount(activeMesh.getCount());
+            activeMesh.requestAttributeUpdate();
+
+            objects[this.__object_count++] = activeMesh.mesh;
+        }
+
+    }
+
+    clear() {
+        super.clear();
+
+        for (const activeMesh of this.__active_meshes) {
+            activeMesh.setCount(0);
+        }
+
+        this.__active_meshes.clear();
+    }
+
+    dispose() {
+        // release GPU memory
+        this.__instanced_meshes.forEach((value, key) => {
+            value.dispose();
+        });
+    }
+}

package/engine/graphics/ecs/mesh-v2/render/ShadedGeometryRendererContext.js

@@ -0,0 +1,98 @@
+import { queryBinaryNode_FrustumIntersections_Data } from "../../../../../core/bvh2/traversal/queryBinaryNode_FrustumIntersections.js";
+import { AbstractRenderAdapter } from "./AbstractRenderAdapter.js";
+import { InstancedRendererAdapter } from "./InstancedRendererAdapter.js";
+import { GenericRendererAdapter } from "./GenericRendererAdapter.js";
+
+/**
+ * 1 - collect visible meshes
+ * 2 - figure out how to render a given mesh
+ */
+export class ShadedGeometryRendererContext {
+    constructor() {
+        /**
+         * @readonly
+         * @type {AbstractRenderAdapter[]}
+         */
+        this.adapters = [
+            new GenericRendererAdapter(),
+            new InstancedRendererAdapter()
+        ];
+    }
+
+    setAdapter(index, adapter) {
+        const existing = this.adapters[index];
+        if (existing !== undefined) {
+            // dispose of existing adapter
+            existing.dispose();
+        }
+
+        this.adapters[index] = adapter;
+    }
+
+    /**
+     *
+     * @param {THREE.Object3D[]} destination
+     * @param {number} destination_offset
+     * @param {CameraView} view
+     * @param {BinaryNode<ShadedGeometry>} bvh
+     */
+    collect(destination, destination_offset, view, bvh) {
+        const adapters = this.adapters;
+        const adapter_count = adapters.length;
+
+        let i = 0, j = 0;
+        for (; i < adapter_count; i++) {
+            const adapter = adapters[i];
+
+            adapter.build_start();
+        }
+
+
+        // get all meshes
+
+        const data = [];
+
+        const intersection_count = queryBinaryNode_FrustumIntersections_Data(data, 0, bvh, view.frustum);
+
+        for (i = 0; i < intersection_count; i++) {
+            /**
+             *
+             * @type {ShadedGeometry}
+             */
+            const sg = data[i];
+
+            const adapter = adapters[sg.draw_method];
+
+            adapter.add(sg);
+        }
+
+        let additions = 0;
+
+        for (i = 0; i < adapter_count; i++) {
+            const adapter = adapters[i];
+
+            adapter.build_end();
+
+            const adapter_object_count = adapter.object_count;
+
+            for (j = 0; j < adapter_object_count; j++) {
+                const object3D = adapter.objects[j];
+
+                destination[destination_offset + additions] = object3D;
+
+                additions++;
+            }
+
+        }
+
+        return additions;
+    }
+
+    dispose() {
+        for (const adapter of this.adapters) {
+            if (adapter !== undefined) {
+                adapter.dispose();
+            }
+        }
+    }
+}

package/engine/graphics/ecs/mesh-v2/sample/load_gltf.js

@@ -6,6 +6,7 @@ import { GLTFAssetLoader } from "../../../../asset/loaders/GLTFAssetLoader.js";
 import { three_object_to_entity_composition } from "../three_object_to_entity_composition.js";
 import { AttachmentSystem } from "../../../../ecs/attachment/AttachmentSystem.js";
 import { TransformAttachmentSystem } from "../../../../ecs/transform-attachment/TransformAttachmentSystem.js";
+import { Camera } from "../../camera/Camera.js";
 
 const eh = new EngineHarness();
 
@@ -70,6 +71,10 @@ async function main(engine) {
         enableTerrain: false
     });
 
+    const camera = engine.entityManager.dataset.getAnyComponent(Camera);
+    camera.component.autoClip = false;
+    camera.component.object.far = 300;
+
     // a small delay to let background tasks finish, so we can get better performance reading later on
     timeout(20);
 

package/engine/graphics/ecs/mesh-v2/sample/prototypeShadedGeometry.js

@@ -3,7 +3,7 @@ import { ShadedGeometrySystem } from "../ShadedGeometrySystem.js";
 import EntityBuilder from "../../../../ecs/EntityBuilder.js";
 import { Transform } from "../../../../ecs/transform/Transform.js";
 import { ShadedGeometry } from "../ShadedGeometry.js";
-import { BoxBufferGeometry, MeshBasicMaterial } from "three";
+import { BoxBufferGeometry, MeshStandardMaterial } from "three";
 import { randomFloatBetween } from "../../../../../core/math/random/randomFloatBetween.js";
 import { seededRandom } from "../../../../../core/math/random/seededRandom.js";
 import ViewportPosition from "../../../../ecs/gui/position/ViewportPosition.js";
@@ -13,9 +13,16 @@ import { downloadAsFile } from "../../../../../core/binary/ByteArrayTools.js";
 import { convert_bvh_to_dot_format_string } from "../../../../../core/bvh2/visual/convert_bvh_to_dot_format_string.js";
 import ViewportPositionSystem from "../../../../ecs/gui/position/ViewportPositionSystem.js";
 import GUIElementSystem from "../../../../ecs/gui/GUIElementSystem.js";
+import Vector3 from "../../../../../core/geom/Vector3.js";
+import Quaternion from "../../../../../core/geom/Quaternion.js";
+import { ShadedGeometryFlags } from "../ShadedGeometryFlags.js";
+import { randomFromArray } from "../../../../../core/math/random/randomFromArray.js";
 
 const eh = new EngineHarness();
 
+const DRAW_METHOD_PLAIN = 0;
+const DRAW_METHOD_INSTANCED = 1;
+
 /**
  *
  * @param {Engine} engine
@@ -26,12 +33,18 @@ async function main(engine) {
 
     await em.addSystem(new ShadedGeometrySystem(engine));
 
-    EngineHarness.buildBasics({ engine })
+    EngineHarness.buildBasics({
+        engine,
+        yaw: -0.8,
+        pitch: 1,
+        distance: 46,
+        focus: new Vector3(10, 0, 10)
+    });
 
 
     const ecd = em.dataset;
 
-    const material = new MeshBasicMaterial({
+    const material = new MeshStandardMaterial({
         color: 0xFFFFFF
     });
 
@@ -39,22 +52,36 @@ async function main(engine) {
 
     window.material = material;
 
-    const geometry = new BoxBufferGeometry();
-
     const random = seededRandom(0);
 
-    for (let i = 0; i < 100000; i++) {
+    const INSTANCE_COUNT = 20000;
+
+    const geometries = [];
+
+    for (let i = 0; i < 1000; i++) {
+        geometries.push(new BoxBufferGeometry());
+    }
+
+    for (let i = 0; i < INSTANCE_COUNT; i++) {
+        const geometry = randomFromArray(random, geometries);
+        const sg = ShadedGeometry.from(geometry, material);
+
+        // sg.draw_method = DRAW_METHOD_PLAIN;
+        sg.draw_method = DRAW_METHOD_INSTANCED;
+        // sg.draw_method = random() > 0.01 ? DRAW_METHOD_INSTANCED : DRAW_METHOD_PLAIN;
+        sg.clearFlag(ShadedGeometryFlags.CastShadow | ShadedGeometryFlags.ReceiveShadow);
 
         new EntityBuilder()
             .add(Transform.fromJSON({
                 position: {
-                    x: randomFloatBetween(random, -50, 50),
+                    x: randomFloatBetween(random, 0, 20),
                     y: randomFloatBetween(random, 0, 10),
-                    z: randomFloatBetween(random, -50, 50)
+                    z: randomFloatBetween(random, 0, 20)
                 },
-                scale: 0.01
+                rotation: Quaternion.random(random),
+                scale: 0.05
             }))
-            .add(ShadedGeometry.from(geometry, material))
+            .add(sg)
             .build(ecd);
     }
 

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

@@ -12,24 +12,29 @@ export function three_object_to_entity_composition(root) {
 
     node.transform.fromMatrix4(root.matrix.elements);
 
-    node.entity.add(new Transform());
+    const entity = node.entity;
+
+    entity.add(new Transform());
 
     if (root.isMesh) {
         if (root.isSkinnedMesh) {
             throw new Error(`Skinned meshes are not supported`);
         }
 
-        node.entity.add(ShadedGeometry.from(root.geometry, root.material));
+        const sg = ShadedGeometry.from(root.geometry, root.material);
+        sg.draw_method = 1;
+
+        entity.add(sg);
     }
 
     const children = root.children;
     const child_count = children.length;
+
     for (let i = 0; i < child_count; i++) {
         const child = children[i];
 
         const child_node = three_object_to_entity_composition(child);
 
-
         node.addChild(child_node);
     }
 

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

@@ -3,13 +3,15 @@ import {
     InstancedBufferAttribute,
     InstancedBufferGeometry,
     MeshDepthMaterial,
-    RGBADepthPacking
+    RGBADepthPacking,
+    StreamDrawUsage
 } from 'three';
 import ThreeFactory from "../../three/ThreeFactory.js";
 import { StaticMaterialCache } from "../../../asset/loaders/material/StaticMaterialCache.js";
 import { composeCompile } from "../../material/composeCompile.js";
 import { typed_array_copy } from "../../../../core/collection/array/typed/typed_array_copy.js";
 import { rewriteMaterial } from "./rewriteMaterial.js";
+import { max3 } from "../../../../core/math/max3.js";
 
 export class InstancedMeshGroup {
     /**
@@ -66,21 +68,14 @@ export class InstancedMeshGroup {
          * @type {InstancedBufferAttribute}
          * @private
          */
-        this.__attributePosition = null;
+        this.__attributeTransform = null;
 
         /**
-         *
-         * @type {InstancedBufferAttribute}
-         * @private
-         */
-        this.__attributeRotation = null;
-
-        /**
-         *
-         * @type {InstancedBufferAttribute}
+         * Shortcut to buffer attribute data
+         * @type {Float32Array}
          * @private
          */
-        this.__attributeScale = null;
+        this.__attributeTransformArray = null;
 
         /**
          *
@@ -180,7 +175,7 @@ export class InstancedMeshGroup {
         if (currentCapacity < size) {
             // grow
 
-            const newCapacityRaw = Math.max(
+            const newCapacityRaw = max3(
                 size,
                 currentCapacity * this.growFactor,
                 currentCapacity + this.growConstant
@@ -203,39 +198,16 @@ export class InstancedMeshGroup {
     /**
      *
      * @param {number} index
-     * @param {number} x
-     * @param {number} y
-     * @param {number} z
+     * @param {number[]|ArrayLike<number>|Float32Array} transform 4x4 transform matrix of the instance
      */
-    setPositionAt(index, x, y, z) {
-        this.__attributePosition.setXYZ(index, x, y, z);
-        this.__attributePosition.needsUpdate = true;
+    setTransformAt(index, transform) {
+        this.__attributeTransformArray.set(transform, index * 16);
     }
 
-    /**
-     *
-     * @param {number} index
-     * @param {number} x
-     * @param {number} y
-     * @param {number} z
-     * @param {number} w
-     */
-    setRotationAt(index, x, y, z, w) {
-        this.__attributeRotation.setXYZW(index, x, y, z, w);
-        this.__attributeRotation.needsUpdate = true;
+    requestAttributeUpdate() {
+        this.__attributeTransform.needsUpdate = true;
     }
 
-    /**
-     *
-     * @param {number} index
-     * @param {number} x
-     * @param {number} y
-     * @param {number} z
-     */
-    setScaleAt(index, x, y, z) {
-        this.__attributeScale.setXYZ(index, x, y, z);
-        this.__attributeScale.needsUpdate = true;
-    }
 
     /**
      * Swap position in attribute arrays of two elements
@@ -327,25 +299,13 @@ export class InstancedMeshGroup {
             delete references[index];
         } else {
             //not at the end, move the very last reference to this place, effectively shrinking the set
-            const index3 = index * 3;
-            const start3 = lastIndex * 3;
-            const end3 = start3 + 3;
 
-            const index4 = index * 4;
-            const start4 = lastIndex * 4;
-            const end4 = start4 + 4;
 
-            const a_position = this.__attributePosition;
-            const a_rotation = this.__attributeRotation;
-            const a_scale = this.__attributeScale;
+            const a_transform = this.__attributeTransform;
 
-            a_position.array.copyWithin(index3, start3, end3);
-            a_rotation.array.copyWithin(index4, start4, end4);
-            a_scale.array.copyWithin(index3, start3, end3);
+            a_transform.array.copyWithin(index * 16, lastIndex * 16, lastIndex * 16 + 16);
+            a_transform.needsUpdate = true;
 
-            a_position.needsUpdate = true;
-            a_rotation.needsUpdate = true;
-            a_scale.needsUpdate = true;
 
             //update moved reference index
             const movedReference = references[lastIndex];
@@ -391,39 +351,26 @@ export class InstancedMeshGroup {
         }
 
         //build instanced attributes
-        const newPositionArray = new Float32Array(this.capacity * 3);
-        const newRotationArray = new Float32Array(this.capacity * 4);
-        const newScaleArray = new Float32Array(this.capacity * 3);
-
-        if (this.__attributePosition !== null) {
-            //copy old data
-            const oldPositionArray = this.__attributePosition.array;
-            typed_array_copy(oldPositionArray, newPositionArray);
-        }
-        if (this.__attributeRotation !== null) {
-            //copy old data
-            const oldRotationArray = this.__attributeRotation.array;
-            typed_array_copy(oldRotationArray, newRotationArray);
-        }
-        if (this.__attributeScale !== null) {
-            const oldScaleArray = this.__attributeScale.array;
-            typed_array_copy(oldScaleArray, newScaleArray);
+        const newTransformArray = new Float32Array(this.capacity * 16);
+
+        if (this.__attributeTransform !== null) {
+            const oldTransformArray = this.__attributeTransform.array;
+            typed_array_copy(oldTransformArray, newTransformArray);
 
-            if (newScaleArray.length > oldScaleArray.length) {
-                //fill the rest of the array with scale factor of 1 as a default
-                newScaleArray.fill(1, oldScaleArray.length);
+            if (newTransformArray.length > oldTransformArray.length) {
+                //fill the rest of the array with 0s
+                // TODO consider writing identity matrix instead
+                newTransformArray.fill(0, oldTransformArray.length);
             }
         }
 
         //rewrite old attributes
-        this.__attributePosition = new InstancedBufferAttribute(newPositionArray, 3);
-        this.__attributeRotation = new InstancedBufferAttribute(newRotationArray, 4);
-        this.__attributeScale = new InstancedBufferAttribute(newScaleArray, 3);
+        this.__attributeTransformArray = newTransformArray;
+        this.__attributeTransform = new InstancedBufferAttribute(newTransformArray, 16);
+        this.__attributeTransform.setUsage(StreamDrawUsage);
 
         //add attributes to newly created geometry
-        geometry.setAttribute("instancePosition", this.__attributePosition);
-        geometry.setAttribute("instanceRotation", this.__attributeRotation);
-        geometry.setAttribute("instanceScale", this.__attributeScale);
+        geometry.setAttribute("instanceMatrix", this.__attributeTransform);
 
 
         this.mesh.geometry = geometry;

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

@@ -1,55 +1,19 @@
 const SHADER_PREAMBLE = `
-    attribute vec3 instancePosition;
-    attribute vec4 instanceRotation;
-    attribute vec3 instanceScale;
-    
-    vec3 instanceTransform( in vec3 position, vec3 T, vec4 R, vec3 S ){
-        vec3 result = position;
-        
-        //applies the scale
-        result *= S;
-        //computes the rotation where R is a (vec4) quaternion
-        result += 2.0 * cross( R.xyz, cross( R.xyz, result ) + R.w * result );
-        //translates the transformed 'blueprint'
-        result += T;
-        
-        return result;
-    }
-    
-    mat4 getInstanceMatrix(){
-      vec4 q = instanceRotation;
-      vec3 s = instanceScale;
-      vec3 v = instancePosition;
-
-      vec3 q2 = q.xyz + q.xyz;
-      vec3 a = q.xxx * q2.xyz;
-      vec3 b = q.yyz * q2.yzz;
-      vec3 c = q.www * q2.xyz;
-    
-      vec3 r0 = vec3( 1.0 - (b.x + b.z) , a.y + c.z , a.z - c.y ) * s.xxx;
-      vec3 r1 = vec3( a.y - c.z , 1.0 - (a.x + b.z) , b.y + c.x ) * s.yyy;
-      vec3 r2 = vec3( a.z + c.y , b.y - c.x , 1.0 - (a.x + b.x) ) * s.zzz;
-    
-      return mat4(
-          r0 , 0.0,
-          r1 , 0.0,
-          r2 , 0.0,
-          v  , 1.0
-      );
-    }\n`;
+    attribute mat4 instanceMatrix;
+    \n`;
 
 export function rewriteMaterial(shader) {
     const originalVertexShader = shader.vertexShader;
 
     const newVertexShader = SHADER_PREAMBLE
         + originalVertexShader
-            .replace(
-                '#include <uv_vertex>',
-                `
-                mat4 instanceMatrix = getInstanceMatrix();
-                #include <uv_vertex>
-                `
-            )
+            // .replace(
+            //     '#include <uv_vertex>',
+            //     `
+            //     mat4 instanceMatrix = getInstanceMatrix();
+            //     #include <uv_vertex>
+            //     `
+            // )
             .replace(
                 '#include <begin_vertex>',
                 `

package/engine/graphics/material/optimization/BUFFER_GEOMETRY_UVS.js

@@ -0,0 +1,10 @@
+export const BUFFER_GEOMETRY_UVS = [
+    {
+        name: 'uv',
+        index: 0,
+    },
+    {
+        name: 'uv2',
+        index: 1
+    }
+];