HTML5 Canvas 2D Library

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

See Demos on our home page

One of the most interesting new features of HTML5 is HTML5 canvas, especially canvas 3D or WebGL™, for awfully fast computer graphics. WebGL™ has many features to especially support 3D graphics, while at the same time allowing the web developer to download high speed programs into the client computers graphic accelerator (GPU) and so enabeling high performance 2D graphics including the animation of HTML elements.

This tutorial explains how to use WebGL™ via the taccgl™ library for adding animations to HTML5 web pages. taccgl™ hides the complexity of WebGL™ and is therefore well suited for current HTML/CSS/jacaScript developers. The library also simplifies integration with HTML pages, e.g. by mapping HTML elements on 3D objects and aligning of 3D objects with HTML elements.

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.

Tutorial Sections:

First Example
Basic Shapes
Basic 3D Models
Basic Animations
Colors and Textures
Integration of HTML and WebGL
Timing Transitions
JavaScript Embedding
External 3D Models
HTML Elements on Canvas
Selectors for Multiple Transitions
Fragment Shaders

Blog Articles:

Parallax scrolling with 3D Acceleration
CSS Transition Opacity for Fade Effects
CSS Transition Display
CSS Transition Visibility
WebGL-HTML5 PopUp 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!