@inweb/viewer-visualize/src/Viewer/Components/InfoComponent.ts

JavaScript library for rendering CAD and BIM files in a browser using VisualizeJS

///////////////////////////////////////////////////////////////////////////////
// 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 } 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 = () => {
    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 }) => {
    const antialiasing = options.antialiasing === true || options.antialiasing === "fxaa";
    if (antialiasing) this.viewer.info.render.antialiasing = "fxaa";
    else this.viewer.info.render.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 memory = performance["memory"];
    if (memory) this.viewer.info.memory.usedJSHeapSize = memory.usedJSHeapSize;

    this.viewer.info.performance.loadTime += performance.now() - this.startTime;

    console.log("File load time:", this.viewer.info.performance.loadTime, "ms");
  };

  resize = () => {
    const { width, height } = this.viewer.canvas;
    this.viewer.info.render.viewport.width = width;
    this.viewer.info.render.viewport.height = height;
  };

  render = () => {};

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