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>`.

Introduction

The HTML <model> element allows a website to embed interactive 3D models as conveniently as any other visual media. Models are served as a standalone resource. The <model> element also has support for interaction and animation playback while presented within the page, and supports more spatial experiences, such as the stereoscopic display of 3D content where available.

As <model> is rendered directly by the user agent, it has the ability to utilize privileged information, such as the user's head and eye position or the lighting of the user's environment, without exposing that information to JavaScript. Additionally, the use of accessibility information and controls can be engaged in a privacy-preserving manner.

As <model> is [=embedded content=], the user agent can present 3D content in a privacy-preserving, interactive, and accessible manner.

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.

Subresource loading

While many popular model formats support the use of external asset requests for better re-use and consistency, this initial specification will only allow assets that are self-contained.

Examples

Adding a model to a document

The following example shows the simplest way to add a 3D model to a document:

           <model src="3d-assets/car"></model>

By using content negotiation the user agent relies on the server to send back a 3D model in a format the user agent supports.

Enabling interactivity

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.glb" 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

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

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.

[[wai-aria-1.2]]	No corresponding role
MSAA + IAccessible2	Not mapped
UIA	Not mapped
ATK	Not mapped
AX	Not mapped
Comments

The <model> element

Introduction

Out of scope

Scene graph inspection and manipulation

Animation mixing and blending

Stateful interaction with `model` contents

Subresource loading

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

autoplay attribute

interactive attribute

controls attribute

crossorigin attribute

height attribute

loading attribute

loop attribute

muted attribute

poster attribute

src attribute

width attribute

The `HTMLModelElement` interface

`source` element integration

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

Interaction

Controls

Rendering

Orientation/camera

Embedded content

Events

Formats

Overlap with "media elements"

HTML Integrations

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

Change log

The `<model>` element