@inweb/viewer-three 26.11.0 → 26.12.0

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.0",
   "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.0",
+    "@inweb/eventemitter2": "~26.12.0",
+    "@inweb/markup": "~26.12.0",
+    "@inweb/viewer-core": "~26.12.0"
   },
   "devDependencies": {
     "@types/three": "^0.180.0",

package/src/Viewer/Viewer.ts

@@ -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);

package/src/Viewer/components/InfoComponent.ts

@@ -0,0 +1,187 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { REVISION, Vector2 } from "three";
+import { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+export class InfoComponent implements IComponent {
+  protected viewer: Viewer;
+  private startTime: number;
+  private beginTime: number;
+  private prevTime: number;
+  private frames: number;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+    this.startTime = 0;
+    this.beginTime = performance.now();
+    this.prevTime = performance.now();
+    this.frames = 0;
+    this.viewer.addEventListener("initialize", this.initialize);
+    this.viewer.addEventListener("clear", this.clear);
+    this.viewer.addEventListener("optionschange", this.optionsChange);
+    this.viewer.addEventListener("geometrystart", this.geometryStart);
+    this.viewer.addEventListener("databasechunk", this.databaseChunk);
+    this.viewer.addEventListener("geometryend", this.geometryEnd);
+    this.viewer.addEventListener("resize", this.resize);
+    this.viewer.addEventListener("render", this.render);
+    this.viewer.addEventListener("animate", this.animate);
+  }
+
+  dispose() {
+    this.viewer.removeEventListener("initialize", this.initialize);
+    this.viewer.removeEventListener("clear", this.clear);
+    this.viewer.removeEventListener("optionschange", this.optionsChange);
+    this.viewer.removeEventListener("geometrystart", this.geometryStart);
+    this.viewer.removeEventListener("databasechunk", this.databaseChunk);
+    this.viewer.removeEventListener("geometryend", this.geometryEnd);
+    this.viewer.removeEventListener("resize", this.resize);
+    this.viewer.removeEventListener("render", this.render);
+    this.viewer.addEventListener("animate", this.animate);
+  }
+
+  initialize = () => {
+    try {
+      const gl = this.viewer.renderer.getContext();
+      const dbgInfo = gl.getExtension("WEBGL_debug_renderer_info");
+      if (dbgInfo) {
+        this.viewer.info.system.webglRenderer = gl.getParameter(dbgInfo.UNMASKED_RENDERER_WEBGL);
+        this.viewer.info.system.webglVendor = gl.getParameter(dbgInfo.UNMASKED_VENDOR_WEBGL);
+      }
+    } catch (error) {
+      console.error("Error reading WebGL info.", error);
+    }
+
+    console.log("THREE.WebGLRenderer:", REVISION);
+    console.log("WebGL Renderer:", this.viewer.info.system.webglRenderer);
+    console.log("WebGL Vendor:", this.viewer.info.system.webglVendor);
+
+    this.resize();
+
+    this.optionsChange({ data: this.viewer.options });
+  };
+
+  clear = () => {
+    this.viewer.info.performance.timeToFirstRender = 0;
+    this.viewer.info.performance.loadTime = 0;
+
+    this.viewer.info.scene.objects = 0;
+    this.viewer.info.scene.triangles = 0;
+    this.viewer.info.scene.points = 0;
+    this.viewer.info.scene.lines = 0;
+    this.viewer.info.scene.edges = 0;
+
+    this.viewer.info.optimizedScene.objects = 0;
+    this.viewer.info.optimizedScene.triangles = 0;
+    this.viewer.info.optimizedScene.points = 0;
+    this.viewer.info.optimizedScene.lines = 0;
+    this.viewer.info.optimizedScene.edges = 0;
+
+    this.viewer.info.memory.geometries = 0;
+    this.viewer.info.memory.geometryBytes = 0;
+    this.viewer.info.memory.textures = 0;
+    this.viewer.info.memory.textureBytes = 0;
+    this.viewer.info.memory.materials = 0;
+    this.viewer.info.memory.totalEstimatedGpuBytes = 0;
+    this.viewer.info.memory.usedJSHeapSize = 0;
+  };
+
+  optionsChange = ({ data: options }) => {
+    if (options.antialiasing === false) this.viewer.info.render.antialiasing = "";
+    else if (options.antialiasing === true) this.viewer.info.render.antialiasing = "mxaa";
+    else this.viewer.info.render.antialiasing = options.antialiasing;
+  };
+
+  geometryStart = () => {
+    this.startTime = performance.now();
+  };
+
+  databaseChunk = () => {
+    this.viewer.info.performance.timeToFirstRender += performance.now() - this.startTime;
+
+    console.log("Time to first render:", this.viewer.info.performance.timeToFirstRender, "ms");
+  };
+
+  geometryEnd = () => {
+    const model = this.viewer.models[this.viewer.models.length - 1];
+    const info = model.getInfo();
+
+    this.viewer.info.scene.objects += info.scene.objects;
+    this.viewer.info.scene.triangles += info.scene.triangles;
+    this.viewer.info.scene.points += info.scene.points;
+    this.viewer.info.scene.lines += info.scene.lines;
+    this.viewer.info.scene.edges += info.scene.edges;
+
+    this.viewer.info.optimizedScene.objects += info.optimizedScene.objects;
+    this.viewer.info.optimizedScene.triangles += info.optimizedScene.triangles;
+    this.viewer.info.optimizedScene.points += info.optimizedScene.points;
+    this.viewer.info.optimizedScene.lines += info.optimizedScene.lines;
+    this.viewer.info.optimizedScene.edges += info.optimizedScene.edges;
+
+    this.viewer.info.memory.geometries += info.memory.geometries;
+    this.viewer.info.memory.geometryBytes += info.memory.geometryBytes;
+    this.viewer.info.memory.textures += info.memory.textures;
+    this.viewer.info.memory.textureBytes += info.memory.textureBytes;
+    this.viewer.info.memory.materials += info.memory.materials;
+    this.viewer.info.memory.totalEstimatedGpuBytes += info.memory.totalEstimatedGpuBytes;
+
+    const memory = performance["memory"];
+    if (memory) this.viewer.info.memory.usedJSHeapSize = memory.usedJSHeapSize;
+
+    this.viewer.info.performance.loadTime += performance.now() - this.startTime;
+
+    console.log("Number of objects:", info.scene.objects);
+    console.log("Number of objects after optimization:", info.optimizedScene.objects);
+    console.log("Total geometry size:", info.memory.totalEstimatedGpuBytes / (1024 * 1024), "MB");
+
+    console.log("File load time:", this.viewer.info.performance.loadTime, "ms");
+  };
+
+  resize = () => {
+    const rendererSize = this.viewer.renderer.getSize(new Vector2());
+    this.viewer.info.render.viewport.width = rendererSize.x;
+    this.viewer.info.render.viewport.height = rendererSize.y;
+  };
+
+  render = () => {
+    this.viewer.info.render.drawCalls = this.viewer.renderer.info.render.calls;
+    this.viewer.info.render.triangles = this.viewer.renderer.info.render.triangles;
+    this.viewer.info.render.points = this.viewer.renderer.info.render.points;
+    this.viewer.info.render.lines = this.viewer.renderer.info.render.lines;
+  };
+
+  animate = () => {
+    const time = performance.now();
+
+    this.viewer.info.performance.frameTime = Math.round(time - this.beginTime);
+    this.beginTime = time;
+
+    this.frames++;
+    if (time - this.prevTime >= 1000) {
+      this.viewer.info.performance.fps = Math.round((this.frames * 1000) / (time - this.prevTime));
+      this.prevTime = time;
+      this.frames = 0;
+    }
+  };
+}

package/src/Viewer/components/index.ts

@@ -27,6 +27,7 @@ import { BackgroundComponent } from "./BackgroundComponent";
 import { CameraComponent } from "./CameraComponent";
 import { ExtentsComponent } from "./ExtentsComponent";
 import { LightComponent } from "./LightComponent";
+import { InfoComponent } from "./InfoComponent";
 import { RenderLoopComponent } from "./RenderLoopComponent";
 import { ResizeCanvasComponent } from "./ResizeCanvasComponent";
 import { HighlighterComponent } from "./HighlighterComponent";
@@ -80,6 +81,7 @@ components.registerComponent("ExtentsComponent", (viewer) => new ExtentsComponen
 components.registerComponent("CameraComponent", (viewer) => new CameraComponent(viewer));
 components.registerComponent("BackgroundComponent", (viewer) => new BackgroundComponent(viewer));
 components.registerComponent("LightComponent", (viewer) => new LightComponent(viewer));
+components.registerComponent("InfoComponent", (viewer) => new InfoComponent(viewer));
 components.registerComponent("ResizeCanvasComponent", (viewer) => new ResizeCanvasComponent(viewer));
 components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));
 components.registerComponent("HighlighterComponent", (viewer) => new HighlighterComponent(viewer));