Re: [css-shaders] subdivision for transparency

On Tue, Oct 4, 2011 at 12:34 AM, Alan Gresley <alan@css-class.com> wrote:

> On 4/10/2011 2:18 PM, Dean Jackson wrote:
>
>>
>> On 04/10/2011, at 11:10 AM, Gregg Tavares (wrk) wrote:
>>
>
>  What do I mean? Well, in order to correctly display 2 or more
>>> semi-trasparent elements that intersect each other in 3d space it's
>>> necessary to subdivide the polygons that are used to draw the
>>> elements with so that the part of the elements that are behind
>>> others are drawn first, then the parts in front are drawn last.
>>>
>>> Here are 2 screenshots. The first shows Safari which correctly
>>> subdivides the polygons. The second shows Chrome which currently
>>> does not.
>>>
>>> <correct-3d-css-polygon-**sorting-subdivisions-safari.**png>
>>> <incorrect-3d-css-polygon-**sorting-subdivisions-chrome.**png>
>>>
>>
> I could not find those screenshots.


Here are links to the screenshots

http://greggman.com/downloads/examples/correct-3d-css-polygon-sorting-subdivisions-safari.png
http://greggman.com/downloads/examples/incorrect-3d-css-polygon-sorting-subdivisions-chrome.png


>
>
>  Arguably Chrome should update its renderer to handle this case so
>>> that web developers can count on correct displaying of 3d css
>>> content.
>>>
>>>
>>>
>>> But, that brings up the question, that's the sorting spec going to
>>> be for CSS shaders?
>>>
>>
> What has CSS shaders got to do with this issue?


CSS shaders make it possible morph the plane of an DOM element into
something other than a plane (sphere, crumpled paper, etc...) which makes
sorting them much harder.


>
>
>  I'm not sure I understand the question completely. CSS filters (let's
>> not call them shaders - that's just a proposed extension to the
>> current draft) are always a 2d effect, even if they appear 3d. In
>> other words, the effect might operate locally in a 3d or pseudo-3d
>> environment, but the result is always composited in 2d onto a flat
>> plane.
>>
>
> To right. It's virtual 3D display on a 2D flat plane that can trick the
> mind into perceiving such animation as real virtual space.
>
>
>  Elements should sort the way they do for regular HTML (with
>> CSS 3D transforms, which is probably less-than-well-defined). A
>> filter does not make an element 3d.
>>
>> Dean
>>
>
>  ps: the live html/css is here
>>> http://greggman.com/downloads/**examples/intersecting-**
>>> elements-3d-css.html<http://greggman.com/downloads/examples/intersecting-elements-3d-css.html>
>>>
>>
> I see what could be the problem. I have noticed this myself when rotating
> elements (it happens with background color, gradients and backgrounds with
> transparency). It happened a lot in Safari 5.0. Chrome still has some odd
> behaviors. What happens is that things are not painted in how they should be
> (you can see through walls like some glitch in the matrix). One of my test.
>
> http://css-class.com/test/css/**3/transforms/corners-curves-**
> gradient-virtial-space.htm<http://css-class.com/test/css/3/transforms/corners-curves-gradient-virtial-space.htm>
>
> An earlier version using a longer translation (a hack) painted the floor
> parts above the bottom part of the simulated curved surface. Like so.
>
>  | | | | | | | | | | | |
>  X | | | | | | | | | | X
>    X X X | | | | X X X
>      X X X X X X X X
>        X X X X X X
>        X X X X X X
>      X X X X X X X X
>    X X X        X X X
>  X                    X
>
> Now after much reworking, using z-index, translation on the z axis and even
> having the elements for the floor later in the source, I can not get them to
> paint over the bottom parts of the simulated curved surface. Like so.
>
>  | | | | | | | | | | | |
>  X | | | | | | | | | | X
>    X X | | | | | | X X
>      X | | | | | X X
>        X X | | X X
>        X X X X X X
>      X X X X X X X X
>    X X X        X X X
>  X                    X
>
>
> When hovering each example, you will notice that the roof itself is hacked
> in with a wrong translation (to avoid the same dilemma as a had with the
> floor) but this shows that roof disconnected from the other transform
> elements.
>
>
> --
> Alan Gresley
> http://css-3d.org/
> http://css-class.com/
>