If you've programmed animations in JavaScript before, you may have used either setInterval or setTimeout to get your drawing function to be called.

The problem with using these two approaches for drawing is that they have no relation to the browser's render cycle. That is, they aren't synced to when the browser is going to draw a new frame, which can leave the animation out of sync with the user's machine. For example, if you use setInterval or setTimeout and assume 60 frames a second, and the user's machine is actually running a different frame rate, you'll be out of sync with their machine.

Even though requestAnimationFrame is available on all WebGL-enabled browsers, we'll leverage our own animation JavaScript timers for educational purposes. In production, it is recommended that you leverage the browser's optimized...