add frame counter

peteroupc · peteroupc · commit ea5f9eff0b5a · 2015-04-25T11:05:47.000-04:00
diff --git a/frame.js b/frame.js
@@ -0,0 +1,61 @@
+
+var FrameCounter=function(){
+ this.fps=-1;
+ this.lastFrame=-1;
+ this.frameGaps=[]
+ this.frameCount=0;
+}
+FrameCounter.prototype.update=function(){
+ var now=("performance" in window) ?
+   window.performance.now() : (new Date().getTime()*1000);
+  if(this.lastFrame>=0){
+    var gap=now-this.lastFrame;
+    if(this.frameGaps.length>300)
+     this.frameGaps.shift();
+    if(gap>5000){
+     // treat as a discontinuity, so discard all the
+     // frame gaps recorded so far
+     this.frameGaps=[];
+    }
+    this.frameGaps.push(gap);
+  }
+  this.lastFrame=now;
+  this.frameCount++;
+  if(this.frameGaps.length>0 && this.frameCount>=30){
+    this.frameCount=0;
+    var total=0;
+    for(var i=0;i<this.frameGaps.length;i++){
+      total+=this.frameGaps[i];
+    }
+    total/=1.0*this.frameGaps.length;
+    this.fps=(total<=0) ? 60 : 1000.0/total;
+  }
+}
+FrameCounter.prototype.getFPS=function(){
+ return this.fps;
+}
+function FrameCounterDiv(scene){
+ var canvas=scene.getContext().canvas
+ var div=document.createElement("div")
+ div.style.backgroundColor="white"
+ div.style.position="absolute"
+ div.style.left=canvas.offsetLeft+"px"
+ div.style.top=canvas.offsetTop+"px"
+ document.body.appendChild(div)
+ this.div=div;
+ this.count=0;
+ this.fc=new FrameCounter();
+}
+FrameCounterDiv.prototype.update=function(){
+ this.fc.update();
+ this.count+=1;
+ if(this.count>=20){
+  var fps=this.fc.getFPS();
+  fps=Math.round(fps*100);
+  fps/=100;
+  if(fps>=0){
+   this.div.innerHTML=fps+" fps"
+   this.count=0;
+  }
+ }
+}
diff --git a/glutil.js b/glutil.js
@@ -1127,7 +1127,7 @@ function FrameBuffer(context, width, height){
  // give the framebuffer its own texture unit, since the
  // shader program may bind samplers to other texture
  // units, such as texture unit 0
- this.textureUnit=1; 
+ this.textureUnit=1;
  this.buffer=context.createFramebuffer();
  // create color texture
  this.colorTexture = context.createTexture();
diff --git a/glutil_min.js b/glutil_min.js
diff --git a/squares.html b/squares.html
@@ -1,6 +1,7 @@
 <meta charset=utf-8>
 <head>
 <script type="text/javascript" src="glutil_min.js"></script>
+<script type="text/javascript" src="frame.js"></script>
 </head>
 <h1>Shader Filters</h1>
 <a href="javascript:link1()">Grayscale</a>,
@@ -341,6 +342,7 @@ <h1>Shader Filters</h1>
   // to Scene3D.
   var scene=new Scene3D((document.getElementById("canvas")));
   scene.setClearColor("white")
+  var fc=new FrameCounterDiv(scene)
   var blinds=blindsGroup(scene)
   var platonic=platonicGroup(scene)
   linknone();
@@ -370,6 +372,7 @@ <h1>Shader Filters</h1>
    rotation[0]+=0.5;
    rotation[1]+=1;
    scene.render();
+   fc.update();
   });
 //-->
 </script>
