requestAnimationFrame at 100fps

General
, ,
1

Hello guys,
I’m woking html template using requestAnimationFrame to step forward the animation.
I seen the animation goes faster when rendered on casparcg so i tried to view fps on screen.
To do this I wrote a simple function:

var intervalCheck = window.setInterval(function(){
      hypeDocument.getElementById('fps').innerHTML = hypeDocument.customData.frame;
      hypeDocument.customData.frame = 0;
     }, 1000);

hypeDocument because I’m using tumult hype to create html template.

My server is setted to 1080i50
and the value of requestAnimationFrame is 100/sec.
The same with 1080p50.

requestAnimationFrame is called 120/sec with 1080i60 - 1080p60, always double rate of the frame rate.

When I open the template on chrome the value is 60 as aspected.

Do you know if it is the right behavior of the html producer?

Thanks in advance,
Andrea

2

My experience is that requestAnimationFrame fires once per frame, so 50 in 1080p50, when running in Caspar.

There must be something wrong in your code somewhere :slightly_smiling_face:

1 Like
3

Why are you using interval? It fires in the JS process and has nothing to do with render updates. You should use requestAnimationFrame to actually calculate the framerate. Something like this will give you the average over 10 seconds:

<div id="fps">STARTING</div>
<script>
var fps = document.getElementById('fps');
var start = null;
var fpsCount = 0;
function countFps() {
        if(!start) { start = performance.now(); }
        fpsCount++;
        if((performance.now() - start) >= 10000) {
            fps.textContent = `Average FPS over 10 seconds: ${fpsCount/10}`;
            return;
        }
        fps.textContent = fpsCount;
        requestAnimationFrame(countFps);
}
countFps();
</script>
2 Likes
4

Thanks for your answers,
I found the issue:
requestAnimationFrame inside CasparCG.onPlay function.
Now works well after removed it.

I’m using setInterval just to update the text,
hypeDocument.customData.frame++ was inside the function called by requestAnimationFrame

Andrea.