@woosh/meep-engine 2.35.16 → 2.35.17

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

@@ -22,7 +22,6 @@ import { OrbitingBehavior } from "../../../../../../model/game/util/behavior/Orb
 import { BehaviorSystem } from "../../../../intelligence/behavior/ecs/BehaviorSystem.js";
 import { MicronShadedGeometryRenderAdapter } from "../../../micron/plugin/shaded_geometry/MicronShadedGeometryRenderAdapter.js";
 import { MicronRenderContext } from "../../../micron/render/v1/MicronRenderContext.js";
-import { randomIntegerBetween } from "../../../../../core/math/random/randomIntegerBetween.js";
 
 const eh = new EngineHarness();
 
@@ -102,8 +101,8 @@ async function main(engine) {
         // sg.draw_method = DRAW_METHOD_PLAIN;
         // sg.draw_method = DRAW_METHOD_INSTANCED;
         // sg.draw_method = 2;
-        sg.draw_method = randomIntegerBetween(random, 0, 2);
-        // sg.draw_method = random() > 0.01 ? DRAW_METHOD_INSTANCED : DRAW_METHOD_PLAIN;
+        // sg.draw_method = DRAW_METHOD_INSTANCED;
+        // sg.draw_method = random() > 0.5 ? DRAW_METHOD_INSTANCED : 2;
         sg.clearFlag(ShadedGeometryFlags.CastShadow | ShadedGeometryFlags.ReceiveShadow);
 
         new EntityBuilder()

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

@@ -125,7 +125,8 @@ class PathDisplayContext extends SystemEntityContext {
             try {
                 builder(spec.style, path, this.system, ownedEntities);
             } catch (e) {
-                console.error(`Failed to build path of type '${spec.type}': ${e}`);
+                console.error(`Failed to build path of type '${spec.type}'`);
+                console.error(e);
             }
         }
 

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

@@ -359,14 +359,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/CapType.d.ts

@@ -0,0 +1,5 @@
+export enum CapType {
+    None,
+    Flat,
+    Round
+}

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

@@ -0,0 +1,9 @@
+/**
+ * @readonly
+ * @enum {number}
+ */
+export const CapType = {
+    None: 0,
+    Flat: 1,
+    Round: 2
+};

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

@@ -2,6 +2,7 @@ import {Color} from "../../../../../core/color/Color";
 import {TubeMaterialType} from "./TubeMaterialType";
 import {StandardMaterialDefinition} from "./StandardMaterialDefinition";
 import {MatcapMaterialDefinition} from "./MatcapMaterialDefinition";
+import {CapType} from "./CapType";
 
 export class TubePathStyle {
     public color: Color
@@ -14,4 +15,5 @@ export class TubePathStyle {
     public cast_shadow: boolean
     public receive_shadow: boolean
     public path_mask: number[]
+    public cap_type: CapType
 }

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

@@ -2,6 +2,7 @@ import { Color } from "../../../../../core/color/Color.js";
 import { TubeMaterialType } from "./TubeMaterialType.js";
 import { assert } from "../../../../../core/assert.js";
 import { MatcapMaterialDefinition } from "./MatcapMaterialDefinition.js";
+import { CapType } from "./CapType.js";
 
 const DEFAULT_COLOR = Object.freeze({ r: 1, g: 1, b: 1 });
 
@@ -71,6 +72,11 @@ export class TubePathStyle {
          * @type {number[]}
          */
         this.path_mask = [0, 1];
+
+        /**
+         * @type {CapType}
+         */
+        this.cap_type = CapType.Flat;
     }
 
     static fromJSON(j) {
@@ -91,7 +97,8 @@ export class TubePathStyle {
                  radial_resolution = 16,
                  cast_shadow = false,
                  receive_shadow = false,
-                 path_mask = [0, 1]
+                 path_mask = [0, 1],
+                 cap_type = CapType.None
              }) {
         assert.enum(material_type, TubeMaterialType, 'material_type');
         assert.isNumber(opacity, 'opacity');
@@ -106,6 +113,7 @@ export class TubePathStyle {
 
         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');
+        assert.enum(cap_type, CapType, 'cap_type');
 
         if (typeof color === 'string') {
             this.color.parse(color);
@@ -123,6 +131,7 @@ export class TubePathStyle {
         this.receive_shadow = receive_shadow;
 
         this.path_mask = path_mask;
+        this.cap_type = cap_type;
 
         switch (material_type) {
             case TubeMaterialType.Matcap:

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

@@ -0,0 +1,90 @@
+import { UintArrayForCount } from "../../../../../../core/collection/array/typed/uint_array_for_count.js";
+import { BufferAttribute, BufferGeometry } from "three";
+
+/**
+ * Helper class, allowing us to treat geometry build process as a stream without having to create intermediate arrays and performing unnecessary copying
+ */
+export class GeometryOutput {
+    constructor() {
+        /**
+         *
+         * @type {number}
+         */
+        this.cursor_vertices = 0;
+
+        /**
+         *
+         * @type {number}
+         */
+        this.cursor_indices = 0;
+
+        /**
+         *
+         * @type {Float32Array|number[]|null}
+         * @private
+         */
+        this.__vertex_positions = null;
+        /**
+         *
+         * @type {Float32Array|number[]|null}
+         * @private
+         */
+        this.__vertex_normals = null;
+        /**
+         *
+         * @type {Float32Array|number[]|null}
+         * @private
+         */
+        this.__vertex_uvs = null;
+        /**
+         *
+         * @type {Uint8Array|Uint16Array|Uint32Array|number[]|null}
+         * @private
+         */
+        this.__indices = null;
+    }
+
+    get positions() {
+        return this.__vertex_positions;
+    }
+
+    get normals() {
+        return this.__vertex_normals;
+    }
+
+    get uvs() {
+        return this.__vertex_uvs;
+    }
+
+    get indices() {
+        return this.__indices;
+    }
+
+    /**
+     *
+     * @param {number} vertex_count
+     * @param {number} polygon_count
+     */
+    allocate(vertex_count, polygon_count) {
+        this.__vertex_positions = new Float32Array(vertex_count * 3);
+        this.__vertex_normals = new Float32Array(vertex_count * 3);
+        this.__vertex_uvs = new Float32Array(vertex_count * 2);
+
+        const INDEX_BUFFER_CLASS = UintArrayForCount(vertex_count);
+        this.__indices = new INDEX_BUFFER_CLASS(polygon_count * 3);
+    }
+
+    /**
+     * @returns {THREE.BufferGeometry}
+     */
+    build() {
+        const geometry = new BufferGeometry();
+
+        geometry.setIndex(new BufferAttribute(this.__indices, 1));
+        geometry.setAttribute('position', new BufferAttribute(this.__vertex_positions, 3));
+        geometry.setAttribute('normal', new BufferAttribute(this.__vertex_normals, 3));
+        geometry.setAttribute('uv', new BufferAttribute(this.__vertex_uvs, 2));
+
+        return geometry;
+    }
+}

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

@@ -36,6 +36,7 @@ export function build_geometry_catmullrom(path, style, segment_start, segment_en
 
     const max_i = segment_end * (total_points - 1);
     for (i = Math.ceil(segment_start * total_points + 0.0001); i < max_i; i++) {
+        // TODO initial i value can potentially result in sample being produced before the "segment start"
         const t = i / (total_points - 1);
 
         path.sample_catmull_rom(point, path_length * t);
@@ -45,7 +46,7 @@ export function build_geometry_catmullrom(path, style, segment_start, segment_en
         added_points++
     }
 
-    if (((i - 1) / (total_points - 1)) - segment_end > 0.0001) {
+    if (segment_end - ((i - 1) / (total_points - 1)) > 0.0001) {
         // end
 
         path.sample_catmull_rom(point, segment_end * path_length);
@@ -57,5 +58,5 @@ export function build_geometry_catmullrom(path, style, segment_start, segment_en
 
     const frames = computeFrenetFrames(points_f32, false);
 
-    return makeTubeGeometry(points_f32, frames.normals, frames.binormals, style.width, style.radial_resolution, false);
+    return makeTubeGeometry(points_f32, frames.normals, frames.binormals, style.width, style.radial_resolution, false, style.cap_type);
 }

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

@@ -52,5 +52,5 @@ export function build_geometry_linear(path, style, segment_start, segment_end) {
 
     const frames = computeFrenetFrames(points, false);
 
-    return makeTubeGeometry(points, frames.normals, frames.binormals, style.width, style.radial_resolution, false);
+    return makeTubeGeometry(points, frames.normals, frames.binormals, style.width, style.radial_resolution, false, style.cap_type);
 }

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

@@ -1,161 +1,423 @@
-import { BufferGeometry, Float32BufferAttribute, Vector3 } from "three";
+import { BufferGeometry, Vector3 } from "three";
+import { GeometryOutput } from "./GeometryOutput.js";
+import { CapType } from "../CapType.js";
+import { max2 } from "../../../../../../core/math/max2.js";
+
 
 /**
- * @see https://github.com/mrdoob/three.js/blob/master/src/geometries/TubeGeometry.js
- * @param {Float32Array|number[]} points
- * @param {Vector3[]} _normals
- * @param {Vector3[]} binormals
+ *
+ * @param {GeometryOutput} out
+ * @param {number} Px
+ * @param {number} Py
+ * @param {number} Pz
+ * @param {Vector3} N normal
+ * @param {Vector3} B binormal
+ * @param {number} u X component of UV
  * @param {number} radius
- * @param {number} radialSegments
- * @param {boolean} [closed]
- * @returns {BufferGeometry}
+ * @param {number} angular_step
+ * @param {number} radial_segments
  */
-export function makeTubeGeometry(points, _normals, binormals, radius, radialSegments, closed = false) {
-    const geometry = new BufferGeometry();
-    // helper variables
+function make_ring_vertices(
+    out,
+    Px, Py, Pz,
+    N, B,
+    u,
+    radius, angular_step, radial_segments
+) {
+    const out_positions = out.positions;
+    const out_normals = out.normals;
+    const out_uvs = out.uvs;
 
-    const vertex = new Vector3();
-    const normal = new Vector3();
+    for (let j = 0; j <= radial_segments; j++) {
+        const angle = j * angular_step;
 
-    // buffer
+        const sin = Math.sin(angle);
+        const cos = -Math.cos(angle);
 
-    const vertices = [];
-    const normals = [];
-    const uvs = [];
-    const indices = [];
+        // normal
 
-    const point_count = points.length / 3;
-    const tubularSegments = point_count - 1;
+        const normal_x_r = (cos * N.x + sin * B.x);
+        const normal_y_r = (cos * N.y + sin * B.y);
+        const normal_z_r = (cos * N.z + sin * B.z);
 
-    // create buffer data
+        const normal_length = 1 / Math.hypot(normal_x_r, normal_y_r, normal_z_r);
 
-    generateBufferData();
+        const normal_x = normal_x_r * normal_length;
+        const normal_y = normal_y_r * normal_length;
+        const normal_z = normal_z_r * normal_length;
 
-    // build geometry
+        const cv = out.cursor_vertices;
+        const cv3 = cv * 3;
 
-    geometry.setIndex(indices);
-    geometry.setAttribute('position', new Float32BufferAttribute(vertices, 3));
-    geometry.setAttribute('normal', new Float32BufferAttribute(normals, 3));
-    geometry.setAttribute('uv', new Float32BufferAttribute(uvs, 2));
+        out_normals[cv3] = normal_x;
+        out_normals[cv3 + 1] = normal_y;
+        out_normals[cv3 + 2] = normal_z;
 
-    // functions
+        // position
 
-    function generateBufferData() {
+        const vx = Px + radius * normal_x;
+        const vy = Py + radius * normal_y;
+        const vz = Pz + radius * normal_z;
 
-        for (let i = 0; i < tubularSegments; i++) {
+        out_positions[cv3] = vx;
+        out_positions[cv3 + 1] = vy;
+        out_positions[cv3 + 2] = vz;
 
-            generateSegment(i);
+        // UV
+        const v = j / radial_segments;
+
+        const cv2 = cv * 2;
+
+        out_uvs[cv2] = u;
+        out_uvs[cv2 + 1] = v;
+
+        out.cursor_vertices++;
+
+    }
+}
+
+/**
+ *
+ * @param {GeometryOutput} out
+ * @param {number} index_offset
+ * @param {number} tubular_segments
+ * @param {number} radial_segments
+ */
+function make_ring_faces(out, index_offset, tubular_segments, radial_segments) {
+    const indices = out.indices;
+
+    let i = 0, j = 0;
+
+    for (j = 1; j <= tubular_segments; j++) {
+
+        for (i = 1; i <= radial_segments; i++) {
+
+            const s_1 = radial_segments + 1;
+
+            const a = index_offset + s_1 * (j - 1) + (i - 1);
+            const b = index_offset + s_1 * j + (i - 1);
+            const c = index_offset + s_1 * j + i;
+            const d = index_offset + s_1 * (j - 1) + i;
+
+            // faces
+
+            const ci = out.cursor_indices;
+
+            indices[ci] = a;
+            indices[ci + 1] = b;
+            indices[ci + 2] = d;
 
+            indices[ci + 3] = b;
+            indices[ci + 4] = c;
+            indices[ci + 5] = d;
+
+            out.cursor_indices += 6;
         }
 
-        // 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)
+    }
+}
+
+/**
+ *
+ * @param {number} radial_segments
+ * @returns {number}
+ */
+function compute_cap_round_segment_count(radial_segments) {
+    return max2(3, Math.ceil(radial_segments / 4));
+}
+
+/**
+ *
+ * @param {number} index
+ * @param {Float32Array|number[]} in_positions
+ * @param {Vector3[]} in_normals
+ * @param {Vector3[]} in_binormals
+ * @param {GeometryOutput} out
+ * @param {number} radius
+ * @param {number} radial_segments
+ * @param {number} direction
+ */
+function make_cap_round(
+    out,
+    index,
+    in_positions, in_normals, in_binormals,
+    radius, radial_segments, direction
+) {
+    // how many radial segments will be placed laterally to make up the cap
+    const cap_segment_count = compute_cap_round_segment_count(radial_segments);
 
-        generateSegment((closed === false) ? tubularSegments : 0);
+    const i3 = index * 3;
 
-        // uvs are generated in a separate function.
-        // this makes it easy compute correct values for closed geometries
+    const Px = in_positions[i3];
+    const Py = in_positions[i3 + 1];
+    const Pz = in_positions[i3 + 2];
 
-        generateUVs();
+    // retrieve corresponding normal and binormal
 
-        // finally create faces
+    const N = in_normals[index];
+    const B = in_binormals[index];
+
+    const tangent = new Vector3();
+    tangent.crossVectors(N, B);
+    tangent.normalize();
+
+    const normal = direction > 0 ? N : N.clone().negate();
+
+    const angular_step_i = (Math.PI / 2) / cap_segment_count;
+    const angular_step_j = (Math.PI * 2) / radial_segments;
+
+    const uv_u = index / (in_positions.length / 3 - 1);
+    let i, j;
 
-        generateIndices();
+    const index_offset = out.cursor_vertices;
 
+    for (i = 0; i <= cap_segment_count; i++) {
+        const angle_b = i * angular_step_i;
+
+        const sin_b = Math.sin(angle_b);
+        const cos_b = Math.cos(angle_b);
+
+        const cap_ring_radius = sin_b * radius;
+
+        const _d = -radius * direction;
+
+        const _px = Px + tangent.x * cos_b * _d;
+        const _py = Py + tangent.y * cos_b * _d;
+        const _pz = Pz + tangent.z * cos_b * _d;
+
+        make_ring_vertices(
+            out,
+            _px, _py, _pz,
+            normal, B, uv_u,
+            cap_ring_radius, angular_step_j, radial_segments
+        );
     }
 
-    function generateSegment(i) {
+    make_ring_faces(out, index_offset, cap_segment_count, radial_segments);
+}
 
-        // we use getPointAt to sample evenly distributed points from the given path
+/**
+ *
+ * @param {number} index
+ * @param {Float32Array|number[]} in_positions
+ * @param {Vector3[]} in_normals
+ * @param {Vector3[]} in_binormals
+ * @param {GeometryOutput} out
+ * @param {number} radius
+ * @param {number} radial_segments
+ * @param {number} direction
+ */
+function make_cap_flat(
+    out,
+    index,
+    in_positions, in_normals, in_binormals,
+    radius, radial_segments, direction
+) {
+    // how many radial segments will be placed laterally to make up the cap
+    const i3 = index * 3;
 
-        const i3 = i * 3;
+    const Px = in_positions[i3];
+    const Py = in_positions[i3 + 1];
+    const Pz = in_positions[i3 + 2];
 
-        const Px = points[i3];
-        const Py = points[i3 + 1];
-        const Pz = points[i3 + 2];
+    // retrieve corresponding normal and binormal
 
-        // retrieve corresponding normal and binormal
+    const N = in_normals[index];
+    const B = in_binormals[index];
 
-        const N = _normals[i];
-        const B = binormals[i];
+    const tangent = new Vector3();
+    tangent.crossVectors(N, B);
+    tangent.normalize();
 
-        // generate normals and vertices for the current segment
+    const normal = direction > 0 ? N.clone().negate() : N;
+
+    const angular_step_j = (Math.PI * 2) / radial_segments;
 
-        const angular_step = (Math.PI * 2) / radialSegments;
+    const uv_u = index / (in_positions.length / 3 - 1);
 
-        for (let j = 0; j <= radialSegments; j++) {
-            const v = j * angular_step;
+    const index_offset = out.cursor_vertices;
 
-            const sin = Math.sin(v);
-            const cos = -Math.cos(v);
+    make_ring_vertices(
+        out,
+        Px, Py, Pz,
+        normal, B, uv_u,
+        radius, angular_step_j, radial_segments
+    );
 
-            // normal
+    make_ring_vertices(
+        out,
+        Px, Py, Pz,
+        normal, B, uv_u,
+        0, angular_step_j, radial_segments
+    );
 
-            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();
+    make_ring_faces(out, index_offset, 1, radial_segments);
+}
 
-            normals.push(normal.x, normal.y, normal.z);
+/**
+ *
+ * @param {number} index
+ * @param {Float32Array|number[]} in_positions
+ * @param {Vector3[]} in_normals
+ * @param {Vector3[]} in_binormals
+ * @param {GeometryOutput} out
+ * @param {number} radius
+ * @param {number} radial_segments
+ * @param {number} direction
+ * @param {CapType} type
+ */
+function make_cap(
+    out,
+    index,
+    in_positions, in_normals, in_binormals,
+    radius, radial_segments, direction, type
+) {
+    if (type === CapType.None) {
+        // do nothing
+    } else if (type === CapType.Round) {
+        make_cap_round(
+            out,
+            index,
+            in_positions, in_normals, in_binormals,
+            radius, radial_segments,
+            direction
+        );
+    } else if (type === CapType.Flat) {
+        make_cap_flat(
+            out,
+            index,
+            in_positions, in_normals, in_binormals,
+            radius, radial_segments,
+            direction
+        );
+    } else {
+        throw new Error(`Unsupported cap type '${type}'`);
+    }
+}
 
-            // vertex
+/**
+ *
+ * @param {number} count how many caps
+ * @param {{polygon_count:number, vertex_count:number}} out
+ * @param {number} radial_segments
+ * @param {CapType} type
+ */
+function compute_cap_geometry_size(count, out, radial_segments, type) {
+
+    if (type === CapType.None) {
+        // do nothing
+    } else if (type === CapType.Round) {
+        const cap_segment_count = compute_cap_round_segment_count(radial_segments);
+
+        out.vertex_count += count * (cap_segment_count + 1) * (radial_segments + 1);
+        out.polygon_count += count * cap_segment_count * (radial_segments) * 2;
+    } else if (type === CapType.Flat) {
+        out.vertex_count += count * (2) * (radial_segments + 1);
+        out.polygon_count += count * (radial_segments) * 2;
+    } else {
+        throw new Error(`Unsupported cap type '${type}'`);
+    }
+}
 
-            vertex.x = Px + radius * normal.x;
-            vertex.y = Py + radius * normal.y;
-            vertex.z = Pz + radius * normal.z;
+/**
+ * @see https://github.com/mrdoob/three.js/blob/master/src/geometries/TubeGeometry.js
+ * @param {Float32Array|number[]} in_positions
+ * @param {Vector3[]} in_normals
+ * @param {Vector3[]} in_binormals
+ * @param {number} radius
+ * @param {number} radial_segments
+ * @param {boolean} [closed]
+ * @param {CapType} [cap_type]
+ * @returns {BufferGeometry}
+ */
+export function makeTubeGeometry(in_positions, in_normals, in_binormals, radius, radial_segments, closed = false, cap_type = CapType.Round) {
 
-            vertices.push(vertex.x, vertex.y, vertex.z);
+    const out = new GeometryOutput();
 
-        }
+    // helper variables
+
+    const point_count = in_positions.length / 3;
+    const tubular_segments = point_count - 1;
+
+
+    const geometry_size = {
+        vertex_count: (tubular_segments + 1) * (radial_segments + 1),
+        polygon_count: tubular_segments * radial_segments * 2
+    };
 
+    if (!closed) {
+        compute_cap_geometry_size(2, geometry_size, radial_segments, cap_type);
     }
 
-    function generateIndices() {
-        let i = 0, j = 0;
+    out.allocate(
+        geometry_size.vertex_count,
+        geometry_size.polygon_count
+    );
 
-        for (j = 1; j <= tubularSegments; j++) {
+    // create buffer data
+    if (!closed) {
+        // start cap
+        make_cap(out, 0, in_positions, in_normals, in_binormals, radius, radial_segments, 1, cap_type);
+    }
 
-            for (i = 1; i <= radialSegments; i++) {
+    generateBufferData();
 
-                const s_1 = radialSegments + 1;
+    if (!closed) {
+        // end cap
+        make_cap(out, point_count - 1, in_positions, in_normals, in_binormals, radius, radial_segments, -1, cap_type);
+    }
 
-                const a = s_1 * (j - 1) + (i - 1);
-                const b = s_1 * j + (i - 1);
-                const c = s_1 * j + i;
-                const d = s_1 * (j - 1) + i;
+    // functions
 
-                // faces
+    function generateBufferData() {
+        const index_offset = out.cursor_vertices;
 
-                indices.push(a, b, d);
-                indices.push(b, c, d);
+        for (let i = 0; i < tubular_segments; 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) ? tubular_segments : 0);
+
+        // finally create faces
+        make_ring_faces(out, index_offset, tubular_segments, radial_segments);
+
     }
 
-    function generateUVs() {
-        let i = 0, j = 0;
+    function generateSegment(i) {
 
-        for (i = 0; i <= tubularSegments; i++) {
+        // we use getPointAt to sample evenly distributed points from the given path
+
+        const i3 = i * 3;
 
-            const u = i / tubularSegments;
+        const Px = in_positions[i3];
+        const Py = in_positions[i3 + 1];
+        const Pz = in_positions[i3 + 2];
 
-            for (j = 0; j <= radialSegments; j++) {
+        // retrieve corresponding normal and binormal
 
-                const v = j / radialSegments;
+        const N = in_normals[i];
+        const B = in_binormals[i];
 
-                uvs.push(u, v);
+        // generate normals and vertices for the current segment
 
-            }
+        const angular_step = (Math.PI * 2) / radial_segments;
 
-        }
+        make_ring_vertices(
+            out,
+            Px, Py, Pz,
+            N, B, i / tubular_segments,
+            radius, angular_step, radial_segments
+        );
 
     }
 
 
-    return geometry;
+    return out.build();
 }

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

@@ -0,0 +1,390 @@
+import { EngineHarness } from "../../../../EngineHarness.js";
+import { EngineConfiguration } from "../../../../EngineConfiguration.js";
+import GUIElementSystem from "../../../../ecs/gui/GUIElementSystem.js";
+import HeadsUpDisplaySystem from "../../../../ecs/gui/hud/HeadsUpDisplaySystem.js";
+import ScriptSystem from "../../../../ecs/systems/ScriptSystem.js";
+import FacingDirectionSystem from "../../../../../../model/game/ecs/system/FacingDirectionSystem.js";
+import PathFollowingSystem from "../../../../navigation/ecs/path_following/PathFollowingSystem.js";
+import SteeringSystem from "../../../../ecs/systems/SteeringSystem.js";
+import MotionSystem from "../../../../ecs/systems/MotionSystem.js";
+import TagSystem from "../../../../ecs/systems/TagSystem.js";
+import { AttachmentSystem } from "../../../../ecs/attachment/AttachmentSystem.js";
+import { SoundEmitterSystem } from "../../../../sound/ecs/emitter/SoundEmitterSystem.js";
+import SoundControllerSystem from "../../../../sound/ecs/SoundControllerSystem.js";
+import SoundListenerSystem from "../../../../sound/ecs/SoundListenerSystem.js";
+import TimerSystem from "../../../../ecs/systems/TimerSystem.js";
+import AnimationSystem from "../../../../ecs/systems/AnimationSystem.js";
+import TopDownCameraControllerSystem from "../../camera/topdown/TopDownCameraControllerSystem.js";
+import { TopDownCameraLanderSystem } from "../../camera/topdown/TopDownCameraLanderSystem.js";
+import { CameraSystem } from "../../camera/CameraSystem.js";
+import { MeshSystem } from "../../mesh/MeshSystem.js";
+import ClingToTerrainSystem from "../../../../ecs/terrain/ecs/ClingToTerrainSystem.js";
+import TerrainSystem from "../../../../ecs/terrain/ecs/TerrainSystem.js";
+import WaterSystem from "../../water/WaterSystem.js";
+import Trail2DSystem from "../../trail2d/Trail2DSystem.js";
+import { Foliage2System } from "../../../../ecs/foliage/ecs/Foliage2System.js";
+import ViewportPositionSystem from "../../../../ecs/gui/position/ViewportPositionSystem.js";
+import { GridPosition2TransformSystem } from "../../../../grid/systems/GridPosition2TransformSystem.js";
+import { Transform2GridPositionSystem } from "../../../../grid/transform2grid/Transform2GridPositionSystem.js";
+import SynchronizePositionSystem from "../../../../ecs/systems/SynchronizePositionSystem.js";
+import GridObstacleSystem from "../../../../grid/systems/GridObstacleSystem.js";
+import GridPositionSystem from "../../../../grid/systems/GridPositionSystem.js";
+import InputControllerSystem from "../../../../input/ecs/systems/InputControllerSystem.js";
+import { InputSystem } from "../../../../input/ecs/systems/InputSystem.js";
+import MeshHighlightSystem from "../../highlight/system/MeshHighlightSystem.js";
+import LightSystem from "../../light/LightSystem.js";
+import AnimationControllerSystem from "../../animation/AnimationControllerSystem.js";
+import { AnimationGraphSystem } from "../../animation/animator/AnimationGraphSystem.js";
+import { BehaviorSystem } from "../../../../intelligence/behavior/ecs/BehaviorSystem.js";
+import { SerializationMetadataSystem } from "../../../../ecs/systems/SerializationMetadataSystem.js";
+import { InverseKinematicsSystem } from "../../../../ecs/animation/InverseKinematicsSystem.js";
+import { PathDisplaySystem } from "../PathDisplaySystem.js";
+import { AmbientOcclusionPostProcessEffect } from "../../../render/buffer/simple-fx/ao/AmbientOcclusionPostProcessEffect.js";
+import { GameAssetType } from "../../../../asset/GameAssetType.js";
+import { GLTFAssetLoader } from "../../../../asset/loaders/GLTFAssetLoader.js";
+import { JsonAssetLoader } from "../../../../asset/loaders/JsonAssetLoader.js";
+import { TextureAssetLoader } from "../../../../asset/loaders/texture/TextureAssetLoader.js";
+import { ImageRGBADataLoader } from "../../../../asset/loaders/image/ImageRGBADataLoader.js";
+import { ShadedGeometrySystem } from "../../mesh-v2/ShadedGeometrySystem.js";
+import { makeEngineOptionsModel } from "../../../../../../model/game/options/makeEngineOptionsModel.js";
+import { enableEditor } from "../../../../../editor/enableEditor.js";
+import { CanvasView } from "../../../../../view/elements/CanvasView.js";
+import { computeCatmullRomSpline } from "../../../../navigation/ecs/components/computeCatmullRomSpline.js";
+import { EntityPathStyle } from "../entity/EntityPathStyle.js";
+import { EntityPathMarkerDefinition } from "../entity/EntityPathMarkerDefinition.js";
+import { EntityBlueprint } from "../../../../ecs/EntityBlueprint.js";
+import { Transform } from "../../../../ecs/transform/Transform.js";
+import Mesh from "../../mesh/Mesh.js";
+import { Animation } from "../../../../ecs/animation/Animation.js";
+import Highlight from "../../highlight/Highlight.js";
+import { TubePathStyle } from "./TubePathStyle.js";
+import { TubeMaterialType } from "./TubeMaterialType.js";
+import { MatcapMaterialDefinition } from "./MatcapMaterialDefinition.js";
+import Path from "../../../../navigation/ecs/components/Path.js";
+import { InterpolationType } from "../../../../navigation/ecs/components/InterpolationType.js";
+import Vector3 from "../../../../../core/geom/Vector3.js";
+import { RibbonPathStyle } from "../ribbon/RibbonPathStyle.js";
+import { PathDisplay } from "../PathDisplay.js";
+import { PathDisplaySpec } from "../PathDisplaySpec.js";
+import { PathDisplayType } from "../PathDisplayType.js";
+import EntityBuilder from "../../../../ecs/EntityBuilder.js";
+import { BehaviorComponent } from "../../../../intelligence/behavior/ecs/BehaviorComponent.js";
+import { pingpong } from "../../../../../core/math/pingpong.js";
+import { PathEvents } from "../../../../navigation/ecs/components/PathEvents.js";
+
+const engineHarness = new EngineHarness();
+
+function makeConfig(engine) {
+
+    const config = new EngineConfiguration();
+
+    /**
+     *
+     * @type {SoundEngine}
+     */
+    const sound = engine.sound;
+    const graphics = engine.graphics;
+    const assetManager = engine.assetManager;
+    const devices = engine.devices;
+
+    const guiSystem = new GUIElementSystem(engine.gui.view, engine);
+    const headsUpDisplaySystem = new HeadsUpDisplaySystem(graphics);
+
+    config.systems.push(
+        new ScriptSystem(),
+        new FacingDirectionSystem(),
+        new PathFollowingSystem(),
+        new SteeringSystem(),
+        new MotionSystem(),
+        new TagSystem(),
+        new AttachmentSystem(),
+        new SoundEmitterSystem(assetManager, sound.destination, sound.context),
+        new SoundControllerSystem(),
+        new SoundListenerSystem(sound.context),
+        new TimerSystem(),
+        guiSystem,
+        new AnimationSystem(graphics.viewport.size),
+        new TopDownCameraControllerSystem(graphics),
+        new TopDownCameraLanderSystem(),
+        new CameraSystem(graphics.scene, graphics),
+        new MeshSystem(engine),
+        new ClingToTerrainSystem(),
+        new TerrainSystem(graphics, assetManager),
+        new WaterSystem(graphics),
+        new Trail2DSystem(engine),
+        new Foliage2System(assetManager, graphics),
+        new ViewportPositionSystem(graphics.viewport.size),
+        new GridPosition2TransformSystem(),
+        new Transform2GridPositionSystem(),
+        new SynchronizePositionSystem(),
+        new GridObstacleSystem(),
+        new GridPositionSystem(),
+        new InputControllerSystem(devices),
+        new InputSystem(devices),
+        new MeshHighlightSystem(engine),
+        new LightSystem(engine, {
+            shadowResolution: 1024
+        }),
+        new AnimationControllerSystem(),
+        new AnimationGraphSystem(graphics.viewport.size),
+        headsUpDisplaySystem,
+        new BehaviorSystem(engine),
+        new SerializationMetadataSystem(),
+        new InverseKinematicsSystem(),
+        new PathDisplaySystem(engine),
+    );
+
+    // Plugins
+
+    config.addPlugin(AmbientOcclusionPostProcessEffect)
+
+    // Knowledge
+
+    // Assets
+
+    config.addLoader(GameAssetType.ModelGLTF, new GLTFAssetLoader());
+    config.addLoader(GameAssetType.ModelGLTF_JSON, new GLTFAssetLoader());
+    config.addLoader(GameAssetType.JSON, new JsonAssetLoader());
+    config.addLoader(GameAssetType.Texture, new TextureAssetLoader());
+    config.addLoader(GameAssetType.Image, new ImageRGBADataLoader());
+
+    return config;
+}
+
+/**
+ *
+ * @param {EngineHarness} harness
+ * @return {Promise<void>}
+ */
+async function init(harness) {
+    const engine = harness.engine;
+
+    // engine.entityManager.addSystem(new RenderSystem(engine.graphics));
+    engine.entityManager.addSystem(new ShadedGeometrySystem(engine));
+
+    makeEngineOptionsModel(engine.options, engine);
+
+    await makeConfig(engine).apply(engine);
+
+    enableEditor(engine);
+
+    await harness.initialize();
+
+    main(engine);
+}
+
+function catmullRom(points) {
+    const cv = new CanvasView();
+
+    cv.size.set(500, 500);
+
+    cv.link();
+
+    cv.css({
+        position: "absolute",
+        left: 0,
+        right: 0,
+        zIndex: 99999
+    });
+
+    const sample = [];
+
+    const ctx = cv.context2d;
+    ctx.strokeStyle = "rgba(255,255,255,1)";
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+
+    const draw_scale = 50;
+
+    const result = [];
+    const sampleCount = 50;
+
+    computeCatmullRomSpline(result, points, points.length / 3, 3, sampleCount, 0.5);
+
+    for (let i = 0; i < sampleCount; i++) {
+        const x = result[i * 3];
+        const y = result[i * 3 + 1];
+        const z = result[i * 3 + 2];
+
+        ctx.lineTo(x * draw_scale, z * draw_scale);
+
+    }
+    ctx.stroke();
+
+    document.body.appendChild(cv.el);
+}
+
+function sample_style_entity() {
+    const style = new EntityPathStyle();
+    style.spacing = 0.6;
+    style.marker_start = EntityPathMarkerDefinition.from({
+        blueprint: EntityBlueprint.from([
+            Transform.fromJSON({}),
+            Mesh.fromJSON({
+                url: "data/models/arrow-symbols/arrow4/model-green.gltf",
+                castShadow: true,
+                receiveShadow: true
+            })
+        ]),
+        transform: Transform.fromJSON({
+            scale: {
+                x: 0.3,
+                y: 0.3,
+                z: 0.3
+            },
+            rotation: {
+                x: 0.5,
+                y: -0.5,
+                z: 0.5,
+                w: 0.5
+            },
+            position: {
+                x: 0,
+                y: 1,
+                z: 0
+            }
+        })
+    });
+    style.marker_end = EntityPathMarkerDefinition.from({
+        blueprint: EntityBlueprint.from([
+            Transform.fromJSON({}),
+            Mesh.fromJSON({
+                url: "data/models/arrow-symbols/arrow4/model-red.gltf",
+                castShadow: true,
+                receiveShadow: true
+            })
+        ]),
+        transform: Transform.fromJSON({
+            scale: {
+                x: 0.3,
+                y: 0.3,
+                z: 0.3
+            },
+            rotation: {
+                x: 0.5,
+                y: -0.5,
+                z: 0.5,
+                w: 0.5
+            },
+            position: {
+                x: 0,
+                y: 1,
+                z: 0
+            }
+        })
+    });
+    style.marker_main = EntityPathMarkerDefinition.from({
+        blueprint: EntityBlueprint.from([
+            Transform.fromJSON({}),
+            Mesh.fromJSON({
+                url: "data/models/Barel-Roll Droid/handpainted.gltf",
+                castShadow: true,
+                receiveShadow: true
+            }),
+            Animation.fromJSON({
+                clips: [
+                    {
+                        name: "fly",
+                        repeatCount: Infinity
+                    }
+                ]
+            }),
+            Highlight.fromOne(1, 0, 0, 1)
+        ]),
+        transform: Transform.fromJSON({
+            scale: {
+                x: 0.2,
+                y: 0.2,
+                z: 0.2
+            },
+            position: {
+                x: 0,
+                y: 1,
+                z: 0
+            }
+        })
+    });
+
+    return style;
+}
+
+function sample_style_tube() {
+    const style = new TubePathStyle();
+
+    style.color.setRGB(1, 1, 1);
+    style.material_type = TubeMaterialType.Matcap;
+    style.material = new MatcapMaterialDefinition();
+    // style.material.texture = 'data/textures/matcap/matcap-porcelain-white.jpg';
+    style.material.texture = "data/textures/matcap/nidorx/3E2335_D36A1B_8E4A2E_2842A5.jpg";
+
+    style.width = 0.1;
+
+    style.path_mask = [
+        0, 1,
+    ];
+
+    return style;
+}
+
+
+function main(engine) {
+    EngineHarness.buildBasics({ engine });
+
+    const _p = new Path();
+    _p.interpolation = InterpolationType.CatmullRom;
+    // _p.interpolation = InterpolationType.Linear;
+
+    // _p.setPositionsFromVectorArray(Path.smoothPath([
+    //     new Vector3(3, 1, 1),
+    //     new Vector3(3, 1, 3),
+    //     new Vector3(7, 1, 3),
+    //     new Vector3(7, 1, 7),
+    //     new Vector3(3, 1, 7),
+    //     new Vector3(3, 1, 8),
+    // ], 50));
+
+    _p.setPositionsFromVectorArray([
+        new Vector3(3, 1, 1),
+        new Vector3(3, 1, 3),
+        new Vector3(7, 1, 3),
+        new Vector3(7, 1, 7),
+        new Vector3(3, 1, 7),
+        new Vector3(3, 1, 8),
+    ]);
+
+
+    const trailPathStyle = new RibbonPathStyle();
+    trailPathStyle.material.diffuse = "data/textures/trail/Circle_04.png";
+    trailPathStyle.resolution = 10;
+    trailPathStyle.thickness = 0.1;
+
+    const pathDisplay = new PathDisplay();
+    const tube_style = sample_style_tube();
+    pathDisplay.specs.push(
+        PathDisplaySpec.from(
+            PathDisplayType.Tube,
+            tube_style
+        )
+    );
+
+
+    const path_entity = new EntityBuilder();
+
+    const ecd = engine.entityManager.dataset;
+    path_entity
+        .add(_p)
+        .add(pathDisplay)
+        .build(ecd);
+
+    let time = 0;
+    new EntityBuilder()
+        .add(BehaviorComponent.looping_function((delta) => {
+            time += delta*0.01;
+            tube_style.path_mask[1] = pingpong(time, 1);
+
+            path_entity.sendEvent(PathEvents.Changed);
+        }))
+        .build(ecd)
+}
+
+init(engineHarness);

package/engine/intelligence/behavior/ecs/BehaviorComponent.js

@@ -31,7 +31,7 @@ export class BehaviorComponent {
 
     /**
      *
-     * @param {function} f
+     * @param {function(timeDelta:number)} f
      * @param {*} [thisArg]
      * @returns {BehaviorComponent}
      */

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