FPSCounter

FPS counter for three.js that updates in the webgl canvas. Simple 2 digit renderer. Extends three-screen-quad. See this live.

Files

index.js

main
fps.frag.js

frag shader
NumberTexture.js

generates the numbers texture
Stats.js

computes fps - Stripped down Stats.js

Constructor

FPSCounter( renderer:[ THREE.WebGLRenderer ] , parameters )

A renderer from the main app has to be passed, along with parameters for three-screen-quad.

params:
  top: Number || String     //default: null
  left: Number || String    //default: 0
  right: Number || String   //default: null
  bottom: Number || String  //default: 0
  width: Number || String   //default: '80px'
  height: Number || String  //default: '40px'

Properties

extends three-screen-quad.

Methods

void setNumber( number:[int] )

sets the number between 00 and 99, refreshes the uniform

Usage

  var FPSCounter = require('three-fps-counter')(THREE); //pass your instance of three
  
  var myfps = new FPSCounter( renderer );
  
  mainRenderLoop(){
  	renderer.render(mainScene, mainCamera);
  	myfps.render();
  }

will draw the effect over a scene

Test

npm install
npm start

You should see a cube spinning and the counter in the lower left corner.