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