search

ScriptaGames / zorbio

A 3D multiplayer WebGL game
MIT License
8 stars 1 forks source link

optimize new image cursor #537

Closed Jared-Sprague closed 6 years ago

Jared-Sprague commented 6 years ago

The mouse move fires an event to ractive every frame when the mouse is moving. This takes 0.5ms out of our 16ms budget every frame. I don't think it's necessary to fire this on every frame.

Jared-Sprague commented 6 years ago

Another thought to make this faster is to not use Ractive at all. Doing a full ractive update just to change the image position or switch the image seems overkill. I bet it would be much faster if it used straight html5 or css functions to update the image position.

Jared-Sprague commented 6 years ago

I added a simple optimization that just executes the mousemove handler every other frame instead of every frame using UTIL.nth() I don't notice any UI difference in the cursor as it's still updating every 33ms which is still really fast, but take out 50% of time spent processing. @mwcz if you're fine with this I think we can close this. f61035b

mwcz commented 6 years ago

I don't like it, it's noticeably laggy to me. Instead of throttling it I'd rather try a non-ractive solution.

Here are some recordings showing the problem.

Draw cursor every frame cursor-every-frame

Draw cursor every other frame cursor-every-other-frame

If you look closely, you can see this is not as smooth.

I'll see about implementing it without ractive.

mwcz commented 6 years ago

Hehee kinda fun watching the cursor gifs dance around

mwcz commented 6 years ago

Fixed with 27b0258f66a17814acadd7c3dc1e3bff5cfe9e58, forgot to tag the issue in the commit message.