HoloLens-Unity 学习笔记1 空间映射(译)

欢迎加入Hololens-AR开发者专属群 418092645 长按复制

空间映射通过将环境全息化结合了虚拟和现实世界。在本节重，我们将学会:

• 扫描环境并将数据通过HoloLens传输到开发设备上

• 通过shaders将空间进行可视化

• 通过mesh处理将房间转化简单平面

• 通过之前101节学习的知识，在一些可替代的地方提供一些反馈

• 通过阻塞效果，使我们在一面真实物体后也能看到物体的全息X光线

准备工作

• 开发环境配置正确的Windows 10 PC

• 基本的C#编程能力

• 完成了101节的学习

• 开发环境配置正确的HoloLens设备

项目文件

• 下载项目所需文件(https://github.com/Microsoft/HolographicAcademy/archive/Holograms-230-SpatialMapping.zip)

• 解压上面所下载文件

注意

• 为了定位到断点，需要在Visual Studio中关闭”只使用我的代码”功能, 工具->选项->Debugging

Unity项目配置

• 启动Unity

• 新建项目 Planetarium

• 确定已勾选3D

• Unity项目启动后, 打开 Edit >Project Settings > Player

• 在Inspector面板中,找到并打开Windows Store

• 展开 Other Settings

• 勾选 Use 16-bit Depth Buffers

• 勾选 Virtual Reality Supported

• 在 Virtual Reality SDKs 列表中查看是否已经有Windows Holographic ,若无则通过+进行添加

• 展开 Publishing Settings

• 在 Capabilities 中勾选：InternetClientServer, PrivateNetworkClientServer, Microphone, SpatialPerception

• 打开 Edit > Project Settings > Quality

• 在Inspector面板的 Windows Store下，将Defuat行切换为 Fastes

• 打开 Assets > Import Package > Custom Package

• 进入 HolographicAcademy-Holograms-230-SpatialMapping\Starting 文件夹下

• 选择 Planetarium.unitypackage ，在弹出的新窗口中点击导入

• 在 Hierarchy 面板，删除 Main Camera

• 在 Project 面板， HoloToolkit\Utilities\Prefabs 路径下找到 Main Camera

• 将Main Camera 拖入Hierarchy 面板中

• 在 Hierarchy 面板，删除 Directional Light

• 在 Project 面板的 Holograms 中找到 Cursor

• 将 Cursor拖到 Hierarchy 中

• 选中 Hierarchy 中Cursor ，在 Inspector 面板顶部 Layer 的下拉菜单选择Edit Layers….

• 将 User Layer 31 命名为 SpatialMapping

• 保存当前Scene： File > Save Scene As…

• 创建一个新的文件夹 Scenes , 并将当前Scene命名为 Planetarium 保存

Chapter 1 – 扫描

目标：

• 学习 SurfaceObserver 以及修改其属性对效果的影响

• 对你的房间进行扫描和收集Meshes信息

步骤

• 在Unity编辑器的 Project 面板 HoloToolkit\SpatialMapping\Prefabs 文件夹中找到 SpatialMapping

• 将 SpatialMapping 拖入 Hierarchy 面板

编译与部署(Part 1)

• 在Unity中选择 File > Build Settings.

• 点击 Add Open Scenes 来将 Planetarium scene 进行编译.

• 选择Platform 中的 Windows Store 并点击 Switch Platform.

• 将 SDK 设置为 Universal 10 ，将 UWP Build Type 设置为 D3D.

• 勾选 Unity C# Projects.

• 点击 Build.

• 在弹出的窗口中创建新文件夹并命名为 “App”.

• 打开 App 文件夹，点击选择.

• Press the Select Folder button.

• 编译完成后，在新弹出的窗口中打开App文件夹

• 打开 Planetarium.sln

• 在 Visual Studio 顶部的配置栏中将Debug切换为 Release.

• 将平台设置为 x86.

• 通过“本地计算机”边的下拉窗口选择 远程计算机.

• 在弹出的新窗口中输入HoloLens的本地IP，并将认证模式切换为 通用(通用端口)

• 点击 Debug -> Start Without debugging 或者按下 Ctrl + F5.

• 在 输出 面板中查看编译和部署信息.

• 当程序运行起来后，你会看到周围的景物表面被黑色白边的网格所覆盖.

• 扫描你周围的景物。 确认所扫面的是墙面、地板或者天花板

编译与部署(Part 2)

现在看看空间映射对展示效果的影响

• 在Unity中选择 Window > Profiler.

• 点击 Add Profiler > GPU.

• 在 Active Profiler > <Enter IP>中输入HoloLens的IP地址，并连接

• 观察设备渲染出一帧所需时间.

• 停止运行设备上的应用

• 返回Visual Studio，在 Assembly-CSharp (Universal Windows)项目的HoloToolkit\SpatialMapping文件夹下找到并打开 SpatialMappingObserver.cs.

• 在代码中找到 Awake() 并添加 TrianglesPerCubicMeter = 1200;

• 重新编译运行程序。 观察渲染一帧所需时间的变化.

• 停止运行设备上的应用

在Unity中保存和加载

最后，我们在Unity中保存和读取我们房间Mesh

• 返回 Visual Studio，在SpatialMappingObserver.cs中删除之前添加的 TrianglesPerCubicMeter = 1200;

• 重新部署项目到HoloLens，现在我们立平方将会使用回500个三角形

• 通过Edge浏览器，输入HoloLens的IP地址进入HoloLens

• 选择左侧面板中 3D View 选项

• 在Surface reconstruction下选择Update选项

• 在显示的窗口中查看我们通过HoloLens扫描的结果

• 通过Save按钮保存扫描结果

• 在Downloads目录下找到房间的扫描模型SRMesh.obj

• 复制SRMesh.obj 到Unity项目下Assets 文件夹内

• 在Unity编辑器的Hierarchy面板中选择 SpatialMapping

• 在Inspector中找到Object Surface Observer (Script) 组件

• 点击Room Model 右边的圆圈，并在弹出的窗口中选中SRMesh

• 点击 Unity 上方 Play 按钮进入预览模式

• SpatialMapping组件将读取房间模型的网格，并让你能在Unity中使用它们

• 切换到 Scene 窗口，你将看到你房间模型

• 再次点击 Play 来离开预览模式

NOTE: 下次进入预览模式时，Unity将默认读取保存的房间网格

Chapter 2 – 可视化

目标：

• 学习Shader基本知识

• 将周围景物进行可视化

步骤

• 在Unity Hierarchy 面板中，选中SpatialMapping

• 在 Inspector 面板中, 找到 Spatial Mapping Manager (Script) 组件.

• 点击 Surface Material 右侧的圆圈，并在弹出窗口中找到并选择 BlueLinesOnWalls 素材.

• 在 Project 面板中找到 Shaders 文件夹, 通过双击打开 BlueLinesOnWalls ，并在Visual Studio中查看该Shader。

• 这是个简单的像素shader, 它将实现以下效果：

1. 将顶点的坐标转换到世界坐标中

2. 通过检验顶点的法向量确认像素是否是垂直的

3. 改变渲染像素的颜色

编译与部署

• 在Unity中点击 Play 进入预览模式

• 房间mesh(默认从已保存的数据中读取)中的竖直表面将被渲染成蓝色的线条

• 通过上方的 Scene 查看整个房间在Unity中显示的效果

• 在 Project 面板, 找到并选择 Materials 文件夹下 BlueLinesOnWalls 材质

• 在 Inspector 修改 LineScale 和 LinesPerMeter 的值来改变墙面的显示效果

• 点击 Play 退出预览模式

• 编译和部署到HoloLens来查看真实效果

尽管Unity提供了很好的预览材质，但是通过设备来查看渲染效果也是不错的选择

Chapter 3 – 处理

目标：

• 学习处理空间映射的数据，使其可以在应用中被使用

• 分析空间映射数据找到平面并删去三角形

• 用屏幕替代图形

步骤

• 在Unity的Project 面板的Holograms 文件夹, 找到SpatialProcessing

• 拖拽SpatialProcessing 到 Hierarchy 面板

SpatialProcessing prefab 包含了处理空间映射数据的组件。SurfaceMeshesToPlanes.cs将找到并生成平面。我们将在应用中使用平面来替换墙面、地板和天花板。此prefab包含了可以从空间映射mesh删除顶点的脚本RemoveSurfaceVertices.cs 。这个脚本可以用来在mesh上创建空洞，也可以删除不需要的多余三角形(已经使用平面进行替换)。

• 在Unity的Project 面板中，打开Holograms文件夹，找到SpaceCollection

• 拖拽SpaceCollection到Hierarchy面板

• 在Hierarchy面板中，选中SpatialProcessing

• 在Inspector面板中找到Play Space Manager (Script)组件

• 双击PlaySpaceManager.cs并通过Visual Studio打开脚本

PlaySpaceManager.cs包含了一些特定代码，我们增加一些方法来开启以下功能：

1. 当超出时间(10秒)限制时，停止收集空间映射数据

2. 对空间映射数据进行处理：

1. 使用SurfaceMeshesToPlanes创建一些平面墙面、地板以及天花板等

2. 使用SurfaceMeshesToPlanes删除在平面范围内的表面三角

3. 生成一些全息图并将他们放置到用户附近的墙面和地板上

完成PlaySpaceManager.cs标记的代码练习，或者使用下面的已完成的脚本替换该脚本:

PlaySpaceManager.cs

13.3 KB

部署和编译

• 在部署到HoloLens前，点击Unity的 Play按钮进入play模式

• 在读取完room mesh后，等待10秒候开始处理空间映射的mesh

• 当处理结束，地板、墙面和天花板将被屏幕替代

• 在所有平面都被检测完毕候，可以看到一个太阳系出现在相机附近的桌面或地板上

• 在相机附近的墙上能够看到两张壁画。如果在 Game mode找不到，切换到 Scene 再查看

• 点击 Play按钮退出play mode

• 编译和部署到HoloLens上

• 等待完成扫描和处理空间映射数据

• 当看到平面时，在视野中找找太阳系和油画

Chapter 4 – 放置

目标

• 检测一个图形是否合适放在表面上

• 当图形能/不能放到一个面上时，反馈信息给用户

步骤

• 在Unity的 Hierarchy面板，选中SpatialProcessing

• 在 Inspector面板，找到脚本组件 Surface Meshes To Planes (Script)

• Change the Draw Planes property to Nothing to clear the selection.

• 切换 Draw Planes属性到 Nothing 情空所有选项

• 切换 Draw Planes 属性到 Wall ，这样只有墙会被渲染成平面

• 在 Project 面板下Scripts 文件夹中，双击点开 Placeable.cs

Placeable 已经绑定到了壁画和太阳系投影的盒子上。我们所要做的就是取消注释掉的代码，使其可以完成一下的效果：

1. 通过全息物体的边缘方块中心和各角发射出射线来计算全息物体是否合适放置在该面上

2. 通过检测表面的法线检查是否足够光滑，来判断是否可以将全息物体放置上

3. 在检测替换时渲染一个包围全息物体的方块，表示它的尺寸

4. 创造一个阴影在全息物体下方/后方，显示其将被放置到的地面/墙面

5. 如果全景景物不能放置在表面上，将阴影渲染成红色，能则渲染成绿色

6. 根据表面类型(水平/竖直)来调节全息物体，使其切合表面

7. 平缓的将全息物体替换到选择的表面

取消注释练习中的全部代码，或直接使用下面的脚本：

Placeable.cs

77.6 KB

编译和部署:

• 编译和部署项目到HoloLens

• 等待扫描和处理空间映射数据完成

• 当看到太阳系，注视在投影盒并tap来选择它进行移动。

• 转移头部来注视房间的其他位置。投影盒会跟随你的视线移动。当投影盒下方的的阴影变成红色，则无法将投影盒放到该位置。当阴影变成绿色，则可以通过tap放置它

• 找到并选择一张墙上全息壁画来移动它到另一个位置。需要注意的是，油画不能放在地板或天花板上。

Chapter 5 – 遮挡

目标

• 判断全息物体是否被空间映射mesh遮挡

• 使用不同的遮挡技术来打到不同效果

步骤

首先我们需要让空间映射mesh遮挡其他的全息物体而不遮挡真实世界

• 在 Hierarchy 面板，选择 SpatialProcessing

• 在 Inspector 面板，找到脚本组件 Play Space Manager

• 点击 Secondary Material 属性右侧的圆圈

• 找到并选择 Occlusion 材质后关闭窗口

接下来增加一些特殊状态到Earth，当它背其他全息物体(太阳)或空间映射mesh遮挡时，会有个蓝色高亮的效果

• 在 Project 面板下的 Holograms 文件夹中,展开 SolarSystem .

• 选中 Earth.

• 在 Inspector 面板中, 找到 Earth’s 的素材 (底部组件).

• 在 Shader drop-down ，将shader换成 Custom > OcclusionRim 。这将在Earth背其他物体遮挡时进行渲染

最后开启太阳系中行星的x-ray视野效果。修改PlanetOcclusion.cs (位于Scripts\SolarSystem 文件夹下)来打到一下效果:

1. 判断某个行星是否背空间映射layer遮挡(room mesh或者其他行星)

2. 当行星背空间映射layer遮挡时，使用边框线来展示它

3. 当行星未被遮挡时，隐藏它的边框线

跟着PlanetOcculustion.cs进行练习，或者直接使用以下文件:

PlanetOcclusion.cs

6.2 KB

编译与部署

• 编译和部署应用到HoloLens

• 等待扫描和处理空间映射数据完成(完成后将看到蓝色的线条出现在墙面上)

• 找到和选择太阳系投影盒，并将其放在一个墙或面后

• 在一些面候，对应壁画或者投影盒的位置，能看到一些基本的遮挡效果

• 观察Earth，当它被其他全息物体或平面遮挡在时，它表面上会出现一些蓝色的高亮效果

• 当行星被墙面或其他表面遮挡时，你可以通过x-ray视视角看到他们的边框

结束语

恭喜!你已经完成了 Holograms 230 – Spatial Mapping 空间映射的练习

• 你已经学会如何扫描周边环境并在Unity中读取它的全息图数据

• 你也学会了一些shader的基础，知道如何运用素材对world进行重绘

• 你也学会了一些处理技术，用于找到平面和移除mesh上的三角形

• 你已经可以移动和替换表面上的全息物体

• 你也实验了一些遮挡特效，并能够利用x-ray视角