@woosh/meep-engine 3.11.2 → 3.12.0

package/editor/process/symbolic/CameraSymbolicDisplay.js

@@ -1,146 +1,146 @@
-import { DEG_TO_RAD } from "../../../src/core/math/DEG_TO_RAD.js";
-import { v3_quaternion_apply } from "../../../src/core/geom/vec3/v3_quaternion_apply.js";
-import { Transform } from "../../../src/engine/ecs/transform/Transform.js";
-import { Camera } from "../../../src/engine/graphics/ecs/camera/Camera.js";
-import { Gizmo } from "../../../src/engine/graphics/render/gizmo/Gizmo.js";
-import { entity_is_editor_owned, SymbolicDisplay } from "./SymbolicDisplay.js";
-
-/**
- * @type {number[]}
- */
-const CAMERA_COLOR = [0.4, 0.9, 1, 1];
-
-/**
- * Which corners are joined: the near rectangle, the far one, and the four edges between them.
- *
- * @type {number[]}
- */
-const EDGES = [
-    0, 1, 1, 2, 2, 3, 3, 0,
-    4, 5, 5, 6, 6, 7, 7, 4,
-    0, 4, 1, 5, 2, 6, 3, 7
-];
-
-/**
- * Eight frustum corners in world space, near plane first.
- *
- * @type {Float32Array}
- */
-const corners = new Float32Array(24);
-
-/**
- * @type {Float32Array}
- */
-const from = new Float32Array(3);
-
-/**
- * @type {Float32Array}
- */
-const to = new Float32Array(3);
-
-/**
- * The two depths the corners are taken at, near then far.
- *
- * @type {Float64Array}
- */
-const depths = new Float64Array(2);
-
-/**
- * The volume a camera entity can see.
- *
- * **Built from the component rather than from a renderer's camera object.** A camera entity has no
- * renderer object of its own, which is why the three `CameraHelper` this replaces could not survive
- * the port; everything the frustum needs — field of view, the two clip planes — is on the component,
- * and where the camera is and which way it faces is its `Transform`.
- * The one thing that is not is the aspect ratio, which belongs to the frame rather than to the
- * camera: it is the viewport's, exactly as the renderer's own is.
- *
- * **Perspective always, because that is what gets drawn.** `Camera.projectionType` carries an
- * orthographic option and no renderer in the program reads it — `CameraSystem3` copies the field of
- * view and the clip planes and nothing else — so a symbol that branched on it would be drawing a
- * projection the game cannot render.
- *
- * The transform's scale is deliberately not applied. A camera has no size, and a scaled entity
- * carrying one still sees exactly as far as its clip planes say.
- *
- * @see SymbolicDisplay
- */
-export class CameraSymbolicDisplay extends SymbolicDisplay {
-    /**
-     * Record a frustum per camera entity.
-     *
-     * The engine's viewport is expected to have a size: `preRender` is dispatched from inside a
-     * frame, and a frame is not drawn into a collapsed viewport at all.
-     *
-     * @param {EntityComponentDataset} dataset
-     */
-    record(dataset) {
-        const viewport = this.engine.graphics.viewport.size;
-        const aspect = viewport.x / viewport.y;
-
-        Gizmo.color = CAMERA_COLOR;
-
-        dataset.traverseEntities([Camera, Transform], (camera, transform, entity) => {
-            if (entity_is_editor_owned(dataset, entity)) {
-                return;
-            }
-
-            this.#write_corners(camera, transform, aspect);
-
-            for (let i = 0; i < 12; i++) {
-                const a = EDGES[i * 2] * 3;
-                const b = EDGES[i * 2 + 1] * 3;
-
-                from[0] = corners[a];
-                from[1] = corners[a + 1];
-                from[2] = corners[a + 2];
-
-                to[0] = corners[b];
-                to[1] = corners[b + 1];
-                to[2] = corners[b + 2];
-
-                Gizmo.draw_line(from, to);
-            }
-        });
-    }
-
-    /**
-     * @param {Camera} camera
-     * @param {Transform} transform
-     * @param {number} aspect
-     */
-    #write_corners(camera, transform, aspect) {
-        const tangent = Math.tan(camera.fov.getValue() * DEG_TO_RAD / 2);
-
-        const rotation = transform.rotation;
-        const position = transform.position;
-
-        // near plane first, then far, each anticlockwise from the top right as the camera sees it
-        depths[0] = camera.clip_near;
-        depths[1] = camera.clip_far;
-
-        for (let plane = 0; plane < 2; plane++) {
-            const depth = depths[plane];
-
-            const half_height = depth * tangent;
-            const half_width = half_height * aspect;
-
-            for (let corner = 0; corner < 4; corner++) {
-                const x = (corner === 0 || corner === 3) ? half_width : -half_width;
-                const y = (corner === 0 || corner === 1) ? half_height : -half_height;
-
-                const address = (plane * 4 + corner) * 3;
-
-                v3_quaternion_apply(
-                    corners, address,
-                    x, y, depth,
-                    rotation.x, rotation.y, rotation.z, rotation.w
-                );
-
-                corners[address] += position.x;
-                corners[address + 1] += position.y;
-                corners[address + 2] += position.z;
-            }
-        }
-    }
-}
+import { DEG_TO_RAD } from "../../../src/core/math/DEG_TO_RAD.js";
+import { v3_quaternion_apply } from "../../../src/core/geom/vec3/v3_quaternion_apply.js";
+import { Transform } from "../../../src/engine/ecs/transform/Transform.js";
+import { Camera } from "../../../src/engine/graphics/ecs/camera/Camera.js";
+import { Gizmo } from "../../../src/engine/graphics/render/gizmo/Gizmo.js";
+import { entity_is_editor_owned, SymbolicDisplay } from "./SymbolicDisplay.js";
+
+/**
+ * @type {number[]}
+ */
+const CAMERA_COLOR = [0.4, 0.9, 1, 1];
+
+/**
+ * Which corners are joined: the near rectangle, the far one, and the four edges between them.
+ *
+ * @type {number[]}
+ */
+const EDGES = [
+    0, 1, 1, 2, 2, 3, 3, 0,
+    4, 5, 5, 6, 6, 7, 7, 4,
+    0, 4, 1, 5, 2, 6, 3, 7
+];
+
+/**
+ * Eight frustum corners in world space, near plane first.
+ *
+ * @type {Float32Array}
+ */
+const corners = new Float32Array(24);
+
+/**
+ * @type {Float32Array}
+ */
+const from = new Float32Array(3);
+
+/**
+ * @type {Float32Array}
+ */
+const to = new Float32Array(3);
+
+/**
+ * The two depths the corners are taken at, near then far.
+ *
+ * @type {Float64Array}
+ */
+const depths = new Float64Array(2);
+
+/**
+ * The volume a camera entity can see.
+ *
+ * **Built from the component rather than from a renderer's camera object.** A camera entity has no
+ * renderer object of its own, which is why the three `CameraHelper` this replaces could not survive
+ * the port; everything the frustum needs — field of view, the two clip planes — is on the component,
+ * and where the camera is and which way it faces is its `Transform`.
+ * The one thing that is not is the aspect ratio, which belongs to the frame rather than to the
+ * camera: it is the viewport's, exactly as the renderer's own is.
+ *
+ * **Perspective always, because that is what gets drawn.** `Camera.projectionType` carries an
+ * orthographic option and no renderer in the program reads it — `CameraSystem` copies the field of
+ * view and the clip planes and nothing else — so a symbol that branched on it would be drawing a
+ * projection the game cannot render.
+ *
+ * The transform's scale is deliberately not applied. A camera has no size, and a scaled entity
+ * carrying one still sees exactly as far as its clip planes say.
+ *
+ * @see SymbolicDisplay
+ */
+export class CameraSymbolicDisplay extends SymbolicDisplay {
+    /**
+     * Record a frustum per camera entity.
+     *
+     * The engine's viewport is expected to have a size: `preRender` is dispatched from inside a
+     * frame, and a frame is not drawn into a collapsed viewport at all.
+     *
+     * @param {EntityComponentDataset} dataset
+     */
+    record(dataset) {
+        const viewport = this.engine.graphics.viewport.size;
+        const aspect = viewport.x / viewport.y;
+
+        Gizmo.color = CAMERA_COLOR;
+
+        dataset.traverseEntities([Camera, Transform], (camera, transform, entity) => {
+            if (entity_is_editor_owned(dataset, entity)) {
+                return;
+            }
+
+            this.#write_corners(camera, transform, aspect);
+
+            for (let i = 0; i < 12; i++) {
+                const a = EDGES[i * 2] * 3;
+                const b = EDGES[i * 2 + 1] * 3;
+
+                from[0] = corners[a];
+                from[1] = corners[a + 1];
+                from[2] = corners[a + 2];
+
+                to[0] = corners[b];
+                to[1] = corners[b + 1];
+                to[2] = corners[b + 2];
+
+                Gizmo.draw_line(from, to);
+            }
+        });
+    }
+
+    /**
+     * @param {Camera} camera
+     * @param {Transform} transform
+     * @param {number} aspect
+     */
+    #write_corners(camera, transform, aspect) {
+        const tangent = Math.tan(camera.fov.getValue() * DEG_TO_RAD / 2);
+
+        const rotation = transform.rotation;
+        const position = transform.position;
+
+        // near plane first, then far, each anticlockwise from the top right as the camera sees it
+        depths[0] = camera.clip_near;
+        depths[1] = camera.clip_far;
+
+        for (let plane = 0; plane < 2; plane++) {
+            const depth = depths[plane];
+
+            const half_height = depth * tangent;
+            const half_width = half_height * aspect;
+
+            for (let corner = 0; corner < 4; corner++) {
+                const x = (corner === 0 || corner === 3) ? half_width : -half_width;
+                const y = (corner === 0 || corner === 1) ? half_height : -half_height;
+
+                const address = (plane * 4 + corner) * 3;
+
+                v3_quaternion_apply(
+                    corners, address,
+                    x, y, depth,
+                    rotation.x, rotation.y, rotation.z, rotation.w
+                );
+
+                corners[address] += position.x;
+                corners[address + 1] += position.y;
+                corners[address + 2] += position.z;
+            }
+        }
+    }
+}

package/editor/process/symbolic/LightSymbolicDisplay.js

@@ -1,172 +1,172 @@
-import { v3_quaternion_apply } from "../../../src/core/geom/vec3/v3_quaternion_apply.js";
-import { Transform } from "../../../src/engine/ecs/transform/Transform.js";
-import { Light } from "../../../src/engine/graphics/ecs/light/Light.js";
-import { LightType } from "../../../src/engine/graphics/ecs/light/LightType.js";
-import { Gizmo } from "../../../src/engine/graphics/render/gizmo/Gizmo.js";
-import { gizmo_draw_wire_circle } from "./gizmo_draw_wire_circle.js";
-import { entity_is_editor_owned, SymbolicDisplay } from "./SymbolicDisplay.js";
-
-/**
- * @type {number[]}
- */
-const LIGHT_COLOR = [1, 0.9, 0.3, 1];
-
-/**
- * How many straight pieces a drawn circle is made of. Enough to read as round at the distance an
- * editor looks at a light from, and few enough that a scene full of lights is not a scene full of
- * lines.
- *
- * @type {number}
- */
-const CIRCLE_SEGMENTS = 24;
-
-/**
- * How far a directional light's arrow reaches, in world units. It has no range to draw — that is
- * what makes it directional — so the length is the symbol's own and says only which way.
- *
- * @type {number}
- */
-const DIRECTION_LENGTH = 2;
-
-/**
- * @type {number}
- */
-const DIRECTION_DISC_RADIUS = 0.5;
-
-/**
- * @type {Float32Array}
- */
-const origin = new Float32Array(3);
-
-/**
- * @type {Float32Array}
- */
-const forward = new Float32Array(3);
-
-/**
- * @type {Float32Array}
- */
-const right = new Float32Array(3);
-
-/**
- * @type {Float32Array}
- */
-const up = new Float32Array(3);
-
-/**
- * @type {Float32Array}
- */
-const rim_center = new Float32Array(3);
-
-/**
- * @type {Float32Array}
- */
-const rim_point = new Float32Array(3);
-
-/**
- * What a light reaches, drawn as the shape of its own type.
- *
- * **Range rather than a fixed-size badge.** three's `PointLightHelper` drew a unit sphere whatever
- * the light's distance was, so the symbol said where the light was and nothing about what it lit;
- * the useful question in an editor is the second one, and the component already answers it. Where
- * the light *is* stays answered too — the positioned marker draws that, on the same entity.
- *
- * **A light shines along its forward**, which is `LightSystem3`'s stated convention and puts it on
- * the transform's local +Z. The spot cone and the directional arrow are both built from that, so a
- * light that is turned in the editor turns its symbol with it.
- *
- * @see SymbolicDisplay
- */
-export class LightSymbolicDisplay extends SymbolicDisplay {
-    /**
-     * @param {EntityComponentDataset} dataset
-     */
-    record(dataset) {
-        Gizmo.color = LIGHT_COLOR;
-
-        dataset.traverseEntities([Light, Transform], (light, transform, entity) => {
-            if (entity_is_editor_owned(dataset, entity)) {
-                return;
-            }
-
-            const position = transform.position;
-
-            origin[0] = position.x;
-            origin[1] = position.y;
-            origin[2] = position.z;
-
-            switch (light.type.getValue()) {
-                case LightType.POINT:
-                    Gizmo.draw_wire_sphere(origin, light.distance.getValue());
-                    break;
-
-                case LightType.SPOT:
-                    this.#write_basis(transform);
-                    this.#draw_cone(light.angle.getValue(), light.distance.getValue());
-                    break;
-
-                case LightType.DIRECTION:
-                    this.#write_basis(transform);
-                    this.#draw_arrow();
-                    break;
-            }
-        });
-    }
-
-    /**
-     * Fill {@link forward}, {@link right} and {@link up} with the entity's own axes.
-     *
-     * @param {Transform} transform
-     */
-    #write_basis(transform) {
-        const rotation = transform.rotation;
-
-        v3_quaternion_apply(forward, 0, 0, 0, 1, rotation.x, rotation.y, rotation.z, rotation.w);
-        v3_quaternion_apply(right, 0, 1, 0, 0, rotation.x, rotation.y, rotation.z, rotation.w);
-        v3_quaternion_apply(up, 0, 0, 1, 0, rotation.x, rotation.y, rotation.z, rotation.w);
-    }
-
-    /**
-     * Four edges to the rim of the cone, and the rim.
-     *
-     * @param {number} half_angle in radians, from the axis to the edge
-     * @param {number} length
-     */
-    #draw_cone(half_angle, length) {
-        const radius = Math.tan(half_angle) * length;
-
-        for (let c = 0; c < 3; c++) {
-            rim_center[c] = origin[c] + forward[c] * length;
-        }
-
-        // the four edges are the rim's own axis points, so an edge and the rim always meet
-        for (let i = 0; i < 4; i++) {
-            const angle = i * (Math.PI / 2);
-
-            const cos = Math.cos(angle) * radius;
-            const sin = Math.sin(angle) * radius;
-
-            for (let c = 0; c < 3; c++) {
-                rim_point[c] = rim_center[c] + right[c] * cos + up[c] * sin;
-            }
-
-            Gizmo.draw_line(origin, rim_point);
-        }
-
-        gizmo_draw_wire_circle(rim_center, right, up, radius, CIRCLE_SEGMENTS);
-    }
-
-    /**
-     * A shaft along the direction, and a disc across it to say the light is a plane of rays rather
-     * than a point.
-     */
-    #draw_arrow() {
-        for (let c = 0; c < 3; c++) {
-            rim_center[c] = origin[c] + forward[c] * DIRECTION_LENGTH;
-        }
-
-        Gizmo.draw_line(origin, rim_center);
-
-        gizmo_draw_wire_circle(origin, right, up, DIRECTION_DISC_RADIUS, CIRCLE_SEGMENTS);
-    }
-}
+import { v3_quaternion_apply } from "../../../src/core/geom/vec3/v3_quaternion_apply.js";
+import { Transform } from "../../../src/engine/ecs/transform/Transform.js";
+import { Light } from "../../../src/engine/graphics/ecs/light/Light.js";
+import { LightType } from "../../../src/engine/graphics/ecs/light/LightType.js";
+import { Gizmo } from "../../../src/engine/graphics/render/gizmo/Gizmo.js";
+import { gizmo_draw_wire_circle } from "./gizmo_draw_wire_circle.js";
+import { entity_is_editor_owned, SymbolicDisplay } from "./SymbolicDisplay.js";
+
+/**
+ * @type {number[]}
+ */
+const LIGHT_COLOR = [1, 0.9, 0.3, 1];
+
+/**
+ * How many straight pieces a drawn circle is made of. Enough to read as round at the distance an
+ * editor looks at a light from, and few enough that a scene full of lights is not a scene full of
+ * lines.
+ *
+ * @type {number}
+ */
+const CIRCLE_SEGMENTS = 24;
+
+/**
+ * How far a directional light's arrow reaches, in world units. It has no range to draw — that is
+ * what makes it directional — so the length is the symbol's own and says only which way.
+ *
+ * @type {number}
+ */
+const DIRECTION_LENGTH = 2;
+
+/**
+ * @type {number}
+ */
+const DIRECTION_DISC_RADIUS = 0.5;
+
+/**
+ * @type {Float32Array}
+ */
+const origin = new Float32Array(3);
+
+/**
+ * @type {Float32Array}
+ */
+const forward = new Float32Array(3);
+
+/**
+ * @type {Float32Array}
+ */
+const right = new Float32Array(3);
+
+/**
+ * @type {Float32Array}
+ */
+const up = new Float32Array(3);
+
+/**
+ * @type {Float32Array}
+ */
+const rim_center = new Float32Array(3);
+
+/**
+ * @type {Float32Array}
+ */
+const rim_point = new Float32Array(3);
+
+/**
+ * What a light reaches, drawn as the shape of its own type.
+ *
+ * **Range rather than a fixed-size badge.** three's `PointLightHelper` drew a unit sphere whatever
+ * the light's distance was, so the symbol said where the light was and nothing about what it lit;
+ * the useful question in an editor is the second one, and the component already answers it. Where
+ * the light *is* stays answered too — the positioned marker draws that, on the same entity.
+ *
+ * **A light shines along its forward**, which is `LightSystem`'s stated convention and puts it on
+ * the transform's local +Z. The spot cone and the directional arrow are both built from that, so a
+ * light that is turned in the editor turns its symbol with it.
+ *
+ * @see SymbolicDisplay
+ */
+export class LightSymbolicDisplay extends SymbolicDisplay {
+    /**
+     * @param {EntityComponentDataset} dataset
+     */
+    record(dataset) {
+        Gizmo.color = LIGHT_COLOR;
+
+        dataset.traverseEntities([Light, Transform], (light, transform, entity) => {
+            if (entity_is_editor_owned(dataset, entity)) {
+                return;
+            }
+
+            const position = transform.position;
+
+            origin[0] = position.x;
+            origin[1] = position.y;
+            origin[2] = position.z;
+
+            switch (light.type.getValue()) {
+                case LightType.POINT:
+                    Gizmo.draw_wire_sphere(origin, light.distance.getValue());
+                    break;
+
+                case LightType.SPOT:
+                    this.#write_basis(transform);
+                    this.#draw_cone(light.angle.getValue(), light.distance.getValue());
+                    break;
+
+                case LightType.DIRECTION:
+                    this.#write_basis(transform);
+                    this.#draw_arrow();
+                    break;
+            }
+        });
+    }
+
+    /**
+     * Fill {@link forward}, {@link right} and {@link up} with the entity's own axes.
+     *
+     * @param {Transform} transform
+     */
+    #write_basis(transform) {
+        const rotation = transform.rotation;
+
+        v3_quaternion_apply(forward, 0, 0, 0, 1, rotation.x, rotation.y, rotation.z, rotation.w);
+        v3_quaternion_apply(right, 0, 1, 0, 0, rotation.x, rotation.y, rotation.z, rotation.w);
+        v3_quaternion_apply(up, 0, 0, 1, 0, rotation.x, rotation.y, rotation.z, rotation.w);
+    }
+
+    /**
+     * Four edges to the rim of the cone, and the rim.
+     *
+     * @param {number} half_angle in radians, from the axis to the edge
+     * @param {number} length
+     */
+    #draw_cone(half_angle, length) {
+        const radius = Math.tan(half_angle) * length;
+
+        for (let c = 0; c < 3; c++) {
+            rim_center[c] = origin[c] + forward[c] * length;
+        }
+
+        // the four edges are the rim's own axis points, so an edge and the rim always meet
+        for (let i = 0; i < 4; i++) {
+            const angle = i * (Math.PI / 2);
+
+            const cos = Math.cos(angle) * radius;
+            const sin = Math.sin(angle) * radius;
+
+            for (let c = 0; c < 3; c++) {
+                rim_point[c] = rim_center[c] + right[c] * cos + up[c] * sin;
+            }
+
+            Gizmo.draw_line(origin, rim_point);
+        }
+
+        gizmo_draw_wire_circle(rim_center, right, up, radius, CIRCLE_SEGMENTS);
+    }
+
+    /**
+     * A shaft along the direction, and a disc across it to say the light is a plane of rays rather
+     * than a point.
+     */
+    #draw_arrow() {
+        for (let c = 0; c < 3; c++) {
+            rim_center[c] = origin[c] + forward[c] * DIRECTION_LENGTH;
+        }
+
+        Gizmo.draw_line(origin, rim_center);
+
+        gizmo_draw_wire_circle(origin, right, up, DIRECTION_DISC_RADIUS, CIRCLE_SEGMENTS);
+    }
+}