I noticed in my project that my framerate would dip significantly as I whipped the mouse around the canvas. I would see as much as a 20 fps drop. My scenes aren’t massively complex. It’s a “zone” in an MMORPG with simplistic art (early 2000’s era recreation).
Anyway, I started digging into the default pointermove observers and the event handlers and made a few changes to my local JS file and want to share my feedback.
#1) I stopped doing ray-picking on mousemove. Yes, this technically breaks the “what mesh is under my cursor” mechanics but I don’t need that. If I want to know, I can do a manual pick. I am not aware of a cleaner / built-in way to do this. If one exists, please let me know lol.
#2) I noticed that between each call to the main render function, _onPointerMove could be getting triggered multiple times (ie. high-performance mice that are polling at very high rates). It seemed to me that processing _onPointerMove 5-6 times between any observable change on-screen is pointless. So, I added a check inside _onPointerMove that checks a simple true/false, if true, do a full pointer process cycle and then set the flag false. If false, bail. Then in my main render function, I set the flag to true. This ensures I only ever process _onPointerMove once per frame render.
I still see framerate drops, but not as pronounced. Even if I completely erase the event listeners using the dev console, I still see framerates drop as the mouse moves around. This may just be expensive native mouse processing by the window.