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
  • JavaScript Library, (aims at) cross browser HTML 5
  • 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
HTML5 Canvas 3D Animation
HTML5 Canvas Animation

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.

WebGL™ is a trademark of the Khronos Group Inc.

Further reading:

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.

is a fast Script Library to animate HTML pages in 2D and 3D using HTML 5 canvas, tries to use WebGL™ and hardware graphic acceleration with 2D canvas fall-back. It integrates well with HTML to animate HTML elements (like <img> and <p>).

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.

The library is written in JavaScript and GLSL (a C like vector programming language). If supported, the GLSL parts are downloaded into the graphics card and executed there; possibly in parallel on several processors, which gives a dramatic performance gain.
taccgl™ is an HTML 5 library making special use of the new canvas feature. HTML 5 means that the library explicitly runs only on newer browsers, e.g. IE 9.0 and up. For older browsers it becomes inactive, the idea is that users can still view pages that include the library, however without the animations.

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.

taccgl™ Features

  • Script Library for animating HTML pages
  • 2D and 3D Animations via HTML5 Canvas Element
  • tries to use GPU 3D acceleration via HTML5 canvas 3D, WebGL™, if available
  • if not uses HTML5 canvas 2D or becomes inactive in older/non-HTML5 Browsers
  • animates HTML elements
  • animates 3D Models (OBJ and MTL files) in WebGL Mode
  • designed for adding animations the existing pages
  • open source, BSD like license
2D Features Details/Demo 3D Features Details/Demo WebGL Features Details/Demo
Linear Motion
Accelerated Motion
Rotation around given axis
Rotation around given axis and center
Animate HTML Elements ( Restr.)
Animate hidden HTML Elements
Make Elements visible or hidden
Motion from or to elements Home
Setting Background Color
Animated Background Color
Fading/Blending
Clipping/Resizing
Grow and Shrink Animations
Mapping of HTML elements
Texture Motion
Continuation of animation steps
Continuation with constant velocity
Parallel Projection
Limited Hidden Surface Handling
Linear and Accelerated Motion in 3D
Rotation around axis and center in 3D
Compatible with HTML coordinates
Boxes
Objects with rectangular Faces

Multiple Operations
Handle Sets of Animation Steps
apply animation to all elements
all HTML elements of CSS class
all HTML elements with name
all HTML elements with tag name
horizontal/vertical slices

(available if taccgl™ can use WebGL on the target browser and target computer)
all 2D and 3D Features, but full Perpective Projection instead of parallel Projection and full hidden surface Handling
use of GPU hardware graphic acceleration
HTML elements with flexible Borders
Display of 3D Models from OBJ/MTL Files
Selection of objects from 3D Models
Alignment of 3D Models / HTML elements
Mapping of HTML elements on 3D Models
ambient, diffuse, and specular Lighting
per vertex or per fragment Lighting
Shader Generation
Custom Shaders

3D Features

In fact most of the animations shown in 2D so far work in 3D as well: Move back (z>0) and forward (z<0), Rotate around X, Y, and Z axis, Move and Rotate around X, Y, and Z axis, Rotate around XY, YZ, and XZ diagonal,

All HTML elements displayed normally appear in a z=0 plane. Elements displayed using taccgl™ use the same x and y coordinates (in pixel with oringin in the top left corner of the current window or frame) and may have a positive z coordinate when moving behind and a negative z coordinate for moving in front.

3D Elements

Turing an Element into a 3D-box : Box Test Logo Box Some Logo Boxes More Boxes 300 Boxes
Map various HTML elements on surfaces Introduction Cube
3D object with rectangular faces: Multi Face Object

Multiples

Select multiple elements and perform animation: Rotate all a tags.
Create 50 slices and Rotate in sequence.
Create 500 slices and Rotate in sequence.
Create 5000 slices and Rotate in sequence.

Show Multiple Copies
Move Multiple Copies

WebGL Features

If taccgl™ uses 3D canvas or WebGL then all the 2D and 3D features are performed using WebGL and with full WebGL performance. In addition the following additional features are available:

Hidden Surface Elimination / Depth Buffering

Correclty displays Elements depth information, even if elements cross each other, see also Introduction Cube

Display of 3D Models in OBJ file format

Simple Display, Selection of one or more objects from the model, Strech Display, Positioning of the Model on HTML elements, many alignment options 1 2 3 4, Rotation 1 2 3 4, 1 2 3 4,

Mapping of HTML Elements on 3D Objects

HTML elements can be mapped on 3D models either complete or with UV mapping.

Lighting

Per fragment lighting: seperately controlable ambient, diffuse, and specular lighting Emphasized Ambient, Emphasized Diffuse, no Specular, Emphasized Specular, and Emphasized Specular with low Shininess.

Custom Shaders

Allow the user to programmtically control every point Circle Blend, Center Blend, Rotating Blend, and Custom Rotating Shader.

Features Overview
2D Features
3D Features
WebGL Features
Documentaion
Create Outstanding HTML-5 Animations
using Canvas 2D and/or 3D (WebGL)
Actors can be 3D Objects created with a Modelling program or HTML elements, like
<div id="el" style="border:1px solid black; ...">
I am an actor
</div>
Animate with simple javascript functions :
e.g. move, rotate, fade these actors
taccgl.actor("el").rotate(500,500,0,1,0).dur(4).start()
Content in HTML (as usual) and Eye Candy with taccgl™
Canvas (vs. CSS) makes animations faster and more felixibile.
Canvas 3D (WebGL): complex anmiations in full 3D.
Continue