@woosh/meep-engine 2.33.21 → 2.33.25

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);
 
@@ -98,10 +105,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);
 
@@ -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(),
-                                                      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.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);
@@ -233,39 +315,45 @@ 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 = 2;
+
+    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
+            }
         );
     }
 
+    const bounds_size_2 = 15;
+
     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_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),
+            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 +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
@@ -288,25 +377,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 +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(
@@ -355,11 +444,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) {
@@ -387,6 +475,8 @@ function addSponza() {
 
         });
 
+        threeUpdateTransform(m_0);
+
         scene.add(m_0);
 
         const m_1 = gltf.scene.clone(true);
@@ -399,6 +489,8 @@ function addSponza() {
 
         });
 
+        threeUpdateTransform(m_1);
+
         scene.add(m_1);
 
     });
@@ -406,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;
@@ -417,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
+            }
         );
     }
 
@@ -459,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
+        }
     );
 
     //
@@ -488,9 +582,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 +607,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 +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);
 
@@ -585,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.resolution.value.set(scratch_v2.x, scratch_v2.y);
     });
 
     lightClusterWidget.update();
@@ -596,7 +701,9 @@ function animate() {
 
     renderer.render(scene, camera);
 
+    on_render.send6(renderer, camera, scene, time_delta, t);
 
+    stats.update();
 }
 
 const metrics = new MetricCollection();
@@ -627,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() {
@@ -653,7 +760,7 @@ function draw_camera_view_planes() {
     });
 }
 
-prepare_scene_0();
+prepare_scene_4();
 animate();
 
 // draw_camera_view_planes();
@@ -679,32 +786,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 +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);
+}