在webGL中录制FPS [英] Recording FPS in webGL

问题描述

我正在尝试比较移动设备上的3D应用程序的性能。我在webGL中设置了一个3d太阳能系统，我试图记录或至少显示FPS。到目前为止，这就是我所拥有的：

I am trying to compare performance for 3d applications on mobile devices. I have a 3d solar system set up in webGL and im trying to record or at least display the FPS. So far this is what i Have:

在正文中

<script language="javascript">
var x, message;
x = Time;
message = "fps is equal to ";
document.write (message); // prints the value of the message variable
document.write (x); //prints the value of x
</script>

并获得画布的绘制功能中的时间变量我有这个

and to get The Time Var in the draw function of canvas i have this

var Time = 0;
function drawScene() {
var startTime = new Date();
//draw scene here
var endTime = new Date();
Time = (endTime - startTime)
}

我得到的输出画布的底部是fps等于null

the output i get at the bottom of the canvas is "fps is equal to null"

任何帮助都会很棒！

推荐答案

我假设您反复调用drawScene，但如果您只设置一次 x 那么每次调用drawScene时它都不会更新。你在时间中存储的是经过时间而不是每秒帧数。

I assume you are calling drawScene repeatedly but if you are setting x only once then it will not update every time drawScene is called. Also what you are storing in Time is elapsed time and not frames per second.

如下所示？我们的想法是计算渲染的帧数，并在fps变量中通过一秒钟后存储它。

How about something like the below? The idea is to count the number of frames rendered and once one second has passed store that in the fps variable.

<script>
var elapsedTime = 0;
var frameCount = 0;
var lastTime = 0;

function drawScene() {

   // draw scene here

   var now = new Date().getTime();

   frameCount++;
   elapsedTime += (now - lastTime);

   lastTime = now;

   if(elapsedTime >= 1000) {
       fps = frameCount;
       frameCount = 0;
       elapsedTime -= 1000;

       document.getElementById('test').innerHTML = fps;
   }
}

lastTime = new Date().getTime();
setInterval(drawScene,33);

</script>

<div id="test">
</div>

这篇关于在webGL中录制FPS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！