HTML5 Canvas 3D WebGL (TM) javaScript Library


Normally (if shadowOnly is not used) shaded elements and objects are displayed partially darkened. The darkened areas appear as shadows. shadowOnly is useful for explicitly showing the shadows on HTML elements. The idea is to display the HTML elements as usual and draw the shadows on top of the HTML elements using taccgl™. So here the shadows are drawn explicitly. One advantage of this approach is that it works for all HTML elements even if they contain HTML or CSS that taccgl™ can not correctly display:

taccgl.a(document.body). shadowOnly().paint(). showAfter().start();"testimg").to(500,1000,1000). dur(7).start();"ex5").to(500,1000,2000). dur(7).start();

You probably won't notice much of a difference w.r.t. to the example without shadowOnly on the Shadows page, still the internal working is quite different.

It should be noted that this example uses the second texture canvas for the "ex5" in order to correctly paint the transparent areas of the element "ex5". The first texture canvas already contains an image of the document body including "ex5" but with non-transparent background. This example can however be optimized to need much less texture space:

Because with shadowOnly not the element itself but just the shadow is drawn, the texture is not needed (as long as the element is not (partially) transparent). This saves time for painting the element and space on the texture canvas. The following example demonstrates this. The call to paint was replaced by a background color. The color itself is not relevant (as long as it is not transparent) because the element is not painted anyway, however, color is needed to make the element opaque. So the actor "ex6" does no longer need to use the second texture canvas because now there is room on the first texture canvas.

taccgl.texClearAll(); taccgl.a(document.body).shadowOnly() .color("black") .showAfter().start();"testimg").to(500,1000,1000). dur(7).start();"ex6").to(500,1000,2000). dur(7).start();

The method opaqueShadow can be used as abbreviation for shadowOnly and color.

taccgl.texClearAll(); taccgl.a(document.body).opaqueShadow() .showAfter().start();"testimg").to(500,1000,1000). dur(7).start();"ex7").to(500,1000,2000). dur(7).start();
The shadow-only approach also has the advantage that changes in the HTML, e.g. hiding of an element, immediately reflect themselves in the display and so in the example above, the problem of the additional copy of the image discussed in Shadows does not arise. This however only works as long as the hiding of the image does not leave a transparent area.

The challange of the shadow-only approach is that the HTML elements and the transitions drawing shadows on these HTML elements need to be in sync. As long as the HTML element is static, this is trivial. However if the HTML changes and so the element is hidden or moves, then the transition needs updating.

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:Shadows in 3D HTML Pages
Previous Page: Shadows