diff --git a/explainer.md b/explainer.md
index 5796d2b..6d5e97b 100644
--- a/explainer.md
+++ b/explainer.md
@@ -6,6 +6,7 @@
- [Dean Jackson](https://github.com/grorg)
- [Theresa O'Connor](https://github.com/hober)
- [Marcos Cáceres](https://github.com/marcoscaceres)
+- [Brandel Zachernuk](https://github.com/zachernuk)
## Table of Contents
@@ -14,13 +15,17 @@
- [tl;dr](#tldr)
- [Introduction](#introduction)
+- [Non-goals](#non-goals)
- [The HTMLModelElement](#the-htmlmodelelement)
- - [Fallback content](#fallback-content)
- [DOM API](#dom-api)
- - [Controlling the camera](#controlling-the-camera)
- - [Controlling animations](#controlling-animations)
- - [Controlling audio](#controlling-audio)
+- [JavaScript API](#javascript-api)
- [DOM Events](#dom-events)
+- [Visual presentation control](#visual-presentation-control)
+ - [Scale units](#scale-units)
+ - [Stage interaction mode](#stage-interaction-mode)
+ - [Orbit scale](#orbit-scale)
+ - [Lighting](#lighting)
+ - [Audio and stateful interaction](#audio-and-stateful-interaction)
- [Playback and accessibility considerations](#playback-and-accessibility-considerations)
- [Privacy considerations](#privacy-considerations)
- [Security considerations](#security-considerations)
@@ -42,7 +47,7 @@ a renderer built-in to the browser.
HTML allows the display of many media types through elements such as ` `,
``, or ``, but it does not provide a declarative manner to directly
-display 3D content. Embedding 3D content within a page is comparatively
+consume 3D content. Embedding 3D content within a page is comparatively
cumbersome and relies on scripting the `` element. We believe it is
time to put 3D models on equal footing with other, already supported, media
types.
@@ -53,7 +58,7 @@ are WebGL frameworks that can process many different formats. Then there is
the [model-viewer](https://modelviewer.dev) project which shows models
inline in a web page, and also allows users on some devices to see the 3D
object in augmented reality. And iOS Safari has the ability to navigate
-directly to an augmented reality view with its
+directly to an augmented reality view with its
[AR Quick Look feature](https://webkit.org/blog/8421/viewing-augmented-reality-assets-in-safari-for-ios/).
However, there are cases where these current options cannot render content.
@@ -65,11 +70,25 @@ conveniently as any other visual media. Models are expected to be created by 3D
tools or generated dynamically, but served as a standalone resource by the server.
Additionally, besides the simple display of a 3D model, the `` element should have
-support for interactivity and animations while presented within the page, and also support
+support for manipulation and animation playback while presented within the page, and also support
more immersive experiences, such as augmented reality.
+## Non-goals
+
This proposal does *not* aim to define a mechanism that allows the creation of a 3D scene
-within a browser using declarative primitives or a programmatic API.
+within a browser using declarative primitives or a programmatic API.
+
+While some popular model formats have the ability to encode and relate audio tracks,
+is expected to present silently and will not honor audio components.
+
+Many model formats include the ability to blend animation tracks, is expected to play
+only the first animation track discovered in a valid source asset.
+
+Many model formats include the ability to encode stateful interaction with the scene, for example
+with selection targets linked to the selective showing and hiding of content. is expected
+to only manage a single, linear animation timeline, and the manipulation of the `entityTransform`
+that dictates the apparent scale, orientation, and position offset of the entire scene as an
+atomic element.
## The `HTMLModelElement`
@@ -99,13 +118,13 @@ file and a [glTF](https://www.khronos.org/gltf/) file, depending on what the bro
Browsers may support direct manipulation of the `` element while presented in the page. For example, a browser
may allow the model to be rotated or zoomed within the element's bounds without affecting the scrolling
-position or zoom level of the page. To opt into this behavior, the author may use the `interactive`
-HTML attribute.
+position or zoom level of the page. To opt into this behavior, the author may set the `stagemode`
+HTML attribute to `orbit`.
-The previous example can be augmented to allow interaction provided by the browser:
+The previous example can be augmented to allow free orbiting of the model, provided by the browser:
```html
-
+
@@ -115,24 +134,23 @@ It is also possible that browsers support an animated presentation of the model,
animations defined in the source data. Such animations are not enabled by default, but can
be triggered on load by using the `autoplay` HTML attribute.
-The original example can be augmented to allow for such animations:
+The original example can be augmented to allow for such animation:
```html
-
+
```
-The `interactive` and `autoplay` attributes are not mutually exclusive and may be combined. A browser can
-run a default animation that is suspended while the user interacts with the model and that is
-automatically resumed after a period of inactivity.
+The `stagemode="orbit"` and `autoplay` conditions are not mutually exclusive and may be combined. A browser can
+run a default animation while the user interacts with the model.
-As such, the original example can be augmented to allow for both animations and interactivity:
+As such, the original example can be augmented to allow for both animations and free orbit:
```html
-
-
+
+
```
@@ -164,7 +182,6 @@ element would be displayed.
```
-
## DOM API
Each `` element is represented in the DOM as `HTMLModelElement` instances.
@@ -178,11 +195,13 @@ elements to the `` element.
* `autoplay`: read-write boolean indicating whether the model will automatically start playback.
Setting this property to `false` removes the `autoplay` HTML attribute if present, while setting it to `true`
adds the `autoplay` HTML attribute if absent.
-* `interactive`: read-write boolean indicating whether the model can be interacted with. Setting this
-property to `false` removes the `interactive` HTML attribute if present, while setting it to `true`
-adds the `interactive` HTML attribute if absent. An interactive model will provide some default
-behaviour that allows the user to transform the virtual camera around the model, such as by clicking
-and dragging.
+* `stagemode`: read-write string indicating whether user input automatically
+results in changing the display orientation of the model. Setting this
+property to anything but `orbit` removes the automatic orbit behavior, while setting it to `orbit`
+sets the stage mode to orbit.
+* `environmentmap`: read-write string indicating the URL of an environment map, also known as an Image-Based Light (IBL). Supplied as an equirectangular image, frequently in a High-Dynamic Range
+(HDR) image format.
+* `loop`: read-write boolean indicating whether the model animation, if present, will automatically loop.
* `loading`: behaves in the same manner as the
[`img` attribute of the same name](https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-loading).
* `poster`: behaves in the same manner as the [`video` attribute of the same name](https://html.spec.whatwg.org/multipage/media.html#attr-video-poster)
@@ -193,87 +212,40 @@ APIs to observe the loading and decoding of data.
While HTML supports the notion of taking an element fullscreen, browsers may want to offer yet more
immersive experiences that require going beyond the page itself, one example would be to present the
model in augmented reality to allow the user to visualize it at real scale in the user's immediate
-surroundings. To support this, new DOM APIs may be added or the existing HTML Fullscreen API extended
+surroundings. To support this, new DOM APIs may be added or the existing HTML fullscreen API extended
via more [FullscreenOptions](https://fullscreen.spec.whatwg.org/#dictdef-fullscreenoptions) properties.
-### Controlling the camera
-
-Using the `interactive` property, the author allows a built-in behavior such that dragging over a
-`` element will result in modifying the camera. We also propose to allow authors direct control
-of the camera via DOM APIs. An initial proposition would be to add an `HTMLModelElementCamera`:
-
-```idl
-dictionary HTMLModelElementCamera {
- double pitch;
- double yaw;
- double scale;
-};
-```
-
-Then the camera can be set and read back:
-
-```idl
-interface HTMLModelElement : HTMLElement {
- Promise getCamera();
- Promise setCamera(HTMLModelElementCamera camera);
-}
-```
-
-Note the use of promises since it is likely that the model is rendered out-of-process and any communication
-with that process would need to be asynchronous. This applies to other promise-based APIs discussed in this
-document.
-
-### Controlling animations
-
-Formats supported by `` may support animations built into the resource itself, such as those supported by the USDZ
-file format. We propose allowing page authors to control such animations.
-
-This is a wide topic with likely dependencies on the file format support for animations itself. Another
-important topic would be whether the Web Animations specification could be leveraged to expose and control
-animations for the resource. At the moment, this document intentionally doesn't describe how animations
-within a `` element relate to the [default document timeline](https://www.w3.org/TR/web-animations-1/#the-documents-default-timeline).
-
-For experimental purposes, we propose an initial, basic set of DOM APIs based on the assumption that
-a single animation is controlled. With this proposal the author could control whether the animation is
-playing, looping, query its duration and set its current time, allowing the creation of controls to
-toggle playback and scrub through the animation.
-
-```idl
-interface HTMLModelElement : HTMLElement {
- Promise isPlayingAnimation();
- Promise playAnimation();
- Promise pauseAnimation();
-
- Promise isLoopingAnimation();
- Promise setIsLoopingAnimation(boolean looping);
-
- Promise animationDuration();
- Promise animationCurrentTime();
- Promise setAnimationCurrentTime(double currentTime);
-}
-```
-
-### Controlling audio
-
-Another feature that may be supported by the resource file format is audio. Much like animations,
-this is a wide topic with potentially multiple audio clips being built into the resource, and our
-initial proposal involves simply controlling whether built-in audio is muted:
-
-```idl
-interface HTMLModelElement : HTMLElement {
- Promise hasAudio();
- Promise isMuted();
- Promise setIsMuted(boolean isMuted);
-}
-```
-
-Note that the audio state is not related to the animation state, so the embedded audio may be played
-while embedded animations are paused and vice versa.
+## JavaScript API
+
+In addition to the DOM API relating to the source, animation, and environment map, the JavaScript API has
+additional capabilities relating to the animation timing and view parameters.
+
+* `entityTransform`: a read-write `DOMMatrixReadOnly` that expresses the current mapping of the view of
+the model contents to the view displayed in the browser.
+* `boundingBoxCenter`: a read-only `DOMPoint` that indicates the center of the axis-aligned bounding box (AABB)
+of the model contents. If there is an animation present, the bounding box is computed for the first frame of
+the animation and remains static for the lifetime of the model. It does not update based on a change of
+the `entityTransform`.
+* `boundingBoxExtent`: a read-only `DOMPoint` that indicates the extent of the bounding box of the model
+contents.
+* `boundingSphereCenter`: a read-only `DOMPoint` that indicates the center of the bounding sphere of the model contents, as it may differ from the bounding _box_ center.
+* `boundingSphereRadius`: a read-only `double` that indicates the radius of the bounding sphere of the model contents.
+* `duration`: a read-only `double` reflecting the un-scaled total duration of the animation, if present.
+If there is no animation on this model, the value is 0.
+* `currentTime`: a read-write `double` reflecting the un-scaled playback time of the model animation, if present.
+It is clamped to the duration of the animation, so for an animation with no animation, the value is always 0.
+* `playbackRate`: a read-write `double` reflecting the time scaling for animations, if present. For example,
+a model with a ten-second animation and a `playbackRate` of 0.5 will take 20 seconds to complete.
+* `paused`: A read-only `Boolean` value indicating whether the element has an animation that is currently playing.
+* `play()`: A method that attempts to play a model's animation, if present. It returns a `Promise` that resolves
+when playback has been successfully started.
+* `pause()`: A method that attempts to pause the playback of a model's animation. If the model is already paused
+this method will have no effect.
## DOM Events
-While the author may prevent any built-in interactive behavior for a `` by ommitting the `interactive`
-attribute, it might be desirable for the decision to allow such interactive behavior to be made at runtime.
+While the author may prevent any built-in interactive behavior for a `` by ommitting the `stagemode`
+attribute, it might be desirable for the decision to allow custom control of the model behavior at runtime.
To that end, when a user initiates a gesture over a `` element, the author may call the `preventDefault()`
method when handling the `pointerdown` event. If this method is not called for the
[`pointerdown`](https://www.w3.org/TR/pointerevents/#the-pointerdown-event) event for the
@@ -282,19 +254,100 @@ method when handling the `pointerdown` event. If this method is not called for t
The `mousedown` and `touchstart` compatibility events may also be used for this purpose.
+* `load`: Dispatched when the model's source file has been loaded and processed, such that the
+bounding box information is available and the animation duration, if present, is known.
+* `error`: Dispatched if the the model's source file is unable to be fetched, or if the file
+cannot be interpreted as a valid asset.
+* `iblload`: Dispatched when a model's selected environmentmap has been loaded and is ready to
+contribute to the visual appearance of the model.
+* `iblerror`: Dispatched if there has been an issue with the model's selected environmentmap,
+which will prevent its ability to act as the lighting environment.
+
+### DOM actions
+
+In addition to being a standard DOM element, special behaviors may be desirable on spatial platforms,
+relating to the `Element.requestFullscreen()` and the `document.pictureInPictureElement` properties.
+
+* `document.pictureInPictureElement`: By requesting the model to be the picture-in-picture element,
+the model becomes separated from the rest of the active window, and positionable within the user's space.
+its real-world location is not made available to the page context. In addition to a JavaScript-based
+request of this feature, a user gesture may be used to both invoke the action and position the element.
+
+* `Element.requestFullscreen()`: A `` that is part of a DOM fragmented and has been granted
+fullscreen access on a spatial platform may be presented with a transparent background.
+
+## Visual presentation control
+
+In a spatial or stereoscopic environment, A model element presents its three-dimensional content
+ as though it exists inside a portal in a page, with content clipped at the z-boundary of the model
+ element's front face, so that no content has the ability to protrude beyond the appropriate surface.
+
+The visual presentation of a model is primarily managed through its `entityTransform` attribute,
+specified as a `DOMMatrixReadOnly`. The model scene is a right-handed, Y-up coordinate system, with the
+center of the view-plane at (0,0,0).
+
+
+The initial `entityTransform` is set to center the view on the `boundingBoxCenter`, set back by
+`boundingBoxExtent.z/2` so that the element resides entirely within the portal, and to fit the
+`boundingingBoxExtent` within the visible view. That is, to set a uniform scale such that the
+`boundingBoxExtent.y` fits within the model's portal height, and the `boundingBoxExtent.x` fits within
+the model's portal width.
+
+
+### Scale units
+The page dimensions are understood to be reflected as points, such that a 1000-pixel model element
+with its `entityTransform` set to the identity will depict a size of about 32cm, and a 500-pixel
+model will likewise show a viewport covering 16cm. For privacy reasons, user agents may obscure the
+true spatial scale of the window, so that 1000 pixels may be much larger or smaller - a fixed conversion
+assuming 72DPI as a default should be understood as standard. This only reflects a mapping to the
+perceptual scale, and doesn't reflect the _rasterization_ scale of the element, which occurs at the
+discretion of the user agent.
+
+
+### Stage interaction mode
+Setting the `stagemode` attribute to `orbit` results in an _orbit_ interaction mode, where the
+`entityTransform` becomes read-only (or attempts to write directly to it are ignored), and the view is
+updated exclusively based on input events from the user. Dragging on the model horizontally
+results in a rotation on the Y axis of the model, and vertical dragging alters the pitch of the
+element:
+
+
+
+#### Orbit scale
+
+Because the orbit mode may result in presenting any arbitrary orientation of the model contents,
+the effective scale of the model is reduced to accommodate the bounding _sphere_, rather than the
+bounding box, and the setback in the z-dimension is also set to this bounding sphere radius.
+
+
+### Lighting
+The model may be illuminated by a system-default environment map, or by an environment map as specified
+by a valid, author-specified `environmentmap` attribute. On a platform with the ability to estimate
+the user's lighting environment, this may be applied as a default map.
+A physically-based material model like [OpenPBR] or [MaterialX] is assumed.
+
+
+
+## Audio and stateful interaction
+
+While Some model source formats have the ability to specify audio sources, it
+is recommended that an initial implementation exclude audio playback. This is
+because audio playback is achievable through separate APIs, and the relationship
+between arbitrary seeking inside a model animation and the audio sources therein
+is not well-established.
+
## Playback and accessibility considerations
-Model resources may contain audio and animations and as such should be
+Model resources may contain animations and as such should be
considered like other media and animated content by browsers. This means
-that browser behaviors around loading, autoplay, and accessibility should be
+that browser behaviors around loading, autoplay and accessibility should be
honored for the `` element as well, for instance:
- a static poster image may be displayed prior to loading the full `` resource,
-- audio may be muted until the user interacts with the `` element,
- playback may be disabled if the user has set a preference to reduce animations.
-Like other timed media, the `` element will provide a DOM API for playing, pausing,
-muting, etc.
+Like other timed media, the `` element will provide a DOM API for playing,
+pausing, etc.
The `` element has an `alt` attribute to provide a textual description of the
content. Also, the 3D content itself might expose some features to the accessibility engine.
@@ -309,7 +362,7 @@ policy directive), and likely a few others.
## Security considerations
As always, introducing support for parsing and processing new formats raises the surface area
-of attack possibilities in a browser.
+of attach posibilities in a browser.
However, some existing browsers already process such formats in a non-inline manner
(such as iOS's AR Quick Look and Android's Scene Viewer).
@@ -318,10 +371,10 @@ However, some existing browsers already process such formats in a non-inline man
### Why add a new element?
-We believe it is time for files representing 3D geometric data to become a first-class
-citizen on the web.
+We believe it is time for files representing 3D geometric data to become a first class
+citizen on the Web.
-Adding a new element to HTML requires significant justification. At first glance, the `` element
+Adding a new element to HTML requires significant justification. At first glace, the `` element
does not appear necessary since HTML already provides a mechanism to load arbitrary data and
render it: `` and its rendering contexts.
@@ -332,7 +385,7 @@ a third-party library. Like raster images, vector images, audio and video, three
geometric data should be a data type that can be directly embedded in HTML content.
Secondly, while we are not proposing a DOM for the data at the moment, we expect to in the
-future. It would be of benefit to the web developer to learn a single common API for 3D
+future. It would be of benefit to the Web developer to learn a single common API for 3D
geometry rather than learn the API of various third-party libraries. Furthermore, different
file types would then conform to the same API.
@@ -342,32 +395,33 @@ surface in the web page.
Consider a browser or web-view being displayed in Augmented Reality. The developer wants to
show a 3D model in the page. In order for the model to look accurate, it must be rendered
-from the viewpoint of the user—otherwise it is a flat rendering of a three-dimensional
+from the viewpoint of the user - otherwise it is a flat rendering of a three-dimensional
image with incorrect perspective.
-A solution to this would be to allow the web page, in particular the WebGL
+A solution to this would be to allow the Web page, in particular the WebGL
showing the 3D model, to render from the perspective of the user. This would
involve granting too much private information to the page, possibly including
the camera feed, some scene understanding, and very accurate position data on
-the user. It should not be a requirement that every web page has to request
+the user. It should not be a requirement that every Web page has to request
permission to show a 3D model in this manner. The user should not have to
provide access to this sensitive information to have the experience.
Furthermore, there is more information needed to produce a realistic rendering, such as
the ability to cast and receive shadows and reflections from other content in the scene, that
-might not be on the same web page.
+might not be on the same Web page.
This means that rendering in Augmented Reality is currently limited to a system
component, different from the in-page component, leading to inconsistent results.
+
### Rendering
Unfortunately it is impractical to define a pixel accurate rendering approach for the `` element. If such
an attempt was made, it would likely pose too many restrictions on the browser engines, which have to work
-on a number of operating systems, hardware, and environments.
+on a number of operating systems, hardware and environments.
Instead we suggest adopting a Physically-Based Rendering approach, probably referencing an existing
-shading model such as [MaterialX](https://www.materialx.org/). Browsers would be free to
+shading model such as [MaterialX](https://materialx.org/). Browsers would be free to
implement the system as they wish, with a goal of producing the most accurate rendering possible.
We do not expect pixel-accurate results between browsers.
@@ -380,18 +434,13 @@ While this is a clear problem, it also comes with some large advantages.
For reference, the Model Viewer project has a [rendering engine fidelity comparison](https://modelviewer.dev/fidelity/).
-A future version of this explainer will describe the lighting model and environment in which the
-3D content should be rendered. Both items will require community collaboration and some consensus.
## Considered alternatives
1. *Reuse `` or `` instead of adding a new element*
It would be possible to reuse one of the generic embedding elements, such as `` or ``,
- for this purpose. However, we think that 3D content should behave like other media types.
- Further, having an accompanying IDL interface (`HTMLModelElement`) provides developers with a means
- to programmatically interact with various aspects of the 3D content (which would otherwise not be possible
- or simply cumbersome via `` or ``).
+ for this purpose. However, we think that 3D content should behave similar to other media types.
2. *Reuse ` `, `` or `` instead of adding a new element*
diff --git a/images/bounding-box.svg b/images/bounding-box.svg
new file mode 100644
index 0000000..b019177
--- /dev/null
+++ b/images/bounding-box.svg
@@ -0,0 +1,121 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1.3
+
+
+ 2
+
+
+ 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ( 0, 0.5, -0.25 )
+
+
diff --git a/index.html b/index.html
index 747225c..0d0ddf9 100644
--- a/index.html
+++ b/index.html
@@ -106,6 +106,56 @@
Examples
+
+ Loading and parsing
+
+
+ A model element whose source path resolves to a valid resource
+ dispatch a `load` event upon the successful fetching and
+ presentation of the resource data. If the asset fails to load,
+ for instance due to an invalid URL, a failure to fetch,
+ or a failure in the source format's parsing process, the user agent dispatches an
+ `error` event.
+
+
+
+ const model = document.querySelector("model");
+ model.addEventListener("error", () => {
+ // Handle error
+ });
+
+
+
+ Processing model contents
+
+
+ A 3D asset file contains positional data for the surfaces and objects
+ within it. Following the successful processing of a model resource, the
+ {{Model}}'s Bounding box information is conveyed in the
+ {{Model/boundingBoxCenter}} attribute and the
+ {{Model/boundingBoxExtent}} attribute, both presented as three-
+ dimensional {{DOMPointReadOnly}} objects.
+
+
+ If a model does not contain a valid resource, the attributes referring
+ to the extent and center of the bounding box are null.
+
+
+
+
+ Visual aid demonstrating the center and extent of an
+ object's bounding box
+
+
+ It is common practice for rendering contexts to compute the bounding
+ box based only on the visible object hierarchy on the first
+ animation frame (if an animation is present), and according only to the
+ geometry information directly specified. While skeleton animations and
+ geometric displacement based on material data can can change the
+ apparent dimensions of a model, the user agent is not required to
+ factor such changes in to the bounding box it returns.
+
Adding a model to a document
@@ -115,7 +165,7 @@
document:
- <model src="3d-assets/car"></model>
+ <model src="3d-assets/teapot"></model>
By using content negotiation the user agent relies on the server to
@@ -125,18 +175,116 @@
Enabling interactivity
+
+
+ The following example shows how to enable the interactive orbit
+ rotation of a model in a document:
+
+
+ <model stagemode="orbit" src="3d-assets/teapot"></model>
+
+
+ See [=orbit mode=] for details about how it works.
+
+
+
+ Programmatic view control
+
+
+
+ The following example shows how to use the Javascript API to control
+ the `entityTransform` IDL attribute to smoothly rotate a model along the Y axis using {{AnimationFrameProvider/requestAnimationFrame(callback)}}:
+
+
+ <model src="3d-assets/teapot"></model>
+ <script>
+ const model = document.querySelector('model');
+
+ function update() {
+ const matrix = new DOMMatrix();
+ model.entityTransform = matrix.rotate(0, performance.now() / 10, 0);
+ requestAnimationFrame(update);
+ }
+
+ requestAnimationFrame(update);
+ </script>
+
+
+ See {{DOMMatrix}} for more details on the methods available for
+ modifying the view transform.
+
+
Supporting multiple formats
+
+
+ The following example shows a list of potential source formats
+ that can be selected from:
+
+
+ <model>
+ <source src="3d-assets/teapot.usdz" type="model/vnd.pixar.usd">
+ <source src="3d-assets/teapot.gltf" type="model/gltf-binary">
+ </model>
+
+ `<model>` source selection follows `<video>` selection,
+ where the top-level `src` attribute takes precedence if present,
+ followed by the first compatible `<source>` element encountered.
+
Providing fallback content for legacy user agents
+
+
+ The following example shows the inclusion of fallback content:
+
+
+ <model>
+ <source src="3d-assets/teapot">
+ <img src="images/teapot-fallback-thumbnail.png">
+ </model>
+
+
+
+ Providing an image-based light (IBL)
+
+
+
+ The following example shows the inclusion of a custom image-based
+ light
+
+
+ <model environmentmap="images/teahouse-interior-1k.hdr">
+ <source src="3d-assets/teapot" >
+ </model>
+
+
Making `model` accessible
+
+
+ The following example shows the inclusion of descriptive language
+ characterizing the appearance of the model:
+
+
+
+ <figure>
+ <model aria-describedby="teapot-description" >
+ <source src="3d-assets/teapot">
+ </model>
+ <span id="teapot-description" class="hidden" >
+ A gray, ceramic teapot with a thin, multicolored spout
+ <span>
+
+ <figcaption>Note the stylish spout</figcaption>
+ </figure>
+
+
@@ -157,8 +305,8 @@
[=Embedded content=].
- If the element has an `interactive` attribute: [=interactive
- content=].
+ If the element has a relevant value for its `stagemode`
+ attribute: [=orbit content=].
[=Palpable content=].
@@ -198,7 +346,8 @@
automatically when the page is loaded
- [^model/interactive^] — Allows the user to interact with the model
+ [^model/stagemode^] — Specifies a mode for the user to
+ interact with the model within
[^model/crossorigin^] — How the element handles crossorigin requests
@@ -246,7 +395,7 @@
autoplay
attribute
- interactive
attribute
+ stagemode
attribute
controls
attribute