@woosh/meep-engine 2.34.47 → 2.35.0

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,15 @@ 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";
 
 const eh = new EngineHarness();
 
+const DRAW_METHOD_PLAIN = 0;
+const DRAW_METHOD_INSTANCED = 1;
+
 /**
  *
  * @param {Engine} engine
@@ -26,12 +32,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
     });
 
@@ -45,6 +57,11 @@ async function main(engine) {
 
     for (let i = 0; i < 100000; i++) {
 
+        const sg = ShadedGeometry.from(geometry, material);
+
+        sg.draw_method = DRAW_METHOD_INSTANCED;
+        sg.clearFlag(ShadedGeometryFlags.CastShadow | ShadedGeometryFlags.ReceiveShadow);
+
         new EntityBuilder()
             .add(Transform.fromJSON({
                 position: {
@@ -52,9 +69,10 @@ async function main(engine) {
                     y: randomFloatBetween(random, 0, 10),
                     z: randomFloatBetween(random, -50, 50)
                 },
-                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,7 +3,8 @@ import {
     InstancedBufferAttribute,
     InstancedBufferGeometry,
     MeshDepthMaterial,
-    RGBADepthPacking
+    RGBADepthPacking,
+    StreamDrawUsage
 } from 'three';
 import ThreeFactory from "../../three/ThreeFactory.js";
 import { StaticMaterialCache } from "../../../asset/loaders/material/StaticMaterialCache.js";
@@ -66,21 +67,7 @@ export class InstancedMeshGroup {
          * @type {InstancedBufferAttribute}
          * @private
          */
-        this.__attributePosition = null;
-
-        /**
-         *
-         * @type {InstancedBufferAttribute}
-         * @private
-         */
-        this.__attributeRotation = null;
-
-        /**
-         *
-         * @type {InstancedBufferAttribute}
-         * @private
-         */
-        this.__attributeScale = null;
+        this.__attributeTransform = null;
 
         /**
          *
@@ -203,39 +190,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.__attributeTransform.array.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 +291,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 +343,25 @@ 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.__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
+    }
+];

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

@@ -0,0 +1,46 @@
+import { traverseMaterialTextures } from "../../../asset/loaders/material/traverseMaterialTextures.js";
+import { UvContext } from "./UvContext.js";
+import { max2 } from "../../../../core/math/max2.js";
+
+export class MaterialDescriptor {
+    constructor() {
+
+        /**
+         *
+         * @type {THREE.Material|null}
+         */
+        this.source_material = null;
+
+        /**
+         *
+         * @type {UvContext[]}
+         */
+        this.uvs = [];
+    }
+
+    build_uvs() {
+
+        traverseMaterialTextures(this.source_material, (t, attachment) => {
+            const uv_index = attachment.uv_index;
+
+            let uv_context = this.uvs[uv_index];
+
+            if (uv_context === undefined) {
+                uv_context = new UvContext();
+                uv_context.resolution.set(1, 1);
+
+                this.uvs[uv_index] = uv_context;
+            }
+
+            const image = t.image;
+
+            if (image !== undefined && image.width !== undefined) {
+                uv_context.resolution.x = max2(uv_context.resolution.x, image.width);
+                uv_context.resolution.y = max2(uv_context.resolution.y, image.height);
+            }
+
+        });
+
+    }
+
+}