Exploring the Differences in Performance Between WebGL and OpenGL

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.

Answer №1

When comparing framerates across GPUs in WebGL, it's important to determine the amount of work that can be accomplished within a single frame rather than simply pushing frames.

The best approach is to set a target framerate and gradually increase the workload until the target is exceeded. This method allows for a more accurate comparison between different machines or GPUs using the same technique.

While some may suggest using glFinish to measure timing, this method can introduce inaccuracies by stalling the graphics pipeline. It's akin to measuring a car's speed from point A to point B but slamming on the brakes before reaching B - including time spent slowing down in the measurement. Instead, maintaining full speed throughout the process is crucial for obtaining reliable data.

Stalling a GPU with glFinish doesn't provide meaningful information as it combines drawing time with stopping time in its measurements. By running at full speed without interruptions, one can accurately gauge performance based on the actual work completed.

In addition, the distinction between WebGL and OpenGL lies primarily in the setup overhead rather than the actual work carried out by the GPU. Therefore, focusing on drawing minimal elements is key for precise comparisons. For example, testing how many basic objects can be drawn per frame at a consistent framerate.

Furthermore, considering factors such as shader switching, buffer manipulation, texture updates, and attribute/uniform adjustments is essential when evaluating GPU performance. By analyzing the frequency and impact of these operations, a more comprehensive understanding of differences between WebGL and OpenGL can be obtained.

An illustrative example of this concept can be found here:

Answer №2

Comparing performance using framerate isn't ideal in this scenario because VSYNC limits you to 60 FPS artificially.

When VSYNC is active, the swap buffer operation can cap the number of frames displayed, impacting your measurement accuracy. Instead of counting frames, it's more effective to start a timer at the beginning of each frame and stop it just before the buffer swap by using glFinish(...). Then, compare the time taken to render each frame (or whatever metric your timer tracks) rather than focusing on sheer frame count.

Answer №3

To achieve accurate timing information in OpenGL, it is recommended to utilize the ANGLE_timer_query extension whenever possible.

According to the specification:

Traditionally, OpenGL implementations have not provided reliable timing data. While applications could attempt to gather timing information from CPU timers, this method lacks synchronization with the graphics pipeline. Relying on a CPU timer may not accurately reflect the completion of extensive graphics tasks queued before its reading, leading to significant inaccuracies. glFinish() can be used to ascertain the finish time of previous rendering commands, but it halts the graphics pipeline and hampers application performance.

The ANGLE_timer_query extension introduces a query system that measures the duration required for executing a series of GL commands, without causing disruptions in the rendering pipeline. By leveraging query objects similar to those found in occlusion queries, this extension allows applications to asynchronously monitor time intervals.

(emphasis added)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is JSON required to transmit an object using socket.io?

I have an object on the frontend that I want to broadcast to all connected clients. Can I send it as is, in its original form? Or do I always have to convert it into a JSON string before sending? Here is my object: var myBox = { x: 400, ...

Combine two arrays in MongoDB where neither element is null

Issue I am looking to generate two arrays of equal length without any null elements. Solution I have managed to create two arrays, but they contain some null values. When I remove the null values, the arrays are no longer of equal length. aggregate([ ...

I'm encountering inexplicable duplications of elements on my Wordpress site

Here is an example of my template header: <header> <?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?> <a class="menu-toggle">menu</div> <?php wp_nav_menu( array('them ...

Error: Attempted to bootstrap Angular multiple times

While developing an app using angularjs, everything functions correctly after loading a web page. However, a message appears on the console saying: WARNING: Tried to load angular more than once. Upon checking the angular.js file, I found this code snippe ...

Having trouble importing Angular flex-layout into my feature module

I'm facing an issue with Angular flex-layout in one of my modules. It works perfectly fine when I import flex-layout in the app module, but only for the app component. However, when I import flex-layout in another module, it doesn't seem to work ...

What is the purpose of the video-js endcard plugin incorporating native controls into the player?

Endcard is a unique plugin designed for the video-js html5 video player that adds clickable links to the end of a video. (More information on endcards can be found here: https://github.com/theonion/videojs-endcard). To implement an endcard, simply include ...

Is there a way to prevent Javascript from modifying styles when printing?

Is there a way to prevent JavaScript from affecting styling during printing? For example, if I'm using JavaScript to hide certain content but want that content to be visible when printed. I have hidden a div using JavaScript and now I'm trying ...

There was an issue loading the map on an HTML code that was returned from an ajax request

I'm currently working on building my own personal website, which is also my first webpage, and I'm encountering some difficulties with displaying a Google map. Here's a breakdown of my situation: my webpage consists of four links that load ...

When running "pm2 serve build PORT", the error message "404 page not found" is displayed

After completing the tutorial at https://reactjs.org/tutorial/tutorial.html, I uploaded my project to a production server running on Ubuntu with Nginx and SSL. I used npm run build to create the build files and served them as static files using the serve m ...

Switch out the Select feature for Checkboxes

Hey there! I'm currently trying to enhance the style and functionality of the Select checkboxes on my blog. However, when I change them to checkboxes, they lose their original function of searching for selected tags in each Select option. This issue i ...

Ajax: client dilemma created by the interaction of two functions

My university homework assignment requires me to develop a small e-commerce website. After logging in, the user will be directed to the homepage where they will receive a JSON object from the server containing product information to dynamically generate th ...

What is the process for integrating textures into a collada file (.dae) using THREE.js?

Is there a way to display a collada file (.dae) with textures using three.js? I've been able to load the model successfully, but it's not showing the textures when I use the following code: var loader = new THREE.ColladaLoader( loadingManager ); ...

You are unable to bind 'ref' while utilizing 'v-for'

Creating polygons inside <svg>...</svg> using v-for: <polygon v-for="id in polygonArr" :key="id" :ref="id" points="15,0 18.541,11.459 30,11.459 20.729,18.541 24.271,30 15,22.918 5.729,30 9.271,18.541 0,11.459 11.459,11.459" /> polygonAr ...

Getting the value of an injected variable in a Vue.js computed method

I have utilized the provide/inject mechanism to pass data from a parent component to its grandchildren. However, in one of my components, I need to manipulate the data before rendering it in the template. My current setup looks like this: export default d ...

What methods do Google and Facebook use to manage user sessions effectively?

I'm looking to incorporate a session in my asp.net application that remains active until the user logs out. I've come across this feature on websites like Google, where the session persists even after a computer restart. How do they achieve this ...

Exploring the depths of nested arrays in JavaScript

Struggling to convert the given array into object properties using nested array notation: array[x][y] var array = [['make', 'Ford'], ['model', 'Mustang'], ['year', 1964]]; function fromListToObject(array) ...

Limited achievements seen with AJAX. Occasionally, either no data is retrieved or an error is encountered

My experience with AJAX has been frustrating so far. I am trying to populate some textboxes with values from a database, but nothing is getting inserted. The only thing that's happening is the appearance of two errors related to specific values which ...

Is there a way to arrange an array based on the product or quotient of two values?

I'm working with an array of posts, each containing data on 'views' and 'likes', along with the user IDs associated with those likes. My goal is to sort this array based on the like rate. However, my current approach seems to be i ...

Utilizing Node.js and Jasmine: Preventing the invocation of a Promise function to avoid executing the actual code results in DEFAULT_TIMEOUT_INTERVAL

There is a function below that returns a promise. public async getAverageHeadCount(queryParams: Params, childNode: any, careerTrackId: string): Promise<Metric> { const queryId = this.hierarchyServiceApiUrl + "rolling-forecast/ahc/" + q ...

Is there a way to pass an object to the pointer configuration of a Gauge chart in HighCharts?

I'm having some difficulty setting up a highchart gauge chart. I want to pass an object with a name and value to the pointer, but it seems that it only accepts an array with a single number. Is there a way to include text along with the pointer's ...