AR/VR开发
Verge3D可以创建基于WebXR(Web上的扩展现实)技术的基于Web的增强现实(AR)和虚拟现实(VR)体验。此外,您还可以使用USDZ格式和Apple AR Quick Look技术在iPhone和iPad上以AR模式预览您的模型。
内容
虚拟现实(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 设备,您有两个选择:
- 安装 WebXR Viewer 浏览器
- 使用传统的 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),在线寻求帮助。