@woosh/meep-engine 2.42.8 → 2.43.1

package/engine/graphics/texture/sampler/filter/triangle.js

@@ -0,0 +1,19 @@
+/**
+ * @see https://github.com/terifan/ImageResampler/blob/dbc212ce6aaa769bf3c9623cb6ead58ffd51d76c/src/org/terifan/image_resampler/FilterFactory.java#L348
+ * @param {number} x
+ * @returns {number}
+ */
+export function triangle(x) {
+    if (x < -1) {
+        return 0;
+    }
+    if (x < 0) {
+        return 1 + x;
+    }
+    if (x < 1) {
+        return 1 - x;
+    }
+    return 0;
+}
+
+triangle.support = 1;

package/engine/graphics/texture/sampler/prototypeSamplerFiltering.js

@@ -2,18 +2,30 @@ import { EngineHarness } from "../../../EngineHarness.js";
 import { ImageRGBADataLoader } from "../../../asset/loaders/image/ImageRGBADataLoader.js";
 import sampler2D2Canvas from "./Sampler2D2Canvas.js";
 import { CanvasView } from "../../../../view/elements/CanvasView.js";
-import { sampler2D_scale_down_lanczos } from "./sampler2_d_scale_down_lanczos.js";
+import { filter_lanczos3, sampler2D_scale_down_lanczos } from "./sampler2_d_scale_down_lanczos.js";
 import { Sampler2D } from "./Sampler2D.js";
 import { genericResampleSampler2D } from "./genericResampleSampler2D.js";
 import Vector2 from "../../../../core/geom/Vector2.js";
 import LabelView from "../../../../view/common/LabelView.js";
 import EmptyView from "../../../../view/elements/EmptyView.js";
 import { sampler2d_downsample_mipmap } from "./resize/sampler2d_downsample_mipmap.js";
+import { kaiser_bessel_window } from "./filter/kaiser_bessel_window.js";
+import { sampler2d_scale_down_generic } from "./filter/sampler2d_scale_down_generic.js";
+import { mitchell, mitchell_v1 } from "./filter/mitchell.js";
+import { kaiser_1 } from "./filter/kaiser_1.js";
+import { triangle } from "./filter/triangle.js";
+import { box } from "./filter/box.js";
+import { gaussian } from "./filter/gaussian.js";
 
-function grid(engine, input, transforms, size = new Vector2(input.width, input.height)) {
+function grid({ engine, input, transforms, size = new Vector2(input.width, input.height), display_labels = true }) {
+
+    const GAP_SIZE = 4;
 
     let draw_index = 0;
 
+    const viewport_width = window.innerWidth;
+    const tiles_x = Math.floor(viewport_width / (size.x + GAP_SIZE));
+
     for (let i = 0; i < transforms.length; i++) {
         const out = input.clone();
 
@@ -24,21 +36,33 @@ function grid(engine, input, transforms, size = new Vector2(input.width, input.h
             skip: false
         };
 
+        const t0 = performance.now();
+
         try {
             transforms[i](out, input, params);
         } catch (e) {
             // error, skip
+            console.error(`Failed '${params.label}'. Reason: ${e.message}`)
         }
 
+        const t1 = performance.now();
+
         if (params.skip) {
             continue;
         }
 
+        const t_duration = t1 - t0;
+
+        console.log(`Executed ${params.label} in ${t_duration}ms`);
 
-        const view = display(engine, out, draw_index * (size.x + 4), 0);
 
-        if (params.label.length > 0) {
-            view.addChild(new LabelView(params.label, {
+        const draw_x = (draw_index % tiles_x) * (size.x + GAP_SIZE);
+        const draw_y = Math.floor(draw_index / tiles_x) * (size.y + GAP_SIZE);
+
+        const view = display(engine, out, draw_x, draw_y);
+
+        if (params.label.length > 0 && display_labels) {
+            const vLabel = new LabelView(params.label, {
                 css: {
                     position: 'absolute',
                     fontFamily: 'sans-serif',
@@ -51,7 +75,9 @@ function grid(engine, input, transforms, size = new Vector2(input.width, input.h
                     background: 'rgba(255,255,255,0.7)',
                     padding: '2px'
                 }
-            }));
+            });
+
+            view.addChild(vLabel);
         }
 
         draw_index++;
@@ -95,16 +121,22 @@ new EngineHarness().initialize({
     }
 }).then(async engine => {
 
-    // const asset = await engine.assetManager.promise("data/textures/utility/Lenna.png", 'image');
-    // const asset = await engine.assetManager.promise("data/textures/utility/uv_map_reference.jpg", 'image');
-    const asset = await engine.assetManager.promise("data/textures/utility/image018.jpg", 'image');
-    // const asset = await engine.assetManager.promise("data/textures/utility/TESTIMAGES/SAMPLING/8BIT/RGB/2448x2448/SRC/img_2448x2448_3x8bit_SRC_RGB_clips.png", 'image');
-    // const asset = await engine.assetManager.promise("data/textures/utility/TESTIMAGES/SAMPLING/8BIT/RGB/2448x2448/SRC/img_2448x2448_3x8bit_SRC_RGB_coins.png", 'image');
-    // const asset = await engine.assetManager.promise("data/models/LowPolyTownshipSet/Small_house/diffuse_512.png", 'image');
-    // const asset = await engine.assetManager.promise("data/models/LowPolyTownshipSet/Barrel/diffuse_256.png", 'image');
-    // const asset = await engine.assetManager.promise("data/textures/utility/resolver.jpeg", 'image');
-    // const asset = await engine.assetManager.promise("data/textures/icons/500_skill_icons_02/Skill_nobg/skill_492_noBG.png", 'image');
-    // const asset = await engine.assetManager.promise("data/textures/utility/sampling-test.png", 'image');
+    // const path = "data/textures/utility/image018.jpg";
+    // const path = "data/textures/decal/ISO 7010 - Safety Signs/Fire Protection/200px/F001 – Fire extinguisher.png";
+    // const path = "data/textures/decal/ISO 7010 - Safety Signs/Prohibited Actions/400px/P069 - Not to be serviced by users.png";
+    const path = "data/textures/utility/Lenna.png";
+    // const path = "data/textures/utility/dragon.jpg";
+    // const path = "data/textures/utility/grid_tileable.png";
+    // const path = "data/textures/utility/uv_map_reference.jpg";
+    // const path ="data/textures/utility/TESTIMAGES/SAMPLING/8BIT/RGB/2448x2448/SRC/img_2448x2448_3x8bit_SRC_RGB_clips.png";
+    // const path ="data/textures/utility/TESTIMAGES/SAMPLING/8BIT/RGB/2448x2448/SRC/img_2448x2448_3x8bit_SRC_RGB_coins.png";
+    // const path ="data/models/LowPolyTownshipSet/Small_house/diffuse_512.png";
+    // const path ="data/models/LowPolyTownshipSet/Barrel/diffuse_256.png";
+    // const path ="data/textures/utility/resolver.jpeg";
+    // const path ="data/textures/icons/500_skill_icons_02/Skill_nobg/skill_492_noBG.png";
+    // const path = "data/textures/utility/sampling-test.png";
+
+    const asset = await engine.assetManager.promise(path, 'image');
 
     const source = asset.create();
 
@@ -144,109 +176,178 @@ new EngineHarness().initialize({
 })
 
 function test_sampling(source, engine) {
-    grid(engine, source, [
-        (out, input, params) => {
-            params.label = 'Nearest';
+    grid({
+        engine: engine,
+        input: source,
+        // display_labels: false,
+        transforms: [
+            (out, input, params) => {
+                params.label = 'Nearest';
 
-            const sample = [];
-            for (let y = 0; y < out.height; y++) {
+                const sample = [];
+                for (let y = 0; y < out.height; y++) {
 
-                for (let x = 0; x < out.width; x++) {
+                    for (let x = 0; x < out.width; x++) {
 
-                    input.sampleNearestUV(x / (out.width - 1), y / (out.height - 1), sample);
+                        input.sampleNearestUV(x / (out.width - 1), y / (out.height - 1), sample);
 
-                    out.set(x, y, sample);
+                        out.set(x, y, sample);
+                    }
                 }
-            }
-        },
-        (out, input, params) => {
+            },
+            (out, input, params) => {
 
-            params.label = 'Bilinear';
-            params.skip = true;
+                params.label = 'Bilinear';
+                params.skip = true;
 
-            const sample = new Uint8ClampedArray(4);
-            for (let y = 0; y < out.height; y++) {
+                return;
 
-                for (let x = 0; x < out.width; x++) {
+                const sample = new Uint8ClampedArray(4);
+                for (let y = 0; y < out.height; y++) {
 
-                    input.sampleBilinearUV(x / (out.width - 1), y / (out.height - 1), sample);
+                    for (let x = 0; x < out.width; x++) {
 
-                    out.set(x, y, sample);
+                        input.sampleBilinearUV(x / (out.width - 1), y / (out.height - 1), sample);
+
+                        out.set(x, y, sample);
+                    }
                 }
-            }
-        },
-        (out, input, params) => {
-            params.label = 'Bicubic';
-            params.skip = true;
+            },
+            (out, input, params) => {
+                params.label = 'Bicubic';
+                params.skip = true;
+
+                return;
 
-            const sample = new Uint8ClampedArray(4);
-            for (let y = 0; y < out.height; y++) {
+                const sample = new Uint8ClampedArray(4);
+                for (let y = 0; y < out.height; y++) {
 
-                for (let x = 0; x < out.width; x++) {
+                    for (let x = 0; x < out.width; x++) {
 
-                    input.sampleBicubicUV(x / (out.width - 1), y / (out.height - 1), sample);
+                        input.sampleBicubicUV(x / (out.width - 1), y / (out.height - 1), sample);
 
-                    out.set(x, y, sample);
+                        out.set(x, y, sample);
+                    }
                 }
-            }
-        },
-        (out, input, params) => {
-            params.label = 'catmull-rom';
-            params.skip = true;
+            },
+            (out, input, params) => {
+                params.label = 'catmull-rom';
+                params.skip = true;
+
+                return;
 
-            const sample = new Uint8ClampedArray(4);
-            for (let y = 0; y < out.height; y++) {
+                const sample = new Uint8ClampedArray(4);
+                for (let y = 0; y < out.height; y++) {
 
-                for (let x = 0; x < out.width; x++) {
+                    for (let x = 0; x < out.width; x++) {
 
-                    input.sampleCatmullRomUV(x / (out.width - 1), y / (out.height - 1), sample);
+                        input.sampleCatmullRomUV(x / (out.width - 1), y / (out.height - 1), sample);
 
-                    out.set(x, y, sample);
+                        out.set(x, y, sample);
+                    }
                 }
-            }
-        },
-        (out, input, params) => {
-            params.label = 'mip';
+            },
+            (out, input, params) => {
+                params.label = 'mip';
 
 
-            sampler2d_downsample_mipmap(input, out);
+                sampler2d_downsample_mipmap(input, out);
 
-        },
-        (out, input, params) => {
-            const lobes = 2;
-            params.label = `lanczos_${lobes}`;
-            params.skip = true;
+            },
+            (out, input, params) => {
+                const lobes = 2;
+                params.label = `lanczos_${lobes}`;
+                // params.skip = true;
 
-            return;
+                // return;
 
-            sampler2D_scale_down_lanczos(input, out, lobes);
+                sampler2D_scale_down_lanczos(input, out, lobes);
 
-        },
-        (out, input, params) => {
-            const lobes = 3;
-            params.label = `lanczos_${lobes}`;
+            },
+            (out, input, params) => {
+                const lobes = 3;
+                params.label = `lanczos_${lobes}`;
+                params.skip = true;
 
+                return;
 
-            sampler2D_scale_down_lanczos(input, out, lobes);
 
-        },
-        (out, input, params) => {
-            const lobes = 5;
-            params.skip = true;
-            params.label = `lanczos_${lobes}`;
+                sampler2d_scale_down_generic(input, out, filter_lanczos3, 3);
+                // sampler2D_scale_down_lanczos(input, out, lobes);
 
-            return;
+            },
+            (out, input, params) => {
+                const lobes = 5;
+                params.label = `lanczos_${lobes}`;
+                params.skip = true;
 
-            sampler2D_scale_down_lanczos(input, out, lobes);
+                return;
 
-        }
-    ], new Vector2(
-        // 100, 100
-        1024, 1024
-        // 136, 136
-    ));
-}
+                sampler2D_scale_down_lanczos(input, out, lobes);
+
+            },
+            (out, input, params) => {
+                params.label = `mitchell`;
+                // params.skip = true;
 
-function lanczos() {
+                // return;
 
+                sampler2d_scale_down_generic(input, out, mitchell_v1);
+
+            },
+            (out, input, params) => {
+                params.label = `kaiser_3`;
+                // params.skip = true;
+
+                // return;
+
+                sampler2d_scale_down_generic(input, out, kaiser_bessel_window);
+
+            },
+            (out, input, params) => {
+                params.label = `kaiser_1`;
+                // params.skip = true;
+
+                // return;
+
+                sampler2d_scale_down_generic(input, out, kaiser_1);
+
+            },
+            (out, input, params) => {
+                params.label = `triangle`;
+                // params.skip = true;
+
+                // return;
+
+                sampler2d_scale_down_generic(input, out, triangle);
+
+            },
+            (out, input, params) => {
+                params.label = `box`;
+                // params.skip = true;
+
+                // return;
+
+                sampler2d_scale_down_generic(input, out, box);
+
+            },
+            (out, input, params) => {
+                params.label = `gaussian`;
+                // params.skip = true;
+
+                // return;
+
+                sampler2d_scale_down_generic(input, out, gaussian);
+
+            }
+        ], size: new Vector2(
+            // 100, 100
+            // 1024, 1024
+            136, 136
+            // 64, 64
+            // 32,32
+            // 400,400
+            // 200, 200
+        )
+    });
 }

package/engine/graphics/texture/sampler/sampler2_d_scale_down_lanczos.js

@@ -23,23 +23,63 @@ function lanczos(x, lobes) {
         return 0;
     }
 
-    if (x < 1e-16) {
+    if (x < 1.1920929e-7) {
         return 1;
     }
 
+    x *= Math.PI;
+
     const xx = x / lobes;
 
-    return Math.sin(Math.PI * x) * Math.sin(Math.PI * xx) / (x * x);
+    return (Math.sin(x) / x) * Math.sin(xx) / (xx);
+}
+
+/**
+ * Original formulation version from wiki
+ * @see https://en.wikipedia.org/wiki/Lanczos_resampling
+ * Calculate lanczos weight
+ * @param {number} x
+ * @param {number} lobes
+ * @returns {number}
+ */
+function lanczos_orig(x, lobes) {
+
+    /*
+    // not needed in our case, as X is always positive
+    if (x < 0) {
+        x = -x;
+    }
+
+     */
+
+    if (x > lobes) {
+        return 0;
+    }
+
+    if (x < 1.1920929e-7) {
+        return 1;
+    }
+
+    return (lobes * Math.sin(Math.PI * x) * Math.sin(Math.PI * x / lobes)) / (Math.PI * Math.PI * x * x);
 }
 
-export function filter_lanczos3(t) {
-    if (t < 0) {
-        t = -t;
+export function filter_lanczos3(x) {
+    // assume the input is positive
+
+    // if (x < 0) {
+    //     x = -x;
+    // }
+
+    if (x > 3) {
+        return 0;
     }
-    if (t < 3.0) {
-        return Math.sin(t) * Math.sin(t / 3.0);
+
+    if (x < 1.1920929e-7) {
+        return 1;
     }
-    return 0.0;
+
+    return (3 * Math.sin(Math.PI * x) * Math.sin(Math.PI * x / 3)) / (Math.PI * Math.PI * x * x);
+
 }
 
 filter_lanczos3.support = 3;
@@ -51,7 +91,7 @@ filter_lanczos3.support = 3;
  * @param {Sampler2D} destination
  * @param {number} [lobes]
  */
-export function sampler2D_scale_down_lanczos(source, destination, lobes = 3) {
+export function sampler2D_scale_down_lanczos(source, destination, lobes = 2) {
 
     const d_w = destination.width;
     const d_h = destination.height;
@@ -61,15 +101,22 @@ export function sampler2D_scale_down_lanczos(source, destination, lobes = 3) {
     const source_width = source.width;
     const source_height = source.height;
 
+    if (source_width < d_w || source_height < d_h) {
+        throw new Error('Invalid scale, source is larger than destination in at least 1 dimension');
+    }
+
     const source_data = source.data;
     const destination_data = destination.data;
 
     const ratio_x = source_width / d_w;
     const ratio_y = source_height / d_h;
 
+    const rcp_ratio_y = 2 / ratio_x;
+    const rcp_ratio_x = 2 / ratio_x;
+
 
-    const range2_x = Math.ceil(ratio_x * lobes / 2);
-    const range2_y = Math.ceil(ratio_y * lobes / 2);
+    const range2_x = Math.ceil(ratio_x * lobes * 0.5);
+    const range2_y = Math.ceil(ratio_y * lobes * 0.5);
 
     const sample = new Array(item_size);
 
@@ -77,17 +124,20 @@ export function sampler2D_scale_down_lanczos(source, destination, lobes = 3) {
 
     for (v = 0; v < d_h; v++) {
 
-        const center_y = (v) * ratio_y - 0.5;
-        const source_y0 = max2(Math.ceil(center_y - range2_y), 0);
-        const source_y1 = min2(Math.floor(center_y + range2_y), source_height - 1);
+        const center_y = (v + 0.5) * ratio_y;
+        const i_center_y = Math.floor(center_y);
+        //
+        const source_y0 = max2(0, i_center_y - range2_y);
+        const source_y1 = min2(i_center_y + range2_y, source_height - 1);
 
         for (u = 0; u < d_w; u++) {
-            const center_x = (u) * ratio_x - 0.5;
+            const center_x = (u + 0.5) * ratio_x;
+            const i_center_x = Math.floor(center_x);
 
-            const source_x0 = max2(Math.ceil(center_x - range2_x), 0);
-            const source_x1 = min2(Math.floor(center_x + range2_x), source_width - 1);
+            const source_x0 = max2(i_center_x - range2_x, 0);
+            const source_x1 = min2(i_center_x + range2_x, source_width - 1);
 
-            let z = 0;
+            let weight_sum = 0;
             // reset sample
             for (i = 0; i < item_size; i++) {
                 sample[i] = 0;
@@ -97,29 +147,31 @@ export function sampler2D_scale_down_lanczos(source, destination, lobes = 3) {
 
                 const f_y = (j - center_y);
 
-                const f_y_rcp2 = f_y * f_y;
+                const f_y_rcp = f_y * rcp_ratio_y;
+                const f_y_rcp2 = f_y_rcp * f_y_rcp;
 
                 for (i = source_x0; i <= source_x1; i++) {
 
                     const f_x = (i - center_x);
 
-                    const f_x_rcp2 = f_x * f_x;
+                    const f_x_rcp = f_x * rcp_ratio_x;
+                    const f_x_rcp2 = f_x_rcp * f_x_rcp;
 
                     const distance_from_center_sqr = f_x_rcp2 + f_y_rcp2;
                     const distance_from_center = Math.sqrt(distance_from_center_sqr);
 
-                    const lanczos_weight = lanczos(distance_from_center, lobes);
+                    const weight = lanczos(distance_from_center, lobes);
 
-                    if (lanczos_weight <= 0) {
+                    if (weight <= 0) {
                         continue;
                     }
 
-                    z += lanczos_weight;
+                    weight_sum += weight;
 
                     const source_texel_address = (j * source_width + i) * item_size;
 
                     for (k = 0; k < item_size; k++) {
-                        sample[k] += lanczos_weight * source_data[source_texel_address + k];
+                        sample[k] += weight * source_data[source_texel_address + k];
                     }
 
                 }
@@ -127,7 +179,7 @@ export function sampler2D_scale_down_lanczos(source, destination, lobes = 3) {
 
 
             // dilute sample and write to destination
-            const inv_z = 1 / z;
+            const inv_z = 1 / weight_sum;
 
             const texel_address = (v * d_w + u) * item_size;
 

package/engine/graphics/texture/sampler/search/make_edge_condition_channel_threshold.js

@@ -0,0 +1,34 @@
+/**
+ * Edge detection condition generator
+ * @param {number} channel
+ * @param {number} threshold
+ * @returns {(sampler:Sampler2D, x:number, y:number) => boolean}
+ */
+export function make_edge_condition_channel_threshold(channel, threshold) {
+    /**
+     * @param {Sampler2D} sampler
+     * @param {number} x
+     * @param {number} y
+     * @returns {boolean}
+     */
+    return function (sampler, x, y) {
+        const v = sampler.readChannel(x, y, channel);
+
+        if (v < threshold) {
+            return false;
+        }
+
+        if (
+            (y > 0 && sampler.readChannel(x, y - 1, channel) < threshold) // up
+            || (x > 0 && sampler.readChannel(x - 1, y, channel) < threshold) //left
+            || (x < (sampler.width - 1) && sampler.readChannel(x + 1, y, channel) < threshold) //right
+            || (y < (sampler.height - 1) && sampler.readChannel(x, y + 1, channel) < threshold) //bottom
+        ) {
+            return true;
+        }
+
+
+        // not edge, probably interior
+        return false;
+    }
+}

package/engine/graphics/texture/sampler/search/sampler2d_find_pixels.js

@@ -0,0 +1,24 @@
+/**
+ *
+ * @param {Sampler2D} sampler
+ * @param {(sampler:Sampler2D,x:number, y:number)=>boolean} matcher
+ * @returns {number[]} flat array of x,y coordinates
+ */
+export function sampler2d_find_pixels(sampler, matcher) {
+    const result = [];
+
+    const h = sampler.height;
+    const w = sampler.width;
+
+    for (let y = 0; y < h; y++) {
+        for (let x = 0; x < w; x++) {
+
+            if (matcher(sampler, x, y)) {
+                result.push(x, y);
+            }
+
+        }
+    }
+
+    return result;
+}