@woosh/meep-engine 2.38.1 → 2.39.0

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

@@ -37,19 +37,25 @@ export class TubePathStyle {
          */
         this.width = 1;
 
-        // TODO expose shading style "flat/smooth"
+        /**
+         *
+         * @type {number[]}
+         */
+        this.shape = build_circle_shape(16);
 
         /**
          *
-         * @type {number}
+         * @type {number[]|Float32Array|null}
          */
-        this.resolution = 10;
+        this.shape_normals = null;
+
+        // TODO expose shading style "flat/smooth"
 
         /**
          *
          * @type {number}
          */
-        this.radial_resolution = 16;
+        this.resolution = 10;
 
         /**
          *
@@ -79,6 +85,16 @@ export class TubePathStyle {
         this.cap_type = CapType.Flat;
     }
 
+    /**
+     * @deprecated
+     * @param {number} v
+     */
+    set radial_resolution(v) {
+        console.warn(".radial_resolution property is deprecated, use .shape directly instead");
+
+        this.shape = build_circle_shape(v);
+    }
+
     static fromJSON(j) {
         const r = new TubePathStyle();
 
@@ -93,18 +109,21 @@ export class TubePathStyle {
                  material,
                  opacity = 1,
                  width = 1,
-                 resolution = 10,
+                 /**
+                  * @deprecated
+                  */
                  radial_resolution = 16,
+                 resolution = 10,
                  cast_shadow = false,
                  receive_shadow = false,
                  path_mask = [0, 1],
-                 cap_type = CapType.None
+                 cap_type = CapType.None,
+                 shape
              }) {
         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');
 
@@ -115,6 +134,14 @@ export class TubePathStyle {
         assert.ok(path_mask.length % 2 === 0, 'path_mask length bust be multiple of 2');
         assert.enum(cap_type, CapType, 'cap_type');
 
+        if (shape === undefined) {
+            assert.isNumber(radial_resolution, 'radial_resolution');
+
+            shape = build_circle_shape(radial_resolution);
+        }
+
+        this.shape = shape;
+
         if (typeof color === 'string') {
             this.color.parse(color);
         } else {
@@ -125,7 +152,6 @@ export class TubePathStyle {
         this.opacity = opacity;
         this.width = width;
         this.resolution = resolution;
-        this.radial_resolution = radial_resolution;
 
         this.cast_shadow = cast_shadow;
         this.receive_shadow = receive_shadow;
@@ -144,3 +170,22 @@ export class TubePathStyle {
         this.material.fromJSON(material);
     }
 }
+
+/**
+ *
+ * @param {number} radial_segments
+ * @returns {Float32Array}
+ */
+function build_circle_shape(radial_segments) {
+    const shape = new Float32Array(2 * radial_segments);
+    for (let i = 0; i < radial_segments; i++) {
+        const angle = Math.PI * 2 - Math.PI * 2 * (i / radial_segments);
+
+        const i2 = i * 2;
+
+        shape[i2] = Math.cos(angle);
+        shape[i2 + 1] = Math.sin(angle);
+    }
+
+    return shape;
+}

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

@@ -8,6 +8,8 @@ import { build_geometry_linear } from "./build_geometry_linear.js";
 import { build_geometry_catmullrom } from "./build_geometry_catmullrom.js";
 import { ShadedGeometry } from "../../../mesh-v2/ShadedGeometry.js";
 import { ShadedGeometryFlags } from "../../../mesh-v2/ShadedGeometryFlags.js";
+import { m3_rm_compose_transform } from "../../../../../../view/m3_rm_compose_transform.js";
+import { v2_bearing_angle_towards } from "../../../../../../core/geom/Vector2.js";
 
 /**
  *
@@ -16,15 +18,22 @@ import { ShadedGeometryFlags } from "../../../mesh-v2/ShadedGeometryFlags.js";
  * @returns {BufferGeometry}
  * @param {Path} path_component
  * @param {TubePathStyle} style
+ * @param {number[]|Float32Array} shape_normal
+ * @param {number[]|Float32Array} shape
+ * @param {number[]|Float32Array} shape_transform
  */
-function make_geometry_segment(path_component, style, segment_start, segment_end) {
+function make_geometry_segment(
+    path_component, style,
+    shape, shape_normal, shape_transform,
+    segment_start, segment_end
+) {
 
     const interpolation = path_component.interpolation;
 
     if (interpolation === InterpolationType.Linear) {
-        return build_geometry_linear(path_component, style, segment_start, segment_end);
+        return build_geometry_linear(path_component, style, shape, shape_normal, shape_transform, segment_start, segment_end);
     } else if (interpolation === InterpolationType.CatmullRom) {
-        return build_geometry_catmullrom(path_component, style, segment_start, segment_end);
+        return build_geometry_catmullrom(path_component, style, shape, shape_normal, shape_transform, segment_start, segment_end);
     } else {
         throw new Error(`Unsupported interpolation type '${interpolation}'`);
     }
@@ -132,13 +141,28 @@ export class TubePathBuilder {
 
         const segment_count = style.path_mask.length / 2;
 
+        const shape = fix_shape_normal_order(style.shape);
+
+        let shape_normals = style.shape_normals;
+        if (shape_normals === undefined || shape_normals === null) {
+            shape_normals = new Float32Array(shape.length);
+            compute_smooth_profile_normals(shape, shape_normals);
+        }
+
+        const shape_transform = new Float32Array(9);
+        m3_rm_compose_transform(shape_transform, 0, 0, style.width, style.width, 0, 0, 0);
+
         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);
+            const geometry = make_geometry_segment(
+                path_component, style,
+                shape, shape_normals, shape_transform,
+                segment_start, segment_end
+            );
 
             const entityBuilder = new EntityBuilder();
 
@@ -157,3 +181,89 @@ export class TubePathBuilder {
 
     }
 }
+
+/**
+ *
+ * @param {number[]|Float32Array} shape
+ * @param {number[]|Float32Array} normals
+ */
+function compute_smooth_profile_normals(shape, normals) {
+    const n = shape.length / 2;
+
+    for (let i = 0; i < n; i++) {
+        const i0 = (n + i - 1) % n;
+        const i1 = i;
+        const i2 = (i + 1) % n;
+
+        const i0_x = shape[i0 * 2];
+        const i0_y = shape[i0 * 2 + 1];
+
+        const i1_x = shape[i1 * 2];
+        const i1_y = shape[i1 * 2 + 1];
+
+        const i2_x = shape[i2 * 2];
+        const i2_y = shape[i2 * 2 + 1];
+
+        const d0_x = i0_x - i1_x;
+        const d0_y = i0_y - i1_y;
+
+        const d1_x = i1_x - i2_x;
+        const d1_y = i1_y - i2_y;
+
+        const d0_l_inv = 1 / Math.hypot(d0_x, d0_y);
+        const d1_l_inv = 1 / Math.hypot(d1_x, d1_y);
+
+        const nx = d0_x * d0_l_inv + d1_x * d1_l_inv;
+        const ny = d0_y * d0_l_inv + d1_y * d1_l_inv;
+
+        const dn_l_inv = 1 / Math.hypot(nx, ny);
+
+        // write out normal
+        normals[i * 2] = nx * dn_l_inv;
+        normals[i * 2 + 1] = ny * dn_l_inv;
+    }
+}
+
+/**
+ * Depending on the direction in which shape winds, normals of the generated geometry faces might end up flipped,
+ * so we pre-process the shape to avoid that here
+ * @param {number[]|Float32Array} shape
+ * @returns {Float32Array}
+ */
+function fix_shape_normal_order(shape) {
+    const shape_array_length = shape.length;
+
+    if (shape_array_length <= 2) {
+        // less than 2 points in the shape
+        return shape;
+    }
+
+    // compute initial direction
+    const x0 = shape[0];
+    const y0 = shape[1];
+    const x1 = shape[2];
+    const y1 = shape[3];
+
+    const angle = v2_bearing_angle_towards(x0, y0, x1, y1);
+
+    if (angle > Math.PI) {
+        // order is fine
+        return shape;
+    }
+
+    // reverse order
+    const reversed = new Float32Array(shape_array_length);
+
+    const n = shape_array_length / 2;
+
+    for (let i = 0; i < n; i++) {
+        const i2 = i * 2;
+
+        const j2 = (n - (i + 1)) * 2;
+
+        reversed[i2] = shape[j2];
+        reversed[i2 + 1] = shape[j2 + 1];
+    }
+
+    return reversed;
+}

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

@@ -6,11 +6,18 @@ import Vector3 from "../../../../../../core/geom/Vector3.js";
  *
  * @param {Path} path
  * @param {TubePathStyle} style
+ * @param {number[]} shape
+ * @param {number[]|Float32Array} shape_normal
+ * @param {number[]} shape_transform
  * @param {number} segment_start
  * @param {number} segment_end
  * @return {THREE.BufferGeometry}
  */
-export function build_geometry_catmullrom(path, style, segment_start, segment_end) {
+export function build_geometry_catmullrom(
+    path, style,
+    shape, shape_normal, shape_transform,
+    segment_start, segment_end
+) {
 
     const point_count = path.getPointCount();
 
@@ -58,5 +65,8 @@ 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, style.cap_type);
+    return makeTubeGeometry(
+        points_f32, frames.normals, frames.binormals, frames.tangents,
+        shape, shape_normal, shape.length / 2, shape_transform, false, style.cap_type
+    );
 }

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

@@ -12,11 +12,18 @@ const scratch_v3 = new Vector3();
  *
  * @param {Path} path
  * @param {TubePathStyle} style
+ * @param {number[]} shape
+ * @param {number[]|Float32Array} shape_normal
+ * @param {number[]} shape_transform
  * @param {number} segment_start
  * @param {number} segment_end
  * @return {THREE.BufferGeometry}
  */
-export function build_geometry_linear(path, style, segment_start, segment_end) {
+export function build_geometry_linear(
+    path, style,
+    shape, shape_normal, shape_transform,
+    segment_start, segment_end
+) {
     const points = [];
 
     const path_length = path.length;
@@ -52,5 +59,9 @@ 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, style.cap_type);
+    return makeTubeGeometry(
+        points, frames.normals, frames.binormals, frames.tangents,
+        shape, shape_normal, shape.length / 2, shape_transform,
+        false, style.cap_type
+    );
 }

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

@@ -9,6 +9,7 @@ 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 {Float32Array|number[]} points
  * @param {boolean} [closed]
+ * @returns {{normals:Vector3[], binormals:Vector3[], tangents:Vector3[]}}
  */
 export function computeFrenetFrames(points, closed = false) {
     // see http://www.cs.indiana.edu/pub/techreports/TR425.pdf
@@ -32,12 +33,10 @@ export function computeFrenetFrames(points, closed = false) {
     const pR_a = [];
     const p1_a = [];
 
-    /**
-     *
-     * @param {number} i
-     * @param {Vector3} destination
-     */
-    function getTangent(i, destination) {
+    // compute the tangent vectors for each segment on the curve
+
+    for (let i = 0; i <= segments; i++) {
+
         // get points on either side
         const i0 = max2(i - 1, 0);
         const i1 = min2(i + 1, segments);
@@ -54,22 +53,27 @@ export function computeFrenetFrames(points, closed = false) {
         vec3.sub(v3_1, p1_a, pR_a);
         vec3.normalize(v3_1, v3_1);
 
-        destination.set(
-            v3_1[0] - v3_0[0],
-            v3_1[1] - v3_0[1],
-            v3_1[2] - v3_0[2],
-        );
-        destination.normalize();
-    }
-
-    // compute the tangent vectors for each segment on the curve
-
-    for (let i = 0; i <= segments; i++) {
+        vec3.sub(v3_1, v3_1, v3_0);
+        vec3.normalize(v3_1, v3_1);
 
-        const tangent = new Vector3();
-        getTangent(i, tangent);
+        // write out
+        const tangent_x = v3_1[0];
+        const tangent_y = v3_1[1];
+        const tangent_z = v3_1[2];
+
+        if (tangent_x === 0 && tangent_y === 0 && tangent_z === 0) {
+            // no tangent, copy previous one
+            if (i > 0) {
+                tangents[i] = tangents[i - 1];
+                continue;
+            }
+        }
 
-        tangents[i] = tangent;
+        tangents[i] = new Vector3(
+            tangent_x,
+            tangent_y,
+            tangent_z
+        );
 
     }
 
@@ -83,13 +87,6 @@ export function computeFrenetFrames(points, closed = false) {
     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;
@@ -97,12 +94,20 @@ export function computeFrenetFrames(points, closed = false) {
 
     }
 
-    if (tz <= min) {
+    if (tz < min) {
+        min = tz;
 
         normal.set(0, 0, 1);
 
     }
 
+    if (tx < min) {
+
+        min = tx;
+        normal.set(1, 0, 0);
+
+    }
+
     vec.crossVectors(tangents[0], normal).normalize();
 
     normals[0].crossVectors(tangents[0], vec);