immersive-web / model-element

Repository for the <model> tag. Feature leads: Marcos Cáceres and Laszlo Gombos
https://immersive-web.github.io/model-element/
Other
62 stars 11 forks source link

Background color of model #53

Open marcoscaceres opened 1 year ago

marcoscaceres commented 1 year ago

Need to investigate setting the background color (or transparency) of model. Can the formats specify the background color (without using geometry)? Would it use a CSS background color?

donmccurdy commented 1 year ago

I'm not aware that any 3D file formats specify background colors (other than the inverted geometry trick) to be used in a 2D viewport environment. Being able to specify a color or even a texture background on the model element sounds helpful. I am assuming that the color or image background would be visible through any semi-transparent areas of the model, ideally including refraction and physically-based transmission. I would not necessarily require or expect the 3D geometry to refract DOM content behind the element. For example, see the bottom of the page here: https://www.donmccurdy.com/2021/11/11/writing-volumetric-refraction-gltf/

DR-xR commented 1 year ago

If a CSS background is available but not processed in the scene, you could end up with a situation similar to the one illustrated here for : https://github.com/google/model-viewer/discussions/3627

hybridherbst commented 5 months ago

I'd like to bump this issue; currently, <model> implementations (Safari, visionOS) always render with a white background, which in most cases does not fit the design requirements of a website.

Additionally, it seems to be not defined how <model> reacts to compositing; my expectation would be that the same things that work with videos (e.g. layering other elements on top of it; round corners; borders) work with <model> as well (but they currently don't). I understand this might be a bug in Apple's implementation, but the spec leaves compositing behaviour open.

Screenshot 2024-02-04 at 01 21 36

Current behaviour of the model element (top) inside a div with blue rounded borders and overflow:hidden. video element (bottom) for comparison.