Note that there are some explanatory texts on larger screens.

plurals
  1. POBalancing performance heavy procedures with real-time mouse input
    primarykey
    data
    text
    <p>To put this question succinctly, is there any way to offer a real-time web application that requires processing to be done at every coordinate that a user moves their mouse to without dropping any mouse events?</p> <p>With JS, if we want to keep track of the user's mouse location, we're essentially limited to attaching a <code>mousemove</code> handler to some element. Unfortunately, if we're using the mouse location to perform some expensive procedures such as drawing dynamic graphics to the screen via WebGL or a 2D canvas, we can (and typically do) lose a lot of accuracy.</p> <p>For instance, if we link the user's mouse to a camera in a first-person WebGL game and the user is moving around erratically, some of the immersion will be lost as the camera fails to accurately mimic where the mouse is pointed. Or, even more simply, if we want to stamp multiple images onto a 2D canvas wherever the user drags the cursor, chances are we won't be able to produce a nice smooth curve if the user happens to draw one.</p> <p>Ultimately, since JS is single-threaded we can't just have a separate thread running with the sole purpose of collecting mouse coordinates and let the application process the input as fast as it can (maybe a web worker would help here?). Similarly, we can't very easily prioritize collecting mouse events over the processing that needs to happen, because we can quickly start starving the processing side of things.</p> <p>Is there some sort of approach that I'm overlooking here? If all an app does is record mouse coordinates, you typically get a very accurate record of where the mouse has been. The problem arises when we have to do some significant, but not unreasonable, processing based on that input in real-time.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload