@woosh/meep-engine 2.75.3 → 2.75.5

package/src/engine/graphics/GraphicsEngine.d.ts

@@ -1,9 +1,10 @@
 import {PerspectiveCamera, Scene, WebGLRenderer} from "three";
-import {RenderLayerManager} from "./render/layers/RenderLayerManager";
-import Vector3 from "../../core/geom/Vector3";
+import Signal from "../../core/events/signal/Signal";
 import Vector2 from "../../core/geom/Vector2";
+import Vector3 from "../../core/geom/Vector3";
 import View from "../../view/View";
-import Signal from "../../core/events/signal/Signal";
+import {MaterialManager} from "./material/manager/MaterialManager";
+import {RenderLayerManager} from "./render/layers/RenderLayerManager";
 
 interface IGraphicsEngineSignals {
     readonly preRender: Signal
@@ -35,4 +36,6 @@ export class GraphicsEngine {
     viewportProjectionRay(x: number, y: number, source: Vector3, direction: Vector3): void
 
     getRenderer(): WebGLRenderer
+
+    getMaterialManager():MaterialManager
 }

package/src/engine/graphics/canvas/canvas2d_draw_grid.js

@@ -0,0 +1,42 @@
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {number} width
+ * @param {number} height
+ * @param {string} [color] CSS color specification
+ * @param {number} [spacing] distance between grid lines
+ * @param {number} [offset_x]
+ * @param {number} [offset_y]
+ * @param {number} [thickness] Like thickness
+ */
+export function canvas2d_draw_grid({
+                                       ctx,
+                                       width,
+                                       height,
+                                       color = 'red',
+                                       spacing = 10,
+                                       offset_x = 0,
+                                       offset_y = 0,
+                                       thickness = 1
+                                   }) {
+    ctx.fillStyle = 'none';
+    ctx.lineWidth = thickness;
+    ctx.strokeStyle = color;
+
+
+    ctx.beginPath();
+
+    for (let x = offset_x; x < width; x += spacing) {
+        // horizontal
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+    }
+
+    for (let y = offset_y; y < width; y += spacing) {
+        // vertical
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+    }
+
+    ctx.stroke();
+}

package/src/engine/{animation/curve/draw/draw_label.js → graphics/canvas/canvas2d_draw_label.js}

@@ -5,7 +5,12 @@
  * @param {number} x
  * @param {number} y
  */
-export function draw_label(ctx, text, x, y) {
+export function canvas2d_draw_label({
+                                        ctx,
+                                        text,
+                                        x,
+                                        y
+                                    }) {
 
     ctx.fillStyle = 'white';
     ctx.font = '10px Tahoma';

package/src/engine/graphics/canvas/canvas2d_draw_linear_scale.js

@@ -0,0 +1,64 @@
+import { lerp } from "../../../core/math/lerp.js";
+import { number_pretty_print } from "../../../core/primitives/numbers/number_pretty_print.js";
+import { canvas2d_draw_label } from "./canvas2d_draw_label.js";
+
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {number} position_x0
+ * @param {number} position_y0
+ * @param {number} position_x1
+ * @param {number} position_y1
+ * @param {number} spacing
+ * @param {number} value_0
+ * @param {number} value_1
+ * @param {string} [align] which side of the point should the text appear on
+ */
+export function canvas2d_draw_linear_scale({
+                                               ctx,
+                                               position_x0, position_y0,
+                                               position_x1, position_y1,
+                                               spacing = 10,
+                                               value_0, value_1,
+                                               align
+                                           }) {
+
+    if (spacing <= 0) {
+        throw new Error(`Spacing must be greater than 0`);
+    }
+
+    // figure out direction vector
+    const delta_x = position_x1 - position_x0;
+    const delta_y = position_y1 - position_y0;
+
+    const distance = Math.hypot(delta_x, delta_y);
+
+    if (distance === 0) {
+        throw new Error(`Distance must be greater than 0`);
+    }
+
+    const direction_x = delta_x / distance;
+    const direction_y = delta_y / distance;
+
+    const mark_count = Math.ceil(distance / spacing);
+
+    for (let i = 0; i <= mark_count; i++) {
+
+        const offset = spacing * i;
+
+        const f = offset / distance;
+
+        const point_x = position_x0 + direction_x * offset;
+        const point_y = position_y0 + direction_y * spacing * i;
+
+        const value = lerp(value_0, value_1, f);
+
+        canvas2d_draw_label({
+            ctx,
+            text: number_pretty_print(value),
+            x: point_x,
+            y: point_y
+        });
+    }
+
+}

package/src/engine/graphics/canvas/canvas2d_draw_path.js

@@ -0,0 +1,60 @@
+/**
+ *
+ * @param {number[]} vertices
+ * @param {CanvasRenderingContext2D} ctx
+ * @param [fillColor]
+ * @param [strokeColor]
+ * @param [highlight_vertices]
+ * @param [vertex_draw_size]
+ * @param {number} [offset] in pixels
+ */
+export function canvas2d_draw_path({
+                                       vertices,
+                                       ctx,
+                                       fillColor = 'transparent',
+                                       strokeColor = 'red',
+                                       highlight_vertices = true,
+                                       vertex_draw_size = 8,
+                                       offset = [0, 0]
+                                   }) {
+
+    function draw_point(x, y) {
+        ctx.fillStyle = 'rgba(255,255,255,0.8)';
+        ctx.strokeStyle = 'black';
+        ctx.lineWidth = "1px";
+
+        const x1 = x - vertex_draw_size / 2 + offset[0];
+        const y1 = y - vertex_draw_size / 2 + offset[1];
+
+        ctx.fillRect(x1, y1, vertex_draw_size, vertex_draw_size);
+
+        ctx.strokeRect(x1, y1, vertex_draw_size, vertex_draw_size);
+    }
+
+    if (highlight_vertices) {
+        for (let i = 0; i < vertices.length / 2; i++) {
+            draw_point(vertices[i * 2], vertices[i * 2 + 1]);
+        }
+    }
+
+    ctx.fillStyle = fillColor;
+    ctx.strokeStyle = strokeColor;
+    ctx.lineWidth = "1px";
+
+    ctx.beginPath();
+
+    ctx.moveTo(vertices[0] + offset[0], vertices[1] + offset[1]);
+    // drawPoint(jarvis_vertices[0].x, jarvis_vertices[0].y, jarvis_vertices[0].z, 'red');
+
+    for (let i = 1; i < vertices.length / 2; i++) {
+
+        ctx.lineTo(vertices[i * 2] + offset[0], vertices[i * 2 + 1] + offset[1]);
+
+        // drawPoint(last.x, last.y, last.z, 'red');
+    }
+
+    ctx.closePath();
+    ctx.stroke();
+    ctx.fill();
+
+}

package/src/engine/graphics/canvas/canvas2d_plot_data_line.js

@@ -0,0 +1,84 @@
+import Vector2 from "../../../core/geom/Vector2.js";
+import { canvas2d_draw_grid } from "./canvas2d_draw_grid.js";
+import { canvas2d_draw_linear_scale } from "./canvas2d_draw_linear_scale.js";
+import { canvas2d_plot_line_array } from "./canvas2d_plot_line_array.js";
+
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {number[]|Float32Array} data
+ * @param {Vector2} [margin]
+ * @param {number} width
+ * @param {number} height
+ * @param {number[]} [range_y]
+ * @param {number[]} range_x
+ */
+export function canvas2d_plot_data_line({
+                                            ctx,
+                                            data,
+                                            margin = Vector2.zero,
+                                            width,
+                                            height,
+                                            range_y,
+                                            range_x
+                                        }) {
+
+    ctx.fillStyle = '#222222';
+    ctx.fillRect(0, 0, width, height);
+
+    const data_x0 = range_x[0];
+    const data_x1 = range_x[1];
+    const data_y0 = range_y[0];
+    const data_y1 = range_y[1];
+
+    const plot_area_width = width - margin.x * 2;
+    const plot_area_height = height - margin.y * 2;
+
+    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
+    });
+
+    canvas2d_draw_linear_scale({
+        ctx,
+        position_x0: margin.x,
+        position_x1: width - margin.x,
+        position_y0: height - 4,
+        position_y1: height - 4,
+        value_0: data_x0,
+        value_1: data_x1,
+        spacing: 64
+    });
+    canvas2d_draw_linear_scale({
+        ctx,
+        position_x0: 4,
+        position_x1: 4,
+        position_y0: height - margin.y,
+        position_y1: margin.y,
+        value_0: data_y0,
+        value_1: data_y1,
+        spacing: 64
+    });
+
+    ctx.fillStyle = 'none';
+    ctx.strokeStyle = '#00ff00';
+    ctx.lineWidth = 1;
+    canvas2d_plot_line_array(
+        ctx, plot_area_width, plot_area_height, margin.x, margin.y, data, range_y
+    );
+
+}

package/src/engine/{animation/curve/draw/plot_array.js → graphics/canvas/canvas2d_plot_line_array.js}

@@ -1,23 +1,4 @@
-import { min2 } from "../../../../core/math/min2.js";
-import { max2 } from "../../../../core/math/max2.js";
-
-/**
- *
- * @param {number[]} data
- * @return {number[]}
- */
-export function array_compute_min_max(data) {
-    const point_count = data.length;
-
-    let min = Number.POSITIVE_INFINITY;
-    let max = Number.NEGATIVE_INFINITY;
-    for (let i = 0; i < point_count; i++) {
-        min = min2(data[i], min);
-        max = max2(data[i], max);
-    }
-
-    return [min, max];
-}
+import { array_compute_min_max } from "../../../core/collection/array/array_compute_min_max.js";
 
 /**
  *
@@ -27,9 +8,9 @@ export function array_compute_min_max(data) {
  * @param {number} x_offset
  * @param {number} y_offset
  * @param {number[]} data
- * @param {number[]} data_range_y
+ * @param {number[]} [data_range_y]
  */
-export function plot_array(
+export function canvas2d_plot_line_array(
     ctx,
     width,
     height,
@@ -40,11 +21,13 @@ export function plot_array(
 ) {
     const point_count = data.length;
 
-    if (data_range_y === undefined) {
-        data_range_y = array_compute_min_max(data)
+    let _data_range_y = data_range_y;
+
+    if (_data_range_y === undefined) {
+        _data_range_y = array_compute_min_max(data)
     }
 
-    const [min, max] = data_range_y;
+    const [min, max] = _data_range_y;
 
     const value_span = max - min;
     const normalization_multiplier = value_span !== 0 ? 1 / value_span : 0;

package/src/engine/graphics/geometry/VertexDataSpec.d.ts

@@ -3,6 +3,8 @@ import {AttributeSpec} from "./AttributeSpec";
 export class VertexDataSpec {
     readonly attributes: AttributeSpec[]
 
+    static from(...attributes: AttributeSpec[]): VertexDataSpec
+
     getAttributeByName(name: string): AttributeSpec | undefined
 
     add(attribute: AttributeSpec): this
@@ -12,4 +14,12 @@ export class VertexDataSpec {
     equals(other: VertexDataSpec): boolean
 
     hash(): number
+
+    toJSON(): any
+
+    fromJSON(json: any): void
+
+    getByteSize(): number
+
+    readonly isVertexDataSpec: true
 }

package/src/engine/graphics/geometry/VertexDataSpec.js

@@ -1,8 +1,8 @@
-import { invokeObjectHash } from "../../../core/model/object/invokeObjectHash.js";
+import { assert } from "../../../core/assert.js";
 import { computeHashArray } from "../../../core/collection/array/computeHashArray.js";
 import { isArrayEqual } from "../../../core/collection/array/isArrayEqual.js";
+import { invokeObjectHash } from "../../../core/model/object/invokeObjectHash.js";
 import { AttributeSpec } from "./AttributeSpec.js";
-import { assert } from "../../../core/assert.js";
 
 /**
  * @readonly
@@ -15,20 +15,19 @@ const DEFAULT_HASH = 1234567;
  * @example "uv","position" and "normal" attributes of geometry vertices
  */
 export class VertexDataSpec {
-    constructor() {
-        /**
-         *
-         * @type {AttributeSpec[]}
-         */
-        this.attributes = [];
-
-        /**
-         * Cached hash for speed
-         * @type {number}
-         * @private
-         */
-        this.__hash = DEFAULT_HASH;
-    }
+
+    /**
+     *
+     * @type {AttributeSpec[]}
+     */
+    attributes = [];
+
+    /**
+     * Cached hash for speed
+     * @type {number}
+     * @private
+     */
+    #hash = DEFAULT_HASH;
 
     /**
      *
@@ -112,7 +111,7 @@ export class VertexDataSpec {
         this.attributes.push(attribute);
 
         // reset hash
-        this.__hash = DEFAULT_HASH;
+        this.#hash = DEFAULT_HASH;
 
         //for chaining, return self
         return this;
@@ -138,7 +137,7 @@ export class VertexDataSpec {
         this.attributes.splice(0, this.attributes.length);
 
         // reset hash to trigger hash update
-        this.__hash = DEFAULT_HASH;
+        this.#hash = DEFAULT_HASH;
     }
 
     /**
@@ -159,11 +158,11 @@ export class VertexDataSpec {
     }
 
     hash() {
-        if (this.__hash === DEFAULT_HASH) {
-            this.__hash = this.computeHash();
+        if (this.#hash === DEFAULT_HASH) {
+            this.#hash = this.computeHash();
         }
 
-        return this.__hash;
+        return this.#hash;
     }
 
     toJSON() {

package/src/engine/graphics/geometry/computeMeshSurfaceArea.js

@@ -1,4 +1,5 @@
 import { assert } from "../../../core/assert.js";
+import { computeTriangleSurfaceArea } from "../../../core/geom/3d/triangle/computeTriangleSurfaceArea.js";
 
 /**
  *
@@ -49,40 +50,4 @@ export function computeMeshSurfaceArea(result, points, indices, polygon_count =
     }
 
     return total;
-}
-
-
-/**
- * Based on: https://gamedev.stackexchange.com/questions/165643/how-to-calculate-the-surface-area-of-a-mesh
- * @param {number} x0
- * @param {number} y0
- * @param {number} z0
- * @param {number} x1
- * @param {number} y1
- * @param {number} z1
- * @param {number} x2
- * @param {number} y2
- * @param {number} z2
- * @returns {number}
- */
-export function computeTriangleSurfaceArea(x0, y0, z0, x1, y1, z1, x2, y2, z2) {
-    const ax = x1 - x0;
-    const ay = y1 - y0;
-    const az = z1 - z0;
-
-    const bx = x2 - x0;
-    const by = y2 - y0;
-    const bz = z2 - z0;
-
-    //compute cross product
-    const x = ay * bz - az * by;
-    const y = az * bx - ax * bz;
-    const z = ax * by - ay * bx;
-
-    //area is equal to half-magnitude of the cross-product
-    const magnitude = Math.sqrt(x * x + y * y + z * z);
-
-    const area = magnitude / 2;
-
-    return area;
-}
+}

package/src/engine/graphics/impostors/octahedral/bake/prepare_bake_material.js

@@ -1,24 +1,6 @@
-import { DataTexture, UnsignedByteType } from "three";
 import { float2uint8 } from "../../../../../core/binary/float2uint8.js";
 import { clamp01 } from "../../../../../core/math/clamp01.js";
-
-/**
- *
- * @param contents
- * @param {Signal} cleanup_signal
- * @returns {DataTexture}
- */
-function onePixelTexture(contents, cleanup_signal) {
-    const t = new DataTexture(new Uint8Array(contents), 1, 1);
-
-    t.generateMipmaps = false;
-    t.needsUpdate = true;
-    t.type = UnsignedByteType;
-
-    cleanup_signal.addOne(t.dispose, t);
-
-    return t;
-}
+import { makeOnePixelTexture } from "../../../texture/makeOnePixelTexture.js";
 
 
 /**
@@ -57,13 +39,13 @@ export function prepare_bake_material({
 
         if (texture_metalness === null) {
             const m = float2uint8(clamp01(source_material.metalness));
-            texture_metalness = onePixelTexture([m, m, m, 255], cleanup_signal);
+            texture_metalness = makeOnePixelTexture([m, m, m, 255], cleanup_signal);
         }
 
         if (texture_roughness === null) {
             const r = float2uint8(clamp01(source_material.roughness));
 
-            texture_roughness = onePixelTexture([r, r, r, 255], cleanup_signal);
+            texture_roughness = makeOnePixelTexture([r, r, r, 255], cleanup_signal);
         }
 
     } else {
@@ -74,22 +56,22 @@ export function prepare_bake_material({
 
     if (texture_diffuse === null) {
         // plug white texture
-        texture_diffuse = onePixelTexture([255, 255, 255, 255], cleanup_signal);
+        texture_diffuse = makeOnePixelTexture([255, 255, 255, 255], cleanup_signal);
     }
     if (texture_roughness === null) {
-        texture_roughness = onePixelTexture([255, 255, 255, 255], cleanup_signal);
+        texture_roughness = makeOnePixelTexture([255, 255, 255, 255], cleanup_signal);
     }
 
     if (texture_metalness === null) {
-        texture_metalness = onePixelTexture([0, 0, 0, 0], cleanup_signal);
+        texture_metalness = makeOnePixelTexture([0, 0, 0, 0], cleanup_signal);
     }
 
     if (texture_occlusion === null) {
-        texture_occlusion = onePixelTexture([255, 255, 255, 255], cleanup_signal);
+        texture_occlusion = makeOnePixelTexture([255, 255, 255, 255], cleanup_signal);
     }
 
     if (texture_emissive === null) {
-        texture_emissive = onePixelTexture([0, 0, 0, 0], cleanup_signal);
+        texture_emissive = makeOnePixelTexture([0, 0, 0, 0], cleanup_signal);
     }
 
     // set rendering parameters on textures

package/src/engine/graphics/material/manager/MaterialManager.d.ts

@@ -0,0 +1,6 @@
+import {Material} from "three";
+import {Reference} from "../../../reference/v2/Reference";
+
+export class MaterialManager{
+    obtain(source:Material):Reference<Material>
+}

package/src/engine/graphics/sh3/LightProbeVolume.js

@@ -3,6 +3,7 @@ import {
     LinearEncoding,
     LinearFilter,
     LineBasicMaterial,
+    MeshStandardMaterial,
     RGBAFormat,
     Scene,
     WebGLCubeRenderTarget
@@ -19,6 +20,9 @@ import {
 } from "../../../core/geom/3d/tetrahedra/delaunay/compute_delaunay_tetrahedral_mesh.js";
 import { TetrahedralMesh } from "../../../core/geom/3d/tetrahedra/TetrahedralMesh.js";
 import { v3_length_sqr } from "../../../core/geom/vec3/v3_length_sqr.js";
+import TaskGroup from "../../../core/process/task/TaskGroup.js";
+import { actionTask } from "../../../core/process/task/util/actionTask.js";
+import { countTask } from "../../../core/process/task/util/countTask.js";
 import Entity from "../../ecs/Entity.js";
 import { Transform } from "../../ecs/transform/Transform.js";
 import { threeMakeLight } from "../ecs/light/binding/three/threeMakeLight.js";
@@ -229,15 +233,15 @@ class CubeRenderer {
             const source_material = sg.material;
 
             //
-            // if (source_material.isMeshStandardMaterial === true) {
-            //     object3D.material = new MeshStandardMaterial({
-            //         map: source_material.map,
-            //     });
-            //
-            //     object3D.material.color.copy(source_material.color);
-            // } else {
-            object3D.material = source_material.clone();
-            // }
+            if (source_material.isMeshStandardMaterial === true) {
+                object3D.material = new MeshStandardMaterial({
+                    map: source_material.map,
+                });
+
+                object3D.material.color.copy(source_material.color);
+            } else {
+                object3D.material = source_material.clone();
+            }
 
             applyTransformToThreeObject(object3D, t);
 
@@ -507,30 +511,46 @@ export class LightProbeVolume {
     /**
      * Bake light probes
      * @param {Engine} engine
+     * @returns {TaskGroup}
      */
     bake(engine) {
         const baker = new Baker();
         // baker.set_bvh(entityManager.getSystem(ShadedGeometrySystem).__bvh_binary);
 
-        baker.prepare(engine);
 
-        const t0 = performance.now();
+        const tPrepare = actionTask(() => {
+            baker.prepare(engine);
+        });
 
 
-        for (let i = 0; i < this.__length; i++) {
+        const probe_count = this.__length;
+        const tBake = countTask(0, probe_count, (i) => {
 
             baker.bake_sh3_cube(
                 this.__positions, i * 3,
                 this.__probe_data, i * 9 * 3
             );
 
-        }
+        });
 
-        const t1 = performance.now();
+        tBake.promise().then(()=>{
+
+            const duration =tBake.__executedCpuTime;
+
+            console.log(`Baked ${probe_count} probes in ${duration}ms, ~${(duration / probe_count).toFixed(2)}ms per probe`);
+
+        })
+
+        const tFinish = actionTask(() => {
+            baker.finish();
+        });
 
-        console.log(`Baked ${this.__length} probes in ${(t1 - t0)}ms, ~${((t1 - t0) / this.__length).toFixed(2)}ms per probe`);
+        tFinish.addDependency(tBake);
+        tBake.addDependency(tPrepare);
 
-        baker.finish();
+        return new TaskGroup([
+            tPrepare, tBake, tFinish
+        ]);
     }
 
     /**
@@ -580,9 +600,10 @@ export class LightProbeVolume {
     /**
      *
      * @param {Engine} engine
+     * @returns {TaskGroup}
      */
     build(engine) {
         this.build_mesh();
-        this.bake(engine);
+        return this.bake(engine);
     }
 }