Wonderland Engine stats component.

This library is inspired by stats.js from mrdoob.

Features Overview:

• HTML graph
• 3D static graph
• 3D overlay graph
• Generic Graph (to use outside of Wonderland Engine)

You can install the library using yarn / npm:

yarn i wle-stats

In order to have a quick overview of each features, you can open the example using Wonderland Engine.

1. Create an object and add a mesh component
2. Create a material. You can use any shader / pipeline, as long as the material contains either a flatTexture or a diffuseTexture parameter.
3. Add the stats-3d component on an object at the desired location.
4. Reference the object containing the mesh on the stats-3d component

For more information, please have a look at the Stats3dComponent.

Follow the same step described in the 3D Static section. Set the mode property of the stats-3d component to: Overlay.

Add the stats-html component anywhere in your scene. This component will be added in document.body by default.

For more information, please have a look at the StatsHtmlComponent.

This library exposes the StatsGraph class, usable outside of the Wonderland Engine ecosystem.

import {StatsGraph} from 'wle-stats';

const stats = new StatsGraph({
    minY: 0,
    maxY: 120,
    width: 100,
    height: 40
});

Add the graph canvas in the dom using:

document.body.append(stats.canvas);

Adding a value is done using update(value):

// Draws '50.0' on the chart.
stats.update(50.0);

For more information, please have a look at the public interface of the StatsGraph class.

WonderlandEngine doesn't expose (yet) its profiler. In the future, this library will take advatange of the internal profiler to display fine-grained numbers.