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.