Features Overview

3D Features


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 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 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, current versions of most other browsers. For older browsers it becomes inactive, the idea is that users can still view pages that include the library, however without the animations.

taccgl™ can display CSS formatted HTML elements with the new HTML5 3D canvas which brings the following benefits:

Elements can be animated using GPU acceleration, they can be moved, accelerated, deformed, bent, lighted etc. and they can enjoy the performance of the GPU which normally has enough power to separately animate thousands of copies of (fragments of) HTML elements.

Also HTML elements can be fully integrated into a 3D scene, e.g. they can rotate in 3D, they can be displayed before or behind other HTML elements even partially, and they can cast shadows or shadows can be casted on them. In addition HTML elements can be mapped on 3D objects such as cubes or spheres.

taccgl™ allows you to create WebGL™ animations with very few lines of javascript, by

The new HTML 5 canvas feature in its 3D version brings fantastic new graphic and animation features, such as

and also special 3D features such as

In pure HTML 5 canvas 3D/WebGL™ the content to be displayed must be individually programmed. The taccgl™ library greatly simplifies this process. by allowing the user to use CSS formatted HTML elements togehter with 3D Models created with a modelling program.

taccgl™ Features

  • Library for 2D and 3D graphics and text, transitions and animations using WebGL™ for Webdesign of general purpose HTML pages.
  • Detect browsers/clients without appropiate WebGL™ and keep pages operational; assist in or automatically showing alternative content (e.g. canvas 2D)
  • Animates CSS formatted elements, Canvas 2D drawings, parts, slices, and deformed fragments thereof, and 3D objects from model files.
  • Provides transitions for linear and accelerated motion, rotation, color, fading, clipping, growing, shrinking, texture motion, deformation, morphing, etc as detailed below.
  • Consistent hidden surface handling, lighting, and shadows over all animated elements including HTML elements and 3D objects.
  • Perform many thousands of parallel transitions using GPU acceleration.
  • Per pixel calculation of lighting, colors, shadows, and user defined functions.
  • Easy content creation with HTML, CSS, and simple javaScript.
  • Fluent interface to apply transitions on multiple selected elements/objects.
  • Initial and permanent measurements and estimates of performance and frame rate and based on that Fall-Back and Graceful Degradation mechanisms for browsers/clients that do not support WebGL with the required performance including, disabeling shadows, dynamically reducing canvas size, using HTML5 canvas 2D instead of WebGL™, and finally completely disabeling animations (e.g. IE 8).
  • Depending on client/browser uses HTML 5 canvas 3D (WebGL™) or canvas 2D.
  • Even in canvas 2D mode simulates some 3D features, see below.
  • Animates 3D Models (OBJ and MTL files) in WebGL™ Mode.
  • Automatically generated and user defined shader programs.
  • Open source, BSD like license.

2D Features

Linear Motion
Accelerated Motion
Rotation around given axis
Rotation around given axis and center
Animate HTML Elements ( Restr.)
Animate Canvas Drawings
HTML coordinate system
Animating Background Color
Grow and Shrink Animations
Mapping of HTML elements
Texture Motion
Continuation of transitions
Continuation with constant velocity
Morphing into Circles or Waves (WebGL Mode)
Lighting (WebGL Mode)

webGL Features

(available in WebGL™ mode)
all 2D and 3D Features listed already with
full Perpective Projection and
full hidden surface Handling
execution of transitions inside the GPU as shader programs
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 WebGL mode and in fallback mode:)
Linear and Accelerated Motion in 3D
Rotation around axis and center in 3D
Compatible with HTML coordinates
Objects with rectangular Faces
(in fallback mode without WebGL:)
Parallel Projection
Limited Hidden Surface Handling

Multiple Operations
select HTML elements of CSS class
select HTML elements with name
select HTML elements with tag name
apply transitions to sets of elements
cut transitions into horizontal/vertical slices
Handle Sets of Transitions