Graphics Reference
In-Depth Information
capturer.capture( renderer.domElement
);
requestAnimationFrame(render);
}
With these steps, the
capturer
object will start capturing the output of our
WebGL canvas 20 times per second.
4. As a last step, we need to add a functionality to save the movie (in our ex-
ample, this is triggered by clicking on the
saveMovie
button):
this.saveMovie = function() {
var videoUrl = capturer.save();
var link =
document.createElement("a");
link.download = 'video.webm';
link.href = videoUrl;
link.click();
};
This will download the movie as
video.webm
and save it to your local disk.
When you run this, you will notice that the frame rate in your browser drops signi-
ficantly. The reason is that the CCapture library changes the behavior of the
re-
questAnimationFrame
function to make sure it has enough time to capture the
screen and add it as a frame to the movie. The movie file that is created will look like
you expected and have the number of frames per second, as specified in step 1 of
this recipe.
There's more…
The approach that we showed you in the recipe works great for most types of anima-
tions. However, when you want to record a user interacting with your scene, you can't
use this library as it slows down the rendering of your scene, which makes interact-
ing with the scene difficult. An alternative way to record the scene is using a backend
service that collects screenshots and creates a movie server side. An example of
