From 4ef5184b162e0ae4cf19b62e9615465ddfa06ee7 Mon Sep 17 00:00:00 2001 From: Paul Graffam Date: Sun, 25 Feb 2018 19:30:01 -0500 Subject: [PATCH] Refactored rStats to its own module, added config option for displaying stats --- src/js/app/helpers/stats.js | 55 ++++++++++++++++++++++++++++ src/js/app/main.js | 65 +++++++--------------------------- src/js/data/config.js | 1 + src/public/assets/js/rStats.js | 39 ++++++++++++++++---- 4 files changed, 101 insertions(+), 59 deletions(-) create mode 100644 src/js/app/helpers/stats.js diff --git a/src/js/app/helpers/stats.js b/src/js/app/helpers/stats.js new file mode 100644 index 0000000..f4dd0b1 --- /dev/null +++ b/src/js/app/helpers/stats.js @@ -0,0 +1,55 @@ +// Local vars for rStats +let rS, bS, glS, tS; + +export default class Stats { + constructor(renderer) { + this.renderer = renderer; + } + + setUp() { + bS = new BrowserStats(); + glS = new glStats(); + tS = new threeStats(this.renderer.threeRenderer); + + rS = new rStats({ + CSSPath: './assets/css/', + userTimingAPI: true, + values: { + frame: { caption: 'Total frame time (ms)', over: 16, average: true, avgMs: 100 }, + fps: { caption: 'Framerate (FPS)', below: 30 }, + calls: { caption: 'Calls (three.js)', over: 3000 }, + raf: { caption: 'Time since last rAF (ms)', average: true, avgMs: 100 }, + rstats: { caption: 'rStats update (ms)', average: true, avgMs: 100 }, + texture: { caption: 'GenTex', average: true, avgMs: 100 } + }, + groups: [ + { caption: 'Framerate', values: ['fps', 'raf'] }, + { caption: 'Frame Budget', values: ['frame', 'texture', 'setup', 'render'] } + ], + fractions: [ + { base: 'frame', steps: ['texture', 'setup', 'render'] } + ], + plugins: [bS, tS, glS] + }); + }; + + static start() { + rS('frame').start(); + glS.start(); + + rS('rAF').tick(); + rS('FPS').frame(); + + rS('render').start(); + }; + + static end() { + rS('render').end(); // render finished + rS('frame').end(); // frame finished + + // Local rStats update + rS('rStats').start(); + rS().update(); + rS('rStats').end(); + }; +} diff --git a/src/js/app/main.js b/src/js/app/main.js index 54443a4..b32f28a 100644 --- a/src/js/app/main.js +++ b/src/js/app/main.js @@ -11,6 +11,7 @@ import Controls from './components/controls'; // Helpers import Geometry from './helpers/geometry'; +import Stats from './helpers/stats'; // Model import Texture from './model/texture'; @@ -24,10 +25,6 @@ import DatGUI from './managers/datGUI'; import Config from './../data/config'; // -- End of imports -// Local vars for rStats -let rS, bS, glS, tS; - - // This class instantiates and ties all of the components together, starts the loading process and renders the main loop export default class Main { constructor(container) { @@ -46,51 +43,27 @@ export default class Main { Config.dpr = window.devicePixelRatio; } - // Main renderer instantiation + // Main renderer constructor this.renderer = new Renderer(this.scene, container); - // Components instantiation + // Components instantiations this.camera = new Camera(this.renderer.threeRenderer); this.controls = new Controls(this.camera.threeCamera, container); this.light = new Light(this.scene); // Create and place lights in scene const lights = ['ambient', 'directional', 'point', 'hemi']; - for(let i = 0; i < lights.length; i++) { - this.light.place(lights[i]); - } + lights.forEach((light) => this.light.place(light)); // Create and place geo in scene this.geometry = new Geometry(this.scene); this.geometry.make('plane')(150, 150, 10, 10); - this.geometry.place([0, -20, 0], [Math.PI/2, 0, 0]); + this.geometry.place([0, -20, 0], [Math.PI / 2, 0, 0]); // Set up rStats if dev environment - if(Config.isDev) { - bS = new BrowserStats(); - glS = new glStats(); - tS = new threeStats(this.renderer.threeRenderer); - - rS = new rStats({ - CSSPath: './assets/css/', - userTimingAPI: true, - values: { - frame: { caption: 'Total frame time (ms)', over: 16, average: true, avgMs: 100 }, - fps: { caption: 'Framerate (FPS)', below: 30 }, - calls: { caption: 'Calls (three.js)', over: 3000 }, - raf: { caption: 'Time since last rAF (ms)', average: true, avgMs: 100 }, - rstats: { caption: 'rStats update (ms)', average: true, avgMs: 100 }, - texture: { caption: 'GenTex', average: true, avgMs: 100 } - }, - groups: [ - { caption: 'Framerate', values: [ 'fps', 'raf' ] }, - { caption: 'Frame Budget', values: [ 'frame', 'texture', 'setup', 'render' ] } - ], - fractions: [ - { base: 'frame', steps: [ 'texture', 'setup', 'render' ] } - ], - plugins: [bS, tS, glS] - }); + if(Config.isDev && Config.isShowingStats) { + this.stats = new Stats(this.renderer); + this.stats.setUp(); } // Instantiate texture class @@ -131,34 +104,22 @@ export default class Main { render() { // Render rStats if Dev - if(Config.isDev) { - rS('frame').start(); - glS.start(); - - rS('rAF').tick(); - rS('FPS').frame(); - - rS('render').start(); + if(Config.isDev && Config.isShowingStats) { + Stats.start(); } // Call render function and pass in created scene and camera this.renderer.render(this.scene, this.camera.threeCamera); // rStats has finished determining render call now - if(Config.isDev) { - rS('render').end(); // render finished - rS('frame').end(); // frame finished - - // Local rStats update - rS('rStats').start(); - rS().update(); - rS('rStats').end(); + if(Config.isDev && Config.isShowingStats) { + Stats.end(); } // Delta time is sometimes needed for certain updates //const delta = this.clock.getDelta(); - // Call any vendor or module updates here + // Call any vendor or module frame updates here TWEEN.update(); this.controls.threeControls.update(); diff --git a/src/js/data/config.js b/src/js/data/config.js index 52ff5f2..e191ba2 100644 --- a/src/js/data/config.js +++ b/src/js/data/config.js @@ -3,6 +3,7 @@ import TWEEN from 'tween.js'; // This object contains the state of the app export default { isDev: false, + isShowingStats: true, isLoaded: false, isTweening: false, isRotating: true, diff --git a/src/public/assets/js/rStats.js b/src/public/assets/js/rStats.js index 16562b4..2266937 100644 --- a/src/public/assets/js/rStats.js +++ b/src/public/assets/js/rStats.js @@ -32,6 +32,32 @@ } )(); +/** + * @class rStats + * @param {rStats~Settings} [settings] Settings for the rStats instance. + */ + +/** + * @typedef {Object} rStats~Settings + * @property {Array.} [colours] An array of CSS colour values. + * @property {String} [CSSPath=''] Base URL where rStats.css is located. + * @property {Array.} [css] URLs of CSS or font files to import. + * @property {Object.} [values] Properties to use for each counter. + * @property {Array.} [groups] Define groups of counters. + * @property {Array.} [fractions] Define stacked counters. + * @property {Array.} [plugins] Additional plugins. + */ + +/** + * @typedef {Object} rStats~CounterProperties + * @property {String} [caption] Caption for this counter. + * @property {Boolean} [average=false] Whether the values should be averaged. + * @property {Number} [avgMs=1000] Duration for which the values should be averaged. + * @property {Number} [below] Value below which the graph should be highlighted. + * @property {Number} [over] Value over which the graph should be highlighted. + * @property {Boolean} [interpolate=true] Whether framerate should be interpolated. + */ + window.rStats = function rStats ( settings ) { function iterateKeys ( array, callback ) { @@ -194,8 +220,6 @@ window.rStats = function rStats ( settings ) { _graph = new Graph( _dom, _id, _def ), _started = false; - _dom.className = 'rs-counter-base'; - _spanId.className = 'rs-counter-id'; _spanId.textContent = ( _def && _def.caption ) ? _def.caption : _id; @@ -250,7 +274,8 @@ window.rStats = function rStats ( settings ) { _spanValueText.nodeValue = Math.round( v * 100 ) / 100; var a = ( _def && ( ( _def.below && _value < _def.below ) || ( _def.over && _value > _def.over ) ) ); _graph.draw( _value, a ); - _dom.style.color = a ? '#b70000' : '#ffffff'; + _dom.className = a ? 'rs-counter-base alarm' : 'rs-counter-base'; + } function _frame () { @@ -429,10 +454,10 @@ window.rStats = function rStats ( settings ) { } /*if( _height != _div.clientHeight ) { - _height = _div.clientHeight; - _base.style.height = _height + 2 * _elHeight + 'px'; - console.log( _base.clientHeight ); - }*/ + _height = _div.clientHeight; + _base.style.height = _height + 2 * _elHeight + 'px'; + console.log( _base.clientHeight ); + }*/ }