如何仅使用SceneKit编辑器在ARKit中创建Portal效果？

Question

我想创建一个原型like this one：仅使用Xcode SceneKit Editor。我发现一个answer，其中用简单的SCNPlane对象以编程方式创建房间，并按照渲染顺序进行操作。

但是，我想整理一些细节，例如下载房间的3D模型并使之只能通过门户访问。我正在尝试直接在Xcode的SceneKit编辑器中转换此部分来实现相同的效果：

//a. Create The Left Wall And Set Its Rendering Order To 200 Meaning It Will Be Rendered After Our Masks
    let leftWallNode = SCNNode()
    let leftWallMainGeometry = SCNPlane(width: 0.5, height: 1)
    leftWallNode.geometry = leftWallMainGeometry
    leftWallMainGeometry.firstMaterial?.diffuse.contents = UIColor.red
    leftWallMainGeometry.firstMaterial?.isDoubleSided = true
    leftWallNode.renderingOrder = 200

    //b. Create The Left Wall Mask And Set Its Rendering Order To 10 Meaning It Will Be Rendered Before Our Walls
    let leftWallMaskNode = SCNNode()
    let leftWallMaskGeometry = SCNPlane(width: 0.5, height: 1)
    leftWallMaskNode.geometry = leftWallMaskGeometry
    leftWallMaskGeometry.firstMaterial?.diffuse.contents = UIColor.blue
    leftWallMaskGeometry.firstMaterial?.isDoubleSided = true
    leftWallMaskGeometry.firstMaterial?.transparency = 0.0000001
    leftWallMaskNode.renderingOrder = 10
    leftWallMaskNode.position = SCNVector3(0, 0, 0.001)

在编辑器中分为两个平面：

我负责为它们分别设置isDoubleSided和renderingOrder，并且使第二个透明（使用“漫反射颜色”上的Alpha）。

不幸的是，在AR中显示时，此模式无效。 .scn文件可用here。

Answer 1

  

您的示例中的虚拟世界隐藏在墙后。为了获得类似于所展示电影中的门户，您需要打开墙壁（在其中有入口），而不是阻挡3D对象的平面。 portal's entrance的Alpha通道应类似于下图的右部分：

另外，在SO帖子ARKit hide objects behind walls和ARKit – Rendering a 3D object under an invisible plane中查看我的答案，以检查如何设置隐形材料。

代码可能像这样：

portalPlane.geometry?.materials.first?.colorBufferWriteMask = [] 
portalPlane.geometry?.materials.first?.readsFromDepthBuffer = true
portalPlane.geometry?.materials.first?.writesToDepthBuffer = true
portalPlane.renderingOrder = -1

当然，您可以在Material Inspector中使用属性：

对于门户平面，属性如下：Writes Depth为真，Reads Depth为真，Write to Color为空，Rendering Order（在Node Inspector中）为{{1 }}。

对于门户网站-1（在Node Inspector中）的3D对象大于Rendering Order。

您肯定可以在Xcode的视口中正确观察0。

现在，隐藏的墙会遮盖3D的较大部分以显示真实的街道，并且您会通过门户网站看到3D环境（错误结果在左侧，右边结果在此图片的右侧）。

下一张图片显示了3D墙（在我的情况下是挤压平面）的样子：

  

但是对于门户网站的a hidden effect，您只需要一个3D对象，例如exit（不是墙壁开口），并且此door应该看起来像所显示图片的左侧。 exit的法线必须指向内部，door的法线必须指向外部。两个对象的材料均为单面。

希望这会有所帮助。