taccGL™ Canvas Operation
taccgl™ uses the HTML canvas element for creating animations.
Canvas is an element newly introduced in HTML 5, which allows scripts
to draw images and animations on a drawing area called canvas.
It comes with a lot of new scripting functions for drawing in
2D and 3D mode. You do not need to know how to use HTML canvas
for using taccgl™.
taccgl™ draws aminations on a (usually) full-window /
full-document sized canvas, which appears (usually) in front of the
normal HTML page. Initially the canvas is empty, i.e. fully
transparent and so appears invisible and the HTML page shines through
as is. Once things are drawn they appear in front of the HTML page.
Often one leaves space in the HTML document and just draws
taccgl™ animations in these empty spots, leaving the rest of the
canvas transparent. Animations, however, can extend over the complete
document, which makes it possible e.g. to have a 3D object flying
into its normal position, thereby temporarily hiding parts of the
Another common technique is to put alternate content in the
HTML document (such as static images), which is shown in cases
WebGL™ is not available. This alternate content is then
normally hidden by the animation playing on the canvas.
Although the taccgl™ canvas appears on top of all the other HTML
elements, animations that hide (completely or partially) 3D objects
behind HTML elements and so create a visual effect of 3D objects
behind HTML elements are well possible. In this case only the visible
part of the 3D object is drawn on the canvas while the rest remains
For shadows casted from 3D objects on the HTML page taccgl™
just draws the shadow in form of semi-transparent grey pixels
on the canvas.
Animating HTML Elements
taccgl™ can do animations that appear like animating HTML
elements. In this case
it is actually not the element itself that is animated, but an
image of the element drawn on the canvas, while the original HTML
element is hidden.
This makes the WebGL™ the graphical and animation features
available for HTML elements and parts thereof. For some HTML
elements this works fine without the need to understand
all the details, as shown in the Tutorial.
However, because of security constraints of the browsers
and other restrictions not all HTML elements can be displayed
this way or have exactly the same appearance, see Restrictions.
other approaches) taccgl™ animations are not reflected in the DOM
(except for hiding elements). Often, this is the desired
behaviour e.g. for animations that are just used to attract attention,
to make a page look nicer, or more impressive, without actually
changing the content.
Hiding and Showing HTML Elements during Animation
When animating an HTML element with taccgl™ the HTML element
itself must be hidden while an image of the HTML element is shown on
the canvas. The actor method takes care of this
automatically. In various other cases visibility needs to be controlled
manually, e.g. by using a, hideAtBegin, visAtEnd
(see Integration of HTML and WebGL):
- for animating hidden HTML elements, which are only visible while the
animation is playing nothing needs to be done, use a
- for fade-in like animations that make hidden HTML elements
appear, the element must become visible after playing the animation
(use actor with visibility parameter or a and
- for fade-out like animations that make an element disappear, the
element must become hidden before the animation and stay like this
afterwards (use actor with visibility parameter or a and
- for animating multiple parts of an element (like flipping parts, splintering)
usually hiding/showing must be done on a single part only.
Canvas Size Optimization
Canvas size is very important for animation performance.
Since the GPU performs some calculations per pixel, the number
of pixels per canvas is very important.
taccgl™ uses a canvas that virtually covers the complete HTML
document. As optimization taccgl™ reduces the canvas to the
visible part of the document only. When scrolling it moved the canvas
in a way to cover only the part of the document that is scrolled into
view. This works completely automatically.
WebGL™ is a trademark of the Khronos Group Inc.