Because of performance problems on your computer/device/browser animations run only on a small part of the screen and not full screen as normally. Move the mouse to see different parts of the animation.

HTML5 2D and 3D Canvas
Animation Library taccGL

Improve Look and Feel of web pages combining web graphics-standards HTML5 Canvas, WebGL™, and CSS:

Advanced Graphics for HTML5 / CSS Web Pages
by adding 2D and 3D graphics to your web pages.
Animate Item
HTML5+CSS elements
3D Objects from scene files
Deformed, sliced, mapped elements
Canvas Drawings
with Feature
Lighting and Shading
Hidden Surfaces
Automatic Shadows
GPU based WebGL™
fallback to 2D canvas
 
 

by

adding 2D and 3D graphics to your web pages.

Plug-In free, cross html5 browser, open source.

Easy use with HTML5, CSS, and javaScript,

based on HTML 5 Canvas and WebGL™

Features, Tutorial

Examples

Mouseovers
Enlarging 3D Objects
Your browser or GPU does not seem to support WebGL and so examples marked with 3D do not show.
Spheres 3D
Multi-Fly-In
Rotation Demo
Solid Rotation 3D
External 3D Models:

WebGL™ is a trademark of the Khronos Group Inc.

 

Features

HTML element mapped on Cube

3D

2D / HTML / CSS

HTML Element Animated with taccGL and WebGL

Integration of HTML/CSS with 3D

  • Hover 3D objects over web pages casting shadows on html
  • Postition 3D objects relative to HTML elements (before, on top etc.)
  • Cast Shadows from 3D Objects to HTML elements and vice versa

Development

  • Easy content creation with HTML, CSS, and javaScript
  • Concise Fluent interface for operations on multiple selected objects or elements

3D Extensions and Compatibility

  • Full page WebGL™ on (very) long scrolling web pages (overcomes canvas size limitations by simulating a full page canvas with a smaller full window canvas)
  • Use WebGL™ if suitable on the target device, otherwise assist in showing alternative content e.g. via 2D Canvas as fallback
  • Show multiple / many objects on a single canvas (avoiding the browsers number of canvas limitation and) permitting full page animations with 3d objects
  • Determine target device performance and graceful feature degradation when needed. E.g disable shadows on slower devicws, use per vertex shading, reduce canvas size

Further reading

 

Creating Parallax Scrolling Web Sites with 3D Hardware Acceleration and WebGL™

Most parallax scrolling web sites are implemented using javascript and CSS, although most computers have full scale 3D hardware graphic acceleration. This article describes, how to build parallax scrolling websites with full 3D harware acceleration and WebGL™ more

3D Objects on HTML + CSS Pages

Create a 3D model using a (commercial or open source) 3D modelling program and use taccgl™ and 2 lines of javaScript to show the model on your web page. more

Pop-Up Animations with no more than 4 Lines of

javaScript useful for pop-up/alert/dialog boxes, for tool-tips and status infos, for drop-down and pop-up menues etc. more

CSS Transition Visibility

The css visibility property shows and hides elements. Transitions on visibility do not perform an animation but are useful for combination with other CSS transitions e.g. CSS Transition Opacity for Fade Effects. The blog article gives various visual effects made that way comparing them with taccgl™ transitions. more

CSS Transition Display

The CSS display property can be used to completely remove an element and all space occupied. The CSS spec does not provide CSS transitions on display but css transitions on height can be used instead. These can easily be combined with taccgl™ transitions to play some visual effects while the element appears or disappears more

 
HTML5 Canvas Animation

Morphing and Deforming of CSS formatted HTML elements

taccgl™ includes functions for deformation and morphing of HTML elements. For example an element can be morphed from a rectangle into a circle or it can be mapped on an uneven waveformed surface more

 

Beta Version 0.62 Released

HTML5 Canvas 3D Animation

Version 0.62 was released on November 1, 2020. Download, Version Information

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.

Warning

When showing, viewing, or developing animations and/or computer games take care about epilepsy. A warning message shows up before viewing the examples.

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.

 

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.

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 wave 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 further down on the page to see animations enlarging and rotating the objects.

X

Detailed 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
Fading/Blending
Clipping/Resizing
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)
3D Features
(in WebGL and fallback mode:)
Linear and Accelerated Motion in 3D
Rotation around axis and center in 3D
Compatible with HTML coordinates
Boxes
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

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
 
X

2D Features in Detail

Here we show, step by step, the transitions and animations currently supported.

Animate CSS formatted HTML Elements

Move Actor, Rotate Actor, Rotate and Move, Fade Out Actor, Fade In Actor

Simple Linear Motion

Move around a CSS formatted HTML element, e.g. Move Simple Image Element, Move Text Element, Move Image from its HTML position, Move Text from its HTML Position, Move Image to its HTML position, Move Text to its HTML Position,

Show and Hide HTML/CSS element

Move Image from its HTML position and hide the original element, Move Image to its HTML position (from)and afterwards show the original element, Move hidden Text Element

Combine Basic Animations

Move around Single Element (hide original HTML element using CSS during move and show afterwards), Move around Multiple Elements, Move Multiple Copies of one Element

Accelerated Motion

Motion with increasing speed, Motion with decreasing speed (negative acceleration), Motion along Path, Rotate Actor with increasing speed, Rotate Actor with decreasing speed, Smooth Rotate and Move.

Blending and Colors

Fade In, Fade Out, Blend, Blend and Stay, Blend (Disappear and Appear), Blend to Color and change Color

Rotations

Rotate, Rotate around Point, Rotate and Move, Rotate Part, Rotate Multiple

Animate Rectengular Part of an Element

Move upper left part of Image, Split Image into Parts

Resize Elements

Grow from zero, Grow partially, Grow Big, Grow and Move, Clip from zero, Clip partially

Move Elements with Mapped Texture

Move Image with Mapped Text, Moving Mapped Text
X

3D Features in Detail

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. Rotate with acceleration X, Y, and Z axis, .

All HTML/CSS elements displayed normally appear in a z=0 plane. Elements displayed using taccgl™ use the same x and y coordinates (in pixel with origin 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 : Small Box Test, Big Box Test, Logo Box, Some Logo Boxes, More Boxes, 300 Boxes
Map various HTML elements on surfaces: Text Mapped Cube
3D object with rectangular faces: Multi Face Object

Multiples

Select multiple elements and perform animation: Rotate all a tags.
Create 3 slices and Rotate in sequence.
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

X

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 cut through each other, see also Mapped Cube

Display of 3D Models in OBJ file format

Simple Display, Selection of one or more objects from the model, Stretch 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, and Rotating Blend.