@woosh/meep-engine 2.43.16 → 2.43.18

package/engine/graphics/sh3/path_tracer/prototypePathTracer.js

@@ -0,0 +1,619 @@
+import EmptyView from "../../../../view/elements/EmptyView.js";
+import { CanvasView } from "../../../../view/elements/CanvasView.js";
+import { PathTracer } from "./PathTracer.js";
+import {
+    Box3,
+    MeshStandardMaterial,
+    OctahedronBufferGeometry,
+    PerspectiveCamera,
+    PlaneBufferGeometry,
+    Sphere,
+    SphereBufferGeometry
+} from "three";
+import { Sampler2D } from "../../texture/sampler/Sampler2D.js";
+import sampler2D2Canvas from "../../texture/sampler/Sampler2D2Canvas.js";
+import { ray3_array_compose } from "../../../../core/geom/3d/ray/ray3_array_compose.js";
+import { Transform } from "../../../ecs/transform/Transform.js";
+import { prettyPrint } from "../../../../core/NumberFormat.js";
+import { float2uint8 } from "../../../../core/binary/float2uint8.js";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { Camera } from "../../ecs/camera/Camera.js";
+import Vector3 from "../../../../core/geom/Vector3.js";
+import { scaleSampler2D } from "../../texture/sampler/scaleSampler2D.js";
+import { seededRandom } from "../../../../core/math/random/seededRandom.js";
+import { mat4 } from "gl-matrix";
+import { v3_distance } from "../../../../core/geom/v3_distance.js";
+import ConcurrentExecutor from "../../../../core/process/executor/ConcurrentExecutor.js";
+import Task from "../../../../core/process/task/Task.js";
+import { TaskSignal } from "../../../../core/process/task/TaskSignal.js";
+import Quaternion from "../../../../core/geom/Quaternion.js";
+import TaskProgressView from "../../../../view/task/TaskProgressView.js";
+import { Localization } from "../../../../core/Localization.js";
+
+import '../../../../../../../css/game.scss';
+import { MouseEvents } from "../../../input/devices/events/MouseEvents.js";
+import { PLYLoader } from "three/examples/jsm/loaders/PLYLoader.js";
+import { noop } from "../../../../core/function/Functions.js";
+import { Color } from "../../../../core/color/Color.js";
+import { min2 } from "../../../../core/math/min2.js";
+import { makeGeometryIndexed } from "../../geometry/buffered/makeGeometryIndexed.js";
+
+document.body.style.margin = 0;
+document.body.style.overflow = "hidden";
+
+const vContainer = new EmptyView();
+
+
+const vCanvas = new CanvasView();
+vContainer.addChild(vCanvas);
+
+
+vContainer.size.set(window.innerWidth, window.innerHeight);
+// vCanvas.size.set(512, 512);
+// vCanvas.size.set(1080, 1080);
+vCanvas.size.copy(vContainer.size);
+
+vContainer.css({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    overflowY: "visible",
+    overflowX: "visible"
+
+});
+vCanvas.css({
+    overflow: "visible"
+});
+
+const pt = new PathTracer();
+
+const gltfLoader = new GLTFLoader();
+// const gltf_url = 'data/models/LowPolyTownshipSet/Town_Hall/model.gltf';
+// const gltf_url = 'data/models/road_bike/road_bike.gltf';
+// const gltf_url = 'data/models/sponza-pbr/gltf/sponza.glb';
+// const gltf_url = 'data/models/sibenik/model.gltf';
+// gltfLoader.load(gltf_url, (gltf) => {
+//
+//     gltf.scene.updateMatrixWorld();
+//
+//     gltf.scene.traverse(m => {
+//
+//         if (m.isMesh) {
+//
+//             pt.addMesh(
+//                 m.geometry,
+//                 m.material,
+//                 m.matrixWorld.elements
+//             );
+//
+//         }
+//     });
+//
+//     trace_image(vCanvas);
+// });
+
+//
+// pt.addMesh(
+//     new TorusKnotBufferGeometry(1, 0.3, 128, 128),
+//     new MeshStandardMaterial({ color: '#FF0000' }),
+//     Transform.fromJSON({
+//         scale: 0.5
+//     }).matrix
+// );
+//
+
+
+function prepare_scene_sphere_01(pt, camera) {
+    camera.position.set(0, 0, -2.1);
+    camera.lookAt(0, 0, 0);
+    pt.addMesh(
+        new SphereBufferGeometry(1, 16, 16),
+        new MeshStandardMaterial({ color: '#FF0000' }),
+        Transform.fromJSON({
+            scale: 0.5
+        }).matrix
+    );
+
+    const ground_material = new MeshStandardMaterial({
+        color: '#00FF00'
+    });
+    pt.addMesh(new PlaneBufferGeometry(), ground_material, Transform.fromJSON({
+        position: new Vector3(0, -0.5, 0),
+        scale: 50,
+        rotation: Quaternion.fromEulerAngles(-Math.PI / 2, 0, 0)
+    }).matrix);
+}
+
+function promise_ply(url) {
+
+    return new Promise((resolve, reject) => {
+        new PLYLoader().load(url, resolve, noop, reject);
+    });
+}
+
+/**
+ *
+ * @param {string} url
+ * @return {Promise<GLTF>}
+ */
+function promise_gltf(url) {
+    return new Promise((resolve, reject) => {
+        new GLTFLoader().load(url, resolve, noop, reject);
+    });
+}
+
+/**
+ *
+ * @param {PathTracer} pt
+ * @param {THREE.Camera} camera
+ * @param {string} url
+ * @return {Promise<void>}
+ */
+async function prepare_scene_gltf(pt, camera, url) {
+    const gltf = await promise_gltf(url);
+
+
+    const ground_material = new MeshStandardMaterial({
+        color: '#ffceae'
+    });
+    pt.addMesh(new PlaneBufferGeometry(), ground_material, Transform.fromJSON({
+        position: new Vector3(0, 0, 0),
+        scale: 5000,
+        rotation: Quaternion.fromEulerAngles(-Math.PI / 2, 0, 0)
+    }).matrix);
+
+
+    gltf.scene.updateMatrixWorld();
+
+    gltf.scene.traverse((m) => {
+        if (m.isMesh) {
+            pt.addMesh(m.geometry, m.material, m.matrixWorld.elements);
+        }
+    });
+
+    const box3 = new Box3();
+    box3.setFromObject(gltf.scene);
+
+    const sphere = new Sphere();
+
+    box3.getBoundingSphere(sphere);
+
+    camera.position.set(1, 1.3, 1)
+        .normalize()
+        .multiplyScalar(sphere.radius * 2.6);
+
+    camera.lookAt(sphere.center);
+}
+
+/**
+ *
+ * @param {PathTracer} pt
+ * @param {THREE.Camera} camera
+ * @return {Promise<void>}
+ */
+async function prepare_scene_lucy(pt, camera) {
+
+
+    const lucy_geom = await promise_ply("data/models/stanford/Lucy100k.ply")
+
+    const lucy_material = new MeshStandardMaterial({
+        color: '#95c9ff'
+    });
+    pt.addMesh(lucy_geom, lucy_material, Transform.fromJSON({
+        position: new Vector3(0, 0, 0),
+        scale: 1,
+        // rotation: Quaternion.fromEulerAngles(-Math.PI / 2, 0, 0)
+    }).matrix);
+
+    const ground_material = new MeshStandardMaterial({
+        color: '#ffceae'
+    });
+    pt.addMesh(new PlaneBufferGeometry(), ground_material, Transform.fromJSON({
+        position: new Vector3(0, -800, 0),
+        scale: 5000,
+        rotation: Quaternion.fromEulerAngles(-Math.PI / 2, 0, 0)
+    }).matrix);
+
+
+    camera.position.set(0, 0, -2300);
+    camera.lookAt(0, 0, 0);
+}
+
+/**
+ * Ray-Tracing In One Weekend test scene
+ * @param {PathTracer} pt
+ * @param {THREE.Camera} camera
+ */
+async function prepare_scene_rtiow(pt, camera) {
+    const random = seededRandom();
+
+    const sphere_geo = new OctahedronBufferGeometry(1, 8);
+    makeGeometryIndexed(sphere_geo);
+
+    const ground_material = new MeshStandardMaterial({
+        color: '#ffffff'
+    });
+    pt.addMesh(new PlaneBufferGeometry(), ground_material, Transform.fromJSON({
+        position: new Vector3(0, 0, 0),
+        scale: 50,
+        rotation: Quaternion.fromEulerAngles(-Math.PI / 2, 0, 0)
+    }).matrix);
+
+    const spheres = [];
+
+    function overlaps_existing(x, y, z, r) {
+        for (let i = 0; i < spheres.length; i++) {
+            const sphere = spheres[i];
+
+            const r_1 = sphere[3];
+
+            if (v3_distance(sphere[0], sphere[1], sphere[2], x, y, z) < r_1 + r) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    function add_sphere(center, radius, material) {
+
+        const mat = new Float32Array(16);
+        mat4.fromRotationTranslationScale(mat, [0, 0, 0, 1], center, [radius, radius, radius])
+
+        pt.addMesh(sphere_geo, material, mat);
+
+        spheres.push([
+            center[0],
+            center[1],
+            center[2],
+            radius
+        ]);
+    }
+
+    const material1 = new MeshStandardMaterial({
+        color: '#FFFFFF'
+    });
+    add_sphere([0, 1, 0], 1, material1);
+
+    const material2 = new MeshStandardMaterial({
+        color: '#FFFFFF'
+    });
+    add_sphere([-4, 1, 0], 1, material2);
+
+    const material3 = new MeshStandardMaterial({
+        color: '#FFFFFF'
+    });
+    add_sphere([4, 1, 0], 1, material3);
+
+
+    for (let a = -11; a < 11; a++) {
+        for (let b = -11; b < 11; b++) {
+
+            const choose_mat = random();
+
+            const radius = 0.2;
+
+            const center = [0, radius, 0];
+
+            do {
+                center[0] = a + 0.9 * random();
+                center[2] = b + 0.9 * random();
+            } while (overlaps_existing(center[0], center[1], center[2], radius));
+
+
+            const mat = new Float32Array(16);
+            mat4.fromRotationTranslationScale(mat, [0, 0, 0, 1], center, [radius, radius, radius])
+
+            const material = new MeshStandardMaterial({
+                color: Color.fromHSV(random(), 0.9, 0.9).toHex()
+            });
+
+            if (choose_mat < 0.8) {
+
+                // diffuse
+                add_sphere(center, radius, material);
+            } else if (choose_mat < 0.95) {
+                // metal
+                add_sphere(center, radius, material);
+            } else {
+                // glass
+                add_sphere(center, radius, material);
+            }
+
+
+        }
+    }
+
+
+    camera.position.set(13, 2, 3);
+    camera.lookAt(0, 0, 0);
+
+}
+
+/**
+ *
+ * @param {Sampler2D} target
+ * @param {PathTracer} pt
+ * @param {Camera} camera
+ * @param {{current:number, total:number}} progress
+ */
+function* render(target, pt, camera, progress = { current: 0, total: 0 }) {
+    const random = seededRandom(0);
+
+    // update camera
+    camera.updateProjectionMatrix();
+    camera.updateMatrixWorld(true);
+
+    //update world inverse matrix
+    camera.matrixWorldInverse.copy(camera.matrixWorld);
+    camera.matrixWorldInverse.invert();
+
+    const out = [];
+    const out2 = [];
+    const ray = [];
+
+    const ray_origin = new Vector3();
+    const ray_direction = new Vector3();
+
+    const width = target.width;
+    const height = target.height;
+
+
+    const t0 = performance.now();
+    let sample_count = 0;
+
+    const pixel_scale_x = 1 / (width - 1);
+    const pixel_scale_y = 1 / (height - 1);
+
+    const pixel_sample_count = 500;
+
+    progress.total = width * height;
+
+    const max_y = height - 1;
+
+    const RENDER_TILE_SIZE = 8;
+
+    const tile_count_x = width / RENDER_TILE_SIZE;
+    const tile_count_y = height / RENDER_TILE_SIZE;
+
+    // render in square tiles to get better memory exploitation, as rays are more likely to hit same things in smaller region
+    for (let tile_y = 0; tile_y < tile_count_y; tile_y++) {
+
+        const y0 = tile_y * RENDER_TILE_SIZE;
+        const y1 = min2(height, y0 + RENDER_TILE_SIZE);
+
+        for (let tile_x = 0; tile_x < tile_count_x; tile_x++) {
+
+            const x0 = tile_x * RENDER_TILE_SIZE;
+            const x1 = min2(width, x0 + RENDER_TILE_SIZE);
+
+            for (let y = y0; y < y1; y++) {
+
+                const v = y * pixel_scale_y;
+                const _y = v * 2 - 1;
+
+                for (let x = x0; x < x1; x++) {
+
+                    const u = x * pixel_scale_x;
+                    const _x = u * 2 - 1;
+
+                    out2[0] = 0;
+                    out2[1] = 0;
+                    out2[2] = 0;
+
+                    for (let i = 0; i < pixel_sample_count; i++) {
+
+                        Camera.projectRay(camera,
+                            _x + random() * pixel_scale_x * 2,
+                            _y + random() * pixel_scale_y * 2,
+                            ray_origin, ray_direction
+                        );
+
+                        ray3_array_compose(
+                            ray,
+                            ray_origin.x, ray_origin.y, ray_origin.z,
+                            ray_direction.x, ray_direction.y, ray_direction.z
+                        );
+
+                        pt.path_trace(out, ray, Infinity, 4, random);
+
+                        out2[0] += out[0];
+                        out2[1] += out[1];
+                        out2[2] += out[2];
+
+
+                        sample_count++;
+                    }
+
+                    const pixel_address = ((max_y - y) * width + x) * 4;
+
+                    target.data[pixel_address] = float2uint8(out2[0] / pixel_sample_count);
+                    target.data[pixel_address + 1] = float2uint8(out2[1] / pixel_sample_count);
+                    target.data[pixel_address + 2] = float2uint8(out2[2] / pixel_sample_count);
+                    target.data[pixel_address + 3] = 255;
+
+                    progress.current++;
+
+                    yield;
+                }
+            }
+        }
+
+    }
+
+
+    // console.profile('trace');
+
+
+    // console.profileEnd('trace');
+
+    const total_time = performance.now() - t0;
+
+    console.log(`Trace finished in ${prettyPrint(total_time)}ms. Total of ${prettyPrint(sample_count)} samples, ${prettyPrint(sample_count * 1000 / total_time)} samples per second`);
+
+}
+
+const executor = new ConcurrentExecutor(1, 15);
+
+const camera = new PerspectiveCamera();
+
+/**
+ *
+ * @param {THREE.Camera} camera
+ * @return {Promise<void>}
+ */
+async function start_renderer(camera) {
+    camera.aspect = vCanvas.size.x / vCanvas.size.y;
+
+    const path = 'data/models/LowPolyTownshipSet/Small_house/Small_house.gltf';
+
+    // await prepare_scene_lucy(pt, camera);
+    await prepare_scene_rtiow(pt, camera);
+    // await prepare_scene_sphere_01(pt, camera);
+    // await prepare_scene_gltf(pt, camera, path);
+
+    pt.build();
+    pt.optimize();
+
+    const pixelRatio = 1;
+
+    const rt = Sampler2D.uint8(4, vCanvas.size.x, vCanvas.size.y);
+
+    let scaled_rt = rt;
+    if (pixelRatio !== 1) {
+        scaled_rt = Sampler2D.uint8clamped(4, Math.ceil(rt.width * pixelRatio), Math.ceil(rt.height * pixelRatio));
+    }
+
+    function make_render_task() {
+        const progress_v = { current: 0, total: 0 };
+
+        const it = render(scaled_rt, pt, camera, progress_v);
+
+        return new Task({
+            name: 'render',
+            cycleFunction() {
+                const next = it.next();
+
+                if (!next.done) {
+                    return TaskSignal.Continue;
+                } else {
+                    return TaskSignal.EndSuccess;
+                }
+
+            },
+            computeProgress() {
+                return progress_v.total > 0 ? progress_v.current / progress_v.total : 0;
+            }
+        })
+    }
+
+
+    const loc = new Localization();
+
+    async function update() {
+
+
+        const t = make_render_task();
+
+
+        const vProgress = new TaskProgressView({
+            task: t,
+            localization: loc
+        });
+
+        vProgress.size.set(vContainer.size.x, vContainer.size.y);
+        vProgress.css({
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            pointerEvents: "none"
+        });
+        vProgress.el.querySelector('.fill').style.background = 'rgb(255,220,94)';
+        vProgress.el.querySelector('.progress-bar').style.height = '8px';
+
+        vContainer.addChild(vProgress);
+
+        const p_done = t.promise();
+
+        executor.run(t);
+
+        await p_done;
+
+        vContainer.removeChild(vProgress);
+
+        if (scaled_rt !== rt) {
+            scaleSampler2D(scaled_rt, rt);
+        }
+
+        sampler2D2Canvas(rt, 1, 0, vCanvas.el);
+
+        requestAnimationFrame(update);
+    }
+
+    update();
+}
+
+start_renderer(camera);
+
+vCanvas.el.addEventListener(MouseEvents.Click, (evt) => {
+    const ray = [];
+
+    const ray_origin = new Vector3();
+    const ray_direction = new Vector3();
+
+    const pointer = getPointer(vCanvas.el, evt);
+
+    const _x = pointer.x;
+    const _y = pointer.y;
+
+    Camera.projectRay(camera,
+        _x,
+        _y,
+        ray_origin, ray_direction
+    );
+
+    ray3_array_compose(
+        ray,
+        ray_origin.x, ray_origin.y, ray_origin.z,
+        ray_direction.x, ray_direction.y, ray_direction.z
+    );
+
+    const out = [];
+
+    pt.trace(out, ray, 0, Infinity);
+
+    console.log(pointer, out, ray, pt);
+
+});
+
+vCanvas.css({
+    pointerEvents: 'auto'
+});
+
+function getPointer(domElement, event) {
+
+    if (domElement.ownerDocument.pointerLockElement) {
+
+        return {
+            x: 0,
+            y: 0,
+            button: event.button
+        };
+
+    } else {
+
+        const rect = domElement.getBoundingClientRect();
+
+        return {
+            x: (event.clientX - rect.left) / rect.width * 2 - 1,
+            y: -(event.clientY - rect.top) / rect.height * 2 + 1,
+            button: event.button
+        };
+
+    }
+
+}
+
+// link
+document.body.appendChild(vContainer.el);
+vContainer.link();

package/engine/graphics/sh3/path_tracer/random_in_hemisphere.js

@@ -0,0 +1,39 @@
+import { v3_dot } from "../../../../core/geom/v3_dot.js";
+
+/**
+ *
+ * @param {function} random
+ * @param {number[]} result
+ * @param {number} result_offset
+ * @param {number[]} normal
+ * @param {number} normal_offset
+ */
+export function random_in_hemisphere(random, result, result_offset, normal, normal_offset) {
+    const nx = normal[normal_offset + 0];
+    const ny = normal[normal_offset + 1];
+    const nz = normal[normal_offset + 2];
+
+    const phi = Math.PI * 2 * random();
+
+    const cosTheta = random() * 2 - 1;
+
+    const theta = Math.acos(cosTheta);
+
+    const sinTheta = Math.sin(theta);
+
+    //compute coordinates
+    const x = sinTheta * Math.cos(phi);
+    const y = sinTheta * Math.sin(phi);
+    const z = cosTheta;
+
+    if (v3_dot(x, y, z, nx, ny, nz) < 0) {
+        result[result_offset] = -x;
+        result[result_offset + 1] = -y;
+        result[result_offset + 2] = -z;
+    } else {
+        //write the result
+        result[result_offset] = x;
+        result[result_offset + 1] = y;
+        result[result_offset + 2] = z;
+    }
+}

package/engine/graphics/sh3/path_tracer/ray_hit_apply_transform.js

@@ -0,0 +1,42 @@
+import { v3_length } from "../../../../core/geom/v3_length.js";
+
+/**
+ *
+ * @param {number[]} output
+ * @param {number[]} hit
+ * @param {number[]} m 4x4 matrix
+ */
+export function ray_hit_apply_transform(output, hit, m) {
+
+    // transform position
+    const p_x = hit[0];
+    const p_y = hit[1];
+    const p_z = hit[2];
+
+    // compute perspective projection
+    const w = 1 / (m[3] * p_x + m[7] * p_y + m[11] * p_z + m[15]);
+
+    const result_p_x = (m[0] * p_x + m[4] * p_y + m[8] * p_z + m[12]) * w;
+    const result_p_y = (m[1] * p_x + m[5] * p_y + m[9] * p_z + m[13]) * w;
+    const result_p_z = (m[2] * p_x + m[6] * p_y + m[10] * p_z + m[14]) * w;
+
+    output[0] = result_p_x;
+    output[1] = result_p_y;
+    output[2] = result_p_z;
+
+    // transform normal
+    const n_x = hit[3];
+    const n_y = hit[4];
+    const n_z = hit[5];
+
+    const result_n_x = m[0] * n_x + m[4] * n_y + m[8] * n_z;
+    const result_n_y = m[1] * n_x + m[5] * n_y + m[9] * n_z;
+    const result_n_z = m[2] * n_x + m[6] * n_y + m[10] * n_z;
+
+    const normal_multiplier = 1 / v3_length(result_n_x, result_n_y, result_n_z);
+
+    output[3] = result_n_x * normal_multiplier;
+    output[4] = result_n_y * normal_multiplier;
+    output[5] = result_n_z * normal_multiplier;
+
+}