Server Side Implementation of requestAnimationFrame() in NodeJS
Solution 1
Is there any benefit in doing so?
In the client - there is. While setTimeout
and its friends run in the timers queue - requestAnimationFrame
is synced to a browser's rendering of the page (drawing it) so when you use it there is no jitter since you telling it what to draw and the browser drawing are in sync.
Typically games have two loops - the render loop (what to draw) and the game loop (logic of where things are). The first one is in a requestAnimationFrame
and the other in a setTimeout
- both must run very fast.
Here is a reference on requestAnimationFrame by Paul Irish.
Can you reference me to any "best practices" server side implementation in NodeJS?
Since the server does not render any image - there is no point in polyfilling requestAnimationFrame
in the server. You'd use setImmediate
in Node/io.js for what you'd use requestAnimationFrame
for in the client.
Simply put - requestAnimationFrame was added to solve a problem (jitterless rendering of graphic data) that does not exist in servers.
Solution 2
function requestAnimationFrame(f){
setImmediate(()=>f(Date.now()))
}
Solution 3
if(!window.requestAnimationFrame)
window.requestAnimationFrame = window.setImmediate
Related videos on Youtube
HansMusterWhatElse
Updated on August 21, 2022Comments
-
HansMusterWhatElse over 1 year
I have some questions regarding the wildly used
requestAnimationFrame()
functions. Recently I came across some implementation in multiplayer games who used it on the client instead of the server side.- Is there any benefit in doing so?
- Can you reference me to any "best practices" server side implementation in NodeJS?
Update
I got a bit confused between the animation and game loop - what I was looking for is an implementation in NodeJS => e.g
setInterval
.Example - Client side implementation
(function () { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) { clearTimeout(id); }; }());
-
stevemao over 7 yearsI do need to render something in NodeJS, for an IoT device.
-
Benjamin Gruenbaum over 7 years@stevemao you still wouldn't be rendering it in Node - you'd be rendering it with whatever binding the IoT device gives you for drawing things and that might provide a requestAnimationFrame. You're also stevemao so you'd know that which makes me wonder what point you were trying to make? That node doesn't run only on servers?
-
stevemao over 7 yearsI'm trying to animate my led lights with Arduino. github.com/stevemao/neoclock-js Looking at the source code of johnny-five, it looks like it's using
setImmediate
-
stevemao over 7 years> you'd be rendering it with whatever binding the IoT device gives you for drawing things and that might provide a requestAnimationFrame. What if nodejs is powering the device to render? Assume it doesn't really have a brain...
-
Benjamin Gruenbaum over 7 yearsBut the lights don't have a rendering clock which they use to (try to) re-render 60 times a second (like the browser - as you said they don't have a brain). The only point of
requestAnimationFrame
is to sync to that existing clock the browser has. Otherwise I'm not sure what good it would do. The project looks really cool by the way - IIRC the C version just blocks for periods of time. -
stevemao over 7 yearsThanks Benjamin, your explanation makes sense. Unfortunately it seems no library on npm that does color animation yet :(
-
d_kennetz about 5 yearsHi! Please add some explanation as to how this solves OP's problem. It is generally discouraged on SO to post code only answers as they do not help OP or future visitors understand the answer. Thanks! --From Review.