The <model> element

The `<model>` element allows embedding 3D graphical content inline within an [[HTML]] document to be managed declaratively, and rendered directly by the user agent. The `HTMLModelElement` interface then provides a simple API for controlling the presentation, animation, interaction, fetching, and UI affordances of a `<model>`.

This is a work in progress.

Out of scope

There are a number of specified non-goals for this initial incubation; some are beyond the long-term scope of this proposal, and others are deferred for the benefit of reaching consensus on an initial specification, which can hopefully serve the needs of users and authors sooner.

Scene graph inspection and manipulation

While the use cases for inspecting and manipulating the contents of a given model asset are clear, the initial scope of this proposal is intentionally limited to a reduced complexity, hopefully making the initial specification one that has broad consensus amongst the web community.

Animation mixing and blending

While many popular model formats include the ability to encode, play and mix multiple animations in an animation mixing system, This initial specification considers only a single animation timeline, both for simplicity and for having a minimal viable specification on which the web community can build on.

Stateful interaction with `model` contents

While many popular model formats support tapping on a 3D button inside their contents to show or hide additional contents like a title, play an animation or undertake some other stateful action. Because there is no current intention to provide a JavaScript-facing mechanism to be aware of such actions, stateful interactions should be considered out of scope.

Examples

Adding a model to a document

Enabling interactivity

Supporting multiple formats

Providing fallback content for legacy user agents

Making `model` accessible

The model element

Categories

[=Flow content=].

[=Phrasing content=].

[=Embedded content=].

If the element has an `interactive` attribute: [=interactive content=].

[=Palpable content=].

Contexts in which this element can be used:

Where [=embedded content=] is expected.

Content model:

If the element has a `src` attribute: transparent, a [^picture^] or [^img^], or a media element descendant.

If the element has no `src` attribute: Zero or more source elements, then transparent, optionally intermixed with script-supporting elements.

Tag omission in text/html:

Neither tag is omissible.

Content Attributes:

Global attributes

[^model/autoplay^] — Hint that the resource can be started automatically when the page is loaded

[^model/interactive^] — Allows the user to interact with the model

[^model/crossorigin^] — How the element handles crossorigin requests

[^model/height^] — Vertical dimension

[^model/loading^] — Used when determining loading deferral

[^model/loop^] — Whether to loop the media resource

[^model/muted^] — Whether to mute the media resource by default

[^model/poster^] — Poster frame to show while the resource is loading

[^model/src^] — Address of the resource

[^model/width^] — Horizontal dimension

DOM Interface

The {{HTMLModelElement}} interface provides a means to interface with the embedded resource.

The [^model^] element is used for embedding 3D models into a document.

Content may be provided inside the [^model^] element. User agents should not show this content to the user; it is intended for web browsers which do not support [^model^], to be shown as fallback content.

autoplay attribute

interactive attribute

controls attribute

crossorigin attribute

height attribute

loading attribute

loop attribute

muted attribute

poster attribute

The [^model/poster^] attribute gives the URL of an image file that the user agent can show while 3D content is unavailable. The attribute, if present, must contain a valid non-empty URL potentially surrounded by spaces.

src attribute

width attribute

The `HTMLModelElement` interface

        [Exposed=Window]
        interface HTMLModelElement : HTMLElement {

        };
      

`source` element integration

The `source` element's parent is a [^model^] element

Interaction

Controls

Rendering

Orientation/camera

Embedded content

Whether a [^model^] element is exposing a user interface is not expected to affect the size of the rendering; controls are expected to be overlaid above the page content without causing any layout changes, and may disappear when the user does not need them.

When a [^model^] element represents a poster frame, the poster frame is expected to be rendered at the largest size that maintains the aspect ratio of that poster frame without being taller or wider than the [^model^] element itself, and is expected to be centered in the [^model^] element.

Events

Formats

Overlap with "media elements"

HTML Integrations

Additional integrations into HTML:

Preload link relationship

Integrations with `source` element

Link rel="ar"

CSS integrations

Media Playback States (`:playing`, `:paused`, `:seeking`)

The `:muted` and `:volume-locked` pseudo-classes

Fullscreen Presentation State: the `:fullscreen` pseudo-class

Fullscreen integration

Fetch integration

`"model"` destination

Privacy considerations

Security considerations

CORS

Formats and CORS

Content Security Policy

Format concerns

Accessibility

Requirements for providing text to act as an alternative for 3D content

For authors

For implementers

MIME

MIME Sniffing