Introduction - taccGL™ Reference Manual
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
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
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.
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
More complex animations can then be composed by multiple transitions.
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
transitions to a running animation.
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.
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.