@woosh/meep-engine 2.33.23 → 2.33.27

package/engine/graphics/render/forward_plus/prototypeLightManager.js

@@ -1,11 +1,11 @@
 import {
-    Color,
-    GridHelper,
     Group,
     HemisphereLight,
     Line,
     LineBasicMaterial,
     Mesh,
+    MeshBasicMaterial,
+    OctahedronBufferGeometry,
     PerspectiveCamera,
     PlaneHelper,
     Scene,
@@ -16,12 +16,11 @@ import {
 import { min2 } from "../../../../core/math/min2.js";
 import { seededRandom } from "../../../../core/math/random/seededRandom.js";
 import { PointLight } from "./PointLight.js";
-import { randomFloatBetween } from "../../../../core/math/MathUtils.js";
 import { makeHelperSphereGeometry } from "../../../../editor/process/symbolic/makeHelperSphereGeometry.js";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { MouseEvents } from "../../../input/devices/events/MouseEvents.js";
 import { RingBuffer } from "../../../../core/collection/RingBuffer.js";
-import { queryBVH_Frustum } from "./queryBVH_Frustum.js";
+import { query_bvh_frustum_from_objects } from "./query/query_bvh_frustum_from_objects.js";
 import { prettyPrint } from "../../../../core/NumberFormat.js";
 import { FPlusDebugMaterial } from "./materials/FPlusDebugMaterial.js";
 import { parseColor } from "../../../../core/color/ColorUtils.js";
@@ -38,6 +37,13 @@ import Vector3 from "../../../../core/geom/Vector3.js";
 import { MetricCollection } from "../../../development/performance/MetricCollection.js";
 import { MetricStatistics } from "../../../development/performance/MetricStatistics.js";
 import { SpotLight } from "./SpotLight.js";
+import { randomFloatBetween } from "../../../../core/math/random/randomFloatBetween.js";
+import Signal from "../../../../core/events/signal/Signal.js";
+import SimplexNoise from "simplex-noise";
+import Stats from "three/examples/jsm/libs/stats.module.js";
+import { threeUpdateTransform } from "../../util/threeUpdateTransform.js";
+
+const on_render = new Signal();
 
 const lm = new LightManager();
 
@@ -45,7 +51,8 @@ const camera = new PerspectiveCamera(30);
 camera.position.z = 1;
 
 camera.layers.enable(3);
-camera.layers.enable(1);
+camera.layers.enable(4);
+// camera.layers.enable(1);
 
 camera.near = 1;
 camera.far = 15;
@@ -56,14 +63,19 @@ camera.updateMatrixWorld(true);
 
 // lm.setTileMapResolution(32,32,32);
 lm.setTileMapResolution(24, 14, 8);
+// lm.setTileMapResolution(16, 8, 10);
 
 console.log(lm);
+window.lights = lm;
 
 const random = seededRandom(0);
 
 const scene = new Scene();
+scene.matrixAutoUpdate = false;
+scene.autoUpdate = false;
 
-const sphere_geometry = makeHelperSphereGeometry(1);
+const sphere_geometry = new OctahedronBufferGeometry(1, 2);
+const sphere_geometry_shell = makeHelperSphereGeometry(1);
 // const sphere_geometry = new SphereBufferGeometry(1, 8, 8);
 
 // const directionalLight = new DirectionalLight(0xffffff, 0.7);
@@ -77,6 +89,7 @@ scene.add(new HemisphereLight("rgb(107,187,255)", "rgb(105,97,83)", 0.2));
 
 
 const fp_materials = [];
+const scratch_v2 = new Vector2();
 
 function getFPStandard() {
     const r = new FPlusStandardMaterial();
@@ -85,12 +98,6 @@ function getFPStandard() {
         r.attach_lights(lm);
     }
 
-    if (renderer !== undefined) {
-
-        renderer.getSize(
-            r.uniforms.resolution.value
-        );
-    }
 
     fp_materials.push(r);
 
@@ -136,6 +143,10 @@ function addKnot(position, scale, rotation) {
     group.add(mesh);
     group.add(outline);
 
+    group.matrixAutoUpdate = false;
+
+    threeUpdateTransform(group);
+
     scene.add(group);
 }
 
@@ -165,18 +176,27 @@ function addSpotLight(position, direction, color, distance = 1, angle = 1, penum
     lm.addLight(light);
 }
 
+const noise = new SimplexNoise(random);
+
 /**
  *
  * @param {number[]} position
  * @param {number} radius
  * @param {string|number} color
  * @param {number} intensity
+ * @param {boolean} wander
+ * @param {number} [wander_radius]
  */
-function addPointLight(position, radius, color, intensity = 1) {
+function addPointLight({
+                           position, radius, color, intensity = 1,
+                           wander = false,
+                           wander_radius = 5
+                       }) {
 
     const light = new PointLight();
 
-    light.position.set(
+    const p = light.position;
+    p.set(
         position[0],
         position[1],
         position[2],
@@ -199,23 +219,85 @@ function addPointLight(position, radius, color, intensity = 1) {
 
     lm.addLight(light);
 
+    // outer shell
+    const visual_group = new Group();
+
+    const color_uint = light.color.toUint();
     const sphere_material = new LineBasicMaterial({
         depthTest: true,
         depthWrite: false,
         transparent: true,
         linewidth: 1,
         fog: false,
-        color: light.color.toUint(),
+        color: color_uint,
         opacity: min2(intensity, 1)
     });
 
-    const mesh = new Line(sphere_geometry, sphere_material);
+    const mesh = new Line(sphere_geometry_shell, sphere_material);
 
     mesh.layers.set(1);
-    mesh.position.set(light.position.x, light.position.y, light.position.z);
     mesh.scale.setScalar(light.radius.getValue());
 
-    scene.add(mesh)
+    // center
+    const mesh_center_0 = new Mesh(sphere_geometry, new MeshBasicMaterial({
+        color: color_uint
+    }));
+    mesh_center_0.layers.disableAll();
+    mesh_center_0.layers.set(4);
+    mesh_center_0.scale.setScalar(0.02);
+    mesh_center_0.matrixAutoUpdate = false;
+
+    visual_group.add(mesh_center_0);
+
+    const mesh_center_1 = new Mesh(sphere_geometry, new MeshBasicMaterial({
+        color: color_uint,
+        transparent: true,
+        opacity: 0.033
+    }));
+    mesh_center_1.scale.setScalar(0.1);
+    mesh_center_1.layers.disableAll();
+    mesh_center_1.layers.set(4);
+    mesh_center_1.matrixAutoUpdate = false;
+
+    visual_group.add(mesh_center_1);
+
+
+    visual_group.add(mesh);
+    visual_group.position.set(p.x, p.y, p.z);
+
+    threeUpdateTransform(visual_group);
+    visual_group.matrixAutoUpdate = false;
+
+    scene.add(visual_group);
+
+    if (wander) {
+        const source_p_x = position[0];
+        const source_p_y = position[1];
+        const source_p_z = position[2];
+
+        on_render.add((renderer, camera, scene, time_delta, time) => {
+
+            const t = time * 0.0001;
+
+            const noise_x = noise.noise4D(source_p_x, source_p_y, source_p_z, t) * wander_radius;
+            const noise_y = noise.noise4D(source_p_x + 31.341, source_p_y - 43.23, source_p_z + 12.34, t) * wander_radius;
+            const noise_z = noise.noise4D(source_p_x - 231.141, source_p_y + 124.123, source_p_z - 54.4341, t) * wander_radius;
+
+            p.set(
+                source_p_x + noise_x,
+                source_p_y + noise_y,
+                source_p_z + noise_z,
+            );
+
+            visual_group.position.set(
+                p.x,
+                p.y,
+                p.z,
+            );
+
+            threeUpdateTransform(visual_group);
+        });
+    }
 }
 
 const box_geometry = new TorusKnotBufferGeometry(1, 0.3, 128, 128);
@@ -235,26 +317,29 @@ function prepare_scene_0() {
 
     const bounds_size = 15;
 
+    const light_radius = 5;
+
     for (let i = 0; i < 5000; i++) {
-        const radius = randomFloatBetween(random, 2, 2);
+        const radius = randomFloatBetween(random, light_radius, light_radius);
         const intensity = randomFloatBetween(random, 2, 2);
-        addPointLight([
-                randomFloatBetween(random, -bounds_size, bounds_size),
-                randomFloatBetween(random, -bounds_size, bounds_size),
-                randomFloatBetween(random, -bounds_size, bounds_size),
-            ],
-            radius,
-            `hsv(${random().toFixed(4)}, 0.8, 1)`,
-            intensity
+        addPointLight({
+                position: [
+                    randomFloatBetween(random, -bounds_size, bounds_size),
+                    randomFloatBetween(random, -bounds_size, bounds_size),
+                    randomFloatBetween(random, -bounds_size, bounds_size),
+                ], radius: radius, color: `hsv(${random().toFixed(4)}, 0.8, 1)`, intensity: intensity
+            }
         );
     }
 
+    const bounds_size_2 = 15;
+
     for (let i = 0; i < 500; i++) {
 
         addKnot([
-            randomFloatBetween(random, -bounds_size, bounds_size),
-            randomFloatBetween(random, -bounds_size, bounds_size),
-            randomFloatBetween(random, -bounds_size, bounds_size)
+            randomFloatBetween(random, -bounds_size_2, bounds_size_2),
+            randomFloatBetween(random, -bounds_size_2, bounds_size_2),
+            randomFloatBetween(random, -bounds_size_2, bounds_size_2)
         ], 0.5, [
             randomFloatBetween(random, 0, Math.PI),
             randomFloatBetween(random, 0, Math.PI),
@@ -264,10 +349,11 @@ function prepare_scene_0() {
 }
 
 function prepare_scene_1() {
-    addPointLight([
-            0, 0, -3
-        ], 1,
-        0xFF0000
+    addPointLight({
+            position: [
+                0, 0, -3
+            ], radius: 1, color: 0xFF0000
+        }
     );
 
     // tight planes around the light
@@ -279,10 +365,11 @@ function prepare_scene_1() {
 }
 
 function prepare_scene_3() {
-    addPointLight([
-            0, 0, -4
-        ], 1,
-        0xFF0000
+    addPointLight({
+            position: [
+                0, 0, -4
+            ], radius: 1, color: 0xFF0000
+        }
     );
 
     // tight planes around the light
@@ -298,17 +385,17 @@ function prepare_scene_3() {
 }
 
 function prepare_scene_2() {
-    addPointLight([
-            1.5, 0, -4
-        ], 1.5,
-        0xFF0000,
-        1
+    addPointLight({
+            position: [
+                1.5, 0, -4
+            ], radius: 1.5, color: 0xFF0000, intensity: 1
+        }
     );
-    addPointLight([
-            -1.5, 0, -4
-        ], 1.5,
-        0x00FF00,
-        1
+    addPointLight({
+            position: [
+                -1.5, 0, -4
+            ], radius: 1.5, color: 0x00FF00, intensity: 1
+        }
     );
 
     addKnot([0, 0, -5], 1, [0, 0, 0]);
@@ -325,17 +412,17 @@ function prepare_scene_5() {
     const offset = new Vector3(100, 100, 100);
 
 
-    addPointLight([
-            1.5 + offset.x, 0 + offset.y, -4 + offset.z
-        ], 1.5,
-        0xFF0000,
-        10
+    addPointLight({
+            position: [
+                1.5 + offset.x, 0 + offset.y, -4 + offset.z
+            ], radius: 1.5, color: 0xFF0000, intensity: 10
+        }
     );
-    addPointLight([
-            -1.5 + offset.x, 0 + offset.y, -4 + offset.z
-        ], 1.5,
-        0x00FF00,
-        10
+    addPointLight({
+            position: [
+                -1.5 + offset.x, 0 + offset.y, -4 + offset.z
+            ], radius: 1.5, color: 0x00FF00, intensity: 10
+        }
     );
 
     addKnot(
@@ -360,7 +447,7 @@ function prepare_scene_5() {
 function addSponza() {
     const loader = new GLTFLoader();
 
-    loader.load("data/models/sponza-pbr/sponza.glb", (gltf) => {
+    loader.load("data/models/sponza-pbr/gltf/sponza.glb", (gltf) => {
 
         gltf.scene.traverse(m => {
             if (m.isLight) {
@@ -388,6 +475,8 @@ function addSponza() {
 
         });
 
+        threeUpdateTransform(m_0);
+
         scene.add(m_0);
 
         const m_1 = gltf.scene.clone(true);
@@ -400,6 +489,8 @@ function addSponza() {
 
         });
 
+        threeUpdateTransform(m_1);
+
         scene.add(m_1);
 
     });
@@ -407,8 +498,8 @@ function addSponza() {
 
 function prepare_scene_4() {
 
-    controls.target.set(2.1731179577352857, 1.7178052208111272, -0.4444756234843362);
-    camera.position.set(-3.6592606144314597, 3.7632561258064934, -0.3287586440078351);
+    controls.target.set(2.1731179577352857, 2.4, -0.26);
+    camera.position.set(-8, 3.3, -0.26);
 
     camera.near = 1;
     camera.far = 50;
@@ -418,16 +509,19 @@ function prepare_scene_4() {
     controls.update();
 
 
-    for (let i = 0; i < 2000; i++) {
+    for (let i = 0; i < 500; i++) {
         const radius = randomFloatBetween(random, 2, 2);
-        addPointLight([
-                randomFloatBetween(random, -18, 18),
-                randomFloatBetween(random, -3, 16),
-                randomFloatBetween(random, -11, 11),
-            ],
-            radius,
-            `hsv(${random().toFixed(4)}, 0.8, 1)`,
-            randomFloatBetween(random, 3, 3)
+        addPointLight({
+                position: [
+                    randomFloatBetween(random, -17, 17),
+                    randomFloatBetween(random, -2, 13),
+                    randomFloatBetween(random, -10, 10),
+                ],
+                radius: radius,
+                color: `hsv(${random().toFixed(4)}, 0.8, 1)`,
+                intensity: randomFloatBetween(random, 6, 6),
+                wander: true
+            }
         );
     }
 
@@ -460,14 +554,13 @@ function prepare_scene_6() {
     controls.update();
 
 
-    addPointLight([
-            11,
-            1,
-            0,
-        ],
-        2,
-        `hsv(0.5, 0.8, 1)`,
-        3
+    addPointLight({
+            position: [
+                11,
+                1,
+                0,
+            ], radius: 2, color: `hsv(0.5, 0.8, 1)`, intensity: 3
+        }
     );
 
     //
@@ -531,7 +624,7 @@ fp_materials.forEach(m => {
 
     renderer.getSize(v2);
 
-    m.uniforms.resolution.value.set(
+    m.uniforms.fp_resolution.value.set(
         v2.x * window.devicePixelRatio, v2.y * window.devicePixelRatio
     );
 
@@ -541,8 +634,12 @@ camera.aspect = window.innerWidth / window.innerHeight;
 camera.updateProjectionMatrix();
 
 
-scene.add(new GridHelper());
-scene.background = new Color(0x666666);
+// scene.add(new GridHelper());
+// scene.background = new Color(0x666666);
+
+const stats = new Stats();
+stats.dom.style.cssText = 'position:fixed;top:0;right:0;cursor:pointer;opacity:0.9;z-index:10000';
+document.body.appendChild(stats.dom);
 
 const controls = new OrbitControls(camera, renderer.domElement);
 
@@ -586,10 +683,17 @@ function animate() {
     material_fp_standard.uniforms.fp_f_camera_near.value = camera.near;
     material_fp_standard.uniforms.fp_f_camera_far.value = camera.far;
 
+
+    renderer.getSize(scratch_v2);
+    scratch_v2.multiplyScalar(renderer.getPixelRatio());
+
     fp_materials.forEach(m => {
 
         m.uniforms.fp_f_camera_near.value = camera.near;
         m.uniforms.fp_f_camera_far.value = camera.far;
+
+
+        m.uniforms.fp_resolution.value.set(scratch_v2.x, scratch_v2.y);
     });
 
     lightClusterWidget.update();
@@ -597,7 +701,9 @@ function animate() {
 
     renderer.render(scene, camera);
 
+    on_render.send6(renderer, camera, scene, time_delta, t);
 
+    stats.update();
 }
 
 const metrics = new MetricCollection();
@@ -628,20 +734,20 @@ function print_perf_stats() {
 setInterval(print_perf_stats, 2000);
 
 function do_sample() {
-    queryBVH_Frustum.iteration_count = 0;
-    queryBVH_Frustum.rejection_count = 0;
-    queryBVH_Frustum.rejection_sphere_count = 0;
-    queryBVH_Frustum.plane_tests = 0;
-    queryBVH_Frustum.plane_tests_early_exits = 0;
+    query_bvh_frustum_from_objects.iteration_count = 0;
+    query_bvh_frustum_from_objects.rejection_count = 0;
+    query_bvh_frustum_from_objects.rejection_sphere_count = 0;
+    query_bvh_frustum_from_objects.plane_tests = 0;
+    query_bvh_frustum_from_objects.plane_tests_early_exits = 0;
 
     const t0 = performance.now();
     lm.buildTiles(camera);
     const t1 = performance.now();
 
     metrics.get("time").record(t1 - t0);
-    metrics.get("iterations").record(queryBVH_Frustum.iteration_count);
-    metrics.get("rejections").record(queryBVH_Frustum.rejection_count);
-    metrics.get("sphere_rejections").record(queryBVH_Frustum.rejection_sphere_count);
+    metrics.get("iterations").record(query_bvh_frustum_from_objects.iteration_count);
+    metrics.get("rejections").record(query_bvh_frustum_from_objects.rejection_count);
+    metrics.get("sphere_rejections").record(query_bvh_frustum_from_objects.rejection_sphere_count);
 }
 
 function draw_camera_view_planes() {
@@ -714,3 +820,16 @@ document.body.appendChild(debugger_button.el);
 const layerSwitcher = createLayerSwitcher(camera);
 
 document.body.appendChild(layerSwitcher.domElement);
+
+function onWindowResize() {
+
+    const w = window.innerWidth;
+    const h = window.innerHeight;
+
+    camera.aspect = w / h;
+    camera.updateProjectionMatrix();
+
+    renderer.setSize(w, h);
+}
+
+window.addEventListener("resize", onWindowResize);

package/engine/graphics/render/forward_plus/query/analytical_triplanar_corner_mapping.js

@@ -0,0 +1,8 @@
+/**
+ *
+ * @param {number} field
+ * @returns {number}
+ */
+export function analytical_triplanar_corner_mapping(field) {
+    return ((field << 1) & 0b100) | ((field >> 2) & 0b10) | ((field >> 5) & 0b1);
+}

package/engine/graphics/render/forward_plus/query/cube_mapping.js

@@ -0,0 +1,38 @@
+const _lut_array_buffer = new ArrayBuffer(84);
+/**
+ * Mapping from 3 plane bitfield, corresponding to intersection point of the planes
+ * @type {number[]}
+ */
+export const triplanar_corner_mapping = new Uint8Array(_lut_array_buffer, 0, 43);
+
+triplanar_corner_mapping[0b010101] = 0;
+triplanar_corner_mapping[0b100101] = 1;
+triplanar_corner_mapping[0b011001] = 2;
+triplanar_corner_mapping[0b101001] = 3;
+triplanar_corner_mapping[0b010110] = 4;
+triplanar_corner_mapping[0b100110] = 5;
+triplanar_corner_mapping[0b011010] = 6;
+triplanar_corner_mapping[0b101010] = 7;
+/**
+ * Mapping from 2 plane bitfield to 2 corner bitfield, corresponding to corner indices of intersecting planes
+ * @type {number[]}
+ */
+export const biplanar_edge_mapping = new Uint8Array(_lut_array_buffer, 43, 41);
+
+biplanar_edge_mapping[0b000101] = 0 | (1 << 3);
+biplanar_edge_mapping[0b000110] = 4 | (5 << 3);
+
+biplanar_edge_mapping[0b001001] = 2 | (3 << 3);
+biplanar_edge_mapping[0b001010] = 6 | (7 << 3);
+
+biplanar_edge_mapping[0b010100] = 0 | (4 << 3);
+biplanar_edge_mapping[0b011000] = 2 | (6 << 3);
+
+biplanar_edge_mapping[0b100100] = 1 | (5 << 3);
+biplanar_edge_mapping[0b101000] = 3 | (7 << 3);
+
+biplanar_edge_mapping[0b010001] = 0 | (2 << 3);
+biplanar_edge_mapping[0b010010] = 4 | (6 << 3);
+
+biplanar_edge_mapping[0b100001] = 1 | (3 << 3);
+biplanar_edge_mapping[0b100010] = 5 | (7 << 3);

package/engine/graphics/render/forward_plus/query/detailed_sphere_frustum_intersection_test.js

@@ -0,0 +1,86 @@
+import { v3_distance_sqr } from "../../../../../core/geom/v3_distance_sqr.js";
+import { biplanar_edge_mapping, triplanar_corner_mapping } from "./cube_mapping.js";
+import { line3_computeSegmentPointDistance_sqr } from "../../../../../core/geom/3d/line/line3_computeSegmentPointDistance_sqr.js";
+
+/**
+ *
+ * @param {number} radius
+ * @param {number} light_x
+ * @param {number} light_y
+ * @param {number} light_z
+ * @param {number} outside_plane_count
+ * @param {number} outside_plane_bitfield
+ * @param {number[]} points
+ * @return {boolean}
+ */
+export function detailed_sphere_frustum_intersection_test(
+    radius, light_x, light_y, light_z,
+    outside_plane_count, outside_plane_bitfield,
+    points
+) {
+
+    const radius_sqr = radius * radius;
+
+    if (outside_plane_count === 3) {
+        // nearest point in a corner, find the corner
+        const point_index = triplanar_corner_mapping[outside_plane_bitfield];
+
+        const point_address = point_index * 3;
+
+        const point_x = points[point_address];
+        const point_y = points[point_address + 1];
+        const point_z = points[point_address + 2];
+
+        const distance_to_light_sqr = v3_distance_sqr(
+            point_x, point_y, point_z,
+            light_x, light_y, light_z
+        );
+
+        // query_bvh_frustum_from_objects.checks_sphere_frustum_corner++;
+
+        // return distance_to_light_sqr <= radius_sqr;
+
+        if (distance_to_light_sqr > radius_sqr) {
+
+            // query_bvh_frustum_from_objects.rejection_sphere_count++;
+            return false;
+        }
+
+    } else if (outside_plane_count === 2) {
+        // nearest point is on an edge of two plane intersection
+        const edge_bitfield = biplanar_edge_mapping[outside_plane_bitfield];
+
+        // get 2 corners from edge bitfield
+        const corner_index_0 = edge_bitfield & 0b111;
+        const corner_address_0 = corner_index_0 * 3;
+
+        const corner_index_1 = (edge_bitfield >> 3) & 0b111;
+        const corner_address_1 = corner_index_1 * 3;
+
+        const point_0_x = points[corner_address_0];
+        const point_0_y = points[corner_address_0 + 1];
+        const point_0_z = points[corner_address_0 + 2];
+
+        const point_1_x = points[corner_address_1];
+        const point_1_y = points[corner_address_1 + 1];
+        const point_1_z = points[corner_address_1 + 2];
+
+        const distance_to_frustum_sqr = line3_computeSegmentPointDistance_sqr(
+            point_0_x, point_0_y, point_0_z,
+            point_1_x, point_1_y, point_1_z,
+            light_x, light_y, light_z
+        );
+
+        // query_bvh_frustum_from_objects.checks_sphere_frustum_edge++;
+
+        // return distance_to_frustum_sqr <= radius_sqr;
+
+        if (distance_to_frustum_sqr > radius_sqr) {
+
+            // query_bvh_frustum_from_objects.rejection_sphere_count++;
+            return false;
+        }
+    }
+
+    return true;
+}