@woosh/meep-engine 2.75.4 → 2.75.6

package/src/engine/asset/loaders/image/png/PNGReader.js

@@ -9,6 +9,25 @@ import { crc } from "./crc.js";
 import { PNG } from './PNG.js';
 import { PNG_HEADER_BYTES } from "./PNG_HEADER_BYTES.js";
 
+/**
+ *
+ * @param {Uint8Array} encoded_chunk
+ * @returns {ArrayBuffer}
+ */
+function inflate(encoded_chunk) {
+    const inflator = new zlib.Inflate();
+
+
+    inflator.push(encoded_chunk);
+
+    if (inflator.err) {
+        throw new Error(inflator.err);
+    }
+
+
+    return inflator.result.buffer;
+}
+
 /**
  *
  * @param {Uint8Array} buffer
@@ -162,8 +181,18 @@ PNGReader.prototype.decodeChunk = function () {
         case 'sRGB':
             this.decodesRGB(chunk);
             break;
+        case 'tIME':
+            this.decodetIME(chunk);
+            break;
+        case 'zTXt':
+            this.decodezTXt(chunk);
+            break;
+        case 'iTXt':
+            this.decodeiTXt(chunk);
+            break;
         default:
-            console.warn(`Unsupported block ${type}`);
+            // skip unknown block
+            // console.warn(`Unsupported block ${type}`);
             break;
     }
 
@@ -183,6 +212,95 @@ PNGReader.prototype.decodesRGB = function (chunk) {
     // TODO add metadata to the PNG representation
 }
 
+/**
+ * https://www.w3.org/TR/2003/REC-PNG-20031110/#11tIME
+ * @param {Uint8Array} chunk
+ */
+PNGReader.prototype.decodetIME = function (chunk) {
+    const year_high = readUInt8(chunk, 0);
+    const year_low = readUInt8(chunk, 1);
+
+    const year = (year_high << 8) | year_low;
+
+    const month = readUInt8(chunk, 2);
+    const day = readUInt8(chunk, 3);
+    const hour = readUInt8(chunk, 4);
+    const minute = readUInt8(chunk, 5);
+    const second = readUInt8(chunk, 6);
+}
+
+/**
+ * International textual data
+ * @see https://www.w3.org/TR/2003/REC-PNG-20031110/
+ * @param {Uint8Array} chunk
+ */
+PNGReader.prototype.decodeiTXt = function (chunk) {
+    const buffer = BinaryBuffer.fromArrayBuffer(chunk.buffer);
+    const keyword = buffer.readASCIICharacters(79, true);
+    const compression_flag = buffer.readUint8();
+    const compression_method = buffer.readUint8();
+
+    const language_tag = buffer.readASCIICharacters(Infinity, true);
+    const translated_keyword = buffer.readASCIICharacters(Infinity, true);
+
+    const remaining_bytes = buffer.data.length - buffer.position;
+
+    let text;
+
+    if (compression_flag === 0) {
+        text = buffer.readASCIICharacters(remaining_bytes);
+    } else if (compression_flag === 1) {
+        const decoded = inflate(new Uint8Array(buffer.data, buffer.position, remaining_bytes));
+
+        buffer.fromArrayBuffer(decoded);
+
+        text = buffer.readASCIICharacters(decoded.byteLength);
+    } else {
+        throw new Error(`Invalid compression flag value '${compression_flag}'`);
+    }
+
+    return {
+        keyword,
+        language_tag,
+        translated_keyword,
+        text
+    }
+}
+
+
+/**
+ * Compressed textual data
+ * @see https://www.w3.org/TR/2003/REC-PNG-20031110/#11zTXt
+ * @param {Uint8Array} chunk
+ */
+PNGReader.prototype.decodezTXt = function (chunk) {
+    const buffer = BinaryBuffer.fromArrayBuffer(chunk.buffer);
+
+    const keyword = buffer.readASCIICharacters(79, true);
+
+    const compression_method = buffer.readUint8();
+
+    let value;
+
+    if (compression_method === 0) {
+        // deflate method
+
+        const encoded_chunk = new Uint8Array(chunk.buffer, buffer.position);
+
+        const decompressed_data = inflate(encoded_chunk);
+
+        buffer.fromArrayBuffer(decompressed_data);
+
+        value = buffer.readASCIICharacters(decompressed_data.length);
+    } else {
+        throw new Error(`Unsupported compression method '${compression_method}'`);
+    }
+
+    return {
+        keyword: keyword,
+        text: value
+    }
+}
 
 /**
  * https://www.w3.org/TR/PNG/#11tEXt

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