I am running a realtime WebGL animation in the Chrome web browser. I am using requestAnimationFrame, which attempts to trigger frame drawing at the monitor’s vsync rate (60Hz). However on some lower power machines (Intel graphics laptops), the webGL rendering cannot run at that framerate - running flat out it manages around 20 fps.
A framerate of 20fps would be fine - except for the fact that in this situation, my mouseEvents seem to be quite seriously delayed / lagging. For example, I print out “mouse” to the console in my mouseEvent handler, and it appears around 0.5 seconds after I tap the laptop’s touchpad button. This is a serious delay for a realtime application, and results in my 3D scene lagging behind the mouse movement.
So far, the only way I have found to get around this lag is by using a “debounce” i.e. calling the next RequestAnimationFrame from a timed callback of between 50 - 70 milliseconds. This backing off eliminates the delay in mouse events being processed, but obviously results in a reduced fps. (For example a timer of 70 milliseconds reduces my fps from 20 to 10, which is no good, and a smaller delay does not solve the lagging).
I feel like there must be a better way of managing this per-frame synchronisation. My working theory is that RequestAnimationFrames are being queued up ahead of my mouse events, however I am not sure how to solve this. I know that Chrome passes webGL drawing off to another process, and I have tried to wait for drawing to complete by using gl.finish() - however this seems to have no affect.
Many thanks for any help / advice