@inweb/viewer-three/extensions/components/InfoPanelComponent.ts

JavaScript library for rendering CAD and BIM files in a browser using Three.js

///////////////////////////////////////////////////////////////////////////////
// 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.updateViewer);

    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.updateViewer);

    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";
    }
  }

  updateRenderInfo = () => {
    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"));

    text.length = 0;
    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"));
  };

  updateViewer = () => {
    this.viewer.update();
  };
}

components.registerComponent("InfoPanelComponent", (viewer) => new InfoPanelComponent(viewer));