@woosh/meep-engine 2.35.12 → 2.35.13

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

@@ -74,6 +74,13 @@ export class ShadedGeometrySystem extends System {
          * @private
          */
         this.__adapter_suppliers = new Map();
+
+        /**
+         * Keeps count of usage for each geometry by ID
+         * @type {Map<number, number>}
+         * @private
+         */
+        this.__geometry_usage_counters = new Map();
     }
 
     /**
@@ -166,7 +173,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,graphics.renderer, view, this.__bvh);
+            return ctx.collect(destination, destination_offset, graphics.renderer, view, this.__bvh);
         });
 
         readyCallback();
@@ -210,6 +217,13 @@ export class ShadedGeometrySystem extends System {
         sg.__entity = entity;
 
         this.__bvh.insertNode(leaf_node);
+
+        // update usage count
+        const geometry_id = sg.geometry.id;
+        const count_existing = this.__geometry_usage_counters.get(geometry_id);
+        const count_new = count_existing !== undefined ? count_existing + 1 : 1;
+
+        this.__geometry_usage_counters.set(geometry_id, count_new);
     }
 
     /**
@@ -224,6 +238,21 @@ export class ShadedGeometrySystem extends System {
         t.scale.onChanged.remove(sg.updateTransform, sg);
 
         sg.bvh.disconnect();
+
+        const geometry_id = sg.geometry.id;
+        const count_existing = this.__geometry_usage_counters.get(geometry_id);
+
+        if (count_existing === 1) {
+
+            // last instance
+            this.__geometry_usage_counters.delete(geometry_id);
+
+            // release GPU memory
+            sg.geometry.dispose();
+
+        } else {
+            this.__geometry_usage_counters.set(geometry_id, count_existing - 1);
+        }
     }
 
     /**

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

@@ -316,6 +316,12 @@ function sample_style_tube() {
 
     style.width = 0.1;
 
+    style.path_mask = [
+        0.1, 0.12,
+        0.3, 0.8,
+        0.9, 1
+    ];
+
     return style;
 }
 

package/engine/graphics/ecs/path/tube/TubePathStyle.d.ts

@@ -13,4 +13,5 @@ export class TubePathStyle {
     public radial_resolution: number
     public cast_shadow: boolean
     public receive_shadow: boolean
+    public path_mask: number[]
 }

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

@@ -3,6 +3,8 @@ import { TubeMaterialType } from "./TubeMaterialType.js";
 import { assert } from "../../../../../core/assert.js";
 import { MatcapMaterialDefinition } from "./MatcapMaterialDefinition.js";
 
+const DEFAULT_COLOR = Object.freeze({ r: 1, g: 1, b: 1 });
+
 export class TubePathStyle {
     constructor() {
         /**
@@ -59,6 +61,16 @@ export class TubePathStyle {
          * @type {boolean}
          */
         this.receive_shadow = false;
+
+        /**
+         * Which parts of the path to visualise, in normalized offsets
+         * @example [ 0, 1 ] = whole path
+         * @example [ 0, 0.5 ] = first half of the path
+         * @example [ 0.5, 0.6 ] = segment from 50% along the path, to 60% along the path
+         * @example [ 0, 0.1, 0.9, 1] = first 10% of the path, and last 10% of the path
+         * @type {number[]}
+         */
+        this.path_mask = [0, 1];
     }
 
     static fromJSON(j) {
@@ -70,7 +82,7 @@ export class TubePathStyle {
     }
 
     fromJSON({
-                 color,
+                 color = DEFAULT_COLOR,
                  material_type,
                  material,
                  opacity = 1,
@@ -78,9 +90,22 @@ export class TubePathStyle {
                  resolution = 10,
                  radial_resolution = 16,
                  cast_shadow = false,
-                 receive_shadow = false
+                 receive_shadow = false,
+                 path_mask = [0, 1]
              }) {
         assert.enum(material_type, TubeMaterialType, 'material_type');
+        assert.isNumber(opacity, 'opacity');
+        assert.isNumber(width, 'width');
+        assert.isNumber(resolution, 'resolution');
+        assert.isNumber(radial_resolution, 'radial_resolution');
+        assert.isBoolean(cast_shadow, 'cast_shadow');
+        assert.isBoolean(receive_shadow, 'receive_shadow');
+
+        assert.defined(path_mask, 'path_mask');
+        assert.notNull(path_mask, 'path_mask');
+
+        assert.greaterThanOrEqual(path_mask.length, 2, 'path_mask length bust be at least 2');
+        assert.ok(path_mask.length % 2 === 0, 'path_mask length bust be multiple of 2');
 
         if (typeof color === 'string') {
             this.color.parse(color);
@@ -97,6 +122,8 @@ export class TubePathStyle {
         this.cast_shadow = cast_shadow;
         this.receive_shadow = receive_shadow;
 
+        this.path_mask = path_mask;
+
         switch (material_type) {
             case TubeMaterialType.Matcap:
                 this.material = new MatcapMaterialDefinition();

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

@@ -9,6 +9,28 @@ import { build_geometry_catmullrom } from "./build_geometry_catmullrom.js";
 import { ShadedGeometry } from "../../../mesh-v2/ShadedGeometry.js";
 import { ShadedGeometryFlags } from "../../../mesh-v2/ShadedGeometryFlags.js";
 
+/**
+ *
+ * @param {number} segment_start
+ * @param {number} segment_end
+ * @returns {BufferGeometry}
+ * @param {Path} path_component
+ * @param {TubePathStyle} style
+ */
+function make_geometry_segment(path_component, style, segment_start, segment_end) {
+
+    const interpolation = path_component.interpolation;
+
+    if (interpolation === InterpolationType.Linear) {
+        return build_geometry_linear(path_component, style, segment_start, segment_end);
+    } else if (interpolation === InterpolationType.CatmullRom) {
+        return build_geometry_catmullrom(path_component, style, segment_start, segment_end);
+    } else {
+        throw new Error(`Unsupported interpolation type '${interpolation}'`);
+    }
+
+}
+
 export class TubePathBuilder {
     constructor() {
         /**
@@ -80,20 +102,6 @@ export class TubePathBuilder {
         }
 
 
-        /**
-         * @type {THREE.BufferGeometry}
-         */
-        let geometry;
-
-        if (path_component.interpolation === InterpolationType.Linear) {
-            geometry = build_geometry_linear(three_points, pointCount, style);
-        } else if (path_component.interpolation === InterpolationType.CatmullRom) {
-            geometry = build_geometry_catmullrom(three_points, pointCount, style);
-        } else {
-            throw new Error(`Unsupported interpolation type '${path_component.interpolation}'`);
-        }
-
-
         let material_def;
 
         if (style.material_type === TubeMaterialType.Standard) {
@@ -116,23 +124,37 @@ export class TubePathBuilder {
         }
 
         material_def.color.set(style.color.toUint());
+        material_def.wireframe = true;
 
         if (style.opacity < 1) {
             material_def.transparent = true;
             material_def.opacity = style.opacity;
         }
 
-        const entityBuilder = new EntityBuilder();
+        const segment_count = style.path_mask.length / 2;
+
+        for (let i = 0; i < segment_count; i++) {
+            const i2 = i * 2;
+
+            const segment_start = style.path_mask[i2];
+            const segment_end = style.path_mask[i2 + 1];
+
+            const geometry = make_geometry_segment(path_component, style, segment_start, segment_end);
 
-        entityBuilder.add(new Transform());
+            const entityBuilder = new EntityBuilder();
 
-        const shaded_geometry = ShadedGeometry.from(geometry, material_def);
+            entityBuilder.add(new Transform());
 
-        shaded_geometry.writeFlag(ShadedGeometryFlags.CastShadow, style.cast_shadow);
-        shaded_geometry.writeFlag(ShadedGeometryFlags.ReceiveShadow, style.receive_shadow);
+            const shaded_geometry = ShadedGeometry.from(geometry, material_def);
 
-        entityBuilder.add(shaded_geometry);
+            shaded_geometry.writeFlag(ShadedGeometryFlags.CastShadow, style.cast_shadow);
+            shaded_geometry.writeFlag(ShadedGeometryFlags.ReceiveShadow, style.receive_shadow);
+
+            entityBuilder.add(shaded_geometry);
+
+            destination.push(entityBuilder);
+
+        }
 
-        destination.push(entityBuilder);
     }
 }

package/engine/graphics/ecs/path/tube/build/build_geometry_catmullrom.js

@@ -1,32 +1,61 @@
-import { CatmullRomCurve3 } from "three";
 import { computeFrenetFrames } from "./computeFrenetFrames.js";
 import { makeTubeGeometry } from "./makeTubeGeometry.js";
+import Vector3 from "../../../../../../core/geom/Vector3.js";
 
 /**
  *
- * @param {THREE.Vector3[]} points
- * @param {number} point_count
+ * @param {Path} path
  * @param {TubePathStyle} style
+ * @param {number} segment_start
+ * @param {number} segment_end
  * @return {THREE.BufferGeometry}
  */
-export function build_geometry_catmullrom(points, point_count, style) {
+export function build_geometry_catmullrom(path, style, segment_start, segment_end) {
 
-    const path = new CatmullRomCurve3(points, false, "centripetal");
-
-    const sample_points = [];
+    const point_count = path.getPointCount();
 
     // resample curve
     const total_points = Math.ceil(point_count * style.resolution);
 
-    for (let i = 0; i < total_points; i++) {
+    const path_length = path.length;
+
+    const point = new Vector3();
+
+    const points_f32 = [];
+
+
+    let added_points = 0;
+    let i;
+
+    // initial segment
+    path.sample_catmull_rom(point, segment_start * path_length);
+
+    point.writeToArray(points_f32, added_points * 3);
+
+    added_points++;
+
+    const max_i = segment_end * (total_points - 1);
+    for (i = Math.ceil(segment_start * total_points + 0.0001); i < max_i; i++) {
         const t = i / (total_points - 1);
 
-        const point = path.getPoint(t);
+        path.sample_catmull_rom(point, path_length * t);
+
+        point.writeToArray(points_f32, added_points * 3);
+
+        added_points++
+    }
+
+    if (((i - 1) / (total_points - 1)) - segment_end > 0.0001) {
+        // end
+
+        path.sample_catmull_rom(point, segment_end * path_length);
+
+        point.writeToArray(points_f32, added_points * 3);
 
-        sample_points.push(point);
+        added_points++;
     }
 
-    const frames = computeFrenetFrames(sample_points, false);
+    const frames = computeFrenetFrames(points_f32, false);
 
-    return makeTubeGeometry(sample_points, frames.normals, frames.binormals, style.width, style.radial_resolution, false);
+    return makeTubeGeometry(points_f32, frames.normals, frames.binormals, style.width, style.radial_resolution, false);
 }

package/engine/graphics/ecs/path/tube/build/build_geometry_linear.js

@@ -1,14 +1,54 @@
 import { computeFrenetFrames } from "./computeFrenetFrames.js";
 import { makeTubeGeometry } from "./makeTubeGeometry.js";
+import Vector3 from "../../../../../../core/geom/Vector3.js";
+
+
+const scratch_array_0 = [];
+const scratch_array_1 = [];
+
+const scratch_v3 = new Vector3();
 
 /**
  *
- * @param {THREE.Vector3[]} points
- * @param {number} point_count
+ * @param {Path} path
  * @param {TubePathStyle} style
+ * @param {number} segment_start
+ * @param {number} segment_end
  * @return {THREE.BufferGeometry}
  */
-export function build_geometry_linear(points, point_count, style) {
+export function build_geometry_linear(path, style, segment_start, segment_end) {
+    const points = [];
+
+    const path_length = path.length;
+
+    path.find_index_and_normalized_distance(scratch_array_0, segment_start * path_length);
+    path.find_index_and_normalized_distance(scratch_array_1, segment_end * path_length);
+
+    let points_added = 0;
+
+    if (scratch_array_0[1] !== 0) {
+        path.sample_linear(scratch_v3, segment_start * path_length);
+
+        scratch_v3.writeToArray(points, points_added * 3);
+        points_added++;
+
+        // offset first sampled point, we're already past it
+        scratch_array_0[0]++;
+    }
+
+    const max_i = scratch_array_1[0];
+    for (let i = scratch_array_0[0]; i <= max_i; i++) {
+        path.readPositionToArray(i, points, points_added * 3);
+        points_added++;
+    }
+
+    if (scratch_array_1[1] !== 0) {
+        //add end
+        path.sample_linear(scratch_v3, segment_end * path_length);
+
+        scratch_v3.writeToArray(points, points_added * 3);
+        points_added++;
+    }
 
     const frames = computeFrenetFrames(points, false);
 

package/engine/graphics/ecs/path/tube/build/computeFrenetFrames.js

@@ -2,15 +2,17 @@ import { Vector3 } from "three";
 import { Matrix4 } from "three/src/math/Matrix4.js";
 import { max2 } from "../../../../../../core/math/max2.js";
 import { min2 } from "../../../../../../core/math/min2.js";
-import * as MathUtils from "three/src/math/MathUtils.js";
+import { clamp } from "../../../../../../core/math/clamp.js";
+import { vec3 } from "gl-matrix";
+import { array_copy } from "../../../../../../core/collection/array/copyArray.js";
 
 /**
  * @see https://github.com/mrdoob/three.js/blob/c12c9a166a1369cdd58622fff2aff7e3a84305d7/src/extras/core/Curve.js#L260
- * @param {Vector3[]} points
+ * @param {Float32Array|number[]} points
  * @param {boolean} [closed]
  */
 export function computeFrenetFrames(points, closed = false) {
-// see http://www.cs.indiana.edu/pub/techreports/TR425.pdf
+    // see http://www.cs.indiana.edu/pub/techreports/TR425.pdf
 
     const normal = new Vector3();
 
@@ -21,10 +23,15 @@ export function computeFrenetFrames(points, closed = false) {
     const vec = new Vector3();
     const mat = new Matrix4();
 
-    const segments = points.length - 1;
+    const point_count = points.length / 3;
+    const segments = point_count - 1;
 
-    const v3_0 = new Vector3();
-    const v3_1 = new Vector3();
+    const v3_0 = [];
+    const v3_1 = [];
+
+    const p0_a = [];
+    const pR_a = [];
+    const p1_a = [];
 
     /**
      *
@@ -36,18 +43,23 @@ export function computeFrenetFrames(points, closed = false) {
         const i0 = max2(i - 1, 0);
         const i1 = min2(i + 1, segments);
 
-        const p0 = points[i0];
-        const pR = points[i];
-        const p1 = points[i1];
+        array_copy(points, i0 * 3, p0_a, 0, 3);
+        array_copy(points, i * 3, pR_a, 0, 3);
+        array_copy(points, i1 * 3, p1_a, 0, 3);
 
         // 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();
+        vec3.sub(v3_0, p0_a, pR_a);
+        vec3.normalize(v3_0, v3_0);
+
+        vec3.sub(v3_1, p1_a, pR_a);
+        vec3.normalize(v3_1, v3_1);
 
-        destination.subVectors(v3_1, v3_0);
+        destination.set(
+            v3_1[0] - v3_0[0],
+            v3_1[1] - v3_0[1],
+            v3_1[2] - v3_0[2],
+        );
         destination.normalize();
     }
 
@@ -112,7 +124,7 @@ export function computeFrenetFrames(points, closed = false) {
 
             vec.normalize();
 
-            const theta = Math.acos(MathUtils.clamp(tangents[i - 1].dot(tangents[i]), -1, 1)); // clamp for floating pt errors
+            const theta = Math.acos(clamp(tangents[i - 1].dot(tangents[i]), -1, 1)); // clamp for floating pt errors
 
             normals[i].applyMatrix4(mat.makeRotationAxis(vec, theta));
 
@@ -126,7 +138,7 @@ export function computeFrenetFrames(points, closed = false) {
 
     if (closed === true) {
 
-        let theta = Math.acos(MathUtils.clamp(normals[0].dot(normals[segments]), -1, 1));
+        let theta = Math.acos(clamp(normals[0].dot(normals[segments]), -1, 1));
         theta /= segments;
 
         if (tangents[0].dot(vec.crossVectors(normals[0], normals[segments])) > 0) {

package/engine/graphics/ecs/path/tube/build/makeTubeGeometry.js

@@ -2,7 +2,7 @@ import { BufferGeometry, Float32BufferAttribute, Vector3 } from "three";
 
 /**
  * @see https://github.com/mrdoob/three.js/blob/master/src/geometries/TubeGeometry.js
- * @param {Vector3[]} points
+ * @param {Float32Array|number[]} points
  * @param {Vector3[]} _normals
  * @param {Vector3[]} binormals
  * @param {number} radius
@@ -24,7 +24,8 @@ export function makeTubeGeometry(points, _normals, binormals, radius, radialSegm
     const uvs = [];
     const indices = [];
 
-    const tubularSegments = points.length - 1;
+    const point_count = points.length / 3;
+    const tubularSegments = point_count - 1;
 
     // create buffer data
 
@@ -69,7 +70,11 @@ export function makeTubeGeometry(points, _normals, binormals, radius, radialSegm
 
         // we use getPointAt to sample evenly distributed points from the given path
 
-        const P = points[i];
+        const i3 = i * 3;
+
+        const Px = points[i3];
+        const Py = points[i3 + 1];
+        const Pz = points[i3 + 2];
 
         // retrieve corresponding normal and binormal
 
@@ -97,9 +102,9 @@ export function makeTubeGeometry(points, _normals, binormals, radius, radialSegm
 
             // vertex
 
-            vertex.x = P.x + radius * normal.x;
-            vertex.y = P.y + radius * normal.y;
-            vertex.z = P.z + radius * normal.z;
+            vertex.x = Px + radius * normal.x;
+            vertex.y = Py + radius * normal.y;
+            vertex.z = Pz + radius * normal.z;
 
             vertices.push(vertex.x, vertex.y, vertex.z);
 

package/engine/navigation/ecs/components/Path.js

@@ -436,7 +436,7 @@ class Path {
      */
     sample_linear(result, offset) {
 
-        const found = this.__find_index_and_normalized_distance(scratch_array_0, offset);
+        const found = this.find_index_and_normalized_distance(scratch_array_0, offset);
 
         if (!found) {
             return false;
@@ -466,9 +466,8 @@ class Path {
      * @param {number[]} result
      * @param {number} absolute_distance absolute distance along the path
      * @returns {boolean}
-     * @private
      */
-    __find_index_and_normalized_distance(result, absolute_distance) {
+    find_index_and_normalized_distance(result, absolute_distance) {
         const pointCount = this.getPointCount();
 
         if (pointCount === 0) {
@@ -495,10 +494,10 @@ class Path {
                 // we found v1
                 const local_offset = absolute_distance - cursor;
 
-                const local_normalize_offset = local_offset / distance;
+                const local_normalized_offset = local_offset / distance;
 
                 result[0] = i - 1;
-                result[1] = local_normalize_offset;
+                result[1] = local_normalized_offset;
                 return true;
             }
 
@@ -525,7 +524,7 @@ class Path {
      * @returns {boolean}
      */
     sample_catmull_rom(result, offset) {
-        const found = this.__find_index_and_normalized_distance(scratch_array_0, offset);
+        const found = this.find_index_and_normalized_distance(scratch_array_0, offset);
 
         if (!found) {
             return false;

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