随着VR头显制造商不断满足硬件需求，开发人员也在努力满足用户对内容吸引力的需求，因此虚拟现实最近变得十分普及。VR并不是唯一一种普及的技术，在当今的专业行业中，每个人都在使用实时视频流进行沟通和合作。这为开发人员提供了机会，帮助他们开发可以利用VR和视频流技术来消除所有距离障碍并创造远程沉浸感的应用程序。
-
如何使VR更有包容性，并允许用户与不使用VR头显的人共享视角？
-
大多数 VR头显允许用户使用投射技术（Miracast或Chromecast）将用户的POV镜像到附近的屏幕。这就产生了一个局限，即每个VR头显都需要1个物理屏幕，并且头显和屏幕必须在同一房间内。通常情况下，大多数用户希望可以随意地将实时视频流传输给远程的人，以上这种类型的流传输似乎早已过时。
在本指南中，我将逐步介绍如何构建一个VR应用程序，该应用程序允许用户实时播放其VR视图。我们还将添加一个功能，该功能可以让非VR用户自己使用其Web浏览器将实时流传输到虚拟环境中。
我们将无需编写任何代码就能在Unity编辑器中创建整个项目。
在此项目中，我将使用HTC Vive Focus Plus，因为它支持Unity的XR框架，很容易创建一个VR环境并且能将Vive构建到Android目标中，所以我能使用Agora’s Video for Unity SDK来添加实时视频流。
该项目将包括三个部分。第一部分将逐步介绍如何创建项目，以及与Agora SDK和VR Prefab一起实现Vive包。
第二部分将逐步创建场景，包括使用Controller设置XR Rig、添加3D环境、创建UI以及实现Agora VR Prefab。
第三部分将向你们展示如何使用实时流媒体App来测试VR用户和非VR用户之间的视频流。
-
-
与Unity的XR框架兼容的VR头显（我正在使用的是HTC Vive Focus Plus）
-
-
对Unity XR Framework要有基本掌握
-
一个Agora开发人员帐户（请参阅如何开始使用Agora）
-
-
一个简单的Web服务器（我喜欢用Live Server）
注意：尽管不需要Unity或Web的相关开发知识，但如果遇到以上提到的基本概念，本文将不作详细说明。
项目的第一部分将使用XR Framework构建Unity App，并逐步介绍如何将Vive注册表添加到项目中、下载并安装Vive插件、安装Agora Video for Unity插件、以及使用拖放式Prefab。
首先使用3D模板创建一个新的Unity项目。在这个Demo里，我使用的是Unity 2019.4.18f1 LTS，如果你想使用Unity 2020，那你还需要当前处于beta版本的Vive 2.0 SDK。
注意：在撰写本文时，我访问了beta SDK以获取新的HTC头显，我选择使用Vive 1.0 SDK。但Beta Vive SDK也能有与其相同的效果。
将新项目加载到Unity后，打开“Project Settings”并导航到“Package Manager”选项卡。在“Scoped Registries”列表中，单击加号并添加Vive注册表的详细信息。
一旦添加了Vive的“ Scoped Registries ”对象及其键值，你将看到各种加载器正在导入文件。接下来，打开Window> Package Manager，选择Packages：My Registries，你会看到VIVE Wave。如果未显示任何程序包，请单击左下角的刷新。
接下来，单击并安装每个Vive软件包。软件包安装完成后，将Vive Wave XR插件中的PureUnity和XR样本以及Essense Wave XR插件中的样本导入项目。
在完成软件包的安装以及示例导入之后，会出现WaveXRPlayerSettingsConfigDialog窗口。HTC建议接受全部以应用推荐的播放器设置。
接下来打开“Project Settings”，单击进入“ XR Plug-in Management”部分，并确保已选择Wave XR。
现在我们已经配置了Wave SDK，接下来需要添加Unity的XR Interaction Toolkit软件包。这将帮助我们使用Unity的XR组件，使其与场景中的Unity输入或其他元素进行交互作用。在“Package Manger”中，单击“Advanced”按钮（在搜索输入的左侧），然后启用“Show preview packages”选项。预览包可见后，向下滚动到 XR Interaction Toolkit，然后单击安装。
注意：如果你使用的是Unity 2018，则需要使用HTC提供的预设来配置输入管理器。输入可以手动定义，也可以下载InputManager preset。下载预设后，将其拖动到Unity Assets中，然后导航至“Project Settings中的InputManager选项卡并应用预设。
使用Wave XR插件时，可以通过QualitySettings.SetQualityLevel 更改质量级别。HTC建议将“抗锯齿”级别设置为4x Multi Sampling，你能从HTC的“示例文档”页面下载QualitySettings preset 。
有关输入和质量设置的更多信息，请参阅 HTC Wave 文档。
打开Unity Asset商店，导航到Agora Video SDK for Unity页面，然后下载插件，插件下载后，将其导入到你的项目中。
注意：如果你使用的是Unity 2020，则可以通过Web浏览器访问资产存储，一旦将资产导入Unity，它将通过Package Manager UI进行导入。
创建过程的最后一步是下载Agora 虚拟相机预制件包，并将其导入到项目中。
https://github.com/AgoraIO-Community/Unity-Virtual-Camera-Prefab
当你导入Agora虚拟相机包时，你会看到它自带一些脚本，一个是预制件，一个是渲染纹理。两个脚本需要留意的是包含Agora Video SDK基本实现的AgoraInterface.cs 。而AgoraVirtualCamera.cs具体实现并扩展了AgoraInterface以处理虚拟相机流。该tools文件夹包含一些辅助程序脚本，一个用于记录日志，一个用于请求摄像头/麦克风许可，另一个是用于处理token请求的脚本。
包中还包括AgoraVirtualCamera.prefab，一个是附带AgoraVirtualCamera.cs附件的空的GameObject 。这将使我们可以轻松地从Unity编辑器中配置Agora设置，而无需编写任何代码。AgoraVirtualCamRT.renderTexture 中的最后一个文件，该工具文件夹中包含脚本Logger.cs、PermissionHelper.cs和RequetstToken.cs。
最后，我们完成了所有依赖项的安装，并可以继续构建XR视频流App。
在本节中，我们将逐步指导如何使用3D模型设置3D环境、将主相机游戏对象转换为XR相机Rig游戏对象、创建用户控件和其他UI元素，以及实现Agora VR预制件。
创建一个新场景或打开示例场景并导入环境模型。你可以从Sketchfab下载以下模型。
将模型导入项目后，将其拖动到“Scene Hierarchy”中，按(0,0,0,)正确的方向缩放并放置模型。
你可能已经注意到场景看起来很暗，所以我们得通过产生光照来解决这个问题。选择“窗口”>“渲染”>“照明设置”，然后选择窗口底部的“自动生成”选项，并在Unity调整并更新“照明”设置时进行观察。照明的场景应如下所示。
接下来，我们将在场景中添加房间比例的XR Rig。首先从场景中删除Main Camera Game对象，然后在“Scene Hierarchy”中右键单击，导航到XR选项，然后单击“ Room Scale XR Rig（基于动作）”。
现在XR装备已经创建完毕，设置XR装备的最后一步是为LeftHand Controller和RightHand Controller游戏对象设置HTC预制件。为此，我们需要导入HTC Essence Controller软件包。打开项目设置，导航到Wave XR>Essence选项卡，然后导入“ Controller”包。
Unity完成导入“ Controller”包的导入后，在Assets面板中，导航至Wave> Essence> Prefabs文件夹。“ Prefabs”文件夹包含分别用于“左”和“右”控制器的预制。
从“Scene Hierarchy”中选择LeftController游戏对象，然后将WaveLeftController预制件拖到附加到游戏对象的“ XR控制器（基于设备）”脚本的Model Prefab输入中。
接下来，导航至Wave> Essence> Scripts文件夹，然后将CustomizeWaveController脚本拖到LeftController游戏对象上。
对RightController游戏对象重复这些步骤，添加WaveRightController预制件和CustomizeWaveController脚本。
设置控制器，自动为HMD和终端用户运行的Controllers相关联的控制器显示匹配的3D模型。
要注意的是，由于这是VR，因此需要添加一些3D模型以供用户进行互动。如果你打算将XR Grab Interactable模型添加到场景中，请在地板下方添加3D立方体和碰撞盒，并在虚拟环境中添加任何其他固定/实体游戏对象，以避免场景加载时XR Grab Interactable 模型掉入3D环境中。
注意：XR Grab Interactable概念不在本指南的讨论范围之内，因此我将不做详细介绍，但有关更多信息，请参阅《使用XR Interaction工具箱互动的Unity指南》：https://learn.unity.com/tutorial/using-interactors-and-interactables-with-the-xr-interaction-toolkit#
我们将对XR Rig进行最后的修改，即添加一个具有渲染纹理的Camera Game对象，作为Main Camera的子代。这将使我们能够将VR用户的视角实时流传输到频道中。在这个演示中，我将“相机游戏对象”命名为PerspectiveCamera，并添加了AgoraVirtualCamRT（来自Agora虚拟相机包）作为“相机的渲染纹理”。
既然已创建完XR装备并完成了场景照明，接下来我们就可以开始添加UI元素了。
我们需要添加一些不同的UI游戏对象：一个加入按钮，一个离开按钮，一个用于切换麦克风的按钮，一个退出应用程序的按钮，最后我们需要一个文本框来显示VR场景中的控制台日志。
Untiy的XR交互框架具有启用XR的UICanvas游戏对象，我们可以使用它们来快速放置按钮。在“Scene Hierarchy”中的右键单击，在XR中选择UI画布。
我们将重复进行这个操作，以保证在最终场景中包含3个画布游戏对象。
第一个画布将用于我们的控制台日志，我们可以重命名这个游戏对象为DebugLoggerCanvas，设置宽度到1000高度为500，规模为(0.025,0.025,0.025)使它能适应3D环境。添加Text Game Object作为DebugLoggerText 子项，然后将Text Game Object添加为Panel的子项，并将其命名为DebugLoggerText。DebugLoggerText显示得是来自日志记录器的输出。我们希望日志清晰易读，因此将DebugLoggerText 宽度设置为975，高度设置为475。最后，将DebugLoggerCanvas放置在场景中，我选择将其放置在有4扇窗户的墙上。
下一个UI 画布将包含Join、Leave和Microphone按钮。右键单击场景层次，添加另一个XR UI Canvas到场景中，将其重命名AgoraBtrnCanvas，设置宽度200高度100，规模设置(0.075,0.075,0.075)。将三个Button游戏对象添加为AgoraBtnCanvas 的子对象。在画布中按需缩放和定位按钮，下面是我在架子上放置按钮的方式。
第三个UI 画布将包含“退出”按钮，用来允许用户退出我们的应用程序。右键单击在场景层次，添加另一个XR UI Canvas到场景中，将其重命名AgoraBtrnCanvas，设置宽度100高度50，规模设置(0.075,0.075,0.075)。将Button游戏对象添加为XR UI Canvas 的子对象。根据需要在画布中缩放和定位按钮，以下是我放置按钮的方式。
由于空间充足，因此让我们添加一个隐形传送系统，以便用户可以在该空间中移动。为此，在“场景层次”中选择“ XR Rig”，然后将“Teleportation Provider”脚本和“Locomotion System”脚本添加到“游戏对象”中。确保将脚本引用设置为XR Rig，尽管它不是必需的，但它有助于减少加载时间。启用隐形传送的最后一个步骤是添加一个隐形传送区域并将其缩放为与地板一样大。
我们需要添加到场景中的最后两个游戏对象是“Remote Video Root”和“Screen Video Root”。添加一个空的Game Object并将其重命名RemoteVideoRoot，这是新视频要添加到的根节点，在远程用户连接到该频道时产生。我把RemoteVideoRoot 放置在仅有窗户的墙壁上。
最后，添加一个空的Game Object并将其重命名RemoteScreenRoot，这是每当屏幕共享到频道时视频平面将被添加到的根节点。我把RemoteScreenRoot 放置在对面的RemoteVideoRoot 玻璃墙上。
现在，我们已经将所有环境和UI元素添加到场景中，我们准备将Agora VR Prefab拖到Scene Hierarchy中。
首先，我们将添加Agora AppID和临时token或token服务器的URL。Agora 预制件假定token服务器返回与Golang指南中的Agora令牌服务器相同的JSON响应。
我们还需要选择一个频道名称，在此示例中，我将使用AGORAVIVE。稍后当我们通过网络连接时有一些注意事项。
注意：为了正确匹配用户，AppID和通道名称必须完全匹配，因为Agora平台内的频道名称区分大小写。
接下来的步骤听起来很简单。将我们刚刚创建的各种游戏对象拖到Prefab input中。渲染纹理是我们用于透视虚拟相机的渲染纹理。
在测试我们构建的内容之前，还有最后一步。将“单击时”处理程序添加到“加入”，“离开”，“麦克风”和“退出”按钮。对于每种方法，我们将使用Agora虚拟摄像机预制件作为“单击”参考，并为每个按钮选择相应的功能。例如，单击时的JoinBtn将调用AgoraVirtualCanera> JoinChannel。
在这一点上，我们可以通过将项目构建到VR设备来测试。如果你使用的是Vive头显，则构建设置应如下所示：
启动构建后，该项目将需要几分钟来构建并部署到设备。部署应用程序后，你将看到一个加载程序屏幕，然后你会进入到虚拟环境中。
单击“加入”按钮加入频道，一旦加入频道，麦克风按钮将变为绿色，调试面板中将出现一些日志，如果你单击“麦克风”按钮，它将变为红色来提示你麦克风已被静音。
本指南的最后一部分，我们将使用实时流媒体网络App来测试VR和非VR用户之间的视频流。
Agora作为平台，使开发人员可以轻松地在许多不同平台上构建实时视频流应用程序。使用Agora Web SDK，我们可以构建群组视频流媒体Web App。允许用户以活跃参与者或观众的身份加入。活跃的参与者将他们的摄像机流推送到频道中，并在VR场景中可见。用户还可以作为观众加入，并查看来自VR头显和活跃用户的视频流。
可以通过以下两个链接分别作为互动观众或观看者来体验测试
Active Participant: https://agoraio-community.github.io/agora-advanced-web-broadcast-demo/broadcast.html
Passive Participant: https://agoraio-community.github.io/agora-advanced-web-broadcast-demo/index.html
启动Web视图并连接到频道后，启动VR应用程序并单击“加入”按钮。VR头显加入频道后，你将能够在Web浏览器中查看VR用户的视角。
https://github.com/digitallysavvy/agora-unity-vr-web-viewer
获取更多教程、Demo、技术帮助，请点击「阅读原文」访问声网开发者社区
