Stats Panel

Orillusion provides the @orillusion/stats component to display the current running status of the engine. It currently supports the runtime FPS and memory usage.

Installation

Same as the engine method, we can import the plugin in two ways: via NPM and via CDN links:

1. Install via the NPM package

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 build version via <script>, 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

Generally, just add the Stats component 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;
    }
}

let engine = 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, engine.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;
engine.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';