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)
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.