WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Optimize for the spatial web

Optimize for the spatial web

WWDC 2024
观看原视频

Highlight

visionOS 的 Safari 正在定义”空间网页”的交互范式。Session 分三个层面展开：交互、沉浸内容、调试工具。

核心内容

网页在传统设备上的交互范式是”鼠标点击”或”手指触摸”，但 visionOS 的核心输入方式是”眼睛注视 + 手指捏合”。这就产生了一个问题：浏览器怎么知道用户在看哪个元素？visionOS 1 引入了交互区域（Interaction Region）的高亮机制——系统在你注视的元素周围画一个半透明高亮框。但默认的矩形高亮对复杂图形（比如一张自行车示意图的不同零件）完全不够用。

visionOS 2 带来了两个关键改进：第一，你可以用 SVG path 自定义交互区域的形状，让高亮精确贴合不规则图形的轮廓；第二，当链接内包含大尺寸媒体内容（比如视频缩略图）时，高亮会在几秒后自动淡化，避免遮挡内容。Session 还展示了 WebSpeech API 在 Vision Pro 上的独特价值——语音识别和语音合成全部在设备端运行，不需要 API key，不需要后端服务，适合做免手操作的游戏或工具。

沉浸内容方面，网页现在可以嵌入空间照片和全景照片（通过 Element Fullscreen API 进入独占视图）、3D 模型（通过 rel=ar 的 USDZ 链接触发 Quick Look）、空间音频（通过 Web Audio API 的 PannerNode），以及完整的 WebXR VR 体验。调试方面，Safari 的 Web Inspector 可以连接到 visionOS 真机或模拟器，还提供了 XR Inspector 用于调试 WebXR 场景的空间布局。

详细内容

自定义交互区域形状（03:48）

visionOS 2 允许用 SVG path 定义交互区域。Session 用一个自行车零件示意图做演示：在 Mac 上，鼠标悬停某个零件时显示轮廓高亮；在 Vision Pro 上，同样的 SVG path 被系统用来绘制注视高亮。效果看似细微，但因为它精确出现在你注视的位置，实际感知比屏幕录制中明显得多。

对于普通链接，Apple 建议的做法很直接：给链接加 padding 扩大可点击区域，用圆角让高亮形状与网站视觉风格匹配。这些 padding 和圆角不需要在 DOM 中可见——它们只是给系统高亮渲染的提示。

WebSpeech API：语音识别与语音合成（05:00）

Session 用一个叫”Bike! Color! Shout!”的小游戏演示 WebSpeech。玩家盯着屏幕，口头喊出猜测的颜色序列，完全不需要点击或输入文字。核心代码如下：

// 创建语音识别对象（Safari 使用 webkit 前缀）
const recognizer = new webkitSpeechRecognition();

// 监听结果事件
recognizer.onresult = (event) => {
  // 取最新的识别结果
  const result = event.results[event.results.length - 1];
  // 取第一个备选方案的文本
  const transcript = result[0].transcript;
  // 用简单字符串匹配判断颜色
  checkColorGuess(transcript);
};

// 需要在用户事件（如点击）中启动
button.addEventListener("click", () => {
  recognizer.start(); // 首次会弹出麦克风权限请求
});

关键点：

  • webkitSpeechRecognition 是 Safari 的前缀写法，遵循标准实现
  • event.results 是所有识别片段的累积列表，取最后一个拿到最新结果
  • 每个 result 包含多个备选方案（alternatives），[0] 是置信度最高的
  • start() 必须在用户事件中调用，首次使用会触发麦克风权限弹窗

语音合成更简单：

// 构建语音对象并播放
const utterance = new SpeechSynthesisUtterance("Game over! Your score is 42.");
speechSynthesis.speak(utterance);

关键点：

  • 构建 SpeechSynthesisUtterance 对象，传入要朗读的文本
  • 调用 speechSynthesis.speak() 播放
  • 识别和合成均在设备端完成，无数据离开设备，无 API key

空间照片与全景照片：Element Fullscreen API（08:51）

Apple 发现空间照片在内嵌页面中显示效果很差——用户的 Safari 窗口位置和大小不可控，空间照片需要居中、真实尺寸、独占视图才能呈现正确的深度感。解决方案是用 Element Fullscreen API，把空间照片从 Safari 窗口中”弹出”到与 Photos 应用相同的独占视图中：

<img
  src="bike-spatial.heic"
  srcset="bike-fallback.jpg"
  onclick="this.requestFullscreen()"
/>

关键点：

  • 使用 srcset 指定空间照片格式（HEIC），同时提供不支持该格式浏览器的回退图
  • requestFullscreen() 必须在用户事件中调用
  • 进入全屏后，visionOS 自动展示带羽毛边缘的门户视图，点击沉浸按钮进入真实尺寸的独占视图
  • 全景照片使用完全相同的模式——任何足够大尺寸的图片都可以触发全景模式
  • 用户随时可以通过 Home 手势或数码表冠退出全屏

3D 模型：Quick Look（12:42）

在网页中展示 3D 模型只需要一个 HTML 属性——rel=ar，与 iOS/iPadOS 的 AR Quick Look 语法完全相同：

<a href="bike.usdz" rel="ar">View in 3D</a>

关键点：

  • rel=ar 让链接在 visionOS 中打开 Quick Look 查看器
  • 用户可以将模型放置在物理空间中的任何位置
  • Safari 窗口保持打开，3D 模型同时存在于场景中
  • 可以通过 anchor.relList.supports("ar") 检测浏览器是否支持 AR Quick Look
  • USDZ 模型可以用 Reality Composer 的 Object Capture 制作，也可以用 Mac 上的 Preview 转换格式

空间音频：Web Audio API PannerNode（14:27）

Web Audio API 在 visionOS 上获得了空间化能力。核心是 PannerNode，它控制音频在 3D 空间中的位置、方向、锥形角度和参考距离：

const audioCtx = new AudioContext();
const source = audioCtx.createBufferSource();
const panner = audioCtx.createPannerNode();

// 设置音源位置
panner.positionX.value = 2;
panner.positionY.value = 0;
panner.positionZ.value = -1;

source.buffer = myAudioBuffer;
source.connect(panner);
panner.connect(audioCtx.destination);
source.start();

关键点：

  • 从 AudioContext 创建 PannerNode
  • 设置 positionX/Y/Z 控制音源在空间中的位置
  • 可以动态修改位置值实现移动音源
  • 多个 PannerNode 配合不同音源可以构建完整的声音景观

调试：Web Inspector 连接 visionOS（17:19）

连接步骤：Mac 和 Vision Pro 在同一网络 → 在 Vision Pro 的 Settings > Apps > Safari > Advanced 中开启 Web Inspector → Settings > General > Remote Devices → 在 Mac 的 Safari Develop 菜单中选择 Vision Pro → 输入配对码。之后每次同网络下 Vision Pro 会自动出现在 Develop 菜单中。你可以在虚拟 Mac 屏幕上同时看到 Web Inspector，实现同屏调试。

核心启发

  • 做什么：给现有网站的链接加 padding 和圆角。为什么值得做：这是成本最低的 visionOS 适配，扩大注视高亮的可触发区域，圆角让高亮框与网站风格协调。怎么开始：在全局样式中给 a 标签加 padding: 8px 和 border-radius: 12px，不需要任何条件判断。

  • 做什么：用 WebSpeech API 替代文字输入场景。为什么值得做：在 Vision Pro 上用户双手可能正在做其他事情，语音是最自然的输入方式；且 Safari 的实现完全在设备端运行，零后端依赖。怎么开始：用 webkitSpeechRecognition 监听 onresult 事件，提取 transcript 文本做简单匹配；用 SpeechSynthesisUtterance 做语音反馈。

  • 做什么：用 Element Fullscreen API 展示空间照片和全景照片。为什么值得做：空间照片在页面内嵌显示效果差，全屏独占视图才能呈现正确的深度感和真实尺寸；用户无需下载或额外权限。怎么开始：给 <img> 添加 onclick 调用 requestFullscreen()，用 srcset 提供空间格式和回退格式。

  • 做什么：在产品展示页面加入 USDZ 模型的 Quick Look 链接。为什么值得做：用户可以在真实空间中放置 3D 模型查看，体验远超 2D 图片；一行 HTML 即可实现。怎么开始：用 rel=ar 的 <a> 标签指向 USDZ 文件，用 relList.supports("ar") 做特性检测决定是否显示链接。

关联 Session

评论

GitHub Issues · utterances