HTML 5 3D, WebGL™, 2D Canvas Animation Library taccgl™
- 2D and 3D Animations via HTML 5 canvas
- tries to use GPU graphic acceleration (via HTML5 canvas 3D, WebGL™) if available
- animation of HTML elements
- animation of 3D Models as OBJ file in WebGL mode
- shadow calculation including shadows of and on HTML elements
- close integration of HTML elements and 3D Objects in a single scene
- adding animations to existing pages
- open source, BSD like license
Version 0.54 was released on November 14, 2013, see more
Canvas Library integrating 3D with General HTML
taccgl™ is designed to bring the power of WebGL™ and 3D animations to general cross platform HTML pages. 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. Since, however, not all systems currently support WebGL™ taccgl™ makes various efforts to detect incompatible or slow devices and then deactivates itself partly (e.g. runs only on a part of the screen or disables lighting) or completely. The idea is to put all essential content into HTML elements, accessible with all browsers and readable by search engines, and to add animations for the majority of the audience using newer browsers / equipment. 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.
Solid Rotation 3D
Templerhaus Show Case
If you like taccgl™ please share it with others, e.g. link to us, refer to us in social networks, or follow us on twitter etc.
When showing, viewing, or developing animations and/or computer games take care about epilepsy. A warning message shows up before viewing the examples.
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 with restricted features on fast computers.
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.
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.