WebGL Screen Shot Tutorial

Photograph the Canvas with a Tap

Swipe to View the Landscape

Introduction

This tutorial briefly explains how to display a screen shot
of a WebGL scene on a Web page.
To save a screen shot
call method toDataURL().
Method toDataURL() is part
of the WebGLRenderingContext.
However render the scene immediately before
calling toDataURL().
This ensures
the current view is saved to the drawing buffer.
Assign the String returned
from toDataURL() to the
src property of an image
element on the Web page.

Firstcreate a new
controller and entity.
Secondinitialize
responsive interactive features and perspective projection matrix for
the scene.
Thirdrender the scene.
Fourth and most important, prepare and
display the screen shot
when the user taps the canvas.
Method tapCanvas() responds when the user taps the canvas.
Method tapCanvas() calls
toDataURL() then assigns the
data to an image's src property.

Create Controller and Entity

The following source code demonstrates obtaining and displaying
a screen capture from the WebGL context.