Unity Meta Quest MR 开发教程:(一)混合现实 MR 透视 Passthrough 环境配置

📕教程说明

Meta Quest 一体机具有透视(Pass through)的功能。它通过 VST(Video See Through)技术,使用户能够透过头显看到现实中的场景,并且能将虚拟的物体融入于透视场景中,与用户进行交互。利用这个功能,我们可以开发一些混合现实 MR 应用,将虚拟和现实相互融合。

前期需要的一体机开发的环境配置可以参考这篇教程:Unity VR 开发教程: Meta Quest 一体机开发 (一) 环境配置

电脑操作系统:Windows

使用的 VR 设备:Meta Quest 2

使用的 Unity 版本:2021.3.5 LTS (这里推荐使用 2021 及以上的 LTS 版本)

Oculus Integration 版本:v54 (目前 v54 以上也适用)

官方文档:https://developer.oculus.com/documentation/unity/unity-passthrough/

注:本篇教程可能具有时效性,因为 Oculus 的 SDK 更新迭代得比较快,如果大家使用的 SDK 版本比我的新,在不方便查看官方文档的情况下也可以先试试本篇教程的配置步骤,如果发现教程过时,欢迎大家进行反馈,我也会及时进行更改说明,一切以官方文档为主。

最终实现效果:在透视下的现实场景中看到虚拟物体。

在这里插入图片描述


📕配置透视的串流调试功能

开启了这个功能后,就可以在设备与电脑串流的条件下运行支持透视的软件。这时候可以直接通过点击 Unity 编辑器中的运行按钮,在头显中看到透视的场景。这样就更加方便调试,不用每次打包到头显中运行。

配置步骤很简单:

  1. Quest 的系统版本要在 v37 及以上。
  2. Oculus 电脑客户端软件的版本要在 v37 及以上,并且确保设置-> Beta 测试版中的 “开发者 Runtime 功能” 和 “通过 Oculus Link 透视” 选项是开启的。
    在这里插入图片描述

📕第一步:设置 OVRManager

首先我们新建一个场景,删除场景中的 Main Camera。然后搜索 OVRCameraRig 这个 Prefab,将它拖到场景中。这个物体就相当于 XR 中的相机。

在这里插入图片描述

找到 OVRCameraRig 中的 OVR Manager 脚本,接下来需要做的步骤是:

1) 在 Quest Features 的 General 选项中,将 Passthrough Support 设为 Supported 或者 Required ,这样打包的应用就能开启透视功能。

2)勾选 Insight Passthrough 下的 Enable Passthrough。这样在应用启动时就会初始化透视的功能。如果不想在程序启动时就初始化,可以取消勾选 Enable Passthrough,然后在自己的脚本中通过代码设置 OVRManager.instance.isInsightPassthroughEnabled = true/false 来控制透视的开启和关闭,这里的作用相当于手动勾选或取消 Enable Passthrough。

在这里插入图片描述

另外,OVR Manager 中有个 Tracking Origin Type 参数需要注意一下,它相当于追踪的参考系,参数分为 Eye Level, Floor Level 和 Stage。

这三个参数的区别可以参考这篇文章:Unity VR:Oculus Integration 中 OVRManager 的 Eye Level,Floor Level,Stage 的区别

在这里插入图片描述


📕第二步:添加 OVRPassthroughLayer 脚本

接下来,我们在 OVRCameraRig 物体上添加 OVRPassthroughLayer 脚本,然后把 Placement 设为 Underlay:

在这里插入图片描述

Quest 中透视的现实场景相当于单独的一个图层,而我们的虚拟场景和虚拟物品相当于另外的图层。

当 Placement 设置成 Underlay 的时候,相当于透视的现实图层置于应用图层的最底端,这时候现实图层位于虚拟图层之下。可以理解为现实场景充当背景,虚拟物体叠加在现实场景上,也可以理解为虚拟物体会把现实物体遮挡住

当 Placement 设置成 Overlay 的时候,则反之。相当于现实图层置于应用最顶层,也就是现实图层位于虚拟图层之上,这个时候现实场景会把整个虚拟场景覆盖掉,我们只能看到现实场景,看不到虚拟物体。

因为我们想要在透视下的现实场景中看到虚拟物体,所以我们要选择 Underlay。

而位于 Placement 参数下的 Composition Depth 表示图层的深度,数值越小,越后渲染,也就是渲染在越前面。这个参数一般是用到多个透视图层的时候使用,因为 Quest 的透视 API 不仅能把整个图层变成透视场景,也就是你看到的是完全的现实世界,除此之外还能做到局部透视,比如在一个虚拟物体的表面添加透视图层,如下图所示:

在这里插入图片描述

而 Composition Depth 一般用于多个透视图层上,比如有一个深度为 0 的物体和一个深度为 1 的物体,会先渲染深度为 1 的物体,再渲染深度为 0 的物体,当这个物体放在一起时,深度为 0 的物体会遮挡深度为 1 的物体。

不过局部透视会放到未来的教程中介绍,这篇教程就不展开讨论了。


📕第三步:在场景中添加虚拟物体

我这里在 OVRCameraRig 物体前面添加了一个 Cube 方块:

在这里插入图片描述
但是如果这时候尝试运行程序,你会发现即使设置了 OVRPassthroughLayer 的 Placement 为 Underlay,自己还是看不到现实场景,只能看到虚拟场景。因为我们还有几个步骤要做。


📕第四步:删除场景中的天空盒

如果渲染了天空盒,因为我们之前设置过现实图层位于虚拟图层之下,所以天空盒的场景会覆盖掉现实场景。根据需求,我们想要在完全透视场景下,所以不需要渲染天空盒。

在 Unity 菜单栏选择 Window -> Rendering -> Lighting ,点击 Environment 选项,将 Skybox Material 设为 None。

在这里插入图片描述


📕第五步:设置相机

在 Hierarchy 面板中找到 OVRCameraRig/TrackingSpace/CenterEyeAnchor 这个子物体,它相当于我们的相机。

在这里插入图片描述

然后在 Inspector 面板中,将 Camera 组件的 Clear Flags 设为 Solid Color,然后将 Background 的 alpha 值设为 0,也就是将背景的透明度设为0。Background 的颜色决定了透视场景的颜色,如果设为黑色(RGBA 都是 0),则看到的是默认的透视颜色。因为我使用的是 Quest 2,所以如果我将 Background 设为黑色,我看到的就是 Quest 2 默认的黑白透视,如果是 Quest pro 或者之后拥有彩色透视的 Quest 设备,那么看到的应该就是彩色透视的场景(和现实中的场景颜色一样)。

在这里插入图片描述
在这里插入图片描述

现在,透视的环境配置已经完成了。

最终效果:

在这里插入图片描述

注:
1)因为之前我们在 OVRPassthroughLayer 脚本中设置了 Underlay,所以现实图层会位于虚拟图层的下方。当我们用现实的手伸进方块时,现实的手会被虚拟的方块遮挡。
2)因为 Meta 的隐私政策,在 Unity 编辑器中无法看到透视场景,但是在头显里是能正常显示的。

同时,在 Oculus/SampleFramework/Usage/Passthrough/Scene 文件夹下有官方提供的一些透视 Demo,大家可以研究一波。

在这里插入图片描述

但是需要注意的是,OVRCameraRig 的 OVRManager 脚本中的 Passthrough Support 需要确认选择了 Supported 或者 Required,才能在打包出来的程序中看到透视场景。

在这里插入图片描述

  • 7
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
可以使用以下步骤在 Vue3 + Vite3 + Typescript 中使用 WangEditor 编辑器: 1. 安装 WangEditor。可以使用 npm 或 yarn 安装。 ```bash npm install wangeditor --save # 或者 yarn add wangeditor ``` 2. 在 `main.ts` 中引入 WangEditor 和 CSS 文件。 ```typescript import WangEditor from 'wangeditor'; import 'wangeditor/release/wangEditor.css'; const app = createApp(App); app.config.globalProperties.$WangEditor = WangEditor; // 挂载编辑器到全局 app.mount('#app'); ``` 3. 在组件中使用 WangEditor。 ```vue <template> <div class="editor-wrapper"> <div ref="editorRef"></div> </div> </template> <script lang="ts"> import { defineComponent, onMounted, ref } from 'vue'; export default defineComponent({ name: 'Editor', setup() { const editorRef = ref<HTMLDivElement>(); onMounted(() => { const editor = new (window as any).$WangEditor(editorRef.value); editor.create(); }); return { editorRef, }; }, }); </script> <style lang="scss"> .editor-wrapper { height: 400px; .w-e-text-container { height: 100%; } } </style> ``` 在 `onMounted` 钩子函数中,使用 `new (window as any).$WangEditor` 来创建编辑器实例,并传入编辑器容器的 DOM 节点。调用 `editor.create()` 方法来创建编辑器。 注意:由于 WangEditor 的类型定义文件并不完善,因此可以在 `tsconfig.json` 中添加以下配置来避免类型检查报错。 ```json { "compilerOptions": { "skipLibCheck": true } } ``` 这样,就可以在 Vue3 + Vite3 + Typescript 中使用 WangEditor 编辑器了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YY-nb

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值