@woosh/meep-engine 2.35.4 → 2.35.7

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

@@ -12,9 +12,9 @@ export class SurfacePoint3 {
 
     /**
      *
-     * @param {number[]|mat4|Float32Array} m4
+     * @param {number[]|mat4|Float32Array} m
      */
-    applyMatrix4(m4) {
+    applyMatrix4(m) {
         // transform position
         const p = this.position;
 
@@ -23,13 +23,13 @@ export class SurfacePoint3 {
         const p_z = p.z;
 
         // compute perspective projection
-        const w = 1 / (m4[3] * p_x + m4[7] * p_y + m4[11] * p_z + m4[15]);
+        const w = 1 / (m[3] * p_x + m[7] * p_y + m[11] * p_z + m[15]);
 
-        const result_p_x = (m4[0] * p_x + m4[4] * p_y + m4[8] * p_z + m4[12]) * w;
-        const result_p_y = (m4[1] * p_x + m4[5] * p_y + m4[9] * p_z + m4[13]) * w;
-        const result_p_z = (m4[2] * p_x + m4[6] * p_y + m4[10] * p_z + m4[14]) * w;
+        const result_p_x = (m[0] * p_x + m[4] * p_y + m[8] * p_z + m[12]) * w;
+        const result_p_y = (m[1] * p_x + m[5] * p_y + m[9] * p_z + m[13]) * w;
+        const result_p_z = (m[2] * p_x + m[6] * p_y + m[10] * p_z + m[14]) * w;
 
-        this.position.set(
+        p.set(
             result_p_x,
             result_p_y,
             result_p_z
@@ -42,13 +42,13 @@ export class SurfacePoint3 {
         const n_y = n.y;
         const n_z = n.z;
 
-        const result_n_x = m4[0] * n_x + m4[4] * n_y + m4[8] * n_z;
-        const result_n_y = m4[1] * n_x + m4[5] * n_y + m4[9] * n_z;
-        const result_n_z = m4[2] * n_x + m4[6] * n_y + m4[10] * n_z;
+        const result_n_x = m[0] * n_x + m[4] * n_y + m[8] * n_z;
+        const result_n_y = m[1] * n_x + m[5] * n_y + m[9] * n_z;
+        const result_n_z = m[2] * n_x + m[6] * n_y + m[10] * n_z;
 
         const normal_multiplier = 1 / v3_length(result_n_x, result_n_y, result_n_z);
 
-        this.normal.set(
+        n.set(
             result_n_x * normal_multiplier,
             result_n_y * normal_multiplier,
             result_n_z * normal_multiplier,

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

@@ -166,7 +166,7 @@ export class ShadedGeometrySystem extends System {
         this.__render_layer.buildVisibleSet = ((destination, destination_offset, view) => {
             const ctx = this.__view_contexts.get(view);
 
-            return ctx.collect(destination, destination_offset, view, this.__bvh);
+            return ctx.collect(destination, destination_offset,graphics.renderer, view, this.__bvh);
         });
 
         readyCallback();

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

@@ -76,7 +76,7 @@ export class ShadedGeometryRendererContext {
         for (; i < adapter_count; i++) {
             const adapter = adapters[i];
 
-            adapter.build_start(renderer);
+            adapter.build_start(renderer, view);
         }
 
 

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, MeshStandardMaterial } from "three";
+import { BoxBufferGeometry, MeshStandardMaterial, OctahedronGeometry } 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";
@@ -17,12 +17,31 @@ 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";
+import { BehaviorComponent } from "../../../../intelligence/behavior/ecs/BehaviorComponent.js";
+import { OrbitingBehavior } from "../../../../../../model/game/util/behavior/OrbitingBehavior.js";
+import { BehaviorSystem } from "../../../../intelligence/behavior/ecs/BehaviorSystem.js";
 
 const eh = new EngineHarness();
 
 const DRAW_METHOD_PLAIN = 0;
 const DRAW_METHOD_INSTANCED = 1;
 
+function makeMovingShadedGeometry() {
+    const b = new OrbitingBehavior();
+    b.offset.set(4, 1, 4);
+    b.radius = 2;
+    b.rate = 1;
+
+    const sg = ShadedGeometry.from(new OctahedronGeometry(0.5, 5), new MeshStandardMaterial({ color: 0xFF0000 }));
+
+    sg.draw_method = DRAW_METHOD_INSTANCED;
+
+    return new EntityBuilder()
+        .add(new Transform())
+        .add(sg)
+        .add(BehaviorComponent.fromOne(b));
+}
+
 /**
  *
  * @param {Engine} engine
@@ -32,6 +51,7 @@ async function main(engine) {
     const em = engine.entityManager;
 
     await em.addSystem(new ShadedGeometrySystem(engine));
+    await em.addSystem(new BehaviorSystem(engine));
 
     EngineHarness.buildBasics({
         engine,
@@ -54,11 +74,11 @@ async function main(engine) {
 
     const random = seededRandom(0);
 
-    const INSTANCE_COUNT = 20000;
+    const INSTANCE_COUNT = 0;
 
     const geometries = [];
 
-    for (let i = 0; i < 1000; i++) {
+    for (let i = 0; i < 1; i++) {
         geometries.push(new BoxBufferGeometry());
     }
 
@@ -85,6 +105,8 @@ async function main(engine) {
             .build(ecd);
     }
 
+    makeMovingShadedGeometry().build(ecd);
+
     debug_button(engine, () => {
         const dot = convert_bvh_to_dot_format_string(engine.graphics.layers.getLayerByName('shaded-geometry').bvh);
         downloadAsFile(dot, 'bvh.dot', 'text');

package/engine/graphics/ecs/path/testPathDisplaySystem.js

@@ -323,7 +323,8 @@ function main(engine) {
     EngineHarness.buildBasics({ engine });
 
     const _p = new Path();
-    _p.interpolation = InterpolationType.CatmullRom;
+    // _p.interpolation = InterpolationType.CatmullRom;
+    _p.interpolation = InterpolationType.Linear;
 
     // _p.setPositionsFromVectorArray(Path.smoothPath([
     //     new Vector3(3, 1, 1),
@@ -351,14 +352,14 @@ function main(engine) {
 
     const pathDisplay = new PathDisplay();
     pathDisplay.specs.push(
-        PathDisplaySpec.from(
-            PathDisplayType.Ribbon,
-            trailPathStyle
-        ),
-        PathDisplaySpec.from(
-            PathDisplayType.Entity,
-            sample_style_entity()
-        ),
+        // PathDisplaySpec.from(
+        //     PathDisplayType.Ribbon,
+        //     trailPathStyle
+        // ),
+        // PathDisplaySpec.from(
+        //     PathDisplayType.Entity,
+        //     sample_style_entity()
+        // ),
         PathDisplaySpec.from(
             PathDisplayType.Tube,
             sample_style_tube()

package/engine/graphics/ecs/path/tube/TubePathBuilder.js

@@ -1,4 +1,12 @@
-import { CatmullRomCurve3, MeshMatcapMaterial, MeshStandardMaterial, TubeGeometry, Vector3 } from "three";
+import {
+    BufferGeometry,
+    CatmullRomCurve3,
+    Float32BufferAttribute,
+    MeshMatcapMaterial,
+    MeshStandardMaterial,
+    TubeGeometry,
+    Vector3
+} from "three";
 import { InterpolationType } from "../../../../navigation/ecs/components/InterpolationType.js";
 import EntityBuilder from "../../../../ecs/EntityBuilder.js";
 import { Transform } from "../../../../ecs/transform/Transform.js";
@@ -6,6 +14,10 @@ import Renderable from "../../../../ecs/components/Renderable.js";
 import ThreeFactory from "../../../three/ThreeFactory.js";
 import { TubeMaterialType } from "./TubeMaterialType.js";
 import { GameAssetType } from "../../../../asset/GameAssetType.js";
+import { Matrix4 } from "three/src/math/Matrix4.js";
+import * as MathUtils from "three/src/math/MathUtils.js";
+import { max2 } from "../../../../../core/math/max2.js";
+import { min2 } from "../../../../../core/math/min2.js";
 
 /**
  * some useful references:
@@ -43,6 +55,306 @@ function estimatePathViaIterativeIntegral(path, epsilon) {
     return sum;
 }
 
+/**
+ * @see https://github.com/mrdoob/three.js/blob/c12c9a166a1369cdd58622fff2aff7e3a84305d7/src/extras/core/Curve.js#L260
+ * @param {Vector3[]} points
+ * @param {boolean} [closed]
+ */
+function computeFrenetFrames(points, closed = false) {
+// see http://www.cs.indiana.edu/pub/techreports/TR425.pdf
+
+    const normal = new Vector3();
+
+    const tangents = [];
+    const normals = [];
+    const binormals = [];
+
+    const vec = new Vector3();
+    const mat = new Matrix4();
+
+    const segments = points.length - 1;
+
+    const v3_0 = new Vector3();
+    const v3_1 = new Vector3();
+
+    /**
+     *
+     * @param {number} i
+     * @param {Vector3} destination
+     */
+    function getTangent(i, destination) {
+        // get points on either side
+        const i0 = max2(i - 1, 0);
+        const i1 = min2(i + 1, segments);
+
+        const p0 = points[i0];
+        const pR = points[i];
+        const p1 = points[i1];
+
+        // get points along the lines close to the reference
+        v3_0.subVectors(p0, pR);
+        v3_0.normalize();
+
+        v3_1.subVectors(p1, pR);
+        v3_1.normalize();
+
+        destination.subVectors(v3_1, v3_0);
+        destination.normalize();
+    }
+
+    // compute the tangent vectors for each segment on the curve
+
+    for (let i = 0; i <= segments; i++) {
+
+        const tangent = new Vector3();
+        getTangent(i, tangent);
+
+        tangents[i] = tangent;
+
+    }
+
+    // select an initial normal vector perpendicular to the first tangent vector,
+    // and in the direction of the minimum tangent xyz component
+
+    normals[0] = new Vector3();
+    binormals[0] = new Vector3();
+    let min = Number.MAX_VALUE;
+    const tx = Math.abs(tangents[0].x);
+    const ty = Math.abs(tangents[0].y);
+    const tz = Math.abs(tangents[0].z);
+
+    if (tx <= min) {
+
+        min = tx;
+        normal.set(1, 0, 0);
+
+    }
+
+    if (ty <= min) {
+
+        min = ty;
+        normal.set(0, 1, 0);
+
+    }
+
+    if (tz <= min) {
+
+        normal.set(0, 0, 1);
+
+    }
+
+    vec.crossVectors(tangents[0], normal).normalize();
+
+    normals[0].crossVectors(tangents[0], vec);
+    binormals[0].crossVectors(tangents[0], normals[0]);
+
+
+    // compute the slowly-varying normal and binormal vectors for each segment on the curve
+
+    for (let i = 1; i <= segments; i++) {
+
+        normals[i] = normals[i - 1].clone();
+
+        binormals[i] = binormals[i - 1].clone();
+
+        vec.crossVectors(tangents[i - 1], tangents[i]);
+
+        if (vec.length() > Number.EPSILON) {
+
+            vec.normalize();
+
+            const theta = Math.acos(MathUtils.clamp(tangents[i - 1].dot(tangents[i]), -1, 1)); // clamp for floating pt errors
+
+            normals[i].applyMatrix4(mat.makeRotationAxis(vec, theta));
+
+        }
+
+        binormals[i].crossVectors(tangents[i], normals[i]);
+
+    }
+
+    // if the curve is closed, postprocess the vectors so the first and last normal vectors are the same
+
+    if (closed === true) {
+
+        let theta = Math.acos(MathUtils.clamp(normals[0].dot(normals[segments]), -1, 1));
+        theta /= segments;
+
+        if (tangents[0].dot(vec.crossVectors(normals[0], normals[segments])) > 0) {
+
+            theta = -theta;
+
+        }
+
+        for (let i = 1; i <= segments; i++) {
+
+            // twist a little...
+            normals[i].applyMatrix4(mat.makeRotationAxis(tangents[i], theta * i));
+            binormals[i].crossVectors(tangents[i], normals[i]);
+
+        }
+
+    }
+
+    return {
+        tangents: tangents,
+        normals: normals,
+        binormals: binormals
+    };
+}
+
+/**
+ * @see https://github.com/mrdoob/three.js/blob/master/src/geometries/TubeGeometry.js
+ * @param {Vector3[]} points
+ * @param {Vector3[]} _normals
+ * @param {Vector3[]} binormals
+ * @param {number} radius
+ * @param {number} radialSegments
+ * @param {boolean} [closed]
+ * @returns {BufferGeometry}
+ */
+function makeTubeGeometry(points, _normals, binormals, radius, radialSegments, closed = false) {
+    const geometry = new BufferGeometry();
+    // helper variables
+
+    const vertex = new Vector3();
+    const normal = new Vector3();
+
+    // buffer
+
+    const vertices = [];
+    const normals = [];
+    const uvs = [];
+    const indices = [];
+
+    const tubularSegments = points.length - 1;
+
+    // create buffer data
+
+    generateBufferData();
+
+    // build geometry
+
+    geometry.setIndex(indices);
+    geometry.setAttribute('position', new Float32BufferAttribute(vertices, 3));
+    geometry.setAttribute('normal', new Float32BufferAttribute(normals, 3));
+    geometry.setAttribute('uv', new Float32BufferAttribute(uvs, 2));
+
+    // functions
+
+    function generateBufferData() {
+
+        for (let i = 0; i < tubularSegments; i++) {
+
+            generateSegment(i);
+
+        }
+
+        // if the geometry is not closed, generate the last row of vertices and normals
+        // at the regular position on the given path
+        //
+        // if the geometry is closed, duplicate the first row of vertices and normals (uvs will differ)
+
+        generateSegment((closed === false) ? tubularSegments : 0);
+
+        // uvs are generated in a separate function.
+        // this makes it easy compute correct values for closed geometries
+
+        generateUVs();
+
+        // finally create faces
+
+        generateIndices();
+
+    }
+
+    function generateSegment(i) {
+
+        // we use getPointAt to sample evenly distributed points from the given path
+
+        const P = points[i];
+
+        // retrieve corresponding normal and binormal
+
+        const N = _normals[i];
+        const B = binormals[i];
+
+        // generate normals and vertices for the current segment
+
+        for (let j = 0; j <= radialSegments; j++) {
+
+            const v = j / radialSegments * Math.PI * 2;
+
+            const sin = Math.sin(v);
+            const cos = -Math.cos(v);
+
+            // normal
+
+            normal.x = (cos * N.x + sin * B.x);
+            normal.y = (cos * N.y + sin * B.y);
+            normal.z = (cos * N.z + sin * B.z);
+            normal.normalize();
+
+            normals.push(normal.x, normal.y, normal.z);
+
+            // vertex
+
+            vertex.x = P.x + radius * normal.x;
+            vertex.y = P.y + radius * normal.y;
+            vertex.z = P.z + radius * normal.z;
+
+            vertices.push(vertex.x, vertex.y, vertex.z);
+
+        }
+
+    }
+
+    function generateIndices() {
+        let i = 0, j = 0;
+
+        for (j = 1; j <= tubularSegments; j++) {
+
+            for (i = 1; i <= radialSegments; i++) {
+
+                const a = (radialSegments + 1) * (j - 1) + (i - 1);
+                const b = (radialSegments + 1) * j + (i - 1);
+                const c = (radialSegments + 1) * j + i;
+                const d = (radialSegments + 1) * (j - 1) + i;
+
+                // faces
+
+                indices.push(a, b, d);
+                indices.push(b, c, d);
+
+            }
+
+        }
+
+    }
+
+    function generateUVs() {
+        let i = 0, j = 0;
+
+        for (i = 0; i <= tubularSegments; i++) {
+
+            const u = i / tubularSegments;
+
+            for (j = 0; j <= radialSegments; j++) {
+
+                const v = j / radialSegments;
+
+                uvs.push(u, v);
+
+            }
+
+        }
+
+    }
+
+
+    return geometry;
+}
+
 /**
  *
  * @param {Path} path
@@ -58,6 +370,35 @@ function estimatePathLength(path) {
 
 }
 
+/**
+ *
+ * @param {THREE.Vector3[]} points
+ * @param {number} point_count
+ * @param {TubePathStyle} style
+ * @return {BufferGeometry}
+ */
+function build_geometry_linear(points, point_count, style) {
+
+    const frames = computeFrenetFrames(points, false);
+
+    return makeTubeGeometry(points, frames.normals, frames.binormals, style.width, style.radial_resolution, false);
+}
+
+/**
+ *
+ * @param {THREE.Vector3[]} points
+ * @param {number} point_count
+ * @param {TubePathStyle} style
+ * @return {BufferGeometry}
+ */
+function build_geometry_catmullrom(points, point_count, style) {
+
+    const path = new CatmullRomCurve3(points, false, "centripetal");
+
+    return new TubeGeometry(path, style.resolution * point_count, style.width, style.radial_resolution, false);
+
+}
+
 export class TubePathBuilder {
     constructor() {
         /**
@@ -129,26 +470,27 @@ export class TubePathBuilder {
         }
 
 
-        let path;
+        /**
+         * @type {THREE.BufferGeometry}
+         */
+        let geometry;
 
         if (path_component.interpolation === InterpolationType.Linear) {
-            path = new CatmullRomCurve3(three_points, false, "catmullrom", 0);
+            geometry = build_geometry_linear(three_points, pointCount, style);
         } else if (path_component.interpolation === InterpolationType.CatmullRom) {
-            path = new CatmullRomCurve3(three_points, false, "centripetal");
+            geometry = build_geometry_catmullrom(three_points, pointCount, style);
         } else {
             throw new Error(`Unsupported interpolation type '${path_component.interpolation}'`);
         }
 
 
-        const geometry = new TubeGeometry(path, style.resolution * pointCount, style.width, style.radial_resolution, false);
-
         let material_def;
 
         if (style.material_type === TubeMaterialType.Standard) {
             material_def = new MeshStandardMaterial({
-                                                        metalness: style.material.metalness,
-                                                        roughness: style.material.roughness
-                                                    });
+                metalness: style.material.metalness,
+                roughness: style.material.roughness
+            });
         } else if (style.material_type === TubeMaterialType.Matcap) {
 
             material_def = new MeshMatcapMaterial();

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.35.4",
+  "version": "2.35.7",
   "dependencies": {
     "gl-matrix": "3.4.3",
     "fast-levenshtein": "2.0.6",