HTML5 Canvas 3D WebGL (TM) js Library
 

Shadows in 3D HTML Pages

Lets start with the example from the Shadows page. In does not totally corretly display the shadows, if the grey background is assumed to be 200px behind the main text box and during animation a second copy of the image appears.

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

The idea to overcome this problem, is include only the visible HTML elements and not the complete body:

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

This works quite nice, but a closer look reveals that the shadow does appear on the text but not on the background. We can solve this problem by reincluding the body. We however use "blend(0,0).color("#777777")" to remove content and to just show the background color.

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

The next step is to correctly position the grey background 200px 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,200px) 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 moving image appears at a different position on the text and on the background as it should be. the text div casts a shadow on the background and the shadow of

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

Shadow-Only Elements

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

taccgl.a("Middle").shadowOnly().color("black").showAfter().start();
taccgl.a("MenuBar").shadowOnly().color("black").showAfter().start();
taccgl.a(document.body).blend(0,0).color("#777777").shadowOnly().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
Please Add a Comment or Question, click here!