A taccgl™ animation shows various 3D and 2D objects on the screen
e.g. a 3D cube or just a 2D rectangle. On each surface of such an object
an image can be mapped. This image is called a texture image
or just texture. E.g. in case of the cube there are 6 faces
which can have its own texture. In case of the rectangle there is just
one face with a single texture image. To show a wooden box, you can
for example use photos of a wood as texture. In order to show
an HTML element an image of the HTML element is taken and used
as texture image on a rectangle.
In taccgl™ the images used as textures are described using HTML
and CSS. Note that this includes images and photos of various formats
using e.g. an HTML-img element. In addition it provides text and many
well known formatting and layout features via CSS.
HTML elements used as textures may or may not appear elsewhere on the
page. In the latter case they are usually absolute positioned and hidden.
Since the GPU cannot format HTML elements, the HTML need to be
converted into an image first. This conversion is done by taccgl™
before the animation runs. In the context of taccgl™ we call this
For very simple animations painting takes place automatically and
the user does not need to care about it. There are, however, methods
to do the painting manually and others to suppress the automatic
painting. This is useful, e.g. to animate multiple instances of a single
HTML element (in which case it justs needs to be painted once) or to
exaclty determine when and in what order images are taken (which can
make a difference e.g. in case of dynamically changing or overlapping
Unfortunately the number of textures used in an animation is very
limited by the GPU. Therefore one packs multiple texture images into a
single big image
atlas. This process is handled to some extend automatically by
taccgl™ and the user for simple animations does not need to care.
This holds as long as the HTML elements used as textures do not
overlap and fit into the default texture atlas size of 1200x1424.
taccgl™ normally just uses 2 texture atlases, which must
contain all the texture images and all the images of HTML elements
used. They are called texture canvas and alternate canvas.
Both are implemented by hidden HTML canvas elements (not to confuse
with the main drawing canvas that is visible and displays the running
animation). When taccgl™ paints an HTML element to one of
the two texture canvases it does so at the coordinates where the element
appears in the document unless told otherwise using the map
map must be used for HTML elements that reside at coordinates
not within the size of the texture canvas.
If two HTML elements overlap, painting of the second element on the
texture canvas will overwrite the painted image of the element painted
It also can be used
to handle otherwise overlapping HTML elements.
WebGL™ is a trademark of the Khronos Group Inc.