Stats Panel

Orillusion provides the Stats component to display the current performance statistics of the engine, including FPS and memory usage.

Installation

Same as the engine installation, we can import physic plugins through two methods: NPM and CDN linking:

1. Install by NPM

npm install @orillusion/core --save
npm install @orillusion/stats --save

import { Engine3D } from "@orillusion/core"
import { Stats } from "@orillusion/stats"

2. Import via CDN links

We recommend using the ESModule build version:

<script type="module">
  import { Engine3D } from "https://unpkg.com/@orillusion/core/dist/orillusion.es.js" 
  import { Stats } from "https://unpkg.com/@orillusion/stats/dist/stats.es.js" 
</script>

Or load the UMD version through <script> tag, and get the Stats module from the global Orillusion variable:

<script src="https://unpkg.com/@orillusion/core/orillusion.umd.js"></script>
<script src="https://unpkg.com/@orillusion/stats/dist/stats.umd.js"></script>
<script>
  const { Engine3D, Stats } = Orillusion
  const { Stats } = Stats
</script>

Example

Normally, the Stats component is added to the Scene3D object:

import { Scene } from "@orillusion/core"
import { Stats } from "@orillusion/stats"
let scene = new Scene3D();
scene.addComponent(Stats);

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<

import { Engine3D, Scene3D, Object3D, Camera3D, View3D, LitMaterial, AtmosphericComponent, BoxGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, ComponentBase } from '@orillusion/core';
import { Stats } from '@orillusion/stats';

class RotateScript extends ComponentBase {
    protected update() {
        this.object3D.rotationY += 1;
    }
}

await Engine3D.init();
let scene3D = new Scene3D();
// add a default skybox
scene3D.addComponent(AtmosphericComponent);
// add the performance stats panel
scene3D.addComponent(Stats);

let cameraObj = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
camera.perspective(60, Engine3D.aspect, 1, 5000.0);
cameraObj.addComponent(HoverCameraController);
scene3D.addChild(cameraObj);

let light: Object3D = new Object3D();
let component = light.addComponent(DirectLight);
component.lightColor = new Color(1.0, 1.0, 1.0, 1.0);
component.intensity = 1;
scene3D.addChild(light);

const obj = new Object3D();
let mr = obj.addComponent(MeshRenderer);
mr.geometry = new BoxGeometry(5, 5, 5);
mr.material = new LitMaterial();

obj.addComponent(RotateScript);
scene3D.addChild(obj);

let view = new View3D();
view.scene = scene3D;
view.camera = camera;
Engine3D.startRenderView(view);

By default, a rectangular floating panel will appear in the upper left corner of the window. If you need to change the position, you can set the style attribute of stats.container , or add css to modify the .stats class.

  let stats = scene.addComponent(Stats);
  stats.container.style.left = '10px';
  stats.container.style.top = '10px';