Re: [css-shaders] CSS shaders for custom filters (ACTION-3072)

On Oct 6, 2011, at 2:31 PM, Gregg Tavares (wrk) wrote:

> 
> 
> On Thu, Oct 6, 2011 at 11:51 AM, Chris Marrin <cmarrin@apple.com> wrote:
> 
> On Oct 6, 2011, at 10:19 AM, Gregg Tavares (wrk) wrote:
> 
> >...
> 
> I understand your desire to do your Offscreen Tabs demo (http://dev.chromium.org/developers/design-documents/extensions/offscreen-tabs) using CSS shaders. But the fact that it doesn't fully solve that use case doesn't make it useless for others.
> 
> 
> Possibly. I think though that if you check most interactive 3d interfaces to date you'll find they are interactive. Heck, even Apple's Coverflow allows you to click on the images off to the left and right. With this proposal, if I was to implement coverflow using CSS shaders but change it to use slightly warped cards then hit testing would no longer be accurate.

It would be inappropriate to implement Coverflow with CSS shaders. That's what CSS Transforms is for. I can imagine using various CSS filters to highlight or warp each album cover, but the positioning and interaction would be done with CSS Transforms, so everything would work fine.

> 
> The current CSS shader proposal seems to be trying to be step toward allowing 3d UIs but as you have pointed out it's nearly impossible to make it work and still be interactive.

I don't think the intent of the vertex shaders is to do absolute positioning of elements like CSS Transforms do. As I said before, I think the model should be that the rendering space of the filtering process should be the element's layer, plus any margin added by filter-margin. The result of the vertex and fragment shader operations would be a flat plane and would behave as such for the purposes of picking and compositing.

> 
> As an actually workable counter suggestion, what about being able to specify meshes in css and morph between them, something like
> 
> @mesh folded-map {
>    vertices:   x, y, z, u, v, x, y, z, u, v, ....
> }
> 
> @mesh unfolded-map {
>    vertices:   x, y, z, u, v, x, y, z, u, v, ....
> }
> 
> @keyframes fold-unfold {
>    from { mesh: folded-map }
>    to { mesh: unfolded-map }
> }
> 
> That seems in some ways more flexible than vertex shaders since you can supply meshes instead having to compute them algorithmically and it's easily solvable for keeping things interactive.

And since it would be linear interpolation, you'd need an enormous number of keyframes and vertices to get smooth page curl effect. Plus, you often don't want animated effects. You want algorithmically generated wave and ripple effects. None of those would be possible with keyframes.

I think the limitation of a flat rendering space and the lack of pixel accurate picking still enables a large number of compelling effects using CSS shaders.

-----
~Chris
cmarrin@apple.com