CODEWITHSUNDEEP
performancewebglgpu
Raziza O
Raziza O

Reputation: 1646

WebGL flush & finish

I've developed some website with many data drawing on the screen. The user can drag, zoom in&out between the data.

I'm running it on my computer with a good graphic card and the interaction is very smooth. I'm running it on different graphic card and the image is running after my mouse cursor. after few milliseconds it is back to right position.

When I used to program in openGL i simply used the glFlush & glFinish methods which is kind of waited till all GPU processing is over. There is the same in WebGL, but it is not working for some reason. In openGL using this methods hurt the draw rate, but for my users it is better than seeing the image running after the cursor.

There is any other trick to do that in WebGL ?

p.s. I'm using chrome with the latest version.

Upvotes: 1

Views: 1222

Answers (1)

Kevin Reid
Kevin Reid

Reputation: 43753

If you aren't already, make sure that you're doing all of your drawing from within a requestAnimationFrame callback. That is, don't redraw in response to events, but rather schedule a single callback if anything changes.

// need to redraw
window.addEventListener('mousemove', function (event) {  // or whatever
  ... update drawing parameters, but don’t draw ...
  markDirty();
}, false);

...

var scheduled = false;
function markDirty() {
  if (!scheduled) {
    scheduled = true;
    requestAnimationFrame(draw);
  }
}

...

function draw() {
  scheduled = false;

  ... do WebGL things here ...
}

This will ensure that you are not doing more drawing than the browser can keep up with (a possible cause of lag like you see), and that it happens at the best time the browser can schedule for it.

(If you're running a continuous animation, not just in response to user input. then skip the scheduled and markDirty parts of my example and just call requestAnimationFrame(draw); from within draw.)

Upvotes: 2

Related Questions