AR/VR开发 - Soft8Soft
Description: 了解如何为你的Verge3D应用序用增强现实（AR）和虚拟现实（VR）特性。

# AR/VR开发

Verge3D可以创建基于WebXR（Web上的扩展现实）技术的基于Web的增强现实（AR）和虚拟现实（VR）体验。此外，您还可以使用USDZ格式和Apple AR Quick Look技术在iPhone和iPad上以AR模式预览您的模型。

## 内容

- 虚拟现实（VR）
  - 启用VR设置
  - 创建VR应用
- 增强现实(AR)
- 启用AR设置
  - 创建基于 WebXR 技术的AR应用(Android, WebXR Viewer)
  - 创建基于USDZ的AR应用
- 在Chrome中调试
- 向前一步

#

## 虚拟现实（VR）

#

### 启用VR设置

HTC和Oculus设备应该可以直接使用WebXR。对于连接到台式电脑的设备，如HTC Vive，请使用Google Chrome浏览器。对于独立设备，请使用头戴式显示器附带的浏览器，例如在Oculus Quest 1/2上使用Oculus浏览器运行您的VR应用程序。

WebXR需要启用安全上下文。Verge3D应用必须基于HTTPS/SSL或本地URL运行。

#

### 创建VR应用

VR模式可以通过 check VR mode(检查VR模式) 拼图检查，并通过 enter VR mode(进入VR模式) 拼图进行设置。

与3D对象的交互是通过使用面向注视的准星指针完成的，这个指针会自动为 没有控制器 （如Cardboard类设备）的VR设备提供。

在Android和iOS的任何移动浏览器中，Cardboard设备均可开箱即用。

Google Daydream可在Android手机上的Chrome稳定版浏览器中使用，HTC Vive和Oculus设备应可运行于Chrome和Firefox浏览器。

您可以使用标准的 when hovered(当悬停时) 或 when clicked(当点击时) 拼图来捕捉用户事件，以及VR特定的 on session event( 活动会话 )。

有关使用示例，请查看 Industrial Robot 演示（也可在资源商店中找到）。

#

## 增强现实(AR)

#

## 启用AR设置

您现在可以在Anroid或iOS/iPadOS系统的移动设备上运行基于verge3D的增强现实应用了。

WebXR需要启用安全上下文。Verge3D应用必须基于HTTPS/SSL或本地URL运行。

#### Android

要在你的应用中启用增强现实功能，你需要一个能够运行 ARCore技术 的Android设备，并安装了最新的Google Chrome浏览器。您同时也必须安装好Google Play Services for AR（面向AR的Google Play服务）。当您第一次进入AR模式时，如果未预装该服务，应用将自动提示安装此软件包。中国大陆区域用户如果无法开启该功能，请 点击这里 了解手动安装方案。

#### iOS/iPadOS

对 iPhone/iPad 设备，您有两个选择：

1. 安装 WebXR Viewer 浏览器
2. 使用传统的 Safari 浏览器预览 USDZ 格式的资产

Mozilla的 WebXR Viewer 是基于火狐浏览器的程序，它支持在苹果（iPhone 6s之后的）设备上使用AR功能。您可以从应用商店 下载安装 该应用。这种解决方案的优点是，您可以使用相同的WebXR技术（以及Puzzles逻辑），用于在Android设备上运行AR。缺点是显而易见的，即您（以及您的用户）需要手动安装WebXR Viewer浏览器。

使用USDZ资产，您可以使用 Apple AR Quick Look 技术在默认的Safari浏览器中运行简化的增强现实体验。这种方法要求您使用iOS集成的完全不同的渲染引擎，因此您不能为在AR模式下运行的应用制作复杂的材质或使用拼图逻辑。

#

### 创建基于 WebXR 技术的AR应用(Android, WebXR Viewer)

AR模式可以通过 enter AR mode(进入AR模式) 拼图在任何Verge3D应用中启用。

进入AR模式后，您将能够在与移动设备对齐的“真实”坐标系中定位3D内容。除此之外，您还可以使用 detect horizontal surface AR(检测AR水平表面) 拼图来检测水平表面（桌子、书架、地板等）。

此外，要通过3D画布查看真实环境，您应该在 configure application(配置应用) 拼图中启用 transparent background(透明背景) 选项。

有关使用示例，请查看 Augmented Reality 演示（也可在资源商店中找到）。

#

### 创建基于USDZ的AR应用

要进入AR Quick Look模式，您需要先创建USDZ资产。为此，您可以在运行时（实时）导出场景（或单个模型），或使用您喜欢的建模套件提前制作。

#### 在运行时中准备USDZ资产

这种方法基于使用 export to USDZ(导出为USDZ) 拼图生成USDZ文件（请参见下面的拼图片段）。

#### 在建模软件中准备USDZ资产

目前，USDZ导出仅 在3ds Max中原生支持 。对于Blender，您可以尝试非官方的 BlenderUSDZ 插件。

USDZ 与 USD 不同，它是一个容器，将 USD 模型与媒体数据（如 PNG、JPEG、MP3 等）结合在一起。因此，能够导出到 USD 的建模套件不一定支持 USDZ。

如果您使用的是macOS/iOS/iPadOS系统，Apple官网提供了大量的 工具 ，可以将您保存在OBJ/FBX/glTF/USD等格式中的模型转换为USDZ格式。

#### 加载USDZ

要预览由建模工具或其他工具导出的USDZ资产，您需要创建一个带有图像的HTML链接：

`<a id="enter_AR_button" rel="ar" href="model.usdz"> <img src="media/enter_AR_button.png"> </a>`

链接应该引用一个USDZ模型资源，例如 model.usdz 。图片应该引用显示某个带有图标或文本的按钮的图片，例如“进入AR”。在上面的示例中，该图片位于应用程序目录中的 media/enter_AR_button.png 位置。

当用户在Apple设备上点击此类链接时，系统将检测到链接引用的USDZ资源并打开AR Quick Look模式，以便您可以在现实世界中定位模型。

使用 Puzzles，可以根据需要创建相同的链接：

要在运行时中生成并加载USDZ资产，请使用如下代码：

注意区别 —— 我们在这里使用了 *export to USDZ(导出到 USDZ”拼图)* ，并将附加的下载属性分配给链接。

有关使用示例，请查看 Augmented Reality 演示（也可在资源商店中找到）。

#

## 在Chrome中调试

为了在开发过程中加快迭代速度，您可以使用 port forwarding(端口转发) 功能在移动浏览器中运行AR或VR应用，以避免每次都重新上传内容到远程Web服务器。

#

## 向前一步

请查看 以下 章节，了解如何使用拼图为应用编写脚本。另外，如果你想要模拟对象与虚拟环境的真实碰撞，请查看 物理系统指南 章节。

有关使用示例，请查看 Snowballs VR 演示（也可在资源商店中找到）。

### 遇到问题？

欢迎您随时在 论坛上提问！您还可以加入中文用户社区QQ群(171678760)，在线寻求帮助。