@woosh/meep-engine 2.87.5 → 2.88.0

package/src/core/geom/2d/hash-grid/SpatialHashGrid.spec.js

@@ -115,7 +115,7 @@ test("add 3 element and remove in same order, expect grid to be empty", () => {
     expect(grid.is_cell_empty(1, 1)).toBe(true);
 });
 
-test.skip("performance, insertion 1m random", () => {
+test.skip("query performance, line insertion 1m random", () => {
     const grid = new SpatialHashGrid(100, 100, 1);
 
     const random = seededRandom(42);
@@ -154,5 +154,101 @@ test.skip("performance, insertion 1m random", () => {
 
     const duration = performance.now() - t0;
 
-    console.log(`Duration ${duration}ms, ${(N / (duration * 1e-3)).toFixed(2)} records per second`);
+    const duration_seconds = duration * 1e-3;
+
+    console.log(`Duration ${duration_seconds}s, ${(N / duration_seconds).toFixed(2)} records per second`);
+});
+test("remove element from grid", () => {
+
+    const grid = new SpatialHashGrid(2, 2, 4);
+
+    const el = grid.element_allocate();
+
+    grid.element_set_user_data(el, 7);
+    grid.element_set_bounds_primitive(el, 0.5, 0.5, 1, 1);
+
+    grid.element_insert(el);
+    grid.element_remove(el);
+
+    expect(grid.is_cell_empty(0, 0)).toBe(true);
+    expect(grid.is_cell_empty(0, 1)).toBe(true);
+    expect(grid.is_cell_empty(1, 0)).toBe(true);
+    expect(grid.is_cell_empty(1, 1)).toBe(true);
+});
+
+test("add 3 element and remove in same order, expect grid to be empty", () => {
+
+    const grid = new SpatialHashGrid(2, 2, 4);
+
+    const a = grid.element_allocate();
+
+    grid.element_set_user_data(a, 3);
+    grid.element_set_bounds_primitive(a, 0.5, 0.5, 1, 1);
+
+    const b = grid.element_allocate();
+
+    grid.element_set_user_data(b, 7);
+    grid.element_set_bounds_primitive(b, 0.5, 0.5, 1, 1);
+
+    const c = grid.element_allocate();
+
+    grid.element_set_user_data(c, 11);
+    grid.element_set_bounds_primitive(c, 0.5, 0.5, 1, 1);
+
+    grid.element_insert(a);
+    grid.element_insert(b);
+    grid.element_insert(c);
+
+    grid.element_remove(a);
+    grid.element_remove(b);
+    grid.element_remove(c);
+
+    expect(grid.is_cell_empty(0, 0)).toBe(true);
+    expect(grid.is_cell_empty(0, 1)).toBe(true);
+    expect(grid.is_cell_empty(1, 0)).toBe(true);
+    expect(grid.is_cell_empty(1, 1)).toBe(true);
+});
+
+test("performance, insertion 1m random", () => {
+    const grid = new SpatialHashGrid(100, 100, 1);
+
+    const random = seededRandom(42);
+
+    const N = 1000000;
+
+    const elements = new Uint32Array(N);
+
+    for (let i = 0; i < N; i++) {
+
+        const position_x = randomFloatBetween(random, 0, 98);
+        const position_y = randomFloatBetween(random, 0, 98);
+
+        const size_x = randomFloatBetween(random, 0.1, 2);
+        const size_y = randomFloatBetween(random, 0.1, 2);
+
+        const element = grid.element_allocate();
+
+        grid.element_set_user_data(element, i);
+        grid.element_set_bounds_primitive(element,
+            position_x,
+            position_y,
+            position_x + size_x,
+            position_y + size_y
+        );
+
+        elements[i] = element;
+    }
+
+    // perform insertion
+    const t0 = performance.now();
+
+    for (let i = 0; i < N; i++) {
+        grid.element_insert(elements[i]);
+    }
+
+    const duration = performance.now() - t0;
+
+    const duration_seconds = duration * 1e-3;
+
+    console.log(`Duration ${duration_seconds}s, ${(N / duration_seconds).toFixed(2)} records per second`);
 });

package/src/core/geom/2d/hash-grid/prototypeGridQueries.d.ts

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

package/src/core/geom/2d/hash-grid/prototypeGridQueries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prototypeGridQueries.d.ts","sourceRoot":"","sources":["../../../../../../src/core/geom/2d/hash-grid/prototypeGridQueries.js"],"names":[],"mappings":""}

package/src/core/geom/2d/hash-grid/prototypeGridQueries.js

@@ -0,0 +1,387 @@
+import requestAnimationFrame from "dat.gui/src/dat/utils/requestAnimationFrame.js";
+import { canvas2d_draw_grid } from "../../../../engine/graphics/canvas/canvas2d_draw_grid.js";
+import { MouseEvents } from "../../../../engine/input/devices/events/MouseEvents.js";
+import { PointerDevice } from "../../../../engine/input/devices/PointerDevice.js";
+import { CanvasView } from "../../../../view/elements/CanvasView.js";
+import { FLT_EPSILON_32 } from "../../../math/FLT_EPSILON_32.js";
+import { randomIntegerBetween } from "../../../math/random/randomIntegerBetween.js";
+import { seededRandom } from "../../../math/random/seededRandom.js";
+import { aabb2_clip_line_cohen_sutherland } from "../aabb/aabb2_clip_line_cohen_sutherland.js";
+import { shg_query_elements_circle } from "./shg_query_elements_circle.js";
+import { shg_query_elements_line } from "./shg_query_elements_line.js";
+import { SpatialHashGrid } from "./SpatialHashGrid.js";
+
+
+const canvas = new CanvasView();
+
+canvas.size.set(window.innerWidth, window.innerHeight);
+
+canvas.link();
+
+document.body.style.margin = 0;
+document.body.style.overflow = "hidden";
+document.body.appendChild(canvas.el);
+
+const selected_boxes = [1, 3, 9]
+
+const grid = new SpatialHashGrid(16, 16, 32);
+
+const render_scale = 2;
+
+const BOX_COUNT = 50;
+
+const boxes = new Float32Array(BOX_COUNT * 4);
+
+const random = seededRandom();
+
+function populate_boxes(
+    random,
+    bounds_x0, bounds_y0, bounds_x1, bounds_y1
+) {
+
+    for (let i = 0; i < BOX_COUNT; i++) {
+
+        const offset = i * 4;
+
+
+        const width = randomIntegerBetween(random, 10, 20);
+        const height = randomIntegerBetween(random, 10, 20);
+
+        const x0 = randomIntegerBetween(random, Math.ceil(bounds_x0), Math.floor(bounds_x1 - width));
+        const y0 = randomIntegerBetween(random, Math.ceil(bounds_y0), Math.floor(bounds_y1 - height));
+
+        const x1 = x0 + width;
+        const y1 = y0 + height;
+
+        boxes[offset] = x0;
+        boxes[offset + 1] = y0;
+        boxes[offset + 2] = x1;
+        boxes[offset + 3] = y1;
+
+        // add box to grid
+        const box = grid.element_allocate();
+
+        grid.element_set_user_data(box, i);
+        grid.element_set_bounds_primitive(box, x0, y0, x1, y1);
+
+        grid.element_insert(box);
+
+    }
+}
+
+function init() {
+    populate_boxes(
+        random,
+        0, 0,
+        grid.size_x * grid.scale, grid.size_y * grid.scale
+    );
+
+    query.link(canvas);
+
+}
+
+function render_boxes() {
+    const ctx = canvas.context2d;
+
+    // draw background boxes
+
+    for (let i = 0; i < BOX_COUNT; i++) {
+
+        if (selected_boxes.includes(i)) {
+            continue;
+        }
+
+        const offset = i * 4;
+        const x0 = boxes[offset] * render_scale;
+        const y0 = boxes[offset + 1] * render_scale;
+        const x1 = boxes[offset + 2] * render_scale;
+        const y1 = boxes[offset + 3] * render_scale;
+
+        const w = x1 - x0;
+        const h = y1 - y0;
+
+        ctx.fillStyle = "rgba(0,184,255,1)";
+        ctx.fillRect(x0, y0, w, h);
+
+    }
+
+    // draw selected boxes
+
+    for (let i = 0; i < BOX_COUNT; i++) {
+        if (!selected_boxes.includes(i)) {
+            continue;
+        }
+
+        const offset = i * 4;
+        const x0 = boxes[offset] * render_scale;
+        const y0 = boxes[offset + 1] * render_scale;
+        const x1 = boxes[offset + 2] * render_scale;
+        const y1 = boxes[offset + 3] * render_scale;
+
+        const w = x1 - x0;
+        const h = y1 - y0;
+
+        ctx.fillStyle = "rgba(238,0,255,1)";
+        // ctx.strokeStyle = "rgb(238,0,255)";
+        // ctx.lineWidth = 4;
+
+        // ctx.strokeRect(x0, y0, w, h);
+        ctx.fillRect(x0, y0, w, h);
+
+    }
+}
+
+function render_grid() {
+    const scale = grid.scale * render_scale;
+    canvas2d_draw_grid({
+        ctx: canvas.context2d,
+        width: grid.size_x * scale + 1,
+        height: grid.size_y * scale + 1,
+        spacing: scale,
+        color: "rgba(0,0,0,0.2)"
+    });
+}
+
+class Query {
+    #view = null
+
+    /**
+     *
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {SpatialHashGrid} grid
+     * @param {number} render_scale
+     */
+    render(ctx, grid, render_scale) {
+
+    }
+
+    /**
+     *
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {SpatialHashGrid} grid
+     * @param {number} render_scale
+     */
+    render_debug(ctx, grid, render_scale) {
+
+    }
+
+    /**
+     *
+     * @param {number[]} result
+     * @param {number} result_offset
+     * @param {SpatialHashGrid} grid
+     * @returns {number}
+     */
+    run(result, result_offset, grid) {
+        return 0;
+    }
+
+    /**
+     *
+     * @param {View} view
+     */
+    link(view) {
+        if (this.#view !== view) {
+            this.unlink();
+        }
+
+        this.#view = view;
+    }
+
+    unlink() {
+        this.#view = null;
+    }
+}
+
+class LineQuery extends Query {
+    #line = [0, 0, 0, 0];
+
+    render_debug(ctx, grid, render_scale) {
+
+        const visited = shg_query_elements_line.visited;
+        if (visited === undefined) {
+            return;
+        }
+        const n = visited.length;
+
+        const scale = grid.scale * render_scale;
+
+        for (let i = 0; i < n; i += 2) {
+            const x = visited[i];
+            const y = visited[i + 1];
+
+            ctx.fillStyle = "rgba(0,0,255,0.3)";
+
+            ctx.fillRect(x * scale, y * scale, scale, scale);
+        }
+
+    }
+
+    render(ctx, grid, render_scale) {
+        const line = this.#line;
+
+
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = "rgb(255,47,0)";
+
+        ctx.beginPath();
+        ctx.moveTo(line[0] * render_scale, line[1] * render_scale);
+        ctx.lineTo(line[2] * render_scale, line[3] * render_scale);
+        ctx.closePath();
+        ctx.stroke();
+    }
+
+    run(result, result_offset, grid) {
+        const line = this.#line;
+        const clipped_line = [];
+
+        if (!aabb2_clip_line_cohen_sutherland(
+            clipped_line, 0,
+            0, 0, grid.size_x * grid.scale - FLT_EPSILON_32, grid.size_y * grid.scale - FLT_EPSILON_32,
+            line[0], line[1], line[2], line[3]
+        )) {
+            // line is outsize of the grid
+            return 0;
+        }
+
+        const els = [];
+        const hits = shg_query_elements_line(
+            els, 0,
+            grid,
+            clipped_line[0], clipped_line[1],
+            clipped_line[2], clipped_line[3]
+        );
+
+
+        for (let i = 0; i < hits; i++) {
+            const id = grid.element_get_user_data(els[i]);
+
+            result[i + result_offset] = id;
+        }
+
+        return hits;
+    }
+
+    link(view) {
+        super.link(view);
+
+        const line = this.#line;
+        let anchor = 0;
+
+        view.el.addEventListener(MouseEvents.Click, (evt) => {
+            const index = anchor * 2;
+
+            line[index + 0] = evt.clientX / render_scale;
+            line[index + 1] = evt.clientY / render_scale;
+
+            anchor = (anchor + 1) % 2;
+        });
+
+    }
+}
+
+class CircleQuery extends Query {
+    #circle = [0, 0, 0];
+
+    link(view) {
+        super.link(view);
+
+        const pointer = new PointerDevice(view.el);
+
+        pointer.start();
+
+        pointer.on.drag.add((position, origin) => {
+            this.#circle[0] = origin.x / render_scale;
+            this.#circle[1] = origin.y / render_scale;
+
+            this.#circle[2] = position.distanceTo(origin) / render_scale;
+        });
+    }
+
+    render_debug(ctx, grid, render_scale) {
+
+        const visited = shg_query_elements_circle.visited;
+        if (visited === undefined) {
+            return;
+        }
+        const n = visited.length;
+
+        const scale = grid.scale * render_scale;
+
+        for (let i = 0; i < n; i += 2) {
+            const x = visited[i];
+            const y = visited[i + 1];
+
+            ctx.fillStyle = "rgba(0,0,255,0.3)";
+
+            ctx.fillRect(x * scale, y * scale, scale, scale);
+        }
+
+    }
+
+    render(ctx, grid, render_scale) {
+
+        const c = this.#circle;
+        ctx.beginPath();
+        ctx.arc(c[0] * render_scale, c[1] * render_scale, c[2] * render_scale, 0, Math.PI * 2);
+        ctx.closePath();
+
+        ctx.lineWidth = 3;
+        ctx.strokeStyle = "red";
+        ctx.stroke();
+
+    }
+
+    run(result, result_offset, grid) {
+        const els = [];
+        const hits = shg_query_elements_circle(
+            els, 0,
+            grid,
+            this.#circle[0], this.#circle[1],
+            this.#circle[2]
+        );
+
+
+        for (let i = 0; i < hits; i++) {
+            const id = grid.element_get_user_data(els[i]);
+
+            result[i + result_offset] = id;
+        }
+
+        return hits;
+    }
+}
+
+const query = new CircleQuery();
+// const query = new LineQuery();
+
+function render() {
+
+    canvas.context2d.clearRect(0, 0, canvas.size.x, canvas.size.y);
+
+    render_grid();
+    query.render_debug(canvas.context2d, grid, render_scale);
+    render_boxes();
+    query.render(canvas.context2d, grid, render_scale);
+}
+
+
+function update() {
+
+    requestAnimationFrame(update);
+
+    selected_boxes.splice(0, selected_boxes.length)
+
+    query.run(selected_boxes, 0, grid);
+
+    render();
+}
+
+init();
+update();
+
+window.addEventListener("resize", () => {
+
+    canvas.size.set(window.innerWidth, window.innerHeight);
+
+});

package/src/core/geom/2d/hash-grid/shg_query_elements_circle.d.ts

@@ -0,0 +1,12 @@
+/**
+ *
+ * @param {number[]} result
+ * @param {number} result_offset
+ * @param {SpatialHashGrid} grid
+ * @param {number} center_x
+ * @param {number} center_y
+ * @param {number} radius
+ * @returns {number}
+ */
+export function shg_query_elements_circle(result: number[], result_offset: number, grid: SpatialHashGrid, center_x: number, center_y: number, radius: number): number;
+//# sourceMappingURL=shg_query_elements_circle.d.ts.map

package/src/core/geom/2d/hash-grid/shg_query_elements_circle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shg_query_elements_circle.d.ts","sourceRoot":"","sources":["../../../../../../src/core/geom/2d/hash-grid/shg_query_elements_circle.js"],"names":[],"mappings":"AA4CA;;;;;;;;;GASG;AACH,kDARW,MAAM,EAAE,iBACR,MAAM,mCAEN,MAAM,YACN,MAAM,UACN,MAAM,GACJ,MAAM,CAyGlB"}

package/src/core/geom/2d/hash-grid/shg_query_elements_circle.js

@@ -0,0 +1,160 @@
+import { fabsf } from "../../../math/fabsf.js";
+import { max2 } from "../../../math/max2.js";
+import { min2 } from "../../../math/min2.js";
+import { aabb2_distance_sqr_to_point } from "../aabb/aabb2_distance_sqr_to_point.js";
+import {
+    COLUMN_ELEMENT_X0,
+    COLUMN_ELEMENT_X1,
+    COLUMN_ELEMENT_Y0,
+    COLUMN_ELEMENT_Y1,
+    NULL_POINTER
+} from "./SpatialHashGrid.js";
+
+/**
+ * @see https://stackoverflow.com/questions/47639413/algorithm-for-accurate-detection-of-overlap-between-a-square-and-a-circle
+ * @param square_center_x
+ * @param square_center_y
+ * @param circle_center_x
+ * @param circle_center_y
+ * @param circle_radius
+ * @return {boolean}
+ */
+function unit_square_intersects_circle(
+    square_center_x,
+    square_center_y,
+    circle_center_x,
+    circle_center_y,
+    circle_radius
+) {
+
+    const x = fabsf(circle_center_x - square_center_x) - 0.5;
+    const y = fabsf(circle_center_y - square_center_y) - 0.5;
+
+    if (x > 0) {
+        if (y > 0) {
+            return x * x + y * y < circle_radius * circle_radius;
+        } else {
+            return x < circle_radius;
+        }
+    } else {
+        return y < circle_radius;
+    }
+
+}
+
+/**
+ *
+ * @param {number[]} result
+ * @param {number} result_offset
+ * @param {SpatialHashGrid} grid
+ * @param {number} center_x
+ * @param {number} center_y
+ * @param {number} radius
+ * @returns {number}
+ */
+export function shg_query_elements_circle(
+    result, result_offset,
+    grid,
+    center_x, center_y,
+    radius
+) {
+
+    // shg_query_elements_circle.visited.splice(0, shg_query_elements_circle.visited.length); // DEBUG
+
+    const scale_inverse = grid.scale_inverse;
+    const grid_size_x = grid.size_x;
+    const grid_size_y = grid.size_y;
+
+    // rasterize circle aabb
+
+    const grid_center_x = center_x * scale_inverse;
+    const grid_center_y = center_y * scale_inverse;
+
+    const grid_radius = radius * scale_inverse;
+
+    const aabb_x0 = max2(
+        Math.floor(grid_center_x - grid_radius),
+        0
+    );
+    const aabb_y0 = max2(
+        Math.floor(grid_center_y - grid_radius),
+        0
+    );
+
+    const aabb_x1 = min2(
+        Math.floor(grid_center_x + grid_radius),
+        grid_size_x - 1
+    );
+    const aabb_y1 = min2(
+        Math.floor(grid_center_y + grid_radius),
+        grid_size_y - 1
+    );
+
+    let result_count = 0;
+
+    const radius2 = radius * radius;
+
+    const element_pool = grid.element_pool;
+    const element_float32 = element_pool.data_float32;
+
+    for (let y = aabb_y0; y <= aabb_y1; y++) {
+        for (let x = aabb_x0; x <= aabb_x1; x++) {
+
+            if (unit_square_intersects_circle(
+                x + 0.5,
+                y + 0.5,
+                grid_center_x,
+                grid_center_y,
+                grid_radius
+            )) {
+
+                // cell is inside the circle
+
+                // shg_query_elements_circle.visited.push(x, y); // DEBUG
+
+
+                const cell_index = grid.cell_position_to_index(x, y);
+
+
+                let node = grid.cell_get_first_node(cell_index);
+
+                while (node !== NULL_POINTER) {
+
+                    const element = grid.node_get_element(node);
+
+                    // check element bounds
+                    const element_address = element_pool.element_word(element);
+
+                    const element_x0 = element_float32[element_address + COLUMN_ELEMENT_X0];
+                    const element_y0 = element_float32[element_address + COLUMN_ELEMENT_Y0];
+                    const element_x1 = element_float32[element_address + COLUMN_ELEMENT_X1];
+                    const element_y1 = element_float32[element_address + COLUMN_ELEMENT_Y1];
+
+                    const distance_to_center = aabb2_distance_sqr_to_point(
+                        element_x0, element_y0,
+                        element_x1, element_y1,
+                        center_x, center_y
+                    );
+
+                    if (distance_to_center <= radius2) {
+                        //  intersection with the element
+                        result[result_offset + result_count] = element;
+
+                        result_count++;
+                    }
+
+
+                    // read out next element in the linked list
+                    node = grid.node_get_same_cell_next_node(node);
+
+                }
+
+            }
+
+        }
+    }
+
+    return result_count;
+}
+
+// shg_query_elements_circle.visited = []; // DEBUG

package/src/core/geom/2d/hash-grid/shg_query_elements_circle.spec.d.ts

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

package/src/core/geom/2d/hash-grid/shg_query_elements_circle.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shg_query_elements_circle.spec.d.ts","sourceRoot":"","sources":["../../../../../../src/core/geom/2d/hash-grid/shg_query_elements_circle.spec.js"],"names":[],"mappings":""}