Needle Engine 3.37.3-alpha

Files changed (9) hide show

plugins/vite/meta.js +5 -2
src/engine/engine_application.ts +9 -2
src/engine/engine_gizmos.ts +1 -1
src/engine/engine_loaders.ts +10 -2
src/engine/engine_networking.ts +20 -1
src/engine-components/LookAtConstraint.ts +14 -0
src/engine/extensions/NEEDLE_progressive.ts +9 -15
src/engine-components/Renderer.ts +150 -50
src/engine-components/ScreenCapture.ts +3 -0

plugins/vite/meta.js CHANGED Viewed

@@ -5,6 +5,8 @@
 import { getPosterPath } from './poster.js';
 /**
+ * @param {string} command
+ * @param {import('../types').needleMeta} config
  * @param {import('../types').userSettings} userSettings
  */
 export const needleMeta = (command, config, userSettings) => {
@@ -25,14 +27,15 @@
             enforce: 'pre',
             transform(html, _ctx) {
-                html = insertNeedleCredits(html);
                 if (userSettings.allowMetaPlugin === false) return [];
                 // this is useful to get the latest config exported from editor
                 // whenever vite wants to transform the html
                 updateConfig();
+                if (!config.license)
+                    html = insertNeedleCredits(html);
                 // early out of the config is invalid / doesn't contain meta information
                 // TODO might be better to handle these edge cases / special cases right from Unity/Blender and not here
                 if (!config) return [];

src/engine/engine_application.ts CHANGED Viewed

@@ -36,7 +36,12 @@
         return userInteractionRegistered;
     }
-    public static registerWaitForAllowAudio(cb: Function) {
+    /**
+     * Register a callback that will be called when the user interacts with the page (click, touch, keypress, etc).
+     * If the user has already interacted with the page, the callback will be called immediately.
+     * This can be used to wait for user interaction before playing audio, for example.
+     */
+    public static registerWaitForInteraction(cb: Function) {
         if (cb !== null) {
             if (userInteractionRegistered) {
                 cb();
@@ -46,6 +51,8 @@
                 userInteractionCallbacks.push(cb);
         }
     }
+    /**  @deprecated use Application.registerWaitForInteraction instead */
+    public static readonly registerWaitForAllowAudio = Application.registerWaitForInteraction;
     private _mute: boolean = false;
     /** audio muted? */
@@ -57,7 +64,7 @@
         this.dispatchEvent(new Event(ApplicationEvents.MuteChanged));
     }
-    private context: Context;
+    private readonly context: Context;
     /** @returns true if the document is focused */
     public get hasFocus(): boolean {

src/engine/engine_gizmos.ts CHANGED Viewed

@@ -190,7 +190,7 @@
         if (!fontFamily) {
             fontFamily = ThreeMeshUI.FontLibrary.addFontFamily(this.familyName);
-            const variant = fontFamily.addVariant("normal", "normal", "./include/needle/arial-msdf.json", "./include/needle/arial.png") as any as ThreeMeshUI.FontVariant;
+            const variant = fontFamily.addVariant("normal", "normal", "https://uploads.needle.tools/include/font-msdf.json", "https://uploads.needle.tools/include/font.png") as any as ThreeMeshUI.FontVariant;
             variant?.addEventListener('ready', () => {
                 ThreeMeshUI.update();
             });

src/engine/engine_loaders.ts CHANGED Viewed

@@ -4,14 +4,22 @@
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
 import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';
+import { isDevEnvironment } from './debug/index.js';
 import { Context } from "./engine_setup.js"
 import { getParam } from "./engine_utils.js";
 const debug = getParam("debugdecoders");
-const DEFAULT_DRACO_DECODER_LOCATION = 'https://www.gstatic.com/draco/versioned/decoders/1.4.1/';
-const DEFAULT_KTX2_TRANSCODER_LOCATION = 'https://www.gstatic.com/basis-universal/versioned/2021-04-15-ba1c3e4/';
+let DEFAULT_DRACO_DECODER_LOCATION = 'https://www.gstatic.com/draco/versioned/decoders/1.4.1/';
+let DEFAULT_KTX2_TRANSCODER_LOCATION = 'https://www.gstatic.com/basis-universal/versioned/2021-04-15-ba1c3e4/';
+fetch(DEFAULT_DRACO_DECODER_LOCATION + "draco_decoder.js", { method: "head" })
+    .catch(_ => {
+        if (isDevEnvironment()) console.warn("Failed to load draco decoder from \"" + DEFAULT_DRACO_DECODER_LOCATION + "\".\nFalling back to local version at \"./include/draco\"");
+        DEFAULT_DRACO_DECODER_LOCATION = "./include/draco/";
+        DEFAULT_KTX2_TRANSCODER_LOCATION = "./include/ktx2/";
+    });
 let dracoLoader: DRACOLoader;
 let meshoptDecoder: typeof MeshoptDecoder;
 let ktx2Loader: KTX2Loader;

src/engine/engine_networking.ts CHANGED Viewed

@@ -267,6 +267,9 @@
         return this._peer;
     }
+    /**
+     * Returns the state of a given guid.
+     */
     public tryGetState(guid: string): IModel | null {
         if (guid === "invalid") return null;
         return this._state[guid];
@@ -290,8 +293,21 @@
     public get currentRoomName(): string | null { return this._currentRoomName; }
     /** True when connected to a room via a regular url, otherwise (when using a view only url) false indicating that the user should not be able to modify the scene */
     public get allowEditing(): boolean { return this._currentRoomAllowEditing; }
-    // use this to join a room in view mode (see SyncedRoom)
+    /**
+     * The view id of the room the user is currently connected to.
+     */
     public get currentRoomViewId(): string | null { return this._currentRoomViewId; }
+    /**
+     * Returns a url that can be shared with others to view the current room in view only mode.
+     * This is useful for sharing a room with others without allowing them to modify the scene.
+     * Use `connection.allowEditing` to check if the current room is in view only mode.
+     */
+    public getViewOnlyUrl() {
+        if (this.currentRoomViewId === null) return null;
+        const url = new URL(window.location.href);
+        url.searchParams.set("view", this.currentRoomViewId);
+        return url.href;
+    }
     /** True if connected to a networked room. Use the joinRoom function or a `SyncedRoom` component */
     public get isInRoom(): boolean {
@@ -303,6 +319,9 @@
         return this._currentDelay;
     }
+    /**
+     * The current server url that the networking backend is connected to (e.g. the url of the websocket server)
+     */
     public get currentServerUrl(): string | null {
         // @ts-ignore (in ts-websocket 2.x this property is exposed)
         return this._ws?.url ?? null;

src/engine-components/LookAtConstraint.ts CHANGED Viewed

@@ -3,10 +3,24 @@
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { Behaviour } from "./Component.js";
+/**
+ * A LookAtConstraint is used by OrbitControls to make the camera look at a target.
+ */
 export class LookAtConstraint extends Behaviour {
+    /**
+     * When true the constraint is active.
+     */
+    @serializable()
     constraintActive: boolean = true;
+    /**
+     * When true the look at is locked to the position of the assigned sources.
+     */
+    @serializable()
     locked: boolean = false;
+    /**
+     * The sources to look at.
+     */
     @serializable(Object3D)
     sources: Object3D[] = [];
 }

src/engine/extensions/NEEDLE_progressive.ts CHANGED Viewed

@@ -434,27 +434,21 @@
                 const ext = meshInfo?.extensions[EXTENSION_NAME] as NEEDLE_progressive_mesh_model;
                 if (ext && ext.lods) {
                     for (const key of this.parser.associations.keys()) {
-                        if (key instanceof Mesh || key instanceof Group) {
-                            const val = this.parser.associations.get(key) as { meshes: number };
+                        if (key instanceof Mesh) {
+                            const val = this.parser.associations.get(key) as { meshes: number, primitives: number };
                             if (val.meshes === index) {
                                 const obj = key;
                                 if (debug) console.log("> Progressive: register mesh", index, obj.name, ext, obj.uuid, obj);
                                 const LODKEY = obj.uuid;
                                 const LODLEVEL = ext.lods.length;
                                 if (obj instanceof Mesh) {
-                                    applyMeshLOD(LODKEY, obj, LODLEVEL, undefined, ext);
-                                    NEEDLE_progressive.lowresCache.set(LODKEY, obj.geometry);
-                                }
-                                else {
-                                    const geometries = new Array<BufferGeometry>();
-                                    for (let i = 0; i < obj.children.length; i++) {
-                                        const child = obj.children[i];
-                                        if (child instanceof Mesh) {
-                                            geometries.push(child.geometry as BufferGeometry);
-                                            applyMeshLOD(LODKEY, child, LODLEVEL, i, ext);
-                                        }
+                                    applyMeshLOD(LODKEY, obj, LODLEVEL, val.primitives, ext);
+                                    let existing = NEEDLE_progressive.lowresCache.get(LODKEY) as unknown as BufferGeometry[] | undefined;
+                                    if (existing) {
+                                        existing.push(obj.geometry as BufferGeometry);
                                     }
-                                    NEEDLE_progressive.lowresCache.set(LODKEY, geometries);
+                                    else existing = [obj.geometry as BufferGeometry];
+                                    NEEDLE_progressive.lowresCache.set(LODKEY, existing);
                                 }
                             }
                         }
@@ -472,7 +466,7 @@
     /** cache of already loaded mesh lods */
     private static readonly previouslyLoaded: Map<string, Promise<null | Texture | BufferGeometry | BufferGeometry[]>> = new Map();
     /** this contains the geometry/textures that were originally loaded */
-    private static readonly lowresCache: Map<string, Texture | BufferGeometry | BufferGeometry[]> = new Map();
+    private static readonly lowresCache: Map<string, Texture | BufferGeometry[]> = new Map();
     private static async getOrLoadLOD<T extends Texture | BufferGeometry>(
         context: Context, source: SourceIdentifier | undefined, current: T & ObjectThatMightHaveLODs, level: number

src/engine-components/Renderer.ts CHANGED Viewed

@@ -1,9 +1,11 @@
-import { AxesHelper, Box3, BufferGeometry, Color, InstancedMesh, Material, Matrix4, Mesh, MeshBasicMaterial, Object3D, PerspectiveCamera, RawShaderMaterial, SkinnedMesh, Sphere, Texture, Vector3, Vector4 } from "three";
+import { AxesHelper, Box3, BufferGeometry, Color, InstancedMesh, Material, Matrix4, Mesh, MeshBasicMaterial, Object3D, PerspectiveCamera, RawShaderMaterial, SkinnedMesh, Sphere, Texture, Vector2, Vector3, Vector4 } from "three";
 import { showBalloonWarning } from "../engine/debug/index.js";
 import { getComponent, getOrAddComponent } from "../engine/engine_components.js";
+import { ContextEvent, NeedleEngine } from "../engine/engine_context_registry.js";
 import { Gizmos, LabelHandle } from "../engine/engine_gizmos.js";
 import { $instancingAutoUpdateBounds, $instancingRenderer, InstancingUtil, NEED_UPDATE_INSTANCE_KEY } from "../engine/engine_instancing.js";
+import { onStart } from "../engine/engine_lifecycle_api.js";
 import { isLocalNetwork } from "../engine/engine_networking_utils.js";
 import { getRaycastMesh } from "../engine/engine_physics.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
@@ -20,15 +22,33 @@
 // import { RendererCustomShader } from "./RendererCustomShader.js";
 import { RendererLightmap } from "./RendererLightmap.js";
 // for staying compatible with old code
 export { InstancingUtil } from "../engine/engine_instancing.js";
 const debugRenderer = getParam("debugrenderer");
 const debugskinnedmesh = getParam("debugskinnedmesh");
 const suppressInstancing = getParam("noinstancing");
-const debugProgressiveLoading = getParam("debugprogressive");
+let debugProgressiveLoading = getParam("debugprogressive");
 const suppressProgressiveLoading = getParam("noprogressive");
+if (debugProgressiveLoading && document) {
+    onStart(ctx => {
+        const button = document.createElement("button");
+        button.innerText = "Prog Debug Mode: " + debugProgressiveLoading;
+        button.onclick = () => {
+            if (debugProgressiveLoading == "density")
+                debugProgressiveLoading = false;
+            else if (debugProgressiveLoading == false)
+                debugProgressiveLoading = true;
+            else if (debugProgressiveLoading)
+                debugProgressiveLoading = "density";
+            button.innerText = "Prog Debug Mode: " + debugProgressiveLoading;
+        };
+        ctx.menu.appendChild(button);
+    });
+}
 const showWireframe = getParam("wireframe");
 export enum ReflectionProbeUsage {
@@ -831,7 +851,8 @@
     private _lastLodLevel = -1;
     private _lastScreenCoverage = 0;
-    private _lastScreenspaceVolume = 0;
+    private _lastScreenspaceVolume = new Vector3();
+    private _lastCentrality = 0;
     private _nextLodTestTime = 0;
     private _randomLodLevelCheckFrameOffset = Math.floor(Math.random() * 100);
     private readonly _sphere = new Sphere();
@@ -845,7 +866,7 @@
         const interval = 3;
-        if (!debugProgressiveLoading) {
+        if (!(debugProgressiveLoading == "density")) {
             if (!force && (this.context.time.frame + this._randomLodLevelCheckFrameOffset) % interval != 0) {
                 return this._lastLodLevel;
             }
@@ -855,14 +876,29 @@
             }
         }
+        /** rough measure of "triangles on quadratic screen" – we're switching LODs based on this metric. */
+        const desiredDensity = 100_000;
+        /** highest LOD level we'd ever expect to be generated */
         const maxLevel = 10;
+        let currentAllowedDensity = desiredDensity;
         let level = maxLevel + 1;
         if (this.context.mainCamera) {
             const isLowPerformanceDevice = isMobileDevice();
-            const lod_0_threshold = isLowPerformanceDevice ? .8 : .6;
+            /** We probably want to make these numbers configurable. */
+            currentAllowedDensity = desiredDensity * (isLowPerformanceDevice ? 0.7 : 1.0);
+            // Experiment: quick & dirty performance-adaptive LODs
+            /*
+            if (this.context.time.smoothedFps < 59) {
+                currentAllowedDensity *= 0.5;
+            }
+            else if (this.context.time.smoothedFps >= 59) {
+                currentAllowedDensity *= 1.25;
+            }
+            */
             // TODO: we should save the LOD level in the shared mesh and not just calculate one level per renderer
             for (const mesh of this.sharedMeshes) {
@@ -873,16 +909,9 @@
                     return this._lastLodLevel = mesh["DEBUG:LOD"];
                 }
-                let meshDensity = 0;
-                // TODO: the mesh info contains also the density for all available LOD level so we can use this for selecting which level to show
+                // The mesh info contains also the density for all available LOD level so we can use this for selecting which level to show
                 const lodsInfo = NEEDLE_progressive.getMeshLODInformation(mesh.geometry);
-                // TODO: the substraction here is not clear - it should be some sort of mesh density value
-                if (lodsInfo?.lods && lodsInfo?.lods.length > 0)
-                    meshDensity = (Math.log2(lodsInfo.lods[0].density || 0) / 2) - 8;
-                else if(debugProgressiveLoading) console.warn("No LOD information found...", mesh.name);
-                if (debugProgressiveLoading) {
-                    // ^console.log("Looking at LOD levels", lodsInfo)
-                }
+                const lods = lodsInfo?.lods;
                 // TODO: we can skip all this if we dont have any LOD information - we can ask the progressive extension for that
                 const frustum = this.context.mainCameraComponent?.getFrustum();
@@ -915,17 +944,73 @@
                     // calculate size on screen
                     this._box.copy(box);
                     this._box.applyMatrix4(mesh.matrixWorld);
+                    const cam = this.context.mainCamera;
+                    // Converting into projection space has the disadvantage that objects further to the side
+                    // will have a much larger coverage, especially with high-field-of-view situations like in VR.
+                    // Alternatively, we could attempt to calculate angular coverage (some kind of polar coordinates maybe?)
+                    // or introduce a correction factor based on "expected distortion" of the object.
+                    // High distortions would lead to lower LOD levels.
+                    // "Centrality" of the calculated screen-space bounding box could be a factor here –
+                    // what's the distance of the bounding box to the center of the screen?
                     const mat = this.context.mainCameraComponent!.getProjectionScreenMatrix(Renderer.tempMatrix);
                     this._box.applyMatrix4(mat);
-                    // Gizmos.DrawWireBox(this._box.getCenter(getTempVector()), this._box.getSize(getTempVector()), 0x00ff00, .02);
+                    // TODO might need to be adjusted for cameras that are rendered during an XR session but are
+                    // actually not XR cameras (e.g. a render texture)
+                    if (this.context.isInXR && cam.fov > 70) {
+                        // calculate centrality of the bounding box - how close is it to the screen center
+                        const min = this._box.min;
+                        const max = this._box.max;
+                        let minX = min.x;
+                        let minY = min.y;
+                        let maxX = max.x;
+                        let maxY = max.y;
+                        // enlarge
+                        const enlargementFactor = 2.0;
+                        const centerBoost = 1.5;
+                        const centerX = (min.x + max.x) * 0.5;
+                        const centerY = (min.y + max.y) * 0.5;
+                        minX = (minX - centerX) * enlargementFactor + centerX;
+                        minY = (minY - centerY) * enlargementFactor + centerY;
+                        maxX = (maxX - centerX) * enlargementFactor + centerX;
+                        maxY = (maxY - centerY) * enlargementFactor + centerY;
+                        const xCentrality = minX < 0 && maxX > 0 ? 0 : Math.min(Math.abs(min.x), Math.abs(max.x));
+                        const yCentrality = minY < 0 && maxY > 0 ? 0 : Math.min(Math.abs(min.y), Math.abs(max.y));
+                        const centrality = Math.max(xCentrality, yCentrality);
+                        // heuristically determined to lower quality for objects at the edges of vision
+                        this._lastCentrality = (centerBoost - centrality) * (centerBoost - centrality) * (centerBoost - centrality);
+                    }
+                    else {
+                        this._lastCentrality = 1;
+                    }
                     const boxSize = this._box.getSize(getTempVector());
-                    // const verticalFov = this.context.mainCamera.fov;
-                    let screenSize = boxSize.y / 2;// / (2 * Math.atan(Math.PI * verticalFov / 360));
-                    // if (mesh.name.startsWith("Statue_")) console.log(mesh.name, "ScreenSize", screenSize, "Density", meshDensity, mesh.geometry.index!.count / 3);
-                    screenSize /= Math.pow(2, meshDensity - .5);
-                    this._lastScreenCoverage = Math.max(boxSize.x, boxSize.y, boxSize.z) / 2;
-                    this._lastScreenspaceVolume = boxSize.x * boxSize.y * boxSize.z / 8;
+                    boxSize.multiplyScalar(0.5); // goes from -1..1, we want -0.5..0.5 for coverage in percent
+                    if (screen.availHeight > 0)
+                        boxSize.multiplyScalar(this.context.domHeight / screen.availHeight); // correct for size of context on screen
+                    boxSize.x *= cam.aspect;
+                    const matView = cam.matrixWorldInverse;
+                    const box2 = new Box3();
+                    box2.copy(box);
+                    box2.applyMatrix4(mesh.matrixWorld);
+                    box2.applyMatrix4(matView);
+                    const boxSize2 = box2.getSize(getTempVector());
+                    // approximate depth coverage in relation to screenspace size
+                    const max2 = Math.max(boxSize2.x, boxSize2.y);
+                    const max1 = Math.max(boxSize.x, boxSize.y);
+                    if (max1 != 0 && max2 != 0)
+                        boxSize.z = boxSize2.z / Math.max(boxSize2.x, boxSize2.y) * Math.max(boxSize.x, boxSize.y);
+                    this._lastScreenCoverage = Math.max(boxSize.x, boxSize.y, boxSize.z);
+                    this._lastScreenspaceVolume.copy(boxSize);
+                    this._lastScreenCoverage *= this._lastCentrality;
                     // draw screen size box
                     if (debugProgressiveLoading) {
                         mat.invert();
@@ -941,8 +1026,9 @@
                         corner2.y = corner0.y;
                         const corner3 = getTempVector();
                         corner3.copy(this._box.max);
+                        // draw outlines at the center of the box
                         const z = (corner0.z + corner3.z) * 0.5;
+                        // all outlines should have the same depth in screen space
                         corner0.z = corner1.z = corner2.z = corner3.z = z;
                         corner0.applyMatrix4(mat);
@@ -956,17 +1042,18 @@
                         Gizmos.DrawLine(corner2, corner3, 0x0000ff);
                     }
-                    // screenSize *= .2;
                     let expectedLevel = 999;
-                    let threshold = lod_0_threshold;
-                    for (let l = 0; l < maxLevel; l++) {
-                        if (screenSize > threshold) {
-                            expectedLevel = l;
-                            break;
+                    const framerate = this.context.time.smoothedFps;
+                    if (lods && this._lastScreenCoverage > 0) {
+                        for (let l = 0; l < lods.length; l++) {
+                            const densityForThisLevel = lods[l].density;
+                            if (densityForThisLevel / this._lastScreenCoverage < currentAllowedDensity) {
+                                expectedLevel = l;
+                                break;
+                            }
                         }
-                        threshold /= 2;
                     }
                     // expectedLevel -= meshDensity - 5;
                     // expectedLevel += meshDensity;
                     const isLowerLod = expectedLevel < level;
@@ -985,8 +1072,8 @@
                 if (debugProgressiveLoading == "verbose") console.warn(`LOD Level changed from ${this._lastLodLevel} to ${level} for ${this.name}`);
                 this.drawGizmoLodLevel(true);
             }
+        }
-        }
         this._lastLodLevel = level;
         return level;
     }
@@ -994,8 +1081,12 @@
     private drawGizmoLodLevel(changed: boolean) {
         // Will be (maxLod + 1) (11) if no lod level is found
         const _level = this._lastLodLevel;
-        const camForward = (this.context.mainCamera as any as IGameObject).worldForward;
-        const camWorld = (this.context.mainCamera as any as IGameObject).worldPosition;
+        const cam = this.context.mainCamera as any as PerspectiveCamera;
+        const camGO = cam as any as GameObject;
+        const camForward = camGO.worldForward;
+        const camWorld = camGO.worldPosition;
         for (const mesh of this.sharedMeshes) {
             if (!mesh) continue;
             if (mesh.geometry.boundingSphere) {
@@ -1018,9 +1109,11 @@
                     const lods = NEEDLE_progressive.getMeshLODInformation(mesh.geometry)?.lods;
                     const level = lods ? Math.min(lods?.length - 1, _level) : 0;
                     let allLods = "";
-                    if (lods) {
+                    if (lods && this._lastScreenCoverage > 0) {
                         for (let i = 0; i < lods.length; i++) {
-                            allLods += lods[i].density.toFixed(0) + ",";
+                            const d = lods[i].density;
+                            const last = i == lods.length - 1;
+                            allLods += d.toFixed(0) + ">" + (d / this._lastScreenCoverage).toFixed(0) + (last ? "" : ",");
                         }
                     }
                     const density = lods ? lods[level]?.density : -1;
@@ -1035,32 +1128,39 @@
                     // Area is squared, so both maxBoxSize and wsMedian are squared here
                     // Here, we're basically reverting the calculations that have happened in the pipeline for debugging.
                     const surfaceArea = 1 / density * triangleCount * (maxBoxSize * maxBoxSize) * (wsMedian * wsMedian);
-                    const idealDensity = this._lastScreenCoverage;
                     let text = "LOD " + level;
-                    if(debugProgressiveLoading == "density"){
-                            text += "\n" +
-                                triangleCount + " tris\n" +
-                                (density / this._lastScreenCoverage * 0.01).toFixed(0) + " dens\n" +
-                                (this._lastScreenCoverage * 100).toFixed(1) + "% cov" + "\n" +
-                                (this._lastScreenspaceVolume * 100).toFixed(2) + " m3" + "\n" +
-                                (surfaceArea).toFixed(2) + " m2" + "\n" +
-                                (ws.x).toFixed(2) + "x" + " " + maxBoxSize.toFixed(2) + "b" + "\n" +
-                                allLods + "\n" +
-                                "----" + "\n" +
-                                "1000" + " ideal dens";
+                    if(debugProgressiveLoading == "density") {
+                        text +=
+                            "\n" + triangleCount + " tris" +
+                            // This is key – basically how we're switching
+                            "\n" + (density / this._lastScreenCoverage).toFixed(0) + " dens" +
+                            "\n" + (this._lastScreenCoverage * 100).toFixed(1) + "% cov" +
+                            // "\n" + (this._lastScreenspaceVolume.x.toFixed(2) + "x" + this._lastScreenspaceVolume.y.toFixed(2) + "x" + this._lastScreenspaceVolume.z.toFixed(2)) + " vol" +
+                            // + "\n" + (surfaceArea).toFixed(2) + " m2" +
+                            "\n" + (this._lastCentrality * 100).toFixed(1) + "% centr" +
+                            "\n" + (this._box.min.x.toFixed(2) + "-" + this._box.max.x.toFixed(2) + "x" + this._box.min.y.toFixed(2) + "-" + this._box.max.y.toFixed(2)) + " scr" +
+                            // "\n" + (ws.x).toFixed(2) + "x" + " " + maxBoxSize.toFixed(2) + "b" + "\n" +
+                            // allLods + "\n" +
+                            //"----" + "\n" +
+                            // "1000" + " ideal dens"
+                            "";
                     }
                     // if (helper) {
                     //     helper?.setText(text);
                     //     continue;
                     // }
-                    const pos = getTempVector(camForward).multiplyScalar(radius * .7).add(boundsCenter);
+                    const fwd = getTempVector(camForward);
+                    // for debugging very close LDOs, we need to flip the radius...
+                    const pos = fwd.multiplyScalar(radius * .7).add(boundsCenter);
                     const distance = pos.distanceTo(camWorld);
-                    const vertexCount = mesh.geometry.index!.count / 3;
+                    // const vertexCount = mesh.geometry.index!.count / 3;
                     // const vertexCountFactor = Math.min(1, vertexCount / 1000);
                     const col = colors[Math.min(colors.length - 1, level)] + "88";
                     // const size = Math.min(10, radius);
-                    Gizmos.DrawLabel(pos, text, distance * .01, undefined, 0xffffff, col);
+                    const windowScale = this.context.domHeight > 0 ? screen.height / this.context.domHeight : 1;
+                    const fieldOfViewScale = Math.tan(cam.fov * Math.PI / 180 / 2);
+                    Gizmos.DrawLabel(pos, text, distance * .01 * windowScale * fieldOfViewScale, undefined, 0xffffff, col);
                     // mesh["LOD_level_label"] = helper;
                 }

src/engine-components/ScreenCapture.ts CHANGED Viewed

@@ -46,15 +46,18 @@
     allowStartOnClick: boolean = true;
     onPointerEnter() {
+        if (this.context.connection.allowEditing == false) return;
         if (!this.allowStartOnClick) return;
         this.context.input.setCursorPointer();
     }
     onPointerExit() {
+        if (this.context.connection.allowEditing == false) return;
         if (!this.allowStartOnClick) return;
         this.context.input.setCursorNormal();
     }
     onPointerClick(evt: PointerEventData) {
+        if (this.context.connection.allowEditing == false) return;
         if (!this.allowStartOnClick) return;
         if (evt && evt.pointerId !== 0) return;
         if (this.isReceiving && this.videoPlayer?.isPlaying) {