One of the most interesting new features of HTML5 is HTML5 canvas,
especially canvas 3D or WebGL™, for awfully fast 2D and 3D graphics.
WebGL allows the web developer to download high speed programs into
the client computers graphic accelerator (GPU) and so to program
virtually every pixel of a web document.
You can animate 3D objects and togehter
with the taccgl™ library various CSS formatted HTML5 elements.
This includes per pixel lighting calculations (so that e.g. elements rotating away from
a virtual light source become darker), 3D calculations with hidden surface removal,
and (resouces permitting)automatic shadow drawing.
High speed animations with virtually thousands of elements can
be created: Demo with 100,
Elements (for higher numbers you need a desktop or laptop computer with ordinary GPU).
explains, how to use HTML5 canvas with the help of the open
source taccgl™ library. We concentrate on everyday animations for
CSS formatted HTML elements and 3D objects for use on HTML 5 pages,
rather than complete 3D worlds or computer games.
Audience for this tutorial are HTML, CSS programmers with some
HTML and by writing HTML and CSS files using a text editor and you will learn to create
animations with a text editor and not with a WYSIWYG tool.
Canvas comes in two flavors, there is canvas 2D and canvas
3D. Canvas 3D is now WebGL, which is strictly speaking not part of the
HTML5 standard but standardized separately by
KHRONOS. WebGL™ is much more
powerful, adapted for 3D drawing, and can directly access the computers graphic
accelerator (GPU) - and on the other hand, much more complicated, and not
supported by all browsers or hardware/driver combinations.
Fortunately the taccgl library handles most of the complexity of WebGL™ and
automatically switches to canvas 2D if WebGL™ is not available, at the expense
of some graphics quality.
WebGL™ is a trademark of the Khronos Group Inc.