- 2D and 3D Animations via HTML 5 canvas
- if available GPU graphic acceleration (via HTML5 canvas 3D, WebGL™)
- animation of HTML elements
- (aims at) cross browser HTML 5
- adding animations to existing pages
- open source, BSD like license
Introduction Cube |
Custom Shader3D only
Some Logo Boxes
Flat Box xxl Cube
When showing, viewing, or developing animations and/or computer games take care about epilepsy. A warning message shows up before viewing the examples.
taccgl™ is designed for general cross browser desktop HTML pages. It is inactive on old browsers (i.e. IE 8 and older) or slow computers / devices. The idea is to put all essential content in HTML elements, accessible with all browsers and readable by search engines, and to add animations on these elements for the majority of the audience using newer browsers / equipment. It takes advantage of the GPU acceleation using HTML 5 canvas 3D WebGL™ as supported by recent versions of e.g. Firefox and Chrome on suitable hardware and drivers. See Compatibility for details.
This is a beta release and quite naturally it contains bugs and is not yet completely implemented (e.g. does not yet implement all HTML tags and not all CSS properties). See Restrictions. We would be happy for bug reports and comments.
taccgl™ is provided under an open source BSD like License. You can download the library and place it on your test web server.
Under good conditions the library directly uses hardware graphic acceleration and its performance critical parts run directly on the computers graphic unit. This provides an extreme performance gain compared to DOM and script based animations and allows you to run smooth animations with thousands of elements.
If no hardware acceleration is present (or if it is not usable because of the browser or the graphics driver) the library uses the HTML 5 - 2D canvas which provides quite fast animations on fast computers as well.
For slow graphic accelerators and/or slow processors that can not handle the full screen resolution smoothly, the library plays the animations only on a portion of the screen or becomes completely inactive to not interfere normal operations on the page.
On older browsers that do not support HTML 5 canvas and no animations show up.
The new HTML 5 canvas element provides two drawing modes: 2D and 3D. While 2D drawing is part of the standard, 3D is not. Still many browsers provide a 3D drawing mode for canvas.
For the purposes of taccgl™, 3D canvas is a means to access the computers hardware graphic acceleration. taccgl™ is not dependent on it and can do 3D animations also with the 2D drawing context of HTML (and also 2D animations with the 3D drawing context). On the other hand many animations look better if the 3D canvas drawing is present.
Normally HTML 5 canvas is intended, supported, and used for inserting graphic images or animations into HTML 5 documents. These take up a rectangular portion of the document and besides that are indepented on the HTML elements and the DOM.
taccgl™, however, uses canvas to create animations that integrate or interact with the HTML elements. Animations use the same coordinate system so that an animation can move to a certain element, can move it around, can bend, or rotate HTML elements, or can even map HTML element on 3D objects.