Introduction - taccGL™ Reference Manual

taccgl™ is a javascript library for adding fast and advanced 2D and 3D animations to HTML 5 web pages. taccgl™ can be seen as a library to simplify and support the use of the new web graphics standard WebGL™. WebGL™ provides extraordinary graphic power by allowing animations to run on the client computers graphic processor (GPU), which is usually much faster and better adapted for graphic applications than the CPU.

Unfortunately WebGL™ is quite difficult to use because of its low level C-like interface. The taccgl™ library puts a software layer on top of WebGL™, which is much easier to use. It has a javaScript / HTML / CSS - like fluent interface which makes it well usable by web developers.

taccgl™ makes WebGL™ usable on classical, ordinary, or responsive web pages. Common requirement of general web pages is to run on almost all browsers and devices, while, unfortunately, WebGL™ is not available on all devices / browsers. There remains a small percentage of client systems / browsers that cannot display WebGL™ (in a good quality), see WebGLStats. taccgl™ is designed to detect those systems and helps to show alternative content in such a case.

In addition taccgl™ adds support for many common tasks that are often needed but not supported natively by WebGL™. This includes for example loading and preparation of 3D files for display, the display of HTML elements with WebGL™, or the implementation of (possibly parallax) scrolling of WebGL™ content.

Graphic Based Operation

As a graphic library taccgl™ shows animations in form of multiple images (called frames) in a sequence. The frames are displayed with an HTML canvas element and are more or less independent of HTML, CSS, and the DOM. In contrast many other HTML/CSS based animation methods dynamically modify the HTML element or its styling.

taccgl™ can display various graphical primitives, see Basic Shapes, Basic 3D Models ... in the Tutorial. One can also create animations that appear like animated HTML elements, however, in fact not the HTML elements themselves are animated but instead images taken from the HTML elements.

taccgl™s rendered frames appear as a new graphic layer on top of the normal web page. The frames often have large transparent portions, through which the original HTML/CSS formatted web page shines through. The frames virtually cover the complete (or sometimes, for performance reasons, part of the) web page. In contrast other graphic techniques (including plain HTML canvas and WebGL™) render rectangular images as parts of an HTML page. The taccgl™ approach for example makes animations of 3D objects flying in and out possible, while other approaches are constraint to the canvas area. See Canvas Operation for more details.

taccgl™ Transitions

Graphic processors (GPUs) very efficiently support drawing of triangles. More complex objects need to be decomposed into multiple triangles. For example a rectangle can be decomposed into 2 triangles or a cube into 12 triangles. taccgl™ supports this by providing various kinds of predefined shapes.

taccgl™ programs the GPU to directly perform some basic animations (like a linear or accelerated motion possibly combined with a rotation) on a set of triangles. These basic animations that are performed directly by the GPU are called taccgl Transitions. More complex animations can then be composed by multiple transitions.

In the simplest case, a javascript program uses taccgl™ to first define a set of transitions, to send them to the GPU, and finally to make the GPU perform the transitions. In more complex cases the javascript program modifies running transitions or adds further transitions to a running animation.

Textures

Triangles drawn have a predefined color or an image is mapped thereon. These mapped images are called textures. For example, an image of a wooden surface can be mapped on a object to give it a wooden appearance. Also images of text can be mapped to implement text animations.

In taccgl™ textures are normally made with HTML / CSS. This naturally includes images and styled text. As texture a complete HTML element can be used or any part thereof. In simple cases taccgl™ handles textures automatically. Often, however, there is a need to reuse the same texture on multiple triangles in order to save the limited texture space of the GPU, see Texture Canvas.

Reading Instructions

This document is intended as a reference manual. Motivating and introductionary examples are in the Tutorial, so you should at least read the First Example page first.

The first part of the manual discusses various concepts like Canvas Operation, Coordinate System etc. in depth. For simple examples there is no need to read these sections and even for more complex examples you often do not need to read all the details.

The main and middle part of the manual discusses the methods provided by taccgl™ ordered by classes. The Class Structure page gives an overview of all the classes. Each class in turn has an introduction page with lists and structures all its methods.

WebGL™ is a trademark of the Khronos Group Inc.