As part of an educational project, I am conducting a performance comparison between WebGL and OpenGL. I have developed two equivalent programs in both technologies and now my task is to measure and compare their frame rates.
When using Javascript's requestAnimationFrame
for animation, I consistently observe a frame rate of 60 FPS, which only drops when switching tabs or windows. However, continuously calling the render function recursively causes the window to freeze, understandably so.
This is how I am measuring the FPS:
var stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '450px';
stats.domElement.style.top = '750px';
document.body.appendChild( stats.domElement );
setInterval( function () {
stats.begin();
stats.end();
}, 1000 / 60 );
var render= function() {
requestAnimationFrame(render);
renderer.render(scene,camera);
}
render();
The challenge lies in comparing the fixed 60 FPS of WebGL with the more dynamic rendering approach of OpenGL. Unlike WebGL, OpenGL redraws the scene only when necessary (such as when rotating objects) triggering glutPostRedisplay()
.
I am now exploring if there are ways in WebGL to trigger scene redraws selectively, like when an object is rotated or specific shader attributes change.