Canvas Library
 

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

Next Page:Shadow Only
Previous Page: Lighting