Re: [css-transforms] CSS3D breaks with opacity flattening

On Sun, Sep 18, 2016 at 5:51 PM, /#!/JoePea <trusktr@gmail.com> wrote:
> This could be achieved with something like a new CSS property called
> `opacity-style`, f.e.
>
> `opacity-style: 3d` which is similar to the legacy behavior and is great for
> 3D scenes, and does not flatten anything. Opacity is multiplied all the way
> down the tree with other same-style opacities and stops at elements that
> have a different opacity-style (`flat` or `single`).
> `opacity-style: single` which does not flatten anything and only applies
> opacity to the target element but not its children
> `opacity-style: flat` which is like the new behavior that Chrome 53 just
> introduced, things are flattened and a new 3D context is made. I still fail
> to see how this is desirable. Assuming we can apply an opacity to a 3D
> object to make it transparent and then having it become flat like paper is
> simply not intuitive.
>
> The default value can be `opacity-style: single`, which I think is the least
> impacting of the three. We can then see what 3D programmers end up using
> more often (I'd like to bet that `opacity-style: flat` will be the least
> used). Or, perhaps the default for a 3D object can be `single`, and `flat`
> for non-3D objects.
>
> What are your thoughts on something like this, `opacity-style`? Because, as
> it stands, opacity in the 3D web isn't very workable now in nested scenes
> (it is much more workable with the legacy behavior).

"flat" is the existing behavior.  "3d" you can do yourself, by just
applying 'opacity' further down the tree, rather than on an ancestor.
'single' is something new that hasn't had any use-cases presented so
far; it can also be done yourself, by adding a child sized to the
ancestor that actually draws the border/background/etc that you want
the ancestor to have, and just applying 'opacity' to that one element.

As I explained before, the "opacity only at leaf nodes" effect is
noticeably different than group opacity; things don't occlude each
other like they can with group opacity. In the GitHub thread I linked
<https://github.com/w3c/svgwg/issues/264#issuecomment-246750601> I
provided an example of what this looks like in older 3d video games
applying opacity to a person's model, and how you get the "screaming
skull" effect because you can see their entire eyeball and jawline
floating in their head, rather than just the parts of their eyes/jaw
that are normally visible thru their eye sockets/mouth.

~TJ

Received on Monday, 19 September 2016 14:29:00 UTC