@woosh/meep-engine 2.35.9 → 2.35.13

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

@@ -0,0 +1,160 @@
+import { BufferGeometry, MeshMatcapMaterial, MeshStandardMaterial, Vector3 } from "three";
+import { InterpolationType } from "../../../../../navigation/ecs/components/InterpolationType.js";
+import EntityBuilder from "../../../../../ecs/EntityBuilder.js";
+import { Transform } from "../../../../../ecs/transform/Transform.js";
+import { TubeMaterialType } from "../TubeMaterialType.js";
+import { GameAssetType } from "../../../../../asset/GameAssetType.js";
+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";
+
+/**
+ *
+ * @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() {
+        /**
+         *
+         * @type {TubePathStyle|null}
+         */
+        this.style = null;
+
+        /**
+         *
+         * @type {Path|null}
+         */
+        this.path = null;
+
+        /**
+         *
+         * @type {MaterialManager|null}
+         */
+        this.materials = null;
+
+        /**
+         *
+         * @type {AssetManager|null}
+         */
+        this.assetManager = null;
+    }
+
+    setPath(path) {
+        this.path = path;
+    }
+
+    setStyle(style) {
+        this.style = style;
+    }
+
+    setMaterials(m) {
+        this.materials = m;
+    }
+
+    setAssetManager(assetManager) {
+        this.assetManager = assetManager;
+    }
+
+    /**
+     *
+     * @param {EntityBuilder[]} destination
+     */
+    build(destination) {
+        const style = this.style;
+
+        // generate three.js curve from path
+        const path_component = this.path;
+
+        const three_points = [];
+
+        const pointCount = path_component.getPointCount();
+
+        if (pointCount < 2) {
+            // no curve possible without at least 2 points
+            return;
+        }
+
+        for (let i = 0; i < pointCount; i++) {
+            const v3 = new Vector3();
+
+            path_component.getPosition(i, v3);
+
+            three_points.push(v3);
+        }
+
+
+        let material_def;
+
+        if (style.material_type === TubeMaterialType.Standard) {
+            material_def = new MeshStandardMaterial({
+                metalness: style.material.metalness,
+                roughness: style.material.roughness
+            });
+        } else if (style.material_type === TubeMaterialType.Matcap) {
+
+            material_def = new MeshMatcapMaterial();
+
+            this.assetManager.get(style.material.texture, GameAssetType.Texture, asset => {
+                material_def.matcap = asset.create();
+
+                material_def.needsUpdate = true;
+            }, console.error);
+
+        } else {
+            throw new Error(`Unsupported material type '${style.material_type}'`);
+        }
+
+        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 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);
+
+            const entityBuilder = new EntityBuilder();
+
+            entityBuilder.add(new Transform());
+
+            const shaded_geometry = ShadedGeometry.from(geometry, material_def);
+
+            shaded_geometry.writeFlag(ShadedGeometryFlags.CastShadow, style.cast_shadow);
+            shaded_geometry.writeFlag(ShadedGeometryFlags.ReceiveShadow, style.receive_shadow);
+
+            entityBuilder.add(shaded_geometry);
+
+            destination.push(entityBuilder);
+
+        }
+
+    }
+}

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

@@ -0,0 +1,61 @@
+import { computeFrenetFrames } from "./computeFrenetFrames.js";
+import { makeTubeGeometry } from "./makeTubeGeometry.js";
+import Vector3 from "../../../../../../core/geom/Vector3.js";
+
+/**
+ *
+ * @param {Path} path
+ * @param {TubePathStyle} style
+ * @param {number} segment_start
+ * @param {number} segment_end
+ * @return {THREE.BufferGeometry}
+ */
+export function build_geometry_catmullrom(path, style, segment_start, segment_end) {
+
+    const point_count = path.getPointCount();
+
+    // resample curve
+    const total_points = Math.ceil(point_count * style.resolution);
+
+    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);
+
+        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);
+
+        added_points++;
+    }
+
+    const frames = computeFrenetFrames(points_f32, 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

@@ -0,0 +1,56 @@
+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 {Path} path
+ * @param {TubePathStyle} style
+ * @param {number} segment_start
+ * @param {number} segment_end
+ * @return {THREE.BufferGeometry}
+ */
+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);
+
+    return makeTubeGeometry(points, frames.normals, frames.binormals, style.width, style.radial_resolution, false);
+}

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

@@ -0,0 +1,165 @@
+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 { 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 {Float32Array|number[]} points
+ * @param {boolean} [closed]
+ */
+export 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 point_count = points.length / 3;
+    const segments = point_count - 1;
+
+    const v3_0 = [];
+    const v3_1 = [];
+
+    const p0_a = [];
+    const pR_a = [];
+    const p1_a = [];
+
+    /**
+     *
+     * @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);
+
+        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
+
+        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.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++) {
+
+        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(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(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
+    };
+}

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

@@ -0,0 +1,17 @@
+import { InterpolationType } from "../../../../../navigation/ecs/components/InterpolationType.js";
+import { estimatePathViaIterativeIntegral } from "./estimatePathViaIterativeIntegral.js";
+
+/**
+ *
+ * @param {Path} path
+ * @returns {number}
+ */
+function estimatePathLength(path) {
+
+    if (path.interpolation === InterpolationType.Linear) {
+        return path.getLength();
+    } else {
+        return estimatePathViaIterativeIntegral(path, 0.01);
+    }
+
+}

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

@@ -0,0 +1,37 @@
+import { Vector3 } from "three";
+
+/**
+ * some useful references:
+ * https://stackoverflow.com/questions/29438398/cheap-way-of-calculating-cubic-bezier-length
+ * https://stackoverflow.com/questions/1147249/connecting-catmull-rom-splines-together-and-calculating-its-length
+ * @param {Path} path
+ * @param {number} epsilon
+ */
+export function estimatePathViaIterativeIntegral(path, epsilon) {
+    let sum = 0;
+
+    let p0 = new Vector3();
+    let p1 = new Vector3();
+
+    if (!path.sample(p0, 0)) {
+        // path has 0 length
+        return 0;
+    }
+
+    for (let p = epsilon; ; i += epsilon) {
+        const ended = path.sample(p1, p);
+
+        if (ended) {
+            break;
+        }
+
+        sum += p0.distanceTo(p1);
+
+        const swap = p1;
+
+        p1 = p0;
+        p0 = swap;
+    }
+
+    return sum;
+}

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

@@ -0,0 +1,161 @@
+import { BufferGeometry, Float32BufferAttribute, Vector3 } from "three";
+
+/**
+ * @see https://github.com/mrdoob/three.js/blob/master/src/geometries/TubeGeometry.js
+ * @param {Float32Array|number[]} points
+ * @param {Vector3[]} _normals
+ * @param {Vector3[]} binormals
+ * @param {number} radius
+ * @param {number} radialSegments
+ * @param {boolean} [closed]
+ * @returns {BufferGeometry}
+ */
+export 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 point_count = points.length / 3;
+    const tubularSegments = point_count - 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 i3 = i * 3;
+
+        const Px = points[i3];
+        const Py = points[i3 + 1];
+        const Pz = points[i3 + 2];
+
+        // retrieve corresponding normal and binormal
+
+        const N = _normals[i];
+        const B = binormals[i];
+
+        // generate normals and vertices for the current segment
+
+        const angular_step = (Math.PI * 2) / radialSegments;
+
+        for (let j = 0; j <= radialSegments; j++) {
+            const v = j * angular_step;
+
+            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 = Px + radius * normal.x;
+            vertex.y = Py + radius * normal.y;
+            vertex.z = Pz + 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 s_1 = radialSegments + 1;
+
+                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;
+
+                // 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;
+}

package/engine/graphics/micron/build/buildMicronGeometryFromBufferGeometry.js

@@ -121,7 +121,7 @@ const PRINT_VERBOSE_STATS = false;
 /**
  *
  * @param {THREE.BufferGeometry} input
- * @returns {MicronGeometry}
+ * @returns {Promise<MicronGeometry>}
  */
 export async function buildMicronGeometryFromBufferGeometry(input) {
     const source_geometry = deinterleaveBufferGeometry(input);