HTML5+CSS 3D Animation and Transition Canvas Library taccgl™
transitions and animations of CSS formatted HTML elements (via Canvas 3D) and of 3D objects
|Easy content creation with (Tutorial)|| HTML 5, CSS, and
|Correct 3D Display||Automatic Shadows|
|For General Pages||GPUAcceleration|
|Cross HTML5/CSS Browser||WebGL™ with fall-back|
Beta Version 0.56 Released
Version 0.56 was released on June 19, 2014, more
Now the development of mobile and responsive sites is explicitely supported and a beta of the mobile home page of taccgl™ demonstrates this. Read more about development of Responsive and Mobile Layouts. Also the taccgl™ tutorial and most of the documentation pages now have a responsive layout.
The library now also works locally on file:/ / urls (see Installing the Library) and can so be tested without the need of a web server (local or remote).
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™ for 2D and flat HTML/CSS Pages
Although WebGL™ is mostly seen as a pure 3D technique, it in fact provides direct access to the GPU and so can be used benefically for 2D as well to
- create fast 2D animations of HTML/CSS elements, smoothly animating many thousand elements or parts of elements taking benefit of GPU acceleration
- manipulate every pixel displayed for an HTML/CSS element using HTML canvas operations
taccgl™ enables Close integration of HTML, CSS and WebGL™
taccgl™ can see an HTML page with its HTML elements and possibly additional 3D objects as a single 3D scene and so provide
- correct display of HTML/CSS elements appearing in front of each other, hiding invisible elements (also partially)
- display of 3D objects read from 3D model files and alignment with the HTML elements
- lighting for HTML/CSS elements and 3D objects by simulating a light source
- automatic calculation and display of consistent shadows including shadows of partially transparent elements and shadows on uneven surfaces.
Enlarging 3D Objects on this page
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 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.
taccgl™ can display CSS formatted HTML elements with the new HTML5 3D canvas which makes the benefits of canvas 3D available for HTML elements as well:
For example HTML 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 (parts or 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.
- animating CSS formatted HTML elements
- mapping of HTML elements on 3D objects
- displaying 3D objects created with a modelling program (e.g. Blender) and aligning them with HTML and CSS
The new HTML 5 canvas feature in its 3D version brings fantastic new graphic and animation features, such as
- direct access to the clients GPU graphic acceleration unit,
- performing of animations with thousands of triangles,
- separately controlling every pixel and to calculate each pixel's color once per frame,
and also special 3D features such as
- 3D depth buffering for hidden surface handling,
- 3D lighting for simulating light sources and reflection on 3D objects, and
- automatic 3D shadow calculation.
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.
Hover or click on the various green links on this page to see pop-ups containing additional explanations.
The appearing pop-up window is displayed using taccgl™ and WebGL™, mostly (performance of the GPU permitting) to correctly display its shadows. Note that the shadow can be quite complex, since the underlying page is not flat but seen as a 3D surface.
In addition opening and closing animations are played. The opening animation is choosen randomly from various opening animations that are e.g. morphing the element from a circle or a wavs from to its final rectangular form. The closing animation makes the element explode into many parts.
Hover or click on the various 3D objects and screenshots to see animations enlarging and rotating the objects.