Lighting of HTML/CSS elements and 3D Objects

In canvas 3D (WebGL™) mode taccgl™ performs, unless disabled and resources permitting, some lighting calculations. Separately for each fragment (roughly for each pixel) taccgl™ computes a color value. In normal HTML+CSS various colors (e.g. forground and background colors) are specified per element. In reality, however, the color an object appears in, depends not only on the objects color itself, but also on the light sources that are reflected by the object. So for example a surface that directly faces a light source appears brighter than a surface that turns away.

These calculations make a page / 3D scene look much more realistically. Also The human eye / brain gains much 3D information from these lighting effects, even if the viewer conciously does not notice the effects.

This No-Specular-Example shows how an element becomes darker when turning away from the light source. Note that per default the light source is at (-200,-200,-5000), i.e. 5000 pixels in front of the screen at the top left. A similar effect occurs at the No-Specular-Sphere where the part in front of the sphere is brightest.

Sometimes the light source is directly reflected by a shiny object, which then results in a bright spot on the object, called a specular highlight, see Specular-Example (specular highlights show up only at a certain angle) and Specular-Sphere.

Lighting Parameterization and Materials

Various lighting parameters can be adjusted per transition using lightAmbDiff, lightBgAmbDiff, and specLight simulating reflection properties of various materials of the animated objects. Using the taccglMaterial Class you can also predefine materials for later reuse on multiple transitions.

Integration with HTML+CSS

Elements drawn with HTML+CSS normally appear (unless CSS e.g. shadows are used) with their full color. With the taccgl™ default parameters an HTML element drawn with taccgl™ also appears with the same full color, since the light source is in front of the page and directly shines on the HTML elements. The elements appear darker, however, if they are turned away from the light source or shaded by other elements or objects.

WebGL™ is a trademark of the Khronos Group Inc.