HTML5 Canvas 3D WebGL (TM) js Library


Currently taccgl™ supports transparency only on a texture level. This means each image (texture) mapped on a face of an animated object is created by possibly overlaying multiple partially transparent images. On the other hand the final texture image itself is not supposed to be semi transparent. Some pixels may be completely transparant while others may not be transparent at all. Not pixel should be partially transparent. There is nothing that actually enfoces this, however, the hidden surface elimination algorithm using depth buffering does not support semi-transparent surfaces and images might look wrong if used.

Creating Texture Images

An image/texture mapped on an animated object results from overlaying three images (from bottom to top) (1) a solid color, (2) an image on the first texture canvas, (3) an image on the second texture canvas. Both images as well as the color can be completely or partly, totally or partially transparent. In addition there both texture canvases have a opacity factor assigned which makes these images transparent to some extend.

By default the solid color (1) is completely transparent. The image on the first canvas (2) is completely visible (although each pixel has its own opacity value) and the image on the second canvas is completely transparent.

Transparent Textures

The depth buffering algorithm provided by canvas 3D and used by taccgl™ does not support semi-transparent textures. If you have a pixel in in front of another pixel only the pixel in front will be drawn. This is ok for non-transparent pixels, because these completely hide everything behind. This is not ok for semi-transparent pixels, because pixels behind should shine through. With the current implementation everything behind is however completely gone.

Completely transparent pixels are ok however since these pixels are completely ignored and not drawn at all and so everything behind stays visible.

As long as you are sure, that there is no other animated surface behind an animated element it is also possible to use a semi-transparent texture. The HTML content iself will show through partially in this case.

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:taccgl Transitions
Previous Page: Alternate Canvas