playcanvas
Version:
PlayCanvas WebGL game engine
208 lines (207 loc) • 6.81 kB
TypeScript
/**
* @import { AppBase } from '../../framework/app-base.js'
* @import { GraphicsDevice } from '../../platform/graphics/graphics-device.js'
*/
/**
* MiniStats is a small graphical overlay that displays realtime performance metrics. By default,
* it shows CPU and GPU utilization, frame timings and draw call count. It can also be configured
* to display additional graphs based on data collected into {@link AppBase#stats}.
*/
export class MiniStats {
/**
* Returns the default options for MiniStats. The default options configure the overlay to
* show the following graphs:
*
* - CPU utilization
* - GPU utilization
* - Overall frame time
* - Draw call count
*
* @returns {object} The default options for MiniStats.
* @example
* const options = pc.MiniStats.getDefaultOptions();
*/
static getDefaultOptions(): object;
/**
* Create a new MiniStats instance.
*
* @param {AppBase} app - The application.
* @param {object} [options] - Options for the MiniStats instance.
* @param {object[]} [options.sizes] - Sizes of area to render individual graphs in and spacing
* between individual graphs.
* @param {number} [options.sizes[].width] - Width of the graph area.
* @param {number} [options.sizes[].height] - Height of the graph area.
* @param {number} [options.sizes[].spacing] - Spacing between graphs.
* @param {boolean} [options.sizes[].graphs] - Whether to show graphs.
* @param {number} [options.startSizeIndex] - Index into sizes array for initial setting.
* @param {number} [options.textRefreshRate] - Refresh rate of text stats in ms.
* @param {object} [options.cpu] - CPU graph options.
* @param {boolean} [options.cpu.enabled] - Whether to show the CPU graph.
* @param {number} [options.cpu.watermark] - Watermark - shown as a line on the graph, useful for
* displaying a budget.
* @param {object} [options.gpu] - GPU graph options.
* @param {boolean} [options.gpu.enabled] - Whether to show the GPU graph.
* @param {number} [options.gpu.watermark] - Watermark - shown as a line on the graph, useful for
* displaying a budget.
* @param {object[]} [options.stats] - Array of options to render additional graphs based on
* stats collected into {@link AppBase#stats}.
* @param {string} [options.stats[].name] - Display name.
* @param {string[]} options.stats[].stats - Path to data inside {@link AppBase#stats}.
* @param {number} [options.stats[].decimalPlaces] - Number of decimal places (defaults to none).
* @param {string} [options.stats[].unitsName] - Units (defaults to "").
* @param {number} [options.stats[].watermark] - Watermark - shown as a line on the graph, useful
* for displaying a budget.
* @example
* // create a new MiniStats instance using default options
* const miniStats = new pc.MiniStats(app);
*/
constructor(app: AppBase, options?: {
sizes?: {
width?: number;
height?: number;
spacing?: number;
graphs?: boolean;
};
startSizeIndex?: number;
textRefreshRate?: number;
cpu?: {
enabled?: boolean;
watermark?: number;
};
gpu?: {
enabled?: boolean;
watermark?: number;
};
stats?: {
name?: string;
stats: string[];
decimalPlaces?: number;
unitsName?: string;
watermark?: number;
};
});
wordAtlas: WordAtlas;
sizes: {
width?: number;
height?: number;
spacing?: number;
graphs?: boolean;
}[];
_activeSizeIndex: number;
/**
* Sets the opacity of the MiniStats overlay.
*
* @type {number}
* @ignore
*/
set opacity(value: number);
/**
* Gets the opacity of the MiniStats overlay.
*
* @type {number}
* @ignore
*/
get opacity(): number;
/**
* Sets the active size index. Setting the active size index will resize the overlay to the
* size specified by the corresponding entry in the sizes array.
*
* @type {number}
* @ignore
*/
set activeSizeIndex(value: number);
/**
* Gets the active size index.
*
* @type {number}
* @ignore
*/
get activeSizeIndex(): number;
app: AppBase;
drawLayer: import("../../index.js").Layer;
device: GraphicsDevice;
render2d: Render2d;
div: HTMLDivElement;
width: number;
height: number;
gspacing: number;
clr: number[];
_enabled: boolean;
/**
* Destroy the MiniStats instance.
*
* @example
* miniStats.destroy();
*/
destroy(): void;
/**
* Gets the overall height of the MiniStats overlay.
*
* @type {number}
* @ignore
*/
get overallHeight(): number;
/**
* Sets the enabled state of the MiniStats overlay.
*
* @type {boolean}
*/
set enabled(value: boolean);
/**
* Gets the enabled state of the MiniStats overlay.
*
* @type {boolean}
*/
get enabled(): boolean;
/**
* Create the graphs requested by the user and add them to the MiniStats instance.
*
* @param {AppBase} app - The application.
* @param {GraphicsDevice} device - The graphics device.
* @param {object} options - Options for the MiniStats instance.
* @private
*/
private initGraphs;
graphs: any[];
texture: Texture;
/**
* Render the MiniStats overlay. This is called automatically when the `postrender` event is
* fired by the application.
*
* @private
*/
private render;
/**
* Resize the MiniStats overlay.
*
* @param {number} width - The new width.
* @param {number} height - The new height.
* @param {boolean} showGraphs - Whether to show the graphs.
* @private
*/
private resize;
/**
* Update the size and position of the MiniStats overlay. This is called automatically when the
* `resizecanvas` event is fired by the graphics device.
*
* @private
*/
private updateDiv;
/**
* Called when the graphics device is lost.
*
* @private
*/
private loseContext;
/**
* Called when the `postrender` event is fired by the application.
*
* @private
*/
private postRender;
}
import { WordAtlas } from './word-atlas.js';
import type { AppBase } from '../../framework/app-base.js';
import type { GraphicsDevice } from '../../platform/graphics/graphics-device.js';
import { Render2d } from './render2d.js';
import { Texture } from '../../platform/graphics/texture.js';