@woosh/meep-engine 2.43.3 → 2.43.4

package/core/geom/3d/tetrahedra/prototypeTetrahedraBuilder.js

@@ -1,8 +1,6 @@
 import { EngineHarness } from "../../../../engine/EngineHarness.js";
 import { compute_delaunay_tetrahedral_mesh } from "./delaunay/compute_delaunay_tetrahedral_mesh.js";
-import { LineBasicMaterial, Uint32BufferAttribute } from "three";
-import { BufferGeometry } from "three/src/core/BufferGeometry.js";
-import { Float32BufferAttribute } from "three/src/core/BufferAttribute.js";
+import { LineBasicMaterial } from "three";
 import { ShadedGeometry } from "../../../../engine/graphics/ecs/mesh-v2/ShadedGeometry.js";
 import { DrawMode } from "../../../../engine/graphics/ecs/mesh-v2/DrawMode.js";
 import EntityBuilder from "../../../../engine/ecs/EntityBuilder.js";
@@ -10,7 +8,11 @@ import { Transform } from "../../../../engine/ecs/transform/Transform.js";
 import { ShadedGeometrySystem } from "../../../../engine/graphics/ecs/mesh-v2/ShadedGeometrySystem.js";
 import { GizmoRenderingPlugin } from "../../../../engine/graphics/render/gizmo/GizmoRenderingPlugin.js";
 import { Gizmo } from "../../../../engine/graphics/render/gizmo/Gizmo.js";
-import { LAYOUT_TETRA_BYTE_SIZE } from "./TetrahedralMesh.js";
+import { build_tetrahedral_mesh_buffer_geometry } from "./build_tetrahedral_mesh_buffer_geometry.js";
+import { seededRandom } from "../../../math/random/seededRandom.js";
+import { randomFloatBetween } from "../../../math/random/randomFloatBetween.js";
+import { delay } from "../../../process/delay.js";
+import { TetrahedralMesh } from "./TetrahedralMesh.js";
 
 /**
  *
@@ -26,45 +28,52 @@ async function main(engine) {
     const offset = [7.5, 1, 7.5];
     const scale = [.5, .5, .5];
 
-    const points = [
-        0, 0, 0,
-        10, 0, 0,
-        10, 0, 10,
-        0, 0, 10,
-
-        0, 10, 0,
-        10, 10, 0,
-        10, 10, 10,
-        0, 10, 10,
-    ];
-
-    const tetrahedra = compute_delaunay_tetrahedral_mesh(points, points.length / 3);
-
-    const lines = [];
+    const points = [];
+
+    // points.push(
+    //     0, 0, 0,
+    //     10, 0, 0,
+    //     10, 0, 10,
+    //     0, 0, 10,
+    //
+    //     0, 10, 0,
+    //     10, 10, 0,
+    //     10, 10, 10,
+    //     0, 10, 10,
+    // );
+
+    const random = seededRandom();
+
+    for (let i = 0; i < 600; i++) {
+        points.push(
+            randomFloatBetween(random, -100, 100),
+            randomFloatBetween(random, 0, 150),
+            randomFloatBetween(random, -100, 100),
+        );
+    }
 
-    for (let i = tetrahedra.__occupancy.nextSetBit(0); i !== -1; i = tetrahedra.__occupancy.nextSetBit(i + 1)) {
+    // make_justified_point_grid(new AABB3(-100, 0, -100, 100, 150, 100), 40, (x, y, z) => {
+    //     points.push(x, y, z);
+    // });
 
-        const tet_address = i * LAYOUT_TETRA_BYTE_SIZE;
+    await delay(1000);
 
-        const a = tetrahedra.__view.getUint32(tet_address);
-        const b = tetrahedra.__view.getUint32(tet_address + 4);
-        const c = tetrahedra.__view.getUint32(tet_address + 8);
-        const d = tetrahedra.__view.getUint32(tet_address + 12);
+    const tetrahedra = new TetrahedralMesh();
+    // console.time('mesh build');
+    console.profile('mesh build');
+    compute_delaunay_tetrahedral_mesh(tetrahedra, points, points.length / 3);
+    console.profileEnd('mesh build');
+    // console.timeEnd('mesh build');
 
-        lines.push(a, b);
-        lines.push(a, c);
-        lines.push(a, d);
+    console.log(tetrahedra);
 
-        lines.push(b, c);
-        lines.push(c, d);
-        lines.push(b, d);
+    await delay(500);
 
-    }
+    const relocated_elements = tetrahedra.compact();
+    console.log(`Compaction relocated ${relocated_elements} elements`);
 
-    const geometry = new BufferGeometry();
+    const geometry = build_tetrahedral_mesh_buffer_geometry(tetrahedra, points);
 
-    geometry.setIndex(new Uint32BufferAttribute(lines, 1, false));
-    geometry.setAttribute('position', new Float32BufferAttribute(points, 3, false));
 
 
     new EntityBuilder()

package/core/geom/3d/tetrahedra/validate_tetrahedral_mesh.js

@@ -9,7 +9,7 @@ import { INVALID_NEIGHBOUR } from "./TetrahedralMesh.js";
  * @param {number} tet
  * @return {number}
  */
-function get_tetrahedron_volume(mesh, points, tet) {
+export function get_tetrahedron_volume(mesh, points, tet) {
 
     const a = mesh.getVertexIndex(tet, 0);
     const b = mesh.getVertexIndex(tet, 1);
@@ -23,65 +23,85 @@ function get_tetrahedron_volume(mesh, points, tet) {
  *
  * @param {TetrahedralMesh} mesh
  * @param {number} tet
- * @param {function(problem:string):*} consumer
+ * @param {number} neighbour_id
+ * @param {function(string):*} consumer
+ * @return {boolean}
  */
-function validate_tetrahedron_neighbourhood(mesh, tet, consumer = noop) {
+export function validate_neighbour(mesh, tet, neighbour_id, consumer) {
     let valid = true;
 
-    for (let i = 0; i < 4; i++) {
-        const neighbour = mesh.getNeighbour(tet, i);
+    const neighbour = mesh.getNeighbour(tet, neighbour_id);
 
-        if (neighbour === INVALID_NEIGHBOUR) {
-            continue;
-        }
+    if (neighbour === INVALID_NEIGHBOUR) {
+        return true;
+    }
 
-        // decode neighbour
-        const neighbour_tet = neighbour >> 2;
-        const neighbour_vertex_id = neighbour & 3;
+    // decode neighbour
+    const neighbour_tet = neighbour >> 2;
+    const neighbour_vertex_id = neighbour & 3;
 
-        if (!mesh.exists(neighbour_tet)) {
-            valid = false;
+    if (!mesh.exists(neighbour_tet)) {
 
-            consumer(`Tetrahedron ${tet} Neighbour[${i}] ${neighbour_tet} does not exist in the mesh`);
 
-            continue;
-        }
+        consumer(`Tetrahedron ${tet} Neighbour[${neighbour_id}] ${neighbour_tet} does not exist in the mesh`);
 
-        const back_link = mesh.getNeighbour(neighbour_tet, neighbour_vertex_id);
+        return false;
+    }
 
-        if (back_link === INVALID_NEIGHBOUR) {
-            valid = false;
-            consumer(`Tetrahedron ${tet} Neighbour[${i}] ${neighbour_tet} links back to invalid neighbour (no neighbour), expected ${tet} instead`);
-            continue;
-        }
+    const back_link = mesh.getNeighbour(neighbour_tet, neighbour_vertex_id);
 
-        const back_link_tet = back_link >> 2;
-        const back_link_vertex_index = back_link & 3;
+    if (back_link === INVALID_NEIGHBOUR) {
 
-        if (back_link_tet !== tet) {
-            valid = false;
+        consumer(`Tetrahedron ${tet} Neighbour[${neighbour_id}] ${neighbour_tet} links back to invalid neighbour (no neighbour), expected ${tet} instead`);
+        return false;
+    }
 
-            consumer(`Tetrahedron ${tet} Neighbour[${i}] ${neighbour_tet} links back to a different tet, expected ${tet}, got ${back_link_tet}`)
-        } else if (back_link_vertex_index !== i) {
+    const back_link_tet = back_link >> 2;
+    const back_link_vertex_index = back_link & 3;
+
+    if (back_link_tet !== tet) {
+        valid = false;
+
+        consumer(`Tetrahedron ${tet} Neighbour[${neighbour_id}] ${neighbour_tet} links back to a different tet, expected ${tet}, got ${back_link_tet}`)
+    } else if (back_link_vertex_index !== neighbour_id) {
+        valid = false;
+
+        consumer(`Tetrahedron ${tet} Neighbour[${neighbour_id}] ${neighbour_tet} links back to a different vertex, expected ${neighbour_id}, got ${back_link_vertex_index}`);
+
+    }
+
+    for (let j = 0; j < 4; j++) {
+        const v = mesh.getVertexIndex(tet, j);
+
+        if (j === neighbour_id) {
+            continue;
+        }
+
+        if (!mesh.tetContainsVertex(neighbour_tet, v)) {
             valid = false;
 
-            consumer(`Tetrahedron ${tet} Neighbour[${i}] ${neighbour_tet} links back to a different vertex, expected ${i}, got ${back_link_vertex_index}`);
+            consumer(`Tetrahedron ${tet} Neighbour[${neighbour_id}] ${neighbour_tet} does not share vertex ${v} with the tet`);
 
         }
+    }
 
-        for (let j = 0; j < 4; j++) {
-            const v = mesh.getVertexIndex(tet, j);
+    return valid;
+}
 
-            if (j === i) {
-                continue;
-            }
 
-            if (!mesh.tetContainsVertex(neighbour_tet, v)) {
-                valid = false;
+/**
+ *
+ * @param {TetrahedralMesh} mesh
+ * @param {number} tet
+ * @param {function(problem:string):*} consumer
+ */
+export function validate_tetrahedron_neighbourhood(mesh, tet, consumer = noop) {
+    let valid = true;
 
-                consumer(`Tetrahedron ${tet} Neighbour[${i}] ${neighbour_tet} does not share vertex ${v} with the tet`);
+    for (let i = 0; i < 4; i++) {
 
-            }
+        if (!validate_neighbour(mesh, tet, i, consumer)) {
+            valid = false;
         }
 
     }
@@ -89,6 +109,27 @@ function validate_tetrahedron_neighbourhood(mesh, tet, consumer = noop) {
     return valid;
 }
 
+/**
+ *
+ * @param {TetrahedralMesh} mesh
+ * @param {number} tet
+ * @returns {boolean}
+ */
+function is_tetrahedron_degenerate(mesh, tet) {
+
+    for (let i0 = 0; i0 < 4; i0++) {
+        const v0 = mesh.getVertexIndex(tet, i0);
+        for (let i1 = i0 + 1; i1 < 4; i1++) {
+            if (v0 === mesh.getVertexIndex(tet, i1)) {
+                // identical vertices
+                return true;
+            }
+        }
+    }
+
+    return false;
+}
+
 /**
  *
  * @param {TetrahedralMesh} mesh
@@ -108,6 +149,12 @@ export function validate_tetrahedral_mesh(mesh, points, consumer = noop) {
             consumer(`Tetrahedron ${tet} has negative volume ${volume}`);
         }
 
+        // check for degeneracy
+        if (is_tetrahedron_degenerate(mesh, tet)) {
+            is_valid = false;
+            consumer(`Tetrahedron ${tet} is degenerate (multiple vertices have the same index)`);
+        }
+
         if (!validate_tetrahedron_neighbourhood(mesh, tet, consumer)) {
             is_valid = false;
         }

package/core/geom/3d/util/make_justified_point_grid.js

@@ -0,0 +1,31 @@
+import { max2 } from "../../../math/max2.js";
+
+/**
+ * Created a grid of points to fill given bounds, spacing is used as upper-bound,
+ * actual spacing will be justified to provide even distanced along each dimension separately
+ * @param {AABB3} aabb3
+ * @param {number} spacing
+ * @param {function(x:number,y:number,z:number)} callback
+ */
+export function make_justified_point_grid(aabb3, spacing, callback) {
+
+    const steps_x = Math.ceil(aabb3.getExtentsX() / spacing);
+    const steps_y = Math.ceil(aabb3.getExtentsY() / spacing);
+    const steps_z = Math.ceil(aabb3.getExtentsZ() / spacing);
+
+    const spacing_x = aabb3.getExtentsX() / max2(1, steps_x - 1);
+    const spacing_y = aabb3.getExtentsY() / max2(1, steps_y - 1);
+    const spacing_z = aabb3.getExtentsZ() / max2(1, steps_z - 1);
+
+    for (let i = 0; i < steps_x; i++) {
+        for (let j = 0; j < steps_y; j++) {
+            for (let k = 0; k < steps_z; k++) {
+                const x = i * spacing_x + aabb3.x0;
+                const y = j * spacing_y + aabb3.y0;
+                const z = k * spacing_z + aabb3.z0;
+
+                callback(x, y, z);
+            }
+        }
+    }
+}

package/core/process/delay.js

@@ -0,0 +1,5 @@
+export  function delay(timeout_ms) {
+    return new Promise((resolve, reject) => {
+        setTimeout(resolve, timeout_ms);
+    });
+}

package/editor/Editor.js

@@ -71,6 +71,8 @@ import { ObservedIntegerEditor } from "./ecs/component/editors/ObservedIntegerEd
 
 import '../../../../css/editor/EntityEditorView.scss';
 import '../../../../css/editor/EditorView.scss';
+import {ParameterTrackSet} from "../engine/graphics/particles/particular/engine/parameter/ParameterTrackSet.js";
+import {ParameterTrackSetEditor} from "./ecs/component/editors/ecs/ParameterTrackSetEditor.js";
 
 /**
  * @template T
@@ -369,6 +371,7 @@ function initialize_basic_registry(registry) {
     registry.set(Quaternion, new QuaternionEditor());
 
     registry.set(Sampler2D, new Sampler2DEditor());
+    registry.set(ParameterTrackSet, new ParameterTrackSetEditor());
 
     registry.set(HTMLElement, new HTMLElementEditor());
     registry.set(HTMLCanvasElement, new HTMLElementEditor());

package/editor/ecs/component/editors/ecs/ParameterLookupTableEditor.js

@@ -2,6 +2,11 @@ import { TypeEditor } from "../../TypeEditor.js";
 import { CanvasView } from "../../../../../view/elements/CanvasView.js";
 import { plot_data } from "../../../../../engine/animation/curve/draw/plot_data.js";
 import Vector2 from "../../../../../core/geom/Vector2.js";
+import {ColorEditor} from "../ColorEditor.js";
+import {ColorPickerView} from "../../../../../view/elements/ColorPickerView.js";
+import {AutoCanvasView} from "../../../../view/ecs/components/common/AutoCanvasView.js";
+import EmptyView from "../../../../../view/elements/EmptyView.js";
+import {MouseEvents} from "../../../../../engine/input/devices/events/MouseEvents.js";
 
 export class ParameterLookupTableEditor extends TypeEditor {
     get schema() {
@@ -16,29 +21,208 @@ export class ParameterLookupTableEditor extends TypeEditor {
 
     build(parent, field,registry) {
 
-        const canvasView = new CanvasView();
-        canvasView.size.set(200, 100);
-        const ctx = canvasView.context2d;
-
-        const data = [];
-
         /**
          * @type {ParameterLookupTable}
          */
         const lut = field.adapter.read(parent, field.name);
+        const trackName = field.adapter.read(parent, "name");
 
-        const sample = [];
+        // if it is a track scale
+        if (trackName === "scale"){
+            const canvasView = new CanvasView();
+            canvasView.size.set(200, 100);
+            const ctx = canvasView.context2d;
+
+            const data = [];
+
+            const sample = [];
+            for (let i = 0; i < canvasView.size.x; i++) {
+                const f = i / (canvasView.size.x - 1);
+
+                lut.sample(f, sample);
+
+                data[i] = sample[0];
+            }
+
+            plot_data({ ctx, data, width: canvasView.size.x, height: canvasView.size.y, margin: new Vector2(4, 4) });
+
+            return canvasView;
+        } else if (trackName === "color"){
+            // if it is color track
+            const resultView = new EmptyView();
+            const canvasView = new CanvasView();
+            canvasView.css({borderColor: 'white', borderStyle: 'solid', borderWidth: '1px',});
+            canvasView.size.set(200, 70);
+
+            const ctx = canvasView.context2d;
+
+            const colorView = new EmptyView({tag: "input", attr: {type: "color"}, css: {padding: "0px", border: "0px"}});
+
+            resultView.addChild(canvasView);
+            resultView.addChild(colorView);
+
+            //canvas internal configuration, such as background
+            let config = {
+                tileSize: new Vector2(10, 10),
+                tileColor1: "rgb(255, 255, 255)",
+                tileColor2: "rgb(119,119,119)",
+                gradientBoxYRange: new Vector2(30, canvasView.size.y),
+            };
+
+            this.DrawBackground(canvasView, ctx, config);
+            this.DrawGradient(canvasView, lut, ctx, config);
+            let stops = this.DrawStops(canvasView, lut, ctx, colorView, config, 0);
+
+            canvasView.el.addEventListener(MouseEvents.Click, (e) => {
+                const rect = canvasView.el.getBoundingClientRect();
+                let x = e.clientX - rect.left,
+                    y = e.clientY - rect.top;
+                for (let i = 0; i < stops.length; i++) {
+                    if (stops[i].x <= x && stops[i].x + stops[i].width >= x &&
+                        stops[i].y <= y && stops[i].y + stops[i].height >= y){
+                        let s = [];
+                        lut.sample(lut.positions[i], s);
+
+                        this.convertRGB(s);
+
+                        colorView.el.value = this.RGBToHex(s[0], s[1], s[2]);
+                        canvasView.clear();
+
+                        this.DrawBackground(canvasView, ctx, config);
+                        this.DrawGradient(canvasView, lut, ctx, config);
+                        stops = this.DrawStops(canvasView, lut, ctx, colorView, config, i);
+
+                        break;
+                    }
+                }
+            });
+
+            return resultView;
+        }
+    }
+    /**
+     * converts rgb to hex string
+     * @param {Float} r
+     * @param {Float} g
+     * @param {Float} b
+     */
+    RGBToHex(r,g,b) {
+        r = r.toString(16);
+        g = g.toString(16);
+        b = b.toString(16);
+
+        if (r.length == 1)
+            r = "0" + r;
+        if (g.length == 1)
+            g = "0" + g;
+        if (b.length == 1)
+            b = "0" + b;
+
+        return "#" + r + g + b;
+    }
+
+    /**
+     * converts lut color sample to RGB
+     * @param {[]} sample
+     */
+    convertRGB(sample){
+        sample[0] = Math.floor(sample[0] * 255);
+        sample[1] = Math.floor(sample[1] * 255);
+        sample[2] = Math.floor(sample[2] * 255);
+    }
+    /**
+     * draws tiled background
+     * @param {CanvasView} canvasView
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {{}} config
+     */
+    DrawBackground(canvasView, ctx, config){
+        for (let i = 0; i < canvasView.size.x; i += config.tileSize.x) {
+            for (let j = config.gradientBoxYRange.x; j < config.gradientBoxYRange.y; j += config.tileSize.y){
+                ctx.fillStyle = (((i / config.tileSize.x) + (j / config.tileSize.y)) % 2 === 0 ? config.tileColor1 : config.tileColor2);
+                ctx.fillRect(i, j, config.tileSize.x, config.tileSize.y);
+            }
+        }
+    }
 
+    /**
+     * draws gradient
+     * @param {CanvasView} canvasView
+     * @param {ParameterLookupTable} lut
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {{}} config
+     */
+    DrawGradient(canvasView, lut, ctx, config){
+        const sample = [];
         for (let i = 0; i < canvasView.size.x; i++) {
             const f = i / (canvasView.size.x - 1);
-
             lut.sample(f, sample);
 
-            data[i] = sample[0];
+            this.convertRGB(sample);
+
+            ctx.fillStyle = `rgba(${sample[0]},${sample[1]},${sample[2]}, ${sample[3]})`;
+            ctx.fillRect(i, config.gradientBoxYRange.x, 1, config.gradientBoxYRange.y - config.gradientBoxYRange.x);
         }
+    }
+
+    /**
+     * draws gradient stops
+     * @param {CanvasView} canvasView
+     * @param {ParameterLookupTable} lut
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {EmptyView} colorView
+     * @param {{}} config
+     * @param {Integer} selectedInd
+     * @returns {*[]}
+     */
+    DrawStops(canvasView, lut, ctx, colorView, config, selectedInd){
+        const sample = [];
 
-        plot_data({ ctx, data, width: canvasView.size.x, height: canvasView.size.y, margin: new Vector2(4, 4) });
+        let stops = [];
+        for (let i = 0; i < lut.positions.length; i++){
+            const posX = lut.positions[i] * canvasView.size.x;
+            if (i === selectedInd){
+                lut.sample(lut.positions[i], sample);
 
-        return canvasView;
+                this.convertRGB(sample);
+
+                colorView.el.value = this.RGBToHex(sample[0], sample[1], sample[2]);
+            }
+            stops.push(this.DrawStop(ctx, config, posX, i=== selectedInd));
+        }
+        return stops;
+    }
+    /**
+     * draws gradient stop
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {Object} config
+     * @param {Integer} posX
+     * @param {Boolean} isSelected
+     */
+    DrawStop(ctx, config, posX, isSelected){
+        ctx.beginPath();
+        ctx.moveTo(posX, config.gradientBoxYRange.x + 7);
+        ctx.lineTo(posX - 5, config.gradientBoxYRange.x);
+        ctx.lineTo(posX - 5, config.gradientBoxYRange.x - 12);
+        ctx.lineTo(posX + 5, config.gradientBoxYRange.x - 12);
+        ctx.lineTo(posX + 5, config.gradientBoxYRange.x);
+        ctx.closePath();
+
+        ctx.lineWidth = (isSelected ? 4 : 2);
+        if (!isSelected)
+            ctx.strokeStyle = "rgb(114,114,114)";
+        else
+            ctx.strokeStyle = "rgb(0,23,255)";
+        ctx.stroke();
+        ctx.fillStyle = "rgb(255, 255, 255)";
+        ctx.fill();
+
+        return {
+            x: posX - 5,
+            y: config.gradientBoxYRange.x - 12,
+            width: 10,
+            height: 12,
+            posX: posX,
+        };
     }
 }

package/editor/ecs/component/editors/ecs/ParameterTrackSetEditor.js

@@ -0,0 +1,16 @@
+import List from "../../../../../core/collection/list/List.js";
+import { ObjectEditor } from "../primitive/ObjectEditor.js";
+import {ParameterTrack} from "../../../../../engine/graphics/particles/particular/engine/parameter/ParameterTrack.js";
+
+export class ParameterTrackSetEditor extends ObjectEditor {
+    get schema() {
+        return {
+            properties: {
+                tracks: {
+                    type: List,
+                    type_parameters: [ParameterTrack],
+                },
+            }
+        };
+    }
+}

package/editor/ecs/component/editors/ecs/ParticleEmitterLayerEditor.js

@@ -12,6 +12,7 @@ import {
     EmissionFromType
 } from "../../../../../engine/graphics/particles/particular/engine/emitter/EmissionFromType.js";
 import { DataType } from "../../../../../core/collection/table/DataType.js";
+import {ParameterTrackSetEditor} from "./ParameterTrackSetEditor.js";
 
 export class ParticleEmitterLayerEditor extends ObjectEditor {
     get schema() {
@@ -35,6 +36,9 @@ export class ParticleEmitterLayerEditor extends ObjectEditor {
                     type: Number,
                     numeric_type: DataType.Uint32
                 },
+                parameterTracks: {
+                    editor: new ParameterTrackSetEditor()
+                },
                 scaledSpriteHalfSize: {
                     transient: true
                 },

package/engine/EngineHarness.js

@@ -236,6 +236,8 @@ export class EngineHarness {
      * @param {number} [cameraFieldOfView]
      * @param {number} [cameraFarDistance]
      * @param {boolean} [cameraController=true]
+     * @param {boolean} [cameraAutoClip]
+     * @param shadowmapResolution
      */
     static async buildBasics({
                                  engine,
@@ -252,11 +254,13 @@ export class EngineHarness {
                                  enableLights = true,
                                  cameraFieldOfView,
                                  cameraFarDistance,
-                                 cameraController = true
+                                 cameraController = true,
+                                 cameraAutoClip = false,
+                                 shadowmapResolution
                              }) {
 
         if (enableLights) {
-            EngineHarness.buildLights({ engine: engine });
+            EngineHarness.buildLights({ engine: engine, shadowmapResolution });
         }
 
         const camera = EngineHarness.buildCamera({
@@ -266,7 +270,8 @@ export class EngineHarness {
             yaw,
             distance,
             fieldOfView: cameraFieldOfView,
-            distanceMax: cameraFarDistance
+            distanceMax: cameraFarDistance,
+            autoClip: cameraAutoClip
         });
 
         const cameraEntity = camera.entity;
@@ -300,13 +305,14 @@ export class EngineHarness {
      *
      * @param {Engine} engine
      * @param {EntityComponentDataset} ecd
+     * @param shadowmapResolution
      */
-    static buildLights({ engine, ecd = engine.entityManager.dataset }) {
+    static buildLights({ engine, ecd = engine.entityManager.dataset, shadowmapResolution = 1024 }) {
         const em = engine.entityManager;
 
         if (em.getSystem(LightSystem) === null) {
             em.addSystem(new LightSystem(engine, {
-                shadowResolution: 1024
+                shadowResolution: shadowmapResolution
             }));
         }