[css shaders] sorting?

Just curious, How does the "Flipbook" sample on this page work?

The still image before you start playing the video shows approx 9 cards,
each warpped, each casting shadows on the cards below it.

To draw that correctly requires sorting the cards to make sure the card that
appears on top is drawn last. Sorting is currently not defined in 3D css. It
gets even harder through with CSS shaders. Correct sorting would require
knowing at a minimum the extents of the changes to the geometry the CSS
shader applied to the each element's plane mesh.

It would also appear to require stencil buffers or render targets unless
there are actually a elements for each card (one for the card, one for the
shadow) but that makes the sorting even more tricky

Is there something in the proposal for how this is supposed to work?

Is the demo using some other interesting technique?

Received on Saturday, 15 October 2011 02:53:25 UTC