Rather than starting with the names of the functions, let's approach this from a conceptual perspective. We'll return to the function names after that
The basic idea is that you need to do two things on every "frame:"
- Update your scene and its objects
- Draw stuff on screen
In many simple scenarios, these two can be squashed into one. For example, most three.js projects just have a "render" function and in that function you both update your scene and draw by calling renderer.render()
In VR, however, we need to "draw" twice for each frame because we have to display the scene for each eye. However, we don't want to update our scene twice because, for example, this would mean that objects animate twice as fast.
So that's why we have two functions. They just happen to be called render() and animate() because those are three.js conventions.
Another way to think about them is "onFrame" and "onDraw." This is how the Oculus SDK names them:
onFrame is where you want to update your scene and its objects
onDraw is where you want to draw the objects
In three.js land, "animate" is like "onFrame" (once per frame) and "render" is like "onDraw" (twice per frame, once for each eye).