HTML5+CSS on Canvas 3D WebGL (TM) Library


Each surface of the shape shown by a transition has a texture. This may be one for a rectangle or more e.g. 6 for a cube.

In the taccgl™ default1, a texture is a (background-) color (or color gradient) blended with an image. The image has an opacity factor associated with it and can so be made fully or partially transparent. The color acts as a background color and becomes visible where the image is transparent.

The final appearance of a surface is influenced by Lighting and Shadows, which simulates the appearance of an object in the real world that appears with varying brightness and color depending on the light sources.

Image Textures

In taccgl™ the images used as textures are described using HTML. When using actor or a to create a transition, the default image texture is an image of the HTML element passed.

Using mapActor or mapElement a different HTML element can be mapped. Using mapRelative, mapClip, or mapClipToElement a part of an HTML element can be mapped. For objects with multiple surfaces a face needs to be selected first (e.g. selFace).

As explained in Texture Canvas, taccgl™ uses the taxture canvas to create a texture atlas. Using the somewhat more low level function map you can map a rectangular portion of the texture atlas on a surface.

Textures can also be animated using texmove, mapTo, or mapFrom.

In addition the texture blends actually the selected portion of the Alternate Canvas over the selected portion of the Texture Canvas over a fixed color. Using blend it can be selected to what percentage each of these canvases are shown. Initially only the Texture Canvas is shown not the Alternate Canvas. A color can be selected using color or bgcolor. It becomes visible if and where the HTML element drawn on the Texture Canvas is transparent, or if it is made transparent using blend. Also blend and color have additional parameters to animate the blending and the color.

WebGL™ is a trademark of the Khronos Group Inc.

[1] The image textures provided as default are already very powerful, so frequently the default is sufficient. More complex textures can be made by using individually programmed fragment shaders.
Next Page:Transition Kind
Previous Page: Motions