Texture Canvas

A taccgl™ animation shows various 3D and 2D objects on the screen e.g. a 3D cube or just a 2D rectangle. On each face of such an object an image is mapped, which is called a texture. So in case of the cube there are 6 faces each having its own texture. In case of the rectangle there is just one face with a single image/texture. This is why we often just think about animating an HTML-element, while in fact we are animating a rectangle on which the image of the HTML-element is drawn. There are methods to animate the object (e.g. the rectangle) for example to let it move around and there are methods to manipulate how the texture(s) are mapped on it (e.g. to select which image, what part of it, transparency etc.) The third question is, how the image mapped on the object exactly looks alike, which is discussed further in this section.

In the simplest case taccgl™ just animates the image of an HTML element and the user does not need to worry about where this image comes from. Sometimes, however, taccgl™ has it own special definition what it considers the image of an element, the user wants to explicitly modify that image, or plainly taccgl™ needs the users help in preparation of the image. As long as you use the actor method to create a transition, taccgl™ automatically creates the image of the HTML element and you do not need to further read this section. If you use the a method, taccgl™ expects that you created the image beforehand and just takes an existing one.

Images of HTML elements are taken at some time before the animation and are then used throughout the animation. If an HTML element changes this will not be reflected in the animation (unless the image is taken again).

Unfortunately, although the browser shows images of all visible HTML elements, it does not provide these images to scripts for some security reasons. In addition taccgl™ also needs images of hidden elements (because otherwise you could only animate elements visible and no hidden ones).For these reasons taccgl™ creates images of the HTML elements itself. This process is called painting.

taccgl™ paints the elements on a hidden canvas, which is called the texture canvas. It is called texture canvas because the image thereon is used partly as a WebGL™ texture. taccgl™ paints elements when being implicitly (e.g. using actor) or expicitly (e.g. using paintElement) requested to. Elements on the texture canvas appear at the same coordinates as on the original web page. So to some extend the texture canvas contains an incomplete copy of the original web page. Incomplete means, that (1) not all elements are painted, just the ones requested, (2) elements are painted in the order requested which may not correctly reflect z-index, (3) also hidden elements may be painted, (4) elements are painted by taccgl™ not by the browser and therefore may look different, in fact (5) in fact the current implementation does not support painting of form fields or background images; also link status may not be shown correctly and many CSS attributes are not yet implemented (6) on cross domain web pages, taccgl™ might not have access to the complete DOM and consequently can not paint certain elements.On the other hand, note that taccgl™ only paints HTML elements on your page and only those elements that should be animated, so it is possible to avoid problematic features in these HTML elements.

While playing the animation taccgl™ takes the recktangular portion of the texture canvas at the position of the element from the texture canvas as image of the element. If the element has been painted immediately before, this is indeed the image that has been painted. However if the element has transparent portions elements painted before might shine through. If multiple elements share the same screen/canvas area then it depends on the order of painting what is actually used as image of an element.

So taccgl™ takes a more graphical view on elements than the usual structural view of the DOM. For taccgl™ an (animatable) element is a rectangular area of the web page, and everything shown in this area it the image of the element. Rationale behind that idea is that animations usually want to smoothly alter the image of the web page displayed and so the image used for animation must closely resemble the image displayed by the browser. The idea of taccgl™ is to start from the image displayed by the browser and manipulate that, thereby using coordinats of HTML elements.

WebGL™ is a trademark of the Khronos Group Inc.