@woosh/meep-engine 2.110.8 → 2.110.10

package/src/engine/animation/curve/animation_curve_optimize.js

@@ -0,0 +1,89 @@
+import { assert } from "../../../core/assert.js";
+import AABB2 from "../../../core/geom/2d/aabb/AABB2.js";
+import { animation_curve_compute_aabb } from "./animation_curve_compute_aabb.js";
+import { evaluate_two_key_curve } from "./evaluate_two_key_curve.js";
+
+const bounds = new AABB2();
+
+const NORMALIZED_CHECK_DISTANCE = 0.07;
+
+/**
+ * Compute value difference in the curve if the `middle` key between `previous` and `next` is removed
+ * @param {Keyframe} key_middle
+ * @param {Keyframe} key_previous
+ * @param {Keyframe} key_next
+ * @return {number} value delta if the middle frame is removed
+ */
+function compute_keyframe_value_effect(key_middle, key_previous, key_next) {
+    // check if this key contributes to the shape
+    const v1_actual = evaluate_two_key_curve(key_middle.time, key_previous, key_next);
+    const v1_expected = key_middle.value;
+
+    const v1_error = Math.abs(v1_actual - v1_expected);
+
+    // sample just before the current frame
+    const v0_time = key_middle.time - (key_middle.time - key_previous.time) * NORMALIZED_CHECK_DISTANCE;
+
+    const v0_actual = evaluate_two_key_curve(v0_time, key_previous, key_next);
+    const v0_expected = evaluate_two_key_curve(v0_time, key_previous, key_middle);
+
+    const v0_error = Math.abs(v0_actual - v0_expected);
+
+    // sample just after the current frame
+    const v2_time = key_middle.time + (key_next.time - key_middle.time) * NORMALIZED_CHECK_DISTANCE;
+
+    const v2_actual = evaluate_two_key_curve(v2_time, key_previous, key_next);
+    const v2_expected = evaluate_two_key_curve(v2_time, key_middle, key_next);
+
+    const v2_error = Math.abs(v2_actual - v2_expected);
+
+    return Math.max(v0_error, v1_error, v2_error);
+}
+
+/**
+ * Will remove keyframes that do not affect shape of the curve significantly. The significance degree is determined by the error tolerance
+ * Intended to reduce complexity of a curve to improve performance and lower memory usage
+ * @param {AnimationCurve} curve
+ * @param {number} [error_tolerance] how much of a loss to accept, this is relative to normalized value bounds of the curve
+ */
+export function animation_curve_optimize(curve, error_tolerance = 1e-3) {
+    assert.lessThan(error_tolerance, 1, 'error_tolerance must be less than 1');
+
+    animation_curve_compute_aabb(bounds, curve);
+
+    const absolute_error_tolerance = bounds.height * error_tolerance;
+
+    let key_count = curve.length;
+
+    const keyframes = curve.keys;
+
+    for (let i = 1; i < key_count; i++) {
+        const key_previous = keyframes[i - 1];
+        const key_current = keyframes[i];
+
+        let should_remove = false;
+
+        if (key_current.equals(key_previous)) {
+            // adds no semantic value
+            should_remove = true;
+        }
+
+        if (!should_remove && i < key_count - 1) {
+            const key_next = keyframes[i + 1];
+
+            const max_error = compute_keyframe_value_effect(key_current, key_previous, key_next);
+
+            if (max_error <= absolute_error_tolerance) {
+                // does not significantly affect the curve shape
+                should_remove = true;
+            }
+        }
+
+
+        if (should_remove) {
+            curve.remove(key_current);
+            i--;
+            key_count--;
+        }
+    }
+}

package/src/engine/animation/curve/animation_curve_optimize.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=animation_curve_optimize.spec.d.ts.map

package/src/engine/animation/curve/animation_curve_optimize.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation_curve_optimize.spec.d.ts","sourceRoot":"","sources":["../../../../../src/engine/animation/curve/animation_curve_optimize.spec.js"],"names":[],"mappings":""}

package/src/engine/animation/curve/animation_curve_optimize.spec.js

@@ -0,0 +1,50 @@
+import { animation_curve_optimize } from "./animation_curve_optimize.js";
+import { AnimationCurve } from "./AnimationCurve.js";
+import { Keyframe } from "./Keyframe.js";
+
+test("single key", () => {
+
+    const curve = AnimationCurve.from([
+        Keyframe.from(1, -2, 3, -5)
+    ]);
+
+    animation_curve_optimize(curve);
+
+    expect(curve.keys.length).toBe(1);
+});
+
+test("repeated key", () => {
+
+    const curve = AnimationCurve.from([
+        Keyframe.from(1, -2, 3, -5),
+        Keyframe.from(1, -2, 3, -5),
+        Keyframe.from(1, -2, 3, -5)
+    ]);
+
+    animation_curve_optimize(curve);
+
+    expect(curve.equals(
+        AnimationCurve.from([
+            Keyframe.from(1, -2, 3, -5)
+        ])
+    )).toBe(true);
+});
+
+test("linear curve", () => {
+
+    const curve = AnimationCurve.from([
+        Keyframe.from(0, 0, 1, 1),
+        Keyframe.from(1, 1, 1, 1),
+        Keyframe.from(2, 2, 1, 1),
+    ])
+
+    animation_curve_optimize(curve);
+
+    expect(curve.equals(
+        AnimationCurve.from([
+            Keyframe.from(0, 0, 1, 1),
+            Keyframe.from(2, 2, 1, 1)
+        ])
+    )).toBe(true);
+
+});

package/src/engine/animation/curve/draw/build_curve_editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build_curve_editor.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/draw/build_curve_editor.js"],"names":[],"mappings":"AAgEA;;;;;;GAMG;AACH,kFA4RC"}
+{"version":3,"file":"build_curve_editor.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/draw/build_curve_editor.js"],"names":[],"mappings":"AAiEA;;;;;;GAMG;AACH,kFAiSC"}

package/src/engine/animation/curve/draw/build_curve_editor.js

@@ -11,9 +11,10 @@ import { canvas2d_plot_data_line } from "../../../graphics/canvas/canvas2d_plot_
 import { MouseEvents } from "../../../input/devices/events/MouseEvents.js";
 import { readPositionFromMouseEvent } from "../../../input/devices/PointerDevice.js";
 import { DraggableAspect } from "../../../ui/DraggableAspect.js";
+import { animation_curve_compute_aabb } from "../animation_curve_compute_aabb.js";
 import { sample_animation_curve_to_float_array } from "../compression/sample_animation_curve_to_float_array.js";
-import { compute_curve_aabb } from "../compute_curve_aabb.js";
 import { Keyframe } from "../Keyframe.js";
+import { build_tangent_editor } from "./build_tangent_editor.js";
 
 /**
  *
@@ -106,7 +107,7 @@ export function build_curve_editor({
     });
 
     function handle_curve_update() {
-        compute_curve_aabb(frame, curve);
+        animation_curve_compute_aabb(frame, curve);
 
         frame_updated.send0();
 
@@ -133,6 +134,10 @@ export function build_curve_editor({
 
     const keyframe_views = new Map();
 
+    /**
+     *
+     * @param {Keyframe} keyframe
+     */
     function add_keyframe(keyframe) {
         const vContainerMarker = new EmptyView({
             css: {
@@ -202,7 +207,8 @@ export function build_curve_editor({
 
         const previous = new Vector2();
         const draggable = new DraggableAspect({
-            el: marker_el, drag(position) {
+            el: marker_el,
+            drag(position) {
                 const delta = new Vector2();
                 delta.subVectors(position, previous);
 
@@ -300,14 +306,14 @@ export function build_curve_editor({
         marker.bindSignal(frame_updated, updatePosition);
         marker.bindSignal(active_keyframe.onChanged, updateActiveState);
 
-        // const vTangentEditor = build_tangent_editor({
-        //     keyframe: keyframe,
-        //     size: graph.size,
-        //     ctx: graph.context2d,
-        //     frame,
-        //     margin
-        // });
-        // vContainerMarker.addChild(vTangentEditor);
+        const vTangentEditor = build_tangent_editor({
+            keyframe: keyframe,
+            size: graph.size,
+            ctx: graph.context2d,
+            frame,
+            margin
+        });
+        vContainerMarker.addChild(vTangentEditor);
 
         vContainerMarker.addChild(marker);
 

package/src/engine/animation/curve/evaluate_two_key_curve.d.ts

@@ -0,0 +1,9 @@
+/**
+ *
+ * @param {number} time
+ * @param {Keyframe} keyframe0
+ * @param {Keyframe} keyframe1
+ * @return {number}
+ */
+export function evaluate_two_key_curve(time: number, keyframe0: Keyframe, keyframe1: Keyframe): number;
+//# sourceMappingURL=evaluate_two_key_curve.d.ts.map

package/src/engine/animation/curve/evaluate_two_key_curve.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"evaluate_two_key_curve.d.ts","sourceRoot":"","sources":["../../../../../src/engine/animation/curve/evaluate_two_key_curve.js"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,6CALW,MAAM,aACN,QAAQ,aACR,QAAQ,GACP,MAAM,CAcjB"}

package/src/engine/animation/curve/evaluate_two_key_curve.js

@@ -0,0 +1,23 @@
+import { inverseLerp } from "../../../core/math/inverseLerp.js";
+import { spline_hermite3 } from "../../../core/math/spline/spline_hermite3.js";
+
+/**
+ *
+ * @param {number} time
+ * @param {Keyframe} keyframe0
+ * @param {Keyframe} keyframe1
+ * @return {number}
+ */
+export function evaluate_two_key_curve(time, keyframe0, keyframe1) {
+    // convert to 0..1 region
+    const normalized_time = inverseLerp(keyframe0.time, keyframe1.time, time);
+
+    const time_distance = keyframe1.time - keyframe0.time;
+
+    return spline_hermite3(
+        normalized_time,
+        keyframe0.value, keyframe1.value,
+        keyframe0.outTangent * time_distance,
+        keyframe1.inTangent * time_distance
+    );
+}

package/src/engine/animation/curve/prototypeGLTF.js

@@ -38,17 +38,17 @@ async function main(engine) {
         yaw: 3.123185307179593,
     });
     //
-    // make_sample('data/models/samples/InterpolationTest.glb',[
-    //     'Step Scale',
-    //     'Linear Scale',
-    //     'CubicSpline Scale',
-    //     'Step Rotation',
-    //     'CubicSpline Rotation',
-    //     'Linear Rotation',
-    //     'Step Translation',
-    //     'CubicSpline Translation',
-    //     'Linear Translation'
-    // ],engine.entityManager.dataset);
+    make_sample('data/models/samples/InterpolationTest.glb',[
+        'Step Scale',
+        'Linear Scale',
+        'CubicSpline Scale',
+        'Step Rotation',
+        'CubicSpline Rotation',
+        'Linear Rotation',
+        'Step Translation',
+        'CubicSpline Translation',
+        'Linear Translation'
+    ],engine.entityManager.dataset);
 
     // make_sample('data/models/samples/BoxAnimated.glb',[
     //    'animation_0'
@@ -61,9 +61,9 @@ async function main(engine) {
     // make_sample('moicon/Separated_Cardboard-Box-800x600x400_Roughness0/V1 Cardboard B.gltf', [
     //     'All Animations'
     // ], engine.entityManager.dataset);
-    make_sample('moicon/v26/v26.gltf', [
-        'All Animations'
-    ], engine.entityManager.dataset);
+    // make_sample('moicon/v26/v26.gltf', [
+    //     'All Animations'
+    // ], engine.entityManager.dataset);
 }
 
 /**

package/src/engine/animation/curve/view/AnimationCurveView.d.ts

@@ -0,0 +1,47 @@
+export class AnimationCurveView extends EmptyView {
+    constructor();
+    /**
+     *
+     * @param {AnimationCurve} v
+     */
+    set curve(arg: AnimationCurve);
+    auto_set_frame(): void;
+    /**
+     *
+     * @param {Float32Array|number[]} out
+     * @param {number} x
+     * @param {number} y
+     */
+    point_curve_to_canvas(out: Float32Array | number[], x: number, y: number): void;
+    /**
+     *
+     * @param {Float32Array|number[]} out
+     * @param {number} x
+     * @param {number} y
+     */
+    point_canvas_to_curve(out: Float32Array | number[], x: number, y: number): void;
+    update(): void;
+    draw(): void;
+    draw_grid(): void;
+    draw_key_knots(): void;
+    draw_key_knot(key: any): void;
+    /**
+     *
+     * @param {Keyframe} keyframe
+     */
+    draw_key_tangents(keyframe: Keyframe): void;
+    /**
+     *
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {Keyframe} keyframe
+     * @param {number} angle
+     * @param {number} handle_length in pixels
+     */
+    draw_tangent(ctx: CanvasRenderingContext2D, keyframe: Keyframe, angle: number, handle_length: number): void;
+    draw_tangents(): void;
+    draw_curve(): void;
+    #private;
+}
+import EmptyView from "../../../../view/elements/EmptyView.js";
+import { AnimationCurve } from "../AnimationCurve.js";
+//# sourceMappingURL=AnimationCurveView.d.ts.map

package/src/engine/animation/curve/view/AnimationCurveView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationCurveView.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/view/AnimationCurveView.js"],"names":[],"mappings":"AAeA;IAoCI,cAWC;IAtBD;;;OAGG;IACH,+BAIC;IAgBD,uBA6BC;IAoBD;;;;;OAKG;IACH,2BAJW,YAAY,GAAC,MAAM,EAAE,KACrB,MAAM,KACN,MAAM,QAWhB;IAED;;;;;OAKG;IACH,2BAJW,YAAY,GAAC,MAAM,EAAE,KACrB,MAAM,KACN,MAAM,QAQhB;IAED,eASC;IAED,aAsBC;IAED,kBAwBC;IAED,uBAQC;IAED,8BAiBC;IAGD;;;OAGG;IACH,4BAFW,QAAQ,QAelB;IAED;;;;;;OAMG;IACH,kBALW,wBAAwB,YACxB,QAAQ,SACR,MAAM,iBACN,MAAM,QA+BhB;IAED,sBASC;IAED,mBAqCC;;CAEJ;sBA/UqB,wCAAwC;+BAG/B,sBAAsB"}

package/src/engine/animation/curve/view/AnimationCurveView.js

@@ -0,0 +1,343 @@
+import { assert } from "../../../../core/assert.js";
+import AABB2 from "../../../../core/geom/2d/aabb/AABB2.js";
+import { m3_cm_compose_transform } from "../../../../core/geom/mat3/m3_cm_compose_transform.js";
+import { m3_cm_invert } from "../../../../core/geom/mat3/m3_cm_invert.js";
+import { v2_length } from "../../../../core/geom/vec2/v2_length.js";
+import { v2_matrix3_cm_multiply } from "../../../../core/geom/vec2/v2_matrix3_cm_multiply.js";
+import { CanvasView } from "../../../../view/elements/CanvasView.js";
+import EmptyView from "../../../../view/elements/EmptyView.js";
+import { canvas2d_draw_grid } from "../../../graphics/canvas/canvas2d_draw_grid.js";
+import { animation_curve_compute_aabb } from "../animation_curve_compute_aabb.js";
+import { AnimationCurve } from "../AnimationCurve.js";
+
+const scratch_v2_a = new Float32Array(2);
+const scratch_v2_b = new Float32Array(2);
+
+export class AnimationCurveView extends EmptyView {
+
+    #curve = AnimationCurve.constant();
+    #canvas = new CanvasView();
+    #frame = new AABB2();
+    #curve_bounds = new AABB2();
+
+    /**
+     * 3x3 transform matrix
+     * Transform from curve space to canvas space
+     * @type {Float32Array}
+     */
+    #transform = new Float32Array(9);
+    /**
+     * 3x3 inverse of transform matrix
+     * @type {Float32Array}
+     */
+    #transform_inverse = new Float32Array(9);
+
+    /**
+     *
+     * @type {number}
+     */
+    #margin = 36
+
+    /**
+     *
+     * @param {AnimationCurve} v
+     */
+    set curve(v) {
+        this.#curve = v;
+
+        this.update();
+    }
+
+
+    constructor() {
+        super();
+
+        this.addChild(this.#canvas);
+
+        this.size.onChanged.add((x, y) => {
+
+            this.#canvas.size.set(x, y);
+            this.update();
+
+        });
+    }
+
+    auto_set_frame() {
+        animation_curve_compute_aabb(this.#curve_bounds, this.#curve);
+
+        this.#frame.copy(this.#curve_bounds);
+
+        if (this.#frame.height === 0) {
+            this.#frame.growHeight(0.5);
+        }
+
+        if (this.#frame.width === 0) {
+            this.#frame.growWidth(0.5);
+        }
+
+        const margin_top = this.#margin;
+        const margin_bottom = this.#margin;
+        const margin_left = this.#margin;
+        const margin_right = this.#margin;
+
+        const normalized_margin_left = (margin_left / this.size.x) * this.#frame.width;
+        const normalized_margin_right = (margin_right / this.size.x) * this.#frame.width;
+        const normalized_margin_top = (margin_top / this.size.y) * this.#frame.height;
+        const normalized_margin_bottom = (margin_bottom / this.size.y) * this.#frame.height;
+
+        this.#frame.x0 -= normalized_margin_left;
+        this.#frame.x1 += normalized_margin_right;
+        this.#frame.y0 -= normalized_margin_top;
+        this.#frame.y1 += normalized_margin_bottom;
+
+        this.#update_frame();
+    }
+
+    #update_frame() {
+
+        const frame = this.#frame;
+        const size = this.size;
+
+        const scale_x = size.x / frame.width;
+        const scale_y = -size.y / frame.height;
+
+        m3_cm_compose_transform(
+            this.#transform,
+            -frame.x0, -frame.y1,
+            scale_x, scale_y,
+            frame.x0, frame.y1, 0
+        );
+
+        m3_cm_invert(this.#transform_inverse, this.#transform);
+    }
+
+    /**
+     *
+     * @param {Float32Array|number[]} out
+     * @param {number} x
+     * @param {number} y
+     */
+    point_curve_to_canvas(out, x, y) {
+
+        assert.notNaN(x, 'x');
+        assert.notNaN(y, 'y');
+
+        v2_matrix3_cm_multiply(out, 0,
+            x, y, this.#transform
+        );
+
+    }
+
+    /**
+     *
+     * @param {Float32Array|number[]} out
+     * @param {number} x
+     * @param {number} y
+     */
+    point_canvas_to_curve(out, x, y) {
+
+        v2_matrix3_cm_multiply(out, 0,
+            x, y, this.#transform_inverse
+        );
+
+    }
+
+    update() {
+        if (this.size.x <= 0 || this.size.y <= 0) {
+            // size too small
+            return;
+        }
+
+        this.auto_set_frame();
+
+        this.draw();
+    }
+
+    draw() {
+        const ctx = this.#canvas.context2d;
+
+        ctx.fillStyle = '#222222';
+        ctx.fillRect(0, 0, this.size.x, this.size.y);
+
+        this.draw_grid();
+
+
+        ctx.fillStyle = 'none';
+        ctx.strokeStyle = '#00ff00';
+        ctx.lineWidth = 1;
+
+        this.draw_curve();
+
+        ctx.fillStyle = 'none';
+        ctx.strokeStyle = '#0080ff';
+        ctx.lineWidth = 1;
+
+        this.draw_tangents();
+
+        this.draw_key_knots();
+    }
+
+    draw_grid() {
+        const ctx = this.#canvas.context2d;
+
+        const width = this.size.x;
+        const height = this.size.y;
+
+        canvas2d_draw_grid({
+            ctx,
+            width,
+            height,
+            color: '#262626',
+            spacing: 32,
+            offset_x: 0
+        });
+
+        canvas2d_draw_grid({
+            ctx,
+            width,
+            height,
+            color: '#303030',
+            spacing: 32,
+            offset_x: 16,
+            offset_y: 16
+        });
+    }
+
+    draw_key_knots() {
+        const keys = this.#curve.keys;
+        const key_count = keys.length;
+
+        for (let i = 0; i < key_count; i++) {
+            this.draw_key_knot(keys[i]);
+        }
+
+    }
+
+    draw_key_knot(key) {
+
+        const ctx = this.#canvas.context2d;
+
+        this.point_curve_to_canvas(scratch_v2_a, key.time, key.value);
+
+        const stroke_width = 1;
+        const radius = 2;
+
+        ctx.beginPath();
+        ctx.arc(scratch_v2_a[0], scratch_v2_a[1], radius + stroke_width * 0.5, 0, 2 * Math.PI, false);
+        ctx.fillStyle = 'green';
+        ctx.fill();
+        ctx.lineWidth = stroke_width;
+        ctx.strokeStyle = 'rgba(0,133,0,0.2)';
+        ctx.stroke();
+
+    }
+
+
+    /**
+     *
+     * @param {Keyframe} keyframe
+     */
+    draw_key_tangents(keyframe) {
+        const handle_length = 36;
+
+        const ctx = this.#canvas.context2d;
+
+        // incoming
+        const in_angle = -Math.atan2(keyframe.inTangent, -1);
+        this.draw_tangent(ctx, keyframe, in_angle, handle_length);
+
+        // outgoing
+        const ut_angle = Math.atan2(keyframe.outTangent, 1);
+
+        this.draw_tangent(ctx, keyframe, ut_angle, handle_length);
+    }
+
+    /**
+     *
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {Keyframe} keyframe
+     * @param {number} angle
+     * @param {number} handle_length in pixels
+     */
+    draw_tangent(ctx, keyframe, angle, handle_length) {
+        ctx.beginPath();
+
+        this.point_curve_to_canvas(scratch_v2_a, keyframe.time, keyframe.value);
+
+        ctx.moveTo(scratch_v2_a[0], scratch_v2_a[1]);
+
+        this.point_curve_to_canvas(scratch_v2_b,
+            keyframe.time + Math.cos(angle),
+            keyframe.value + Math.sin(angle)
+        );
+
+        // a - b
+        scratch_v2_b[0] -= scratch_v2_a[0];
+        scratch_v2_b[1] -= scratch_v2_a[1];
+
+        // normalize to desired length
+        const norm = handle_length / v2_length(scratch_v2_b[0], scratch_v2_b[1]);
+
+        scratch_v2_b[0] *= norm;
+        scratch_v2_b[1] *= norm;
+
+        // restore offset
+        scratch_v2_b[0] += scratch_v2_a[0];
+        scratch_v2_b[1] += scratch_v2_a[1];
+
+        ctx.lineTo(scratch_v2_b[0], scratch_v2_b[1]);
+
+        ctx.stroke();
+    }
+
+    draw_tangents() {
+        const curve = this.#curve;
+        const keys = curve.keys;
+
+        for (let i = 0; i < keys.length; i++) {
+            const keyframe = keys[i];
+
+            this.draw_key_tangents(keyframe);
+        }
+    }
+
+    draw_curve() {
+
+        const ctx = this.#canvas.context2d;
+
+        ctx.beginPath();
+
+        const curve = this.#curve;
+
+        const keys = curve.keys;
+
+        if (keys.length < 2) {
+            return;
+        }
+
+        const duration = curve.duration;
+        const first_key = curve.keys[0];
+        const time_start = first_key.time;
+
+        const segments = Math.ceil(this.size.x / 4);
+
+        this.point_curve_to_canvas(scratch_v2_a, first_key.time, first_key.value);
+
+        ctx.moveTo(scratch_v2_a[0], scratch_v2_a[1]);
+
+        for (let i = 1; i < segments; i++) {
+            const t = i / (segments - 1);
+
+            const time = time_start + duration * t;
+
+            const value = curve.evaluate(time);
+
+            this.point_curve_to_canvas(scratch_v2_a, time, value);
+
+            ctx.lineTo(scratch_v2_a[0], scratch_v2_a[1]);
+        }
+
+        ctx.stroke();
+    }
+
+}

package/src/engine/animation/curve/view/prototype.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=prototype.d.ts.map