Exhibit #5: Continuous Updates

What We Did

• What we did in the last exhibit was to clear the screen once.
• This means we cannot do things that change over time.
  • Animation
  • Responding to user input
• To do these, you need WebGL to continuous update itself.
• We use window.requestAnimationFrame( ... ) to accomplish continuous updates.
  • Call this function to indicate that you want to do some kind of animation, and want to update a frame.
  • Give it a callback function that takes no or one argument.
    • This function will get called before the next time the browser "repaint" itself. So, any updates you do will gets reflected kind of almost immediately.
    • The argument to the function is the timestamp of when the function is called.
  • If you want the update to be done again and again, call requestAnimationFrame in the callback function.
  • The callback rate is usually 60 fps, but can be higher.
• In this exhibit, we fetch the color values from the sliders and set the WebGL clear color accordingly. This is a (very roundabout) way to implement a color slider.