Shadows
taccgl™ automatically determines elements or objects
between the light source and other elements or objects and
darkens shaded elements or objects accordingly. This works
for all elements drawn with taccgl™. Elements drawn with
HTML and CSS are not taken into account, they neither cast shadows on
other elements nor are shadows drawn on these elements. The following
examples illustrate this: (1) In the first example below there are no
shadows, there is just the image drawn with taccgl™ and everything
else drawn with HTML+CSS without shadows. (2) In the second example
the complete document is drawn with taccgl™ by specifying body as an
actor and so shadows appear.
taccgl.actor("testimg").to(500,1000,1000).dur(7).start(); | RUN |
taccgl.a(document.body).paint().showAfter().start(); taccgl.actor("testimg").to(500,1000,1000).dur(7).start(); | RUN |
taccgl.a(document.body).color("black").shadowOnly().showAfter().start(); taccgl.actor("testimg").to(500,1000,1000).dur(7).start(); | RUN |
In the second example the image appears twice, one copy as part of
the document body and one copy performing the animation. (3) The third
example shows a simple work around. Using Shadow Only
the shadows casted on the document (body) are drawn using taccgl™ the
document (body) itself is still displayed with HTML+CSS.
This sometimes improves the display of the element and
also hides the image during the animation. The shadowOnly approach also does no
longer need a texture for the document body (uses color
instead of paint).
This simple approach to shadows works fine if the
HTML+CSS document is assumed to be 2D, all elements being in the z=0 plane.
Only during animations there are elements in front of the document body
casting shadows on each other and on the document body.
HTML+CSS Documents in 3D
Although HTML+CSS (with the exceptiption of the new CSS-transforms
and 3D-canvas features) does not explicitly express 3D properties, it
is still possible to manually draw 3D images by positioning elements
and drawing shadows. For example this page has
an image and a text box flying 200px in front of a grey background. It
uses CSS shadows to create this 3D effect.
Under this view sense the shadows created with the above simple
approach are not totally correct. The shadow casted by the image
flying over the text box and the grey background must not be a
straight line (as it is in the above example), because the background
is farther away than the text box.
In order to change this behaviour, you must not incorporate the
complete body into the animation but the grey background and the text
box individually with their correct z-coordinates. This is discussed
in Shadows in 3D HTML Pages. In general the approach
to shadows is to display all relevant HTML elements using taccgl™ and
not via HTML+CSS. Displaying a parent element usually is sufficient
and covers the child elements as well as long as all share the same
z-Coordinate (Care however must be taken, not
to show elements for shadow purposes that should not be show during an
animation).
| 
3D Animation
