Graphics Reference
In-Depth Information
Saving WebGL output to disk
In this topic we've created some very beautiful visualizations so far. The trouble with
this, however, is that it's difficult to save the output of your rendering as an image.
In this recipe, we'll show you how you can create a normal image from a WebGL-
rendered scene, which can be saved to the disk.
Getting ready
There isn't much to do in order to get ready for this recipe. We'll be using standard
HTML5 features, which you can apply not just to Three.js-based outputs, but to any
HTML5 canvas element. We've prepared a very simple example page, where you test
the result of this recipe. For this, open the
06.09-save-webgl-output.html
ex-
ample in your browser. You will see something similar to the following screenshot:
On this page, you'll see a single Three.js scene. If you hit the
p
key, the current state
will be saved as a new image, which you can then download normally. Note that in
the preceding screenshot, we've zoomed out of the page.
How to do it...
For this recipe, we only need to take a couple of simple steps:
1. The first thing we do is register an event listener for key presses:
window.addEventListener("keyup",
copyCanvas);
