基于Unity ARFoundation的传送门项目 - Augmented Reality Portal based on ARFoundation in Unity

This page was last modified on 30 January 2020, I have adjusted the early method “window”, and a better soluation “Door” has been added which is recommended to read.

该页面的最新修改时间为2020年2月4日，新增门动画，调整最初方法“Window”，新增实现方法“Door”，推荐跳至“② Door"处。

There is an ARKit demonstration named Portal created by Japanese developer Kei Wakizuka. By touching screen, the portal will appear in the real space in the screen with correct perspective and space distortion effect. Through the portal, there is a digital world, but is an immersive one because the audience can also enter the world, and the real world will be behind the portal.

2017年，一个名为Portal的ARKit演示，由日本开发者Kei Wakizuka发布。通过触摸屏幕，传送门将出现在屏幕中的真实空间中，具有正确的透视和空间失真效果。通过传送门，有一个数字世界，这是一个身临其境的世界，因为观众也可以进入世界，而现实世界将在传送门后面。

Now there is a variety of similar projects, and most of them are named as Dokodemo Door which is a magical tool in the Japanese manga Doraemon. In the manga, by the Dokodemo Door, Doraemon and his friends can go to anywhere.

现在有各种各样的类似项目，其中大多数被命名为传送门，这是日本漫画《哆啦A梦》中的神奇工具。在漫画中，通过传送门，哆啦A梦和他的朋友们可以去任何地方。

Most Dokodemo Door projects are based on SLAM technology, for example, ARKit, the reason is if the audience use Image-Recognization-based AR technology, it is not so easy to enter into the digital world because the audience has to hold the device aiming on the image which will be a terrible experience. But I will keep my experience on both technology, there must be more than one possibility as Dokodemo Door.

大多数Dokodemo Door项目都是基于SLAM技术的，例如ARKit，原因是如果观众使用基于图像识别的AR技术，进入数字世界并不容易，因为观众必须拿着设备瞄准图像，这将是一种可怕的体验。但是我会保留我在这两种技术上的经验，作为Dokodemo门，必须有不止一种可能性。

① 窗 Window

※ Now referencing https://www.youtube.com/watch?v=cHhxs12ZfSQ to upgrade this part.

My first try is using DepthMask shader. The idea is “a mask object using the Depth Mask shader. This object will be drawn just after regular opaque objects, and will prevent subsequent objects from being drawn behind it.”

我的第一次尝试是使用DepthMask着色器。这个想法是“使用深度蒙版着色器的蒙版对象。该对象将在常规不透明对象之后绘制，并将防止后续对象在其后面绘制。

You can get Unity example project here in Github （In this project I also attached a Post-processing function according to this tutorial）Updated in 2020.1

你可以在Github中获取Unity示例项目 （在这个项目中，我还根据本教程附加了一个后处理函数）于2020年1月最后更新

1. Unity组件 Components

It’s a tutorial for AR Portal, so please make sure you have set up an AR environment in Unity first, including installed ARFoundation, ARKit (or ARCore) in Package Manager, and have created AR Camera in the scene, and make sure you know how to use image tracking function.

这是增强现实的传送门的教程，因此请确保您已首先在Unity中设置了AR开发环境，包括在包管理器中安装了ARFoundation，ARKit（或ARCore），并在场景中创建了AR摄像机，并确保您知道如何使用图像跟踪功能。

1. 创建一个物理大小的游戏对象“plane”（提示：默认plane的大小为 10 米）并将其命名为“参考图像”。Create a physical-size gameobject “plane” (Tips: the size of a default plane is 10 meter) and name it as “ReferenceImage” ;
2. 将带有参考图像的材质作为“参考图像”的纹理。Apply the material with your reference image as the texture for the base color on the ReferenceImage;
3. 根据 ReferenceImage，创建4个名为“DepthMask”的游戏对象“平面”，并使用“DepthMask.shader”在其上应用材质。According to ReferenceImage, create 4 gameobjects “plane” named “DepthMask” and apply the material using “DepthMask.shader” on them;
4. 创建房间，并将其移动到Depth Mask后面。Create your room, and move it behind the DepthMask.

2. 着色器 Shaders

1.DepthMask.shader

 Shader "Custom/DepthMask" {
  
     SubShader {
         // Render the mask after regular geometry, 
         //but before masked geometry and
         // transparent things.
  
         Tags {"Queue" = "Geometry-10" }
  
         // Don't draw in the RGBA channels; just the depth buffer
  
         ColorMask 0
         ZWrite On
  
         // Do nothing specific in the pass:
  
         Pass {}
     }
 }

② 门 Door

You can get Unity example project here in Github. Updated in 2020.1

你可以在Github中获取Unity 示例项目。2020.1 中更新

I learnt from these two tutorials:

以下两个教程帮助到我理解以上概念：

Guidev’s AR Portal Tutorial with Unity

Pirates Just AR’s How To Unity AR Portal

1.组件 Components

It’s a tutorial for AR Portal, so please make sure you have set up an AR environment in Unity first, including installed ARFoundation, ARKit (or ARCore) in Package Manager, and have created AR Camera in the scene.

In the SampleScene, you might understand and check how it works.

在 SampleScene 中，您可以了解并检查它是如何工作的。

1.AR Camera

1. 将组件“Rigidbody”和“Box Collider”添加到AR Camera。Add Component “Rigidbody” and “Box Collider” to AR Camera
2. 取消选中“Use Gravity”，并在“Rigidbody”中选中“Is Kinematic”。Uncheck “Use Gravity” and check “Is Kinematic” in “Rigidbody”
3. 选中“Box Collider”中的“Is trigger”。Check “Is trigger” in “Box Collider”
4. 将“Box Collider”的大小设置为 x 0.1、y 0.1、z 2.5。Set “Box Collider”'s size to x 0.1, y 0.1, z 2.5

2.InnerWorld

1. 像往常一样创建空对象。Create empty as usual
2. 确保在InnerWorld中的任何游戏对象中使用的材质（天空或其他特殊对象除外）应使用着色器“SpecularStencilFilter.shader”，该着色器可在下面找到。Make sure the materials using in any gameobject in InnerWorld except Sky or other special objects, should use the shader “SpecularStencilFilter.shader” which can be found below.

※ If you do need the materials separate just go inside the importer settings of the object go the the materials tab and use under location “Use External Materials (Legacy)”

※如果需要使用对象上的现成材质，只需进入对象的导入器设置，转到材料选项卡并在“Use External Materials (Legacy)”位置下实现转换

3.Door

1. 门的框架可以使用任何材料，但材质使用着色器“SpecularStencilFilter.shader”或“PortalDoor.shader”，您可以在下面找到。The frame of the door can use any materal but the materials using shader “SpecularStencilFilter.shader” or “PortalDoor.shader” which you can find below
2. 创建游戏对象平面或四面，并将其重命名为“Portal”。Create a gameobject Plane or Quad and rename it as “Portal”
3. 在门户上添加组件“Box Collider”并调整大小。Add component “Box Collider” on Portal and adjust the size
4. 选择Portal>Box Collider>Is Trigger。Select Portal>Box Collider>Is Trigger
5. 添加组件“PortalManager”，可以在下面找到。Add component “PortalManager” which can be found below
6. 将“InnerWorld”拖入Portal>PortalManager>Inner World。Drag “InnerWorld” into Portal>PortalManager>Inner World
7. 调整Portal>PortalManager>Materials，并拖动“InnerWorld”中使用的每种材质到 Materials列表中。Adjust Portal>PortalManager>Materials, and drag every materials using in the “InnerWorld” into Materials list
8. 将Portal材质的着色器调整为“PortalDoor.shader”。Add the material using Shader “PortalDoor.shader” on Portal
   

4. 具有动画的门 Animated Door

The door has an animator with animations, and the button on canvas is used for controlling the door, with a script names DoorController.cs to trigger the animations.

门有一个带 animation 的 animator 组件，界面上的按钮用于控制门，门上有一个脚本名为 DoorController.cs 来触发动画。

The method won’t be discussed here, since it’s not necessary for Portal, for further information, you can check this tutorial which I will recommended.

该方法不会在这里讨论，因为它对传送门不是必需的，有关更多信息，您可以查看我将推荐的教程。

5.里世界的天空 SkySphere

1. 创建游戏对象“sphere”并重命名“SkySphere”。Create gameobject “sphere” and rename “SkySphere”
2. 在SkySphere上添加组件“Video Player”，并将您的360度视频࿰