@woosh/meep-engine 2.35.9 → 2.35.10

package/engine/graphics/ecs/camera/Camera.d.ts

@@ -9,6 +9,9 @@ export class Camera {
 
     autoClip: boolean
 
+    clip_near: number
+    clip_far: number
+
     computeProjectionMatrix(result: Matrix4): boolean
 
     projectWorldPointOntoNearPlane(x: number, y: number, z: number, result: Vector3): void

package/engine/graphics/ecs/camera/Camera.js

@@ -26,7 +26,7 @@ export const ProjectionType = {
 export class Camera {
     constructor() {
         /**
-         *
+         * Whether clipping planes should be automatically calculated or not
          * @type {boolean}
          */
         this.autoClip = true;
@@ -56,6 +56,44 @@ export class Camera {
          * @type {ObservedBoolean}
          */
         this.active = new ObservedBoolean(false);
+
+        /**
+         * Near clipping plane
+         * @type {number}
+         * @private
+         */
+        this.__clip_far = 0;
+
+        /**
+         * Far clipping plane
+         * @type {number}
+         * @private
+         */
+        this.__clip_near = 0.1;
+    }
+
+    get clip_far() {
+        return this.__clip_far;
+    }
+
+    set clip_far(v) {
+        this.__clip_far = v;
+
+        if (this.object !== null) {
+            this.object.far = v;
+        }
+    }
+
+    get clip_near() {
+        return this.__clip_near;
+    }
+
+    set clip_near(v) {
+        this.__clip_near = v;
+
+        if (this.object !== null) {
+            this.object.near = v;
+        }
     }
 
     updateMatrices() {

package/engine/graphics/ecs/camera/CameraSystem.js

@@ -9,7 +9,6 @@ import { Transform } from '../../../ecs/transform/Transform.js';
 import {
     Frustum as ThreeFrustum,
     Matrix4,
-    Matrix4 as ThreeMatrix4,
     OrthographicCamera as ThreeOrthographicCamera,
     PerspectiveCamera as ThreePerspectiveCamera,
     Vector3 as ThreeVector3,
@@ -76,16 +75,25 @@ function setAspectRatio(camera, width, height) {
  * @returns {PerspectiveCamera| OrthographicCamera}
  */
 function buildThreeCamera(component) {
+
+    let result;
     switch (component.projectionType.getValue()) {
         default:
             console.error(`Unsupported camera projection type "${component.projectionType.getValue()}", defaulting to perspective projection`);
         //fallthrough
         case Camera.ProjectionType.Perspective:
-            return new ThreePerspectiveCamera(component.fov.getValue(), 1, 1, 50);
-
+            result = new ThreePerspectiveCamera(component.fov.getValue(), 1, 1, 50);
+            break;
         case Camera.ProjectionType.Orthographic:
-            return new ThreeOrthographicCamera(-10, 10, 20, -20, 1, 1);
+            result = new ThreeOrthographicCamera(-10, 10, 20, -20, 1, 1);
+            break;
     }
+
+
+    result.far = component.clip_far;
+    result.near = component.clip_near;
+
+    return result;
 }
 
 export class CameraSystem extends System {
@@ -289,8 +297,19 @@ export class CameraSystem extends System {
              * @param {Camera} c
              */
             function visitCameraEntity(c) {
-                if (c.active.getValue() && c.autoClip && c.object !== null) {
+                if (c.object !== null) {
+                    return;
+                }
+
+                if (!c.active.getValue()) {
+                    return;
+                }
+
+                if (c.autoClip) {
                     autoSetClippingPlanes(c, layers);
+                } else {
+                    c.object.far = c.clip_far;
+                    c.object.near = c.clip_near;
                 }
             }
 
@@ -376,7 +395,7 @@ export class CameraSystem extends System {
     }
 }
 
-const matrix4 = new ThreeMatrix4();
+const matrix4 = new Matrix4();
 
 /**
  *

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

@@ -10,7 +10,7 @@ import { RibbonXPlugin } from "../../trail/x/RibbonXPlugin.js";
 import { RibbonPathBuilder } from "./ribbon/RibbonPathBuilder.js";
 import { PathEvents } from "../../../navigation/ecs/components/PathEvents.js";
 import { assert } from "../../../../core/assert.js";
-import { TubePathBuilder } from "./tube/TubePathBuilder.js";
+import { TubePathBuilder } from "./tube/build/TubePathBuilder.js";
 
 const builders = {
     [PathDisplayType.None]: function (style, path, result) {

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

@@ -1,5 +1,4 @@
 import { EngineHarness } from "../../../EngineHarness.js";
-import RenderSystem from "../../../ecs/systems/RenderSystem.js";
 import { makeEngineOptionsModel } from "../../../../../model/game/options/makeEngineOptionsModel.js";
 import Path from "../../../navigation/ecs/components/Path.js";
 import Vector3 from "../../../../core/geom/Vector3.js";
@@ -68,6 +67,7 @@ import { TubePathStyle } from "./tube/TubePathStyle.js";
 import { TubeMaterialType } from "./tube/TubeMaterialType.js";
 import { MatcapMaterialDefinition } from "./tube/MatcapMaterialDefinition.js";
 import { TextureAssetLoader } from "../../../asset/loaders/texture/TextureAssetLoader.js";
+import { ShadedGeometrySystem } from "../mesh-v2/ShadedGeometrySystem.js";
 
 const engineHarness = new EngineHarness();
 
@@ -156,7 +156,8 @@ function makeConfig(engine) {
 async function init(harness) {
     const engine = harness.engine;
 
-    engine.entityManager.addSystem(new RenderSystem(engine.graphics));
+    // engine.entityManager.addSystem(new RenderSystem(engine.graphics));
+    engine.entityManager.addSystem(new ShadedGeometrySystem(engine));
 
     makeEngineOptionsModel(engine.options, engine);
 
@@ -323,8 +324,8 @@ function main(engine) {
     EngineHarness.buildBasics({ engine });
 
     const _p = new Path();
-    // _p.interpolation = InterpolationType.CatmullRom;
-    _p.interpolation = InterpolationType.Linear;
+    _p.interpolation = InterpolationType.CatmullRom;
+    // _p.interpolation = InterpolationType.Linear;
 
     // _p.setPositionsFromVectorArray(Path.smoothPath([
     //     new Vector3(3, 1, 1),
@@ -352,14 +353,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/TubePathStyle.d.ts

@@ -11,4 +11,6 @@ export class TubePathStyle {
     public width: number
     public resolution: number
     public radial_resolution: number
+    public cast_shadow: boolean
+    public receive_shadow: boolean
 }

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

@@ -5,8 +5,15 @@ import { MatcapMaterialDefinition } from "./MatcapMaterialDefinition.js";
 
 export class TubePathStyle {
     constructor() {
+        /**
+         *
+         * @type {Color}
+         */
         this.color = new Color(1, 1, 1);
 
+        /**
+         * @type {TubeMaterialType}
+         */
         this.material_type = TubeMaterialType.Unknown;
 
         /**
@@ -15,13 +22,43 @@ export class TubePathStyle {
          */
         this.material = null;
 
+        /**
+         *
+         * @type {number}
+         */
         this.opacity = 1;
+
+        /**
+         *
+         * @type {number}
+         */
         this.width = 1;
 
         // TODO expose shading style "flat/smooth"
 
+        /**
+         *
+         * @type {number}
+         */
         this.resolution = 10;
+
+        /**
+         *
+         * @type {number}
+         */
         this.radial_resolution = 16;
+
+        /**
+         *
+         * @type {boolean}
+         */
+        this.cast_shadow = false;
+
+        /**
+         *
+         * @type {boolean}
+         */
+        this.receive_shadow = false;
     }
 
     static fromJSON(j) {
@@ -39,7 +76,9 @@ export class TubePathStyle {
                  opacity = 1,
                  width = 1,
                  resolution = 10,
-                 radial_resolution = 16
+                 radial_resolution = 16,
+                 cast_shadow = false,
+                 receive_shadow = false
              }) {
         assert.enum(material_type, TubeMaterialType, 'material_type');
 
@@ -55,6 +94,9 @@ export class TubePathStyle {
         this.resolution = resolution;
         this.radial_resolution = radial_resolution;
 
+        this.cast_shadow = cast_shadow;
+        this.receive_shadow = receive_shadow;
+
         switch (material_type) {
             case TubeMaterialType.Matcap:
                 this.material = new MatcapMaterialDefinition();

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

@@ -0,0 +1,138 @@
+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";
+
+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);
+        }
+
+
+        /**
+         * @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) {
+            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());
+
+        if (style.opacity < 1) {
+            material_def.transparent = true;
+            material_def.opacity = style.opacity;
+        }
+
+        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,32 @@
+import { CatmullRomCurve3 } from "three";
+import { computeFrenetFrames } from "./computeFrenetFrames.js";
+import { makeTubeGeometry } from "./makeTubeGeometry.js";
+
+/**
+ *
+ * @param {THREE.Vector3[]} points
+ * @param {number} point_count
+ * @param {TubePathStyle} style
+ * @return {THREE.BufferGeometry}
+ */
+export function build_geometry_catmullrom(points, point_count, style) {
+
+    const path = new CatmullRomCurve3(points, false, "centripetal");
+
+    const sample_points = [];
+
+    // resample curve
+    const total_points = Math.ceil(point_count * style.resolution);
+
+    for (let i = 0; i < total_points; i++) {
+        const t = i / (total_points - 1);
+
+        const point = path.getPoint(t);
+
+        sample_points.push(point);
+    }
+
+    const frames = computeFrenetFrames(sample_points, false);
+
+    return makeTubeGeometry(sample_points, frames.normals, frames.binormals, style.width, style.radial_resolution, false);
+}

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

@@ -0,0 +1,16 @@
+import { computeFrenetFrames } from "./computeFrenetFrames.js";
+import { makeTubeGeometry } from "./makeTubeGeometry.js";
+
+/**
+ *
+ * @param {THREE.Vector3[]} points
+ * @param {number} point_count
+ * @param {TubePathStyle} style
+ * @return {THREE.BufferGeometry}
+ */
+export function build_geometry_linear(points, point_count, style) {
+
+    const frames = computeFrenetFrames(points, false);
+
+    return makeTubeGeometry(points, frames.normals, frames.binormals, style.width, style.radial_resolution, false);
+}

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

@@ -0,0 +1,153 @@
+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";
+
+/**
+ * @see https://github.com/mrdoob/three.js/blob/c12c9a166a1369cdd58622fff2aff7e3a84305d7/src/extras/core/Curve.js#L260
+ * @param {Vector3[]} 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 segments = points.length - 1;
+
+    const v3_0 = new Vector3();
+    const v3_1 = new Vector3();
+
+    /**
+     *
+     * @param {number} i
+     * @param {Vector3} destination
+     */
+    function getTangent(i, destination) {
+        // get points on either side
+        const i0 = max2(i - 1, 0);
+        const i1 = min2(i + 1, segments);
+
+        const p0 = points[i0];
+        const pR = points[i];
+        const p1 = points[i1];
+
+        // get points along the lines close to the reference
+        v3_0.subVectors(p0, pR);
+        v3_0.normalize();
+
+        v3_1.subVectors(p1, pR);
+        v3_1.normalize();
+
+        destination.subVectors(v3_1, v3_0);
+        destination.normalize();
+    }
+
+    // compute the tangent vectors for each segment on the curve
+
+    for (let i = 0; i <= segments; i++) {
+
+        const tangent = new Vector3();
+        getTangent(i, tangent);
+
+        tangents[i] = tangent;
+
+    }
+
+    // select an initial normal vector perpendicular to the first tangent vector,
+    // and in the direction of the minimum tangent xyz component
+
+    normals[0] = new Vector3();
+    binormals[0] = new Vector3();
+    let min = Number.MAX_VALUE;
+    const tx = Math.abs(tangents[0].x);
+    const ty = Math.abs(tangents[0].y);
+    const tz = Math.abs(tangents[0].z);
+
+    if (tx <= min) {
+
+        min = tx;
+        normal.set(1, 0, 0);
+
+    }
+
+    if (ty <= min) {
+
+        min = ty;
+        normal.set(0, 1, 0);
+
+    }
+
+    if (tz <= min) {
+
+        normal.set(0, 0, 1);
+
+    }
+
+    vec.crossVectors(tangents[0], normal).normalize();
+
+    normals[0].crossVectors(tangents[0], vec);
+    binormals[0].crossVectors(tangents[0], normals[0]);
+
+
+    // compute the slowly-varying normal and binormal vectors for each segment on the curve
+
+    for (let i = 1; i <= segments; i++) {
+
+        normals[i] = normals[i - 1].clone();
+
+        binormals[i] = binormals[i - 1].clone();
+
+        vec.crossVectors(tangents[i - 1], tangents[i]);
+
+        if (vec.length() > Number.EPSILON) {
+
+            vec.normalize();
+
+            const theta = Math.acos(MathUtils.clamp(tangents[i - 1].dot(tangents[i]), -1, 1)); // clamp for floating pt errors
+
+            normals[i].applyMatrix4(mat.makeRotationAxis(vec, theta));
+
+        }
+
+        binormals[i].crossVectors(tangents[i], normals[i]);
+
+    }
+
+    // if the curve is closed, postprocess the vectors so the first and last normal vectors are the same
+
+    if (closed === true) {
+
+        let theta = Math.acos(MathUtils.clamp(normals[0].dot(normals[segments]), -1, 1));
+        theta /= segments;
+
+        if (tangents[0].dot(vec.crossVectors(normals[0], normals[segments])) > 0) {
+
+            theta = -theta;
+
+        }
+
+        for (let i = 1; i <= segments; i++) {
+
+            // twist a little...
+            normals[i].applyMatrix4(mat.makeRotationAxis(tangents[i], theta * i));
+            binormals[i].crossVectors(tangents[i], normals[i]);
+
+        }
+
+    }
+
+    return {
+        tangents: tangents,
+        normals: normals,
+        binormals: binormals
+    };
+}

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;
+}