Shadow-Only
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(); taccgl.actor("testimg").to(500,1000,1000). dur(7).start(); taccgl.actor("ex5").to(500,1000,2000). dur(7).start(); | RUN |
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(); taccgl.actor("testimg").to(500,1000,1000). dur(7).start(); taccgl.actor("ex6").to(500,1000,2000). dur(7).start(); | RUN |
The method opaqueShadow can be used as abbreviation for shadowOnly and color.
taccgl.texClearAll(); taccgl.a(document.body).opaqueShadow() .showAfter().start(); taccgl.actor("testimg").to(500,1000,1000). dur(7).start(); taccgl.actor("ex7").to(500,1000,2000). dur(7).start(); | RUN |
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.
| 
3D Animation
