Refactored rStats to its own module, added config option for displaying stats

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();
+  };
+}

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,19 +43,17 @@ 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);
@@ -66,31 +61,9 @@ export default class Main {
     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();
 

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,

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.<String>} [colours] An array of CSS colour values.
+ * @property {String} [CSSPath=''] Base URL where rStats.css is located.
+ * @property {Array.<String>} [css] URLs of CSS or font files to import.
+ * @property {Object.<String, rStats~CounterProperties>} [values] Properties to use for each counter.
+ * @property {Array.<Object>} [groups] Define groups of counters.
+ * @property {Array.<Object>} [fractions] Define stacked counters.
+ * @property {Array.<Object>} [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 () {