HTML 中的 AR、VR 和 3D 模型

在 Safari 技术预览版 161 发行说明 中，有一行看似无关紧要的内容，提到了对一个新的 HTML 元素和属性的支持。

增加了对 <model src> 和 <source type> 属性的支持 (257518@main)

每当我看到某个我不认识的元素时，我的脑海里就会立刻冒出这样的想法：“嗯！对我来说是新东西，但对其他人来说可能已经是旧闻了。” 我知道这是一种不好的思维方式，因为它也可能意味着

• 嗯，看起来像某个专有的实验。
• 哇，一个真正的新事物！

事实上，这三种情况都可能存在。

这是一个不断发展的概念

也就是说，我找到的第一个关于 <model> 的略显正式的信息，并不是在 W3C 规范中，而是在 WebKit 的解释器仓库 中。README 中只有一则 2021 年的大注释，内容是“<model> 元素已移至沉浸式 Web CG。” 我正准备跳过去，但我的目光却落在了 HistoryAndEvolution.md 文件上，该文件详细介绍了 <model> 概念的早期背景。

<model> 元素诞生于一种愿望，即希望更进一步，改善 Safari 与 iOS 的 AR 快速查看 功能的集成体验。

我不得不查看苹果的 AR 快速查看功能的介绍页面。您知道一些商店现在推出的新功能吗？您可以使用手机摄像头将产品的 3D 渲染图叠加到自己的家中。这就是我们正在讨论的内容，并且 苹果与大都会艺术博物馆合作了一个很好的案例研究。

根据我从这些有限的背景中理解到的内容

• 在文档中放置一个 <model> 元素。
• 添加一个外部源文件，例如 <model src="assets/example.usdz">。

最初的提案来自沉浸式 Web 委员会小组

这就是该团队，他们希望将虚拟现实 (VR) 和增强现实 (AR) 融入网页。苹果将其仓库链接了起来，因此我跳转了过去，并直接访问了 解释器。这不是规范或任何其他内容，而是最初的提案。对该元素进行了更好的定义！

HTML 允许通过 <img>、<picture> 或 <video> 等元素显示多种媒体类型，但它没有提供直接显示 3D 内容的声明方式。将 3D 内容嵌入页面中相对比较麻烦，需要编写 <canvas> 元素的脚本。我们认为，是时候将 3D 模型与其他已支持的媒体类型置于同等地位了。

[…]

HTML 的 <model> 元素旨在允许网站像嵌入其他任何视觉媒体一样方便地嵌入交互式 3D 模型。预计模型将由 3D 建模工具创建或动态生成，但由服务器作为独立资源提供服务。

这个基本示例将这些内容整合在一起。它确实感觉像是 <video> 或 <picture> 元素。

<model style="width: 400px; height: 300px">
  <source src="assets/example.usdz" type="model/vnd.usdz+zip">
  <source src="assets/example.glb" type="model/gltf-binary">
</model>

.usdz？.glb？这不是我通常会遇到的文件类型。我想我需要了解一下这些文件类型以及 <model> 可能支持的其他任何文件类型。同样，所有这些都仅仅是最初的提案。

草案提案尚未完全制定

但它确实 提供了一个很好的概述，说明事情可能走向何方。

• 将模型添加到文档中
• 启用交互性
• 支持多种格式
• 提供备用内容
• 使其可访问

有很多问题需要解决。其中大部分是需要解决的已记录问题。但是，它确实阐明了 <model> 的更多信息，例如使其感觉更像 <video> 的提议属性，如 autoplay、controls、loop、muted、poster 等。

它可以追溯到更早

我找到的最早关于 3D 建模的提及是 Keith Clark 在 2018 年发表的文章，他在其中对名为 <x-model> 的自定义元素进行了原型设计。他将其描述为“一个提供对 DOM 和 CSSOM 访问的占位符”，其中加载和渲染是在 three.js 中完成的。

Keith 的想法随后得到了 Joe Medley 在 2020 年分享的 <model-viewer> 组件（以及随后的 更新）的支持。它甚至还有一个 主页，并且可以轻松地在太空中拖动尼尔·阿姆斯特朗。

它可能只是一个实验？

我的意思是，草案规范还没有详细阐述。由于 Safari TP 161 的公告，苹果似乎愿意参与其中。考虑到 苹果对 AR 的整体态度非常乐观，这一点非常合理。（苹果眼镜，有人知道吗？）

谷歌似乎也涉足其中，尽管是在 Web Components 方面。不难看出，苹果和谷歌在 Web 上对 AR 的期望之间可能存在利益冲突。

---

这些都只是我尝试理解所有内容时做的一些笔记。我相信其中肯定还有很多细微差别，而我目前了解的只是其中很小的一部分。我相信，一些更聪明的人可以在评论中为 <model> 总结出一个更清晰的结论。😉

另外，既然我们正在谈论 Safari 技术预览版，162 版本前几天刚刚发布，它启用了 CSS 嵌套 和 CSS 相对颜色语法。