@inweb/viewer-three 26.11.0 → 26.12.1

package/extensions/components/AxesHelperComponent.ts

@@ -35,7 +35,7 @@ class AxesHelperComponent implements IComponent {
     this.axesHelper2 = new AxesHelper(1);
     this.modelHelpers = [];
 
-    this.axesHelper1.setColors("#ccc", "#ccc", "#cccb");
+    this.axesHelper1.setColors("#ccc", "#ccc", "#ccc");
 
     this.viewer = viewer;
     this.viewer.addEventListener("initialize", this.syncHelper);

package/extensions/components/InfoPanelComponent.ts

@@ -0,0 +1,197 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { IComponent, components, Viewer } from "@inweb/viewer-three";
+
+const map = {
+  B: 1,
+  KB: 1 << 10,
+  MB: 1 << 20,
+  GB: 1 << 30,
+};
+
+function formatBytes(bytes: number): string {
+  if (!bytes) return "-";
+
+  let unit: string;
+  if (bytes >= map.GB) unit = "GB";
+  else if (bytes >= map.MB) unit = "MB";
+  else if (bytes >= map.KB) unit = "KB";
+  else unit = "B";
+
+  const value = bytes / map[unit];
+  return value.toFixed() + " " + unit;
+}
+
+class Panel {
+  public dom: HTMLElement;
+  private label: HTMLElement;
+  private text: HTMLElement;
+
+  constructor(label: string) {
+    this.dom = document.createElement("div");
+
+    this.label = document.createElement("div");
+    this.label.style.padding = "0.25rem 0";
+    this.label.style.fontWeight = "600";
+    this.label.innerText = label;
+    this.dom.appendChild(this.label);
+
+    this.text = document.createElement("small");
+    this.text.style.display = "block";
+    this.text.style.padding = "0 0.5rem";
+    this.dom.appendChild(this.text);
+  }
+
+  update(text: string) {
+    if (this.text.innerText !== text) this.text.innerText = text;
+  }
+}
+
+class InfoPanelComponent implements IComponent {
+  private viewer: Viewer;
+  private container: HTMLElement;
+  private performancePanel: Panel;
+  private renderPanel: Panel;
+  private optimizedPanel: Panel;
+  private scenePanel: Panel;
+  private memoryPanel: Panel;
+
+  constructor(viewer: Viewer) {
+    this.container = document.createElement("div");
+    this.container.id = "info-container";
+    this.container.style.position = "absolute";
+    this.container.style.left = "0px";
+    this.container.style.top = "0px";
+    this.container.style.maxHeight = "100%";
+    this.container.style.overflow = "auto";
+    this.container.style.padding = "1rem";
+
+    this.setTheme("dark");
+
+    this.performancePanel = new Panel("Performance");
+    this.renderPanel = new Panel("Render");
+    this.optimizedPanel = new Panel("Optimized Scene");
+    this.scenePanel = new Panel("Scene");
+    this.memoryPanel = new Panel("Memory");
+
+    this.container.appendChild(this.performancePanel.dom);
+    this.container.appendChild(this.renderPanel.dom);
+    this.container.appendChild(this.optimizedPanel.dom);
+    this.container.appendChild(this.scenePanel.dom);
+    this.container.appendChild(this.memoryPanel.dom);
+
+    viewer.canvas.parentElement.appendChild(this.container);
+
+    this.viewer = viewer;
+    this.viewer.addEventListener("clear", this.updateSceneInfo);
+    this.viewer.addEventListener("geometryend", this.updateSceneInfo);
+    this.viewer.addEventListener("render", this.updateRenderInfo);
+    this.viewer.addEventListener("animate", this.updatePreformanceInfo);
+
+    this.updatePreformanceInfo();
+    this.updateRenderInfo();
+    this.updateSceneInfo();
+  }
+
+  dispose() {
+    this.viewer.removeEventListener("clear", this.updateSceneInfo);
+    this.viewer.removeEventListener("geometryend", this.updateSceneInfo);
+    this.viewer.removeEventListener("render", this.updateRenderInfo);
+    this.viewer.removeEventListener("animate", this.updatePreformanceInfo);
+
+    this.performancePanel = undefined;
+    this.renderPanel = undefined;
+    this.optimizedPanel = undefined;
+    this.scenePanel = undefined;
+    this.memoryPanel = undefined;
+
+    this.container.remove();
+    this.container = undefined;
+  }
+
+  setTheme(value: string) {
+    if (value === "light") {
+      this.container.style.background = "rgba(0, 0, 0, 0.025)";
+      this.container.style.color = "#3d3d3d";
+    }
+    if (value === "dark") {
+      this.container.style.background = "rgba(0, 0, 0, 0.88)";
+      this.container.style.color = "#ebebeb";
+    }
+  }
+
+  updatePreformanceInfo = () => {
+    const info = this.viewer.info;
+
+    const text = [];
+    text.push(`FPS: ${info.performance.fps}`);
+    text.push(`Frame Time: ${info.performance.frameTime} ms`);
+    this.performancePanel.update(text.join("\n"));
+
+    this.viewer.update();
+  };
+
+  updateRenderInfo = () => {
+    const info = this.viewer.info;
+
+    const text = [];
+    text.push(`Viewport: ${info.render.viewport.width} x ${info.render.viewport.height}`);
+    text.push(`Antialiasing: ${info.render.antialiasing}`);
+    text.push(`Draw Calls: ${info.render.drawCalls}`);
+    text.push(`Triangles: ${info.render.triangles}`);
+    text.push(`Points: ${info.render.points}`);
+    text.push(`Lines: ${info.render.lines}`);
+    this.renderPanel.update(text.join("\n"));
+  };
+
+  updateSceneInfo = () => {
+    const info = this.viewer.info;
+
+    const text = [];
+    text.push(`Objects: ${info.optimizedScene.objects}`);
+    text.push(`Triangles: ${info.optimizedScene.triangles}`);
+    text.push(`Points: ${info.optimizedScene.points}`);
+    text.push(`Lines: ${info.optimizedScene.lines}`);
+    text.push(`Edges: ${info.optimizedScene.edges}`);
+    this.optimizedPanel.update(text.join("\n"));
+
+    text.length = 0;
+    text.push(`Objects: ${info.scene.objects}`);
+    text.push(`Triangles: ${info.scene.triangles}`);
+    text.push(`Points: ${info.scene.points}`);
+    text.push(`Lines: ${info.scene.lines}`);
+    text.push(`Edges: ${info.scene.edges}`);
+    this.scenePanel.update(text.join("\n"));
+
+    text.length = 0;
+    text.push(`Geometries: ${info.memory.geometries}`);
+    text.push(`Textures: ${info.memory.textures}`);
+    text.push(`Materials: ${info.memory.materials}`);
+    text.push(`GPU Used: ${formatBytes(info.memory.totalEstimatedGpuBytes)}`);
+    text.push(`JS Heap Used: ${formatBytes(info.memory.usedJSHeapSize)}`);
+    this.memoryPanel.update(text.join("\n"));
+  };
+}
+
+components.registerComponent("InfoPanelComponent", (viewer) => new InfoPanelComponent(viewer));

package/extensions/components/StatsPanelComponent.ts

@@ -31,23 +31,30 @@ class StatsPanelComponent implements IComponent {
   constructor(viewer: Viewer) {
     this.stats = new Stats();
     this.stats.dom.style.position = "absolute";
+    this.stats.dom.style.left = "0px";
+    this.stats.dom.style.top = "0px";
     viewer.canvas.parentElement.appendChild(this.stats.dom);
 
     this.viewer = viewer;
-    this.viewer.on("animate", this.updateStats);
+    this.viewer.addEventListener("render", this.updateStats);
+    this.viewer.addEventListener("animate", this.updateViewer);
   }
 
   dispose() {
-    this.viewer.off("animate", this.updateStats);
+    this.viewer.removeEventListener("render", this.updateStats);
+    this.viewer.removeEventListener("animate", this.updateViewer);
 
     this.stats.dom.remove();
     this.stats = undefined;
   }
 
   updateStats = () => {
-    this.viewer.render(null, true);
     this.stats.update();
   };
+
+  updateViewer = () => {
+    this.viewer.update();
+  };
 }
 
 components.registerComponent("StatsPanelComponent", (viewer) => new StatsPanelComponent(viewer));

package/extensions/loaders/Potree/PotreeModelImpl.ts

@@ -23,6 +23,7 @@
 
 import { Box3 } from "three";
 import { PointCloudOctree } from "potree-core";
+import { IInfo, Info } from "@inweb/viewer-core";
 import { ModelImpl } from "@inweb/viewer-three";
 
 // Potree model implementation.
@@ -30,6 +31,77 @@ import { ModelImpl } from "@inweb/viewer-three";
 export class PotreeModelImpl extends ModelImpl {
   public pco: PointCloudOctree;
 
+  override getInfo(): IInfo {
+    // ===================== AI-CODE-START ======================
+    // Source: Claude Sonnet 4.5
+    // Date: 2025-10-02
+    // Reviewer: roman.mochalov@opendesign.com
+    // Issue: CLOUD-5738
+
+    let totalPoints = 0;
+    let totalNodes = 0;
+    let loadedGeometryBytes = 0;
+    let estimatedTotalGeometryBytes = 0;
+    let geometryBytes = 0;
+
+    const bytesPerPoint = this.pco.pcoGeometry?.pointAttributes?.byteSize || 0;
+
+    if (this.pco.pcoGeometry && this.pco.pcoGeometry.root) {
+      this.pco.pcoGeometry.root.traverse((node: any) => {
+        totalNodes++;
+
+        const numPoints = node.numPoints || 0;
+        totalPoints += numPoints;
+
+        if (node.loaded && node.geometry) {
+          if (node.geometry.attributes) {
+            for (const name in node.geometry.attributes) {
+              const attribute = node.geometry.attributes[name];
+              if (attribute && attribute.array) {
+                loadedGeometryBytes += attribute.array.byteLength;
+              }
+            }
+          }
+
+          if (node.geometry.index && node.geometry.index.array) {
+            loadedGeometryBytes += node.geometry.index.array.byteLength;
+          }
+        }
+
+        if (bytesPerPoint > 0 && numPoints > 0) {
+          estimatedTotalGeometryBytes += numPoints * (bytesPerPoint * 2 - 1);
+        }
+      }, true);
+    }
+
+    geometryBytes = Math.max(loadedGeometryBytes, estimatedTotalGeometryBytes);
+
+    // ===================== AI-CODE-END ======================
+
+    const info = new Info();
+
+    info.scene.objects = totalNodes;
+    info.scene.points = totalPoints;
+    info.scene.triangles = 0;
+    info.scene.lines = 0;
+    info.scene.edges = 0;
+
+    info.memory.geometries = totalNodes;
+    info.memory.geometryBytes = Math.floor(geometryBytes);
+    info.memory.textures = 0;
+    info.memory.textureBytes = 0;
+    info.memory.materials = 1;
+    info.memory.totalEstimatedGpuBytes = Math.floor(geometryBytes);
+
+    info.optimizedScene.objects = info.scene.objects;
+    info.optimizedScene.triangles = info.scene.triangles;
+    info.optimizedScene.points = info.scene.points;
+    info.optimizedScene.lines = info.scene.lines;
+    info.optimizedScene.edges = info.scene.edges;
+
+    return info;
+  }
+
   override getExtents(target: Box3): Box3 {
     return target.union(this.pco.pcoGeometry.boundingBox);
   }

package/lib/Viewer/Viewer.d.ts

@@ -7,7 +7,7 @@ import { SSAARenderPass } from "./postprocessing/SSAARenderPass.js";
 import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
 import { EventEmitter2 } from "@inweb/eventemitter2";
 import { Assembly, Client, Model, File } from "@inweb/client";
-import { CanvasEventMap, FileSource, IComponent, IDragger, ILoader, IOptions, IViewer, IViewpoint, OptionsEventMap, ViewerEventMap } from "@inweb/viewer-core";
+import { CanvasEventMap, FileSource, IComponent, IDragger, IInfo, ILoader, IOptions, IViewer, IViewpoint, OptionsEventMap, ViewerEventMap } from "@inweb/viewer-core";
 import { IMarkup, IWorldTransform } from "@inweb/markup";
 import { IModelImpl } from "./models/IModelImpl";
 import { Helpers } from "./scenes/Helpers";
@@ -21,6 +21,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     canvasEvents: string[];
     loaders: ILoader[];
     models: IModelImpl[];
+    info: IInfo;
     private canvaseventlistener;
     scene: Scene | undefined;
     helpers: Helpers | undefined;

package/lib/Viewer/components/InfoComponent.d.ts

@@ -0,0 +1,22 @@
+import { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+export declare class InfoComponent implements IComponent {
+    protected viewer: Viewer;
+    private startTime;
+    private beginTime;
+    private prevTime;
+    private frames;
+    constructor(viewer: Viewer);
+    dispose(): void;
+    initialize: () => void;
+    clear: () => void;
+    optionsChange: ({ data: options }: {
+        data: any;
+    }) => void;
+    geometryStart: () => void;
+    databaseChunk: () => void;
+    geometryEnd: () => void;
+    resize: () => void;
+    render: () => void;
+    animate: () => void;
+}

package/lib/Viewer/loaders/DynamicGltfLoader/DynamicModelImpl.d.ts

@@ -1,8 +1,10 @@
 import { Box3, Object3D } from "three";
+import { IInfo } from "@inweb/viewer-core";
 import { ModelImpl } from "../../models/ModelImpl";
 import { DynamicGltfLoader } from "./DynamicGltfLoader.js";
 export declare class DynamicModelImpl extends ModelImpl {
     gltfLoader: DynamicGltfLoader;
+    getInfo(): IInfo;
     getExtents(target: Box3): Box3;
     getObjects(): Object3D[];
     getVisibleObjects(): Object3D[];

package/lib/Viewer/models/IModelImpl.d.ts

@@ -1,5 +1,5 @@
 import { Box3, Object3D } from "three";
-import { IModel } from "@inweb/viewer-core";
+import { IInfo, IModel } from "@inweb/viewer-core";
 /**
  * Basic model implementation.
  */
@@ -9,6 +9,7 @@ export interface IModelImpl extends IModel {
     getUnitScale(): number;
     getUnitString(): string;
     getPrecision(): number;
+    getInfo(): IInfo;
     getExtents(target: Box3): Box3;
     getObjects(): Object3D[];
     getVisibleObjects(): Object3D[];

package/lib/Viewer/models/ModelImpl.d.ts

@@ -1,4 +1,5 @@
 import { Box3, Object3D } from "three";
+import { IInfo } from "@inweb/viewer-core";
 import { IModelImpl } from "./IModelImpl";
 export declare class ModelImpl implements IModelImpl {
     id: string;
@@ -9,6 +10,7 @@ export declare class ModelImpl implements IModelImpl {
     getUnitScale(): number;
     getUnitString(): string;
     getPrecision(): number;
+    getInfo(): IInfo;
     getExtents(target: Box3): Box3;
     getObjects(): Object3D[];
     getVisibleObjects(): Object3D[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.11.0",
+  "version": "26.12.1",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using Three.js",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -35,10 +35,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.11.0",
-    "@inweb/eventemitter2": "~26.11.0",
-    "@inweb/markup": "~26.11.0",
-    "@inweb/viewer-core": "~26.11.0"
+    "@inweb/client": "~26.12.1",
+    "@inweb/eventemitter2": "~26.12.1",
+    "@inweb/markup": "~26.12.1",
+    "@inweb/viewer-core": "~26.12.1"
   },
   "devDependencies": {
     "@types/three": "^0.180.0",

package/src/Viewer/Viewer.ts

@@ -24,11 +24,11 @@
 import {
   Box3,
   LinearSRGBColorSpace,
-  // LinearToneMapping,
   Object3D,
   OrthographicCamera,
   PerspectiveCamera,
   Plane,
+  Raycaster,
   Scene,
   Sphere,
   Vector2,
@@ -52,7 +52,9 @@ import {
   IComponent,
   IDragger,
   IEntity,
+  IInfo,
   ILoader,
+  Info,
   IOptions,
   IOrthogonalCamera,
   IPerspectiveCamera,
@@ -85,6 +87,7 @@ export class Viewer
   public canvasEvents: string[];
   public loaders: ILoader[];
   public models: IModelImpl[];
+  public info: IInfo;
 
   private canvaseventlistener: (event: any) => void;
 
@@ -122,6 +125,7 @@ export class Viewer
     this.options = new Options(this);
     this.loaders = [];
     this.models = [];
+    this.info = new Info();
 
     this.canvasEvents = CANVAS_EVENTS.slice();
     this.canvaseventlistener = (event: Event) => this.emit(event);
@@ -326,6 +330,9 @@ export class Viewer
     this._renderTime = time;
     this._renderNeeded = false;
 
+    this.renderer.info.autoReset = false;
+    this.renderer.info.reset();
+
     if (this.options.antialiasing === true || this.options.antialiasing === "msaa") {
       this.renderer.render(this.scene, this.camera);
       this.renderer.render(this.helpers, this.camera);
@@ -825,7 +832,11 @@ export class Viewer
   }
 
   // IWorldTransform
-
+  // ===================== AI-CODE-START ======================
+  // Source: Claude Sonnet 4.5
+  // Date: 2025-11-25
+  // Reviewer: vitaly.ivanov@opendesign.com
+  // Issue: CLOUD-5990
   screenToWorld(position: { x: number; y: number }): { x: number; y: number; z: number } {
     if (!this.renderer) return { x: position.x, y: position.y, z: 0 };
 
@@ -833,11 +844,36 @@ export class Viewer
     const x = position.x / (rect.width / 2) - 1;
     const y = -position.y / (rect.height / 2) + 1;
 
-    const point = new Vector3(x, y, -1);
-    point.unproject(this.camera);
+    if (this.camera["isPerspectiveCamera"]) {
+      // Create a raycaster from the screen position
+      const raycaster = new Raycaster();
+      const mouse = new Vector2(x, y);
+      raycaster.setFromCamera(mouse, this.camera);
+
+      // Create a plane perpendicular to the camera direction at the target point
+      const cameraDirection = new Vector3();
+      this.camera.getWorldDirection(cameraDirection);
+      const targetPlane = new Plane().setFromNormalAndCoplanarPoint(cameraDirection, this.target);
+
+      // Intersect the ray with the target plane
+      const intersectionPoint = new Vector3();
+      raycaster.ray.intersectPlane(targetPlane, intersectionPoint);
+
+      // If intersection fails (ray parallel to plane), fallback to near plane unprojection
+      if (!intersectionPoint) {
+        const point = new Vector3(x, y, -1);
+        point.unproject(this.camera);
+        return { x: point.x, y: point.y, z: point.z };
+      }
+      return { x: intersectionPoint.x, y: intersectionPoint.y, z: intersectionPoint.z };
+    } else {
+      const point = new Vector3(x, y, -1);
+      point.unproject(this.camera);
 
-    return { x: point.x, y: point.y, z: point.z };
+      return { x: point.x, y: point.y, z: point.z };
+    }
   }
+  // ===================== AI-CODE-END ======================
 
   worldToScreen(position: { x: number; y: number; z: number }): { x: number; y: number } {
     if (!this.renderer) return { x: position.x, y: position.y };