Nouveautés pour le web spatial

Découvrez les dernières fonctionnalités spatiales pour le web sur visionOS 26. Nous verrons comment afficher des modèles 3D intégrés avec le tout nouvel élément HTML model. Nous présenterons également des fonctionnalités puissantes, notamment l'éclairage des modèles, les interactions et les animations. Apprenez à intégrer à votre site web de nouveaux contenus multimédias immersifs pris en charge, tels que la vidéo à 360 degrés et Apple Immersive Video. Et explorez en avant-première l'intégration d'un environnement personnalisé à vos pages web.

Chapitres

0:00 - Introduction
0:55 - Intégrer des modèles 3D
21:24 - Présenter des contenus multimédias immersifs
26:14 - Fournir un environnement personnalisé

Ressources

Vidéos connexes

WWDC25

WWDC24

Create custom environments for your immersive apps in visionOS

WWDC23

1:00 - Embed 3D models - Basic syntax
```
<model src="teapot.usdz"></model>
```

4:15 - Embed 3D models with source element

<model>
  <source src="teapot.usdz" type="model/vnd.usdz+zip">
</model>

5:30 - Example server configurations to add USDZ MIME type support

# Apache

```
AddType model/vnd.usdz+zip .usdz
```

# NGINX mime.types

```
types {
  ...
  model/vnd.usdz+zip usdz;
}
```

# Python HTTP server

```
import http.server
Handler = http.server.SimpleHTTPRequestHandle
Handler.extensions_map = { ".usdz": "model/vnd.usdz+zip" }
httpd = http.server.HTTPServer(("", 8000), Handler)
httpd.serve_forever()
```

5:51 - Specify a fall back image for element

<model src="camera.usdz">
  <img src="camera.png">
</model>

6:17 - Example 2D rendering fallback experience

<!-- <model-viewer> library from https://modelviewer.dev/ -->
<script type="module" 
  src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js">
</script>

<model src="camera.usdz">
  <!-- Fallback experience for backward compatibility -->  
  <model-viewer src="camera.glb"></model-viewer>
</model>

6:52 - Detect if the model element is supported

if (window.HTMLModelElement) {
  // Supported by this browser
} else {
  // Not supported by this browser
}

7:32 - Implementing a loading indicator using .ready promise

<model src="camera.usdz" id="mymodel"></model>

<script>
const mymodel = document.getElementById("mymodel");

if (window.HTMLModelElement) {
  mymodel.ready.then(result => {
	// Hide the loading indicator
	// Show the model
 }).catch(error => {
	// Loading error occurred, show a retry button
 });
}
</script>

8:23 - CSS example for setting the color of the virtual space

<body>
  <!-- page content here -->
  <model src="camera.usdz" class="my_model"></model>
</body>

<style>
:root {
  --main-bg-color: rgb(240, 240, 240);
}

body {
  background-color: var(--main-bg-color);
}

.my_model {
  /* set the virtual space color */
  background-color: var(--main-bg-color); 
}
</style>

9:21 - CSS example for frosted glass panel on top of a

<div class="container">
  <model src="camera.usdz"></model>
  <div class="panel"> ... </div>
</div>

<style>
.container {
  position: relative;
}

.panel {
  position: absolute;
  left: 60%;
  backdrop-filter: blur(20px);
  background: linear-gradient(to right,
                              rgba(240, 240, 240, 0.8),
                              rgba(240, 240, 240, 0.5) 4px);
}
</style>

10:56 - Setting image-based lighting (IBL) with environmentmap
```
<model src="camera.usdz" environmentmap="sunset.exr"></model>
```
12:41 - Allowing inline rotation with stagemode
```
<model src="teapot.usdz" stagemode="orbit"></model>
```

13:31 - Customize placement with JavaScript entityTransform

<model src="teapot.usdz" id="mymodel"></model>

<script>
const mymodel = document.getElementById("mymodel");
mymodel.ready.then(result => {
  const matrix = mymodel.entityTransform; // DOMMatrixReadOnly
});
</script>

13:49 - Make the model face right with entityTransform

<model src="teapot.usdz" id="mymodel"></model>
<a onclick="turnRight()">Right</a>

<script>
const mymodel = document.getElementById("mymodel");
function turnRight() {
  const matrix = mymodel.entityTransform; // DOMMatrixReadOnly
  const newMatrix = matrix.rotateAxisAngle(0, 1, 0, 90);
  mymodel.entityTransform = newMatrix;
}
</script>

15:03 - Setting the entityTransform to an identity matrix
```
model.entityTransform = new DOMMatrix();
```

16:31 - Basic animation control

<model src="toy.usdz" id="mymodel" loop autoplay></model>
<button onclick="toggleAnimation()">Play/Pause</button>

<script>
const mymodel = document.getElementById("mymodel");

function toggleAnimation() {
  if (mymodel.paused) {
	mymodel.play();
  } else {
	mymodel.pause();
  }
}
</script>

17:35 - Jump to animation timestamp using .currentTime property

<model src="camera.usdz" id="mymodel"></model>

<script>
const mymodel = document.getElementById("mymodel");

function openFlash() {
  mymodel.currentTime = 1; // Unit is seconds
}

function openScreen() {
  mymodel.currentTime = 3; // Unit is seconds
}
</script>

18:11 - Update .currentTime with a slider

<model src="camera.usdz" id="mymodel"></model>
<input type="range" id="slider" min="2" max="3" step="any" value="2">


<script>
const mymodel = document.getElementById("mymodel");

slider.addEventListener("input", (event) => {
  mymodel.currentTime = event.target.value;
});
</script>

19:35 - Generate USDZ with three.js and display with

import * as THREE from "three";
import { USDZExporter } from "three/examples/exporters/USDZExporter.js";

async function generateModel() {
	const scene = new THREE.Scene();
	// ... create a really nice scene procedurally ...

	const bytes = await new USDZExporter().parseAsync(scene);
	const objURL = URL.createObjectURL(new Blob([bytes]));

	const mymodel = document.getElementById("mymodel");
	mymodel.setAttribute("src", objURL);
}

23:10 - Embed immersive media

<video src="spatial_video.mov"></video>  <!-- Single file -->
<video src="360_video.m3u8"></video>  <!-- HTTP Live Streaming -->

24:25 - Going full screen with Javascript for

<video src="360_video.m3u8" id="player" controls></video>

<script>
const player = document.getElementById("player");
player.requestFullScreen();
</script>

24:35 - Embed panoramas and offer full screen with Javascript

<picture>
  <source media="(max-width: 799px)" srcset="thumbnail.jpg">
  <source media="(min-width: 800px)" srcset="panorama.jpg">
  <img src="panorama.jpg" id="pano">
</picture>
    
<script>
const pano = document.getElementById("pano");
pano.requestFullScreen();
</script>

24:57 - Embed spatial photos and offer full screen with Javascript

<img src="spatial.heic" id="img">
  
<script>
const img = document.getElementById("img");
img.requestFullScreen();
</script>

25:21 - Embed spatial photos with the new "controls" attribute
```
<img src="spatial.heic" id="img" controls>
```

26:49 - Provide a custom environment

<link rel="spatial-backdrop" href="office.usdz" environmentmap="lighting.hdr">

0:00 - Introduction
L’équipe Safari de visionOS dévoile des nouveautés pour le web spatial, notamment : rendu de modèles 3D stéréoscopiques, médias immersifs et des fonctionnalité en aperçu pour les développeurs comme Website Environment.
0:55 - Intégrer des modèles 3D
L’évolution du développement web introduit l’élément HTML model, permettant d’intégrer des modèles 3D directement dans les pages web. Cette nouvelle fonctionnalité, activée par défaut dans Safari sur visionOS, révolutionne l’interaction avec le web grâce au rendu stéréoscopique, qui permet de percevoir la profondeur et d’explorer les objets 3D sous tous les angles.
21:24 - Présenter des contenus multimédias immersifs
La prise en charge des contenus immersifs sur le web s’élargit, avec la possibilité d’intégrer des vidéos spatiales, à 180°, à 360° et grand angle. Avec l’iPhone 15 Pro ou ultérieur, capturez des vidéos spatiales depuis l’app Appareil photo et regardez-les sur Apple Vision Pro.
26:14 - Fournir un environnement personnalisé
Safari propose une nouvelle fonctionnalité en aperçu pour les développeurs : Website Environment. Elle permet aux sites web de créer des environnements virtuels avec des fichiers USDZ, offrant aux visiteurs une expérience immersive (comme un restaurant, un sous-marin ou un donjon) tout en gardant Safari et le site visibles. Vous pouvez implémenter cette fonctionnalité via un code HTML spécifique, des fichiers USDZ et la personnalisation des environnements avec des IBL. Cette fonctionnalité est en cours de développement, vos retours sont les bienvenus.

Explore Get Started

Stay Updated

Explore Platforms

Featured

Explore Technologies

Featured

Explore Community

Featured

Explore Documentation

Release Notes

Explore Downloads

Featured

Explore Support

Featured

Quick Links

Nouveautés pour le web spatial

Chapitres

Ressources

Vidéos connexes

WWDC25

WWDC24

WWDC23