Texture Canvas

Texture Images

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.

Painting

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

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 HTML elements).

Texture Atlas

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 called texture 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 method.

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 first. It also can be used to handle otherwise overlapping HTML elements.

WebGL™ is a trademark of the Khronos Group Inc.