@woosh/meep-engine 2.33.20 → 2.33.24

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,12 @@ 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";
+
+const on_render = new Signal();
 
 const lm = new LightManager();
 
@@ -45,7 +50,7 @@ const camera = new PerspectiveCamera(30);
 camera.position.z = 1;
 
 camera.layers.enable(3);
-camera.layers.enable(1);
+// camera.layers.enable(1);
 
 camera.near = 1;
 camera.far = 15;
@@ -56,14 +61,17 @@ 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();
 
-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 +85,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 +94,6 @@ function getFPStandard() {
         r.attach_lights(lm);
     }
 
-    if (renderer !== undefined) {
-
-        renderer.getSize(
-            r.uniforms.resolution.value
-        );
-    }
 
     fp_materials.push(r);
 
@@ -98,10 +101,10 @@ function getFPStandard() {
 }
 
 const material_fp_standard = new FPlusStandardMaterial({
-                                                           color: 0xFFFF00,
-                                                           polygonOffset: true,
-                                                           depthWrite: false
-                                                       });
+    color: 0xFFFF00,
+    polygonOffset: true,
+    depthWrite: false
+});
 
 fp_materials.push(material_fp_standard);
 
@@ -165,18 +168,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 +211,74 @@ 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(),
-                                                      opacity: min2(intensity, 1)
-                                                  });
+        depthTest: true,
+        depthWrite: false,
+        transparent: true,
+        linewidth: 1,
+        fog: false,
+        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.scale.setScalar(0.02);
+
+    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);
+
+    visual_group.add(mesh_center_1);
+
+
+    visual_group.add(mesh);
+    visual_group.position.set(p.x, p.y, p.z);
+
+    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,
+            );
+        });
+    }
 }
 
 const box_geometry = new TorusKnotBufferGeometry(1, 0.3, 128, 128);
@@ -233,39 +296,43 @@ function prepare_scene_0() {
 
     controls.minDistance = 2;
 
-    for (let i = 0; i < 500; i++) {
-        const radius = randomFloatBetween(random, 4, 4);
+    const bounds_size = 15;
+
+    const light_radius = 5;
+
+    for (let i = 0; i < 5000; i++) {
+        const radius = randomFloatBetween(random, light_radius, light_radius);
         const intensity = randomFloatBetween(random, 2, 2);
-        addPointLight([
-                          randomFloatBetween(random, -20, 20),
-                          randomFloatBetween(random, -20, 20),
-                          randomFloatBetween(random, -20, 20),
-                      ],
-                      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
+            }
         );
     }
 
     for (let i = 0; i < 500; i++) {
 
         addKnot([
-                    randomFloatBetween(random, -20, 20),
-                    randomFloatBetween(random, -20, 20),
-                    randomFloatBetween(random, -20, 20)
-                ], 0.5, [
-                    randomFloatBetween(random, 0, Math.PI),
-                    randomFloatBetween(random, 0, Math.PI),
-                    randomFloatBetween(random, 0, Math.PI)
-                ]);
+            randomFloatBetween(random, -bounds_size, bounds_size),
+            randomFloatBetween(random, -bounds_size, bounds_size),
+            randomFloatBetween(random, -bounds_size, bounds_size)
+        ], 0.5, [
+            randomFloatBetween(random, 0, Math.PI),
+            randomFloatBetween(random, 0, Math.PI),
+            randomFloatBetween(random, 0, Math.PI)
+        ]);
     }
 }
 
 function prepare_scene_1() {
-    addPointLight([
-                      0, 0, -3
-                  ], 1,
-                  0xFF0000
+    addPointLight({
+            position: [
+                0, 0, -3
+            ], radius: 1, color: 0xFF0000
+        }
     );
 
     // tight planes around the light
@@ -277,10 +344,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
@@ -288,25 +356,25 @@ function prepare_scene_3() {
     camera.far = 7;
 
     addKnot([
-                0, 0, -4
-            ], 1, [0, 0, 0]);
+        0, 0, -4
+    ], 1, [0, 0, 0]);
 
     // camera.position.set(0, 0, 0);
     camera.lookAt(0, 0, -5);
 }
 
 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]);
@@ -323,17 +391,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(
@@ -355,11 +423,10 @@ 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) {
@@ -406,8 +473,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;
@@ -417,16 +484,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
+            }
         );
     }
 
@@ -459,14 +529,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
+        }
     );
 
     //
@@ -488,9 +557,9 @@ function prepare_scene_6() {
 
 function prepare_scene_7() {
     addSpotLight([
-                     0, 0, -3
-                 ], [0, 0, 1],
-                 0xFF0000
+            0, 0, -3
+        ], [0, 0, 1],
+        0xFF0000
     );
 
     // tight planes around the light
@@ -513,8 +582,8 @@ console.log("done");
 
 
 const renderer = new WebGLRenderer({
-                                       antialias: true
-                                   });
+    antialias: true
+});
 // renderer.shadowMap.type = VSMShadowMap;
 // renderer.shadowMap.enabled = true;
 renderer.sortObjects = false;
@@ -540,8 +609,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);
 
@@ -585,10 +658,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.resolution.value.set(scratch_v2.x, scratch_v2.y);
     });
 
     lightClusterWidget.update();
@@ -596,7 +676,9 @@ function animate() {
 
     renderer.render(scene, camera);
 
+    on_render.send6(renderer, camera, scene, time_delta, t);
 
+    stats.update();
 }
 
 const metrics = new MetricCollection();
@@ -627,20 +709,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() {
@@ -653,7 +735,7 @@ function draw_camera_view_planes() {
     });
 }
 
-prepare_scene_0();
+prepare_scene_4();
 animate();
 
 // draw_camera_view_planes();
@@ -679,32 +761,32 @@ renderer.domElement.addEventListener(MouseEvents.DoubleClick, () => {
 });
 
 domify(lightClusterWidget.domElement).css({
-                                              position: "absolute",
-                                              zIndex: 2,
-                                              bottom: 0,
-                                              right: 0
-                                          });
+    position: "absolute",
+    zIndex: 2,
+    bottom: 0,
+    right: 0
+});
 
 document.body.appendChild(lightClusterWidget.domElement);
 
 const debugger_button = new ButtonView({
-                                           action() {
-                                               if (screenGrid.domElement.parentNode !== null) {
-                                                   document.body.removeChild(screenGrid.domElement);
-                                               } else {
-                                                   document.body.appendChild(screenGrid.domElement);
-                                               }
-                                           },
-                                           name: "debugger",
-                                           css: {
-                                               position: "absolute",
-                                               color: "white",
-                                               background: "rgba(0,0,0,0.5)",
-                                               zIndex: 2,
-                                               top: 0,
-                                               left: 0
-                                           }
-                                       });
+    action() {
+        if (screenGrid.domElement.parentNode !== null) {
+            document.body.removeChild(screenGrid.domElement);
+        } else {
+            document.body.appendChild(screenGrid.domElement);
+        }
+    },
+    name: "debugger",
+    css: {
+        position: "absolute",
+        color: "white",
+        background: "rgba(0,0,0,0.5)",
+        zIndex: 2,
+        top: 0,
+        left: 0
+    }
+});
 
 debugger_button.link();
 
@@ -713,3 +795,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);