search

mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
101.98k stars 35.33k forks source link

What should happen when applying opacity less than 1 to a node with descendants? #9782

Closed trusktr closed 8 years ago

trusktr commented 8 years ago

Hello Ricardo and contributors,

I'd like your opinions:

If we have a node (Object3D), and it has many descendants (a sub tree), what should happen when we apply opacity with a value less than 1 to it?

  1. It, and all of it's children should become transparent, multiplying opacities down the scene graph.
  2. It's content should become transparent but not that of its descendants.
  3. Same as (1), but the whole object should be flattened into a plane.

The reason I want your opinion is because the new specs for CSS 3D (css-transforms) state here that the answer is (3).

To see what I mean, view these two examples in Chrome 53 or higher:

The second example has opacity applied to the node that contains all the sub-nodes which compose the car. The opacity, according to spec, flattens the car into a plane (turns it into paper!).

I'm asking various 3D engine authors for opinions of what the correct or most expected behavior should be.

All the best, ~ Joe

mrdoob commented 8 years ago

I obviously think it should be 2. Have you heard from anyone developing CSS3D for the actual reason why they moved to 3?

trusktr commented 8 years ago

I obviously think it should be 2.

Thanks for your opinion. It's not obvious to me though. Why do you prefer (2)?

Have you heard from anyone developing CSS3D for the actual reason why they moved to 3?

Because "CSS opacity is a grouping property" which means therefore it must flatten. TLDR, because the spec says so, but ultimately I'm not really sure why other than there is some pre-requisite requirement for opacity to be a grouping property. IMHO, anything in the spec can and should be changed in the name of 3D.

The behavior is honestly ugly from a 3D point of view and an HTML/CSS API point of view.

mrdoob commented 8 years ago

I obviously think it should be 2.

Thanks for your opinion. It's not obvious to me though. Why do you prefer (2)?

I said obvious because that's how three.js behaves. I prefer (2) because I used Flash before, and Flash behaved like (1) and I always thought the result was a mess. Also, 3D programs behave like (2) too.

trusktr commented 8 years ago

@mrdoob Makes sense. I can imagine cases when it is not desirable to have opacity propagate down a 3D scene graph, and apply only to the object(s) at the current node.

If I understand correctly, Three.js opacity is done with materials, and materials do not propagate down the Object3D graph.

I also think that in some cases it may be desirable to apply opacity to a whole sub-tree in a 3D scene.

But in any case, I don't find it desirable to always flatten the transforms of a sub-tree into a flat plane for the whole sub-tree, which is the new CSS3D behavior.

mrdoob commented 8 years ago

I do not think this is the right place to discuss this.

trusktr commented 8 years ago

True (deleted the extra content in my previous post). Thanks for the opinion though. It matters. As I am collecting evidence that (hopefully) shows the CSS3D behavior is undesirable from the point-of-view of 3D engine authors who also deal with opacity in 3D scenes.

mrdoob commented 8 years ago

The problem with CSS3D is that they're "stuck" with how DOM/CSS works. CSS works like approach 1, but it was designed to be 2D. Things get tricky when you try to apply that approach to 3D.