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 ...

Get Three.js Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.