How Apple's HTML Model Element Powers 3D Web on visionOS

This article explores how Apple’s proposed HTML <model> element enables web developers to seamlessly embed interactive 3D objects into Safari web pages on visionOS. By functioning similarly to standard media tags like <video> and <img>, the <model> element simplifies 3D web development, offering built-in spatial rendering, user interaction, and augmented reality capabilities without requiring complex third-party JavaScript libraries.

Native 3D Media in the DOM

Traditionally, displaying 3D content on the web required heavy JavaScript frameworks like Three.js and complex WebGL programming. Apple’s <model> element bypasses this by introducing a native HTML tag designed specifically for 3D assets.

Just as a browser inherently knows how to render a JPEG using an <img> tag, Safari on visionOS inherently knows how to render a 3D file—specifically in the USDZ format—using the <model> tag. Because the element is part of the standard Document Object Model (DOM), it can be styled with CSS, positioned alongside standard text, and manipulated with basic JavaScript.

Simple Code Implementation

Embedding a 3D object requires minimal markup. Developers wrap a <source> tag inside the <model> element and provide fallback content for browsers that do not yet support the standard.

<model interactive style="width: 400px; height: 400px;">
  <source src="sneaker.usdz" type="model/vnd.usdz+zip">
  <p>Your browser does not support the HTML model element.</p>
</model>

Stereoscopic Rendering on visionOS

When a webpage containing the <model> element is loaded in Safari on visionOS, the browser does not flatten the 3D object into a 2D image. Instead, it renders the object with true stereoscopic depth. The 3D model appears to have actual volume inside the flat webpage container, reacting dynamically as the user moves their head.

Additionally, visionOS automatically applies system-level environmental lighting to the model. If the user is in a bright room, the 3D object inside the Safari window reflects that lighting accurately, making the asset feel physically present without the developer needing to program custom shaders or lighting rigs.

Built-in Spatial Interactivity

Developers can allow users to manipulate the 3D object directly on the page simply by adding the interactive attribute to the <model> tag.

In Safari on visionOS, this attribute unlocks native spatial gestures:

  • Rotation: Users can look at the model, pinch their fingers, and drag to rotate the object on its axis directly within the webpage's layout.
  • Scaling: Users can use a two-handed pinch gesture to zoom in and out of the model.
  • Spatial Extraction: Users can pinch, hold, and drag the 3D model completely out of the Safari browser window, dropping a full-scale version of the object into their physical room via Apple’s Quick Look system.

JavaScript API Control

Beyond basic embedding, the <model> element features a dedicated JavaScript API. This allows developers to build custom interfaces around the 3D object. Through JavaScript, a webpage can:

  • Play, pause, and scrub through animations baked into the 3D file.
  • Change the model's orientation or camera angle when a user scrolls down the page.
  • Swap out textures or trigger specific animations when a user clicks standard HTML buttons next to the model.

Privacy-First Architecture

A major hurdle for 3D and spatial web development is user privacy, as rendering objects correctly in space usually requires access to device cameras and sensors. The <model> element solves this by offloading the rendering to the visionOS system.

While visionOS uses the Apple Vision Pro's cameras and sensors to light the 3D model and track the user's eyes and hands for interaction, that spatial data is never exposed to the website itself. The browser simply tells the system where the <model> box is located on the page, and the operating system handles the rest. This allows interactive 3D objects to load instantly in Safari without interrupting the user with permission pop-ups.