@inweb/viewer-three
Version:
JavaScript library for rendering CAD and BIM files in a browser using Three.js
169 lines (165 loc) • 7.95 kB
JavaScript
///////////////////////////////////////////////////////////////////////////////
// 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.
///////////////////////////////////////////////////////////////////////////////
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('@inweb/viewer-three')) :
typeof define === 'function' && define.amd ? define(['@inweb/viewer-three'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ODA.Three));
})(this, (function (viewerThree) { 'use strict';
const map = {
B: 1,
KB: 1 << 10,
MB: 1 << 20,
GB: 1 << 30,
};
function formatBytes(bytes) {
if (!bytes)
return "-";
let unit;
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 {
constructor(label) {
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) {
if (this.text.innerText !== text)
this.text.innerText = text;
}
}
class InfoPanelComponent {
constructor(viewer) {
this.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"));
};
this.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"));
};
this.updateViewer = () => {
this.viewer.update();
};
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) {
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";
}
}
}
viewerThree.components.registerComponent("InfoPanelComponent", (viewer) => new InfoPanelComponent(viewer));
}));
//# sourceMappingURL=InfoPanelComponent.js.map