Re: [css shaders] sorting?

From: Dean Jackson <dino@apple.com<mailto:dino@apple.com>>
Date: Sun, 16 Oct 2011 08:32:02 -0700
To: Gregg Tavares <gman@google.com<mailto:gman@google.com>>
Cc: "public-fx@w3.org<mailto:public-fx@w3.org>" <public-fx@w3.org<mailto:public-fx@w3.org>>
Subject: Re: [css shaders] sorting?


On 14/10/2011, at 7:52 PM, Gregg Tavares (wrk) wrote:

Just curious, How does the "Flipbook" sample on this page work?
http://www.adobe.com/devnet/html5/articles/css-shaders.html

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.

Without knowing exactly how Adobe did this, I'm not sure why you think there is anything other than regular element sorting happening here.

Here's how I would try to replicate the effect:

- Cards draw in document order (or, if you really wanted to sort them use z-index or maybe a z translation)
- each card is two elements, one for the face and one for the shadow. These have either slightly different shaders applied, or the same shader with slightly different parameters (to make the shadow movement slightly offset)

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

I'm not sure why you think sorting is tricky. Can you explain?

Everything there is 2d. It's the effect that makes it look 3d. Notice that nothing intersects in 3d space, and the sorting order never changes. The poster frame for the video shows a good example of this: where the 4th card from the top of the stack should really be intersecting the one above if this was "real" 3d.

Dean is guessing right: we do not do anything fancy, except using HTML nodes and shaders to provide the desired effect. I am hoping we will be able to share the demo code soon.

Kind regards,
Vincent