Saving WebGL output to disk

In this book 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 example 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...