Encapsulation with Custom Elements

[AdamSobieski]

I would like to propose that the WebXR samples include one or more samples which involve the encapsulation of WebXR with Web components custom elements.

The following example markup shows a custom element (xr-image) which intends to be utilized for declaring one or more 3D images in HTML documents. As envisioned, the 3D images would be stereoscopic 3D, utilizing XR viewer tracking, and could fallback to monoscopic 3D and then to 2D images.

<xr-image src="teapot.gltf" style="width:300px; height:300px; border:1px solid black" />

See also:

• https://www.webcomponents.org/community/articles/introduction-to-custom-elements
• https://www.w3.org/2018/12/games-workshop/papers/new-html-3D-element.txt
• https://developers.google.com/web/updates/2019/02/model-viewer#basic_3d_models
• https://github.com/immersive-web/proposals/issues/60

[cabanier]

I would like to propose that the WebXR samples include one or more samples which involve the encapsulation of WebXR with Web components custom elements.

I don't think this repo is the place for enhancements to the samples. If you create an example using custom elements and make a PR, @toji can integrate it.

The following example markup shows a custom element (xr-image) which intends to be utilized for declaring one or more 3D images in HTML documents. As envisioned, the 3D images would be stereoscopic 3D, utilizing XR viewer tracking, and could fallback to monoscopic 3D and then to 2D images.

There are no current and afaik no upcoming implementations to enable magic windows. Until then, it's likely premature to put an example on the immersive website.

[AdamSobieski]

@cabanier , thank you. For any interested in implementing their own custom element for "magic windows", I found this example from two years ago: https://github.com/immersive-web/webxr-polyfill/blob/master/examples/magic-window.html .

There is a subtopic here which I hope is both relevant and interesting: styling the XR 3D content.

One might look at the xr-image markup example

<xr-image src="teapot.gltf" style="width:300px; height:300px; border:1px solid black" />

and wonder: what precisely should that look like? Is the 3D teapot supposed to appear behind the document, in front of the document, or half-way through the document? How should the bounding cuboid be positioned relative to the document plane? What is the desired position of the teapot relative to its bounding cuboid? How might we specify the dimensions of the bounding cuboid, color the walls of the bounding cuboid, or style the bounding cuboid with a border? How might we precisely describe or style the custom element for XR "magic window" scenarios?

After some preliminary exploration, I found that we can use custom CSS properties for purposes including to style custom elements. Custom CSS properties are prefixed by -- and are case-sensitive.

For example:

<xr-image src="teapot.gltf" style="width:300px; height:300px; --depth:300px; border:1px solid black" />

One could then use the CSSOM getComputedStyle and getPropertyValue to obtain the values of CSS properties including the custom properties.

That said, one could define custom CSS properties to answer the questions presented above. One could also extrapolate a CSS "cuboid model" from the CSS "box model".

Hopefully, these preliminary thoughts about styling XR 3D content, in particular "magic window" custom elements, are of some interest and use to other WebXR participants.