Skip to content

StatsGl

stats-gl is a powerful WebGL performance monitoring tool created by RenaudRohlinger. It offers simple information boxes to track code performance and serves as a more advanced alternative to stats.js, capable of displaying CPU and GPU metrics.

In TresJS, you can effortlessly create a performance monitoring panel in the top left corner of your canvas by using the StatsGl component. Simply drop the StatsGl component into your TresCanvas for easy performance monitoring.

Basic usage

vue
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { StatsGl } from '@tresjs/cientos'
</script>

<template>
  <TresCanvas>
    <StatsGl />
  </TresCanvas>
</template>

Options

NameTypeDefaultDescription
logsPerSecondnumber20How often to log performance data, in logs per second.
samplesLognumber100Number of recent log samples to keep for computing averages.
samplesGraphnumber10Number of recent graph samples to keep for computing averages.
precisionnumber2Precision of the data, in the number of decimal places (only affects CPU and GPU).
horizontalbooleantrueDisplay the canvases on the X-axis, set to align on the vertical axis.
minimalbooleanfalseA boolean value to control the minimalistic mode of the panel display. If set to true, a simple click on the panel will switch between different metrics.
modenumber0Sets the initial panel to display - 0 for FPS, 1 for CPU, and 2 for GPU (if supported).