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 HTML document.

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 transparent.

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.

As a javaScript programmer you need to keep in mind, that (unlike 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 visAtEnd).
• 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 hideAtBegin).
• 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.