---
index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/index.html b/index.html
index a738a8f..4542251 100644
--- a/index.html
+++ b/index.html
@@ -131,7 +131,7 @@
A 3D asset file contains positional data for the surfaces and objects
within it. Following the successful processing of a model resource, the
- {{model/boundingBox}} attribute references a
+ {{Model}}'s {{Model/boundingBox}} attribute references a
[[\DOMBoundingBoxReadOnly]] internal slot, which
is a nullable [=map=] of whose values are {{DOMPoint}}s.
The slot contains four entries:
From b77cce92407fd398d7fe053e01d18a0687337fcc Mon Sep 17 00:00:00 2001
From: Brandel Zachernuk
Date: Wed, 10 Jul 2024 17:13:47 -0700
Subject: [PATCH 07/18] Update index.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Co-authored-by: Marcos Cáceres
---
index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 4542251..03e937c 100644
--- a/index.html
+++ b/index.html
@@ -187,7 +187,7 @@
Enabling interactivity
-
+
The following example shows how to enable the interactive rotation of
a model in a document:
From 3ad1e88a58976772155dc29a75aab4118dc66698 Mon Sep 17 00:00:00 2001
From: Brandel Zachernuk
Date: Wed, 10 Jul 2024 17:13:55 -0700
Subject: [PATCH 08/18] Update index.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Co-authored-by: Marcos Cáceres
---
index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 03e937c..4908dc9 100644
--- a/index.html
+++ b/index.html
@@ -212,7 +212,7 @@
<model src="3d-assets/teapot"></model>
<script>
- let model = document.querySelector('model');
+ const model = document.querySelector('model');
function update() {
requestAnimationFrame(update);
From 5e037a9195b12cb3a060e48ce6223af6144468fc Mon Sep 17 00:00:00 2001
From: Brandel Zachernuk
Date: Mon, 22 Jul 2024 14:19:39 -0700
Subject: [PATCH 09/18] Update the multiple-format question to reflect my best
understanding of the order of precedence.
---
index.html | 7 +++++--
1 file changed, 5 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
index 4908dc9..3953d61 100644
--- a/index.html
+++ b/index.html
@@ -232,8 +232,8 @@
- The following example shows how to select from a list of potential
- source formats:
+ The following example shows a list of potential source formats
+ that can be selected from:
<model>
@@ -241,6 +241,9 @@
<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.
From f6367355ef1b45c13f2f90cbc0654546c060090b Mon Sep 17 00:00:00 2001
From: Brandel Zachernuk
Date: Mon, 22 Jul 2024 17:35:24 -0700
Subject: [PATCH 10/18] propose `stagemode` as an attribute name for the
orbit-style interaction discussed rather than a single binary attribute
---
index.html | 19 ++++++++++---------
1 file changed, 10 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index 3953d61..236bb4e 100644
--- a/index.html
+++ b/index.html
@@ -189,15 +189,15 @@
- The following example shows how to enable the interactive rotation of
- a model in a document:
+ The following example shows how to enable the interactive orbit
+ rotation of a model in a document:
- <model interactive src="3d-assets/teapot"></model>
+ <model stagemode="orbit" src="3d-assets/teapot"></model>
- See [interactive mode] for more details on the circumstances of
- interactive mode.
+ See [orbit mode] for more details on the behavior of
+ orbit mode.
@@ -313,8 +313,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=].
@@ -354,7 +354,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
@@ -402,7 +403,7 @@
autoplay
attribute
- interactive
attribute
+ stagemode
attribute
controls
attribute
From b5bfa2a8b2c36417980659ad48adda63dcdf1895 Mon Sep 17 00:00:00 2001
From: Brandel Zachernuk
Date: Tue, 23 Jul 2024 00:08:37 -0700
Subject: [PATCH 11/18] update the computation into the active voice, and
reflect that it's common practice for general rendering contexts to do this.
---
index.html | 11 ++++++-----
1 file changed, 6 insertions(+), 5 deletions(-)
diff --git a/index.html b/index.html
index 236bb4e..331e41b 100644
--- a/index.html
+++ b/index.html
@@ -162,11 +162,12 @@
Visual aid demonstrating the extent of an object's bounding box
- The bounding box and sphere is often computed based 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 animation effects and geometric displacement based on material
- data can alter these values, it is not required to integrate them.
+ It is common practice for rendering contexts to compute the bounding
+ box and sphere 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 animation effects and
+ geometric displacement based on material data can alter these values,
+ it is not required to integrate them.
Adding a model to a document
From 9fabdc75b06a18211b2c67a0cd7733f90c898b66 Mon Sep 17 00:00:00 2001
From: Brandel Zachernuk
Date: Tue, 23 Jul 2024 00:09:47 -0700
Subject: [PATCH 12/18] Update index.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Co-authored-by: Marcos Cáceres
---
index.html | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 331e41b..83b5ce5 100644
--- a/index.html
+++ b/index.html
@@ -216,8 +216,9 @@
const model = document.querySelector('model');
function update() {
+ const matrix = new DOMMatrix();
+ model.entityTransform = matrix.rotate(0, performance.now() / 10, 0);
requestAnimationFrame(update);
- model.entityTransform = new DOMMatrix().rotate(0, performance.now()/10, 0);
}
requestAnimationFrame(update);
From aacf9b3a3eadb01ca75f06d3288d0eb290e71554 Mon Sep 17 00:00:00 2001
From: Brandel Zachernuk
Date: Tue, 23 Jul 2024 00:10:16 -0700
Subject: [PATCH 13/18] Update index.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Co-authored-by: Marcos Cáceres
---
index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 83b5ce5..29a98bf 100644
--- a/index.html
+++ b/index.html
@@ -208,7 +208,7 @@
The following example shows how to use the Javascript API to control
- the `entityTransform`:
+ the `entityTransform` IDL attribute to smoothly rotate a model along the Y axis using {{AnimationFrameProvider/requestAnimationFrame(callback)}}:
<model src="3d-assets/teapot"></model>
From d83b03f4c5a36434cbbff120dd692948285a2f38 Mon Sep 17 00:00:00 2001
From: Brandel Zachernuk
Date: Tue, 23 Jul 2024 00:10:28 -0700
Subject: [PATCH 14/18] Update index.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Co-authored-by: Marcos Cáceres
---
index.html | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/index.html b/index.html
index 29a98bf..e93d998 100644
--- a/index.html
+++ b/index.html
@@ -197,8 +197,7 @@
<model stagemode="orbit" src="3d-assets/teapot"></model>
- See [orbit mode] for more details on the behavior of
- orbit mode.
+ See [=orbit mode=] for details about how it works.
From 97f228295ff4fc437436a15d737bd275e3c492d9 Mon Sep 17 00:00:00 2001
From: Brandel Zachernuk
Date: Wed, 24 Jul 2024 15:57:46 -0700
Subject: [PATCH 15/18] Update the bounding box info to be clearer
---
index.html | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index e93d998..79f1aac 100644
--- a/index.html
+++ b/index.html
@@ -165,9 +165,10 @@
It is common practice for rendering contexts to compute the bounding
box and sphere 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 animation effects and
- geometric displacement based on material data can alter these values,
- it is not required to integrate them.
+ 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
From b2a7762756099b9c02837a36082f8f1f87bbca6f Mon Sep 17 00:00:00 2001
From: Brandel Zachernuk
Date: Wed, 24 Jul 2024 15:58:48 -0700
Subject: [PATCH 16/18] use aria-describedby instead of alt-text as the vehicle
for accessible information
---
index.html | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
index 79f1aac..616f1c4 100644
--- a/index.html
+++ b/index.html
@@ -288,10 +288,14 @@
<figure>
- <model alt="A gray, ceramic teapot with an innovative spout" >
+ <model aria-describedby="teapot-description" >
<source src="3d-assets/teapot">
</model>
- <figcaption>Note the innovative spout</figcaption>
+ <span id="teapot-description" class="hidden" >
+ A gray, ceramic teapot with a thin, multicolored spout
+ <span>
+
+ <figcaption>Note the stylish spout</figcaption>
</figure>
From 25db3a00561c27fda3281fdb4e59b82ebad2af2a Mon Sep 17 00:00:00 2001
From: Brandel Zachernuk
Date: Mon, 5 Aug 2024 14:20:00 -0700
Subject: [PATCH 17/18] revised the bounding box representation to be based on
two DOMPoint objects, updated the diagram to reflect this priority
---
images/bounding-box.svg | 192 ++++++++++++++++++----------------------
index.html | 32 ++-----
2 files changed, 93 insertions(+), 131 deletions(-)
diff --git a/images/bounding-box.svg b/images/bounding-box.svg
index 864949e..b019177 100644
--- a/images/bounding-box.svg
+++ b/images/bounding-box.svg
@@ -1,75 +1,72 @@
-
+
+ viewBox="0 0 756.7 370.6" style="enable-background:new 0 0 756.7 370.6;" xml:space="preserve">
-
+
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
1.3
@@ -80,66 +77,45 @@
1
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
- r
+ ( 0, 0.5, -0.25 )
diff --git a/index.html b/index.html
index 616f1c4..0d0ddf9 100644
--- a/index.html
+++ b/index.html
@@ -131,39 +131,25 @@
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 {{Model/boundingBox}} attribute references a
- [[\DOMBoundingBoxReadOnly]] internal slot, which
- is a nullable [=map=] of whose values are {{DOMPoint}}s.
- The slot contains four entries:
+ {{Model}}'s Bounding box information is conveyed in the
+ {{Model/boundingBoxCenter}} attribute and the
+ {{Model/boundingBoxExtent}} attribute, both presented as three-
+ dimensional {{DOMPointReadOnly}} objects.
-
- "min"
- A {{DOMPoint}} representing the minimum dimension, in world
- space, that the contents of a model occupies.
- "max"
- A {{DOMPoint}} representing the maximum dimension, in world
- space, that the contents of a model occupies.
- "center"
- A {{DOMPoint}} representing the mean of the min and max
- dimensions, in world space, of the bounding box that the contents of
- a model occupies.
- "radius"
- A floating-point number representing the radius of effective
- bounding sphere from the center of the box.
-
-
- If a model does not contain a valid resource, the [[\DOMBoundingBoxReadOnly]] internal slot is null.
+ 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 extent of an object's bounding box
+ 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 and sphere based only on the visible object hierarchy on the first
+ 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
From 96a12588cd32cfc140923434e1e224b0ef23401f Mon Sep 17 00:00:00 2001
From: Brandel Zachernuk
Date: Sun, 15 Sep 2024 16:11:10 -0700
Subject: [PATCH 18/18] Update the explainer with more up-to-date thinking!
---
explainer.md | 297 ++++++++++++++++++++++++++++++---------------------
1 file changed, 173 insertions(+), 124 deletions(-)
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*