Combining HTML5+CSS with WebGL™ - taccGL WebGL Web 3D Tutorial

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, 900, 2.500, 10.000, 40.000, 90.000 Elements (for higher numbers you need a desktop or laptop computer with ordinary GPU).

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

HTML5 Canvas 3D Animation

Audience for this tutorial are HTML, CSS programmers with some basic JavaScript knowledge. You need to know, how to program 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. You need a little bit of JavaScript programming know how, however the tutorial explains most of the JavaScript used.

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.

Tutorial Sections:

First Example
3D Model with Transitions
Controlling Visibility
Boxes
JavaScript Embedding
Simple Motion
HTML Elements on Canvas
Simple Rotation
External 3D Models
Timing
Continuations
Expressions
Accelerated Motion
Flexibles

Blog Articles:

CSS Transition Display
CSS Transition Visibility
Pop-Up Animations
3D Objects on HTML pages
Deforming and Morphing of HTML
is a fast Script Library to animate HTML pages in 2D and 3D using HTML 5 canvas, if available with hardware graphic acceleration. It integrates well with HTML to animate HTML elements (like <img> and <p>).

WebGL™ is a trademark of the Khronos Group Inc.

Please Add Comment or Question, click here!
 
Comments
FAQ
Blog
Tutorial
    First Example
    3D Model with Transitions
    Controlling Visibility
    Boxes
    JavaScript Embedding
    Simple Motion
    HTML Elements on Canvas
    Simple Rotation
    External 3D Models
    Timing
    Continuations
    Expressions
    Accelerated Motion
    Flexibles
Manual
Download
Services
About