HTML5 Canvas 3D WebGL (TM) js Library
 

Shadows in 3D HTML Pages

Lets start with the example from the Shadows page.

taccgl.a(document.body).paint().showAfter().start();
taccgl.actor("testimg").to(500,1000,1000).dur(7).start();
RUN

Now please view this page on a wide screen and notice the grey area around the image on top of the screen. The idea of the following examples is that this grey area appears 400px behind the screen and that the image hovers in front of it, casting a shadow on the grey area. The first step to achieve this is to show the main text explicitly. So in the following example you just see the shadow casted on the main text.

taccgl.actor("Middle").showAfter().start();
taccgl.actor("testimg").to(500,1000,1000).dur(7).start();
RUN

Then we add the body with a grey color.

taccgl.a(document.body).color("#777777").showAfter().start();
taccgl.actor("Middle").showAfter().start();
taccgl.actor("testimg").to(500,1000,1000).dur(7).start();
RUN

The next step is to correctly position the grey background 400px behind the text. The methods posZ and resizeZ are useful for this purpose. Note that it is not sufficient to just position the background at position (0,0,-400px) because then it would no longer appear in the top left corner of the screen. posZ adapts the x and y coordinates, so that the element still appears on the same position of the screen (the top left corner in this case). Also it is necessary to enlarge the background using resizeZ, because otherwise it would be displayed smaller since posZ moved it further away from the eye point.

After these changes the shadow of the moving image appears at a different position on the text and on the background as it should be. Also the text div casts a shadow on the background.

taccgl.a(document.body).color("#777777").posZ(-400).resizeZ().showAfter().start();
taccgl.actor("Middle").showAfter().start();
taccgl.actor("testimg").to(500,1000,1000).dur(7).start();
RUN

Example with Shadow-Only / opaqueShadow

Similar effects can be achieved using shadowOnly or opaqueShadow with the advantage that less texture space is needed.

taccgl.a("Middle").opaqueShadow().showAfter().start();
taccgl.a(document.body).opaqueShadow(). posZ(-400).resizeZ(). showAfter().start();
taccgl.actor("testimg").to(500,1000,1000).dur(7).start();
RUN

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:Class Structure
Previous Page: Shadow Only