如何仅使用 SceneKit 编辑器在 ARKit 中创建 Portal 效果? [英] How to create a Portal effect in ARKit just using the SceneKit editor?

问题描述

我想创建一个原型

我负责为它们设置 isDoubleSided 和 renderingOrder 并且我将第二个设置为透明(在漫反射颜色上使用 alpha).

不幸的是，在 AR 模式下显示时，它不起作用..scn 文件在

另外，看看我在 SO 帖子中的回答:

对于门户平面，属性如下:Writes Depth 为真，Reads Depth 为真，Write to Color 为空，Rendering Order(在 Node Inspector 中)是 -1.

对于门户内的 3D 对象Rendering Order(在 Node Inspector 中)大于 0.

你绝对可以在Xcode的视口中观察到隐藏效果.

现在隐藏墙掩盖了 3D 的更大部分以显示真实街道，您可以通过门户看到您的 3D 环境(错误结果在左侧，右侧结果在此图片的右侧).

下图显示了 3D 墙(在我的例子中是挤压平面)的样子:

<块引用>

但是对于门户的 exit，您只需要一个 3D 对象，例如 door(不是墙壁开口)，并且这个 exit 应该看起来就像呈现图片的左侧一样.door的法线必须指向里面，wall的法线必须指向外面.两个物体的材质都是单面的.

希望这会有所帮助.

I would like to create a prototype like this one: just using Xcode SceneKit Editor. I found an answer where the room is created programmatically with simple SCNPlane objects and playing around with the rendering order.

However, I would like to put together something more elaborated like downloading the 3d model of a room and make it accessible only through the portal. I'm trying to achieve the same effect directly in the Xcode's SceneKit editor converting this part:

//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)

into two planes in the editor:

I took care of setting isDoubleSided and renderingOrder for both of them and I made the second one transparent (using alpha on the Diffuse Color).

Unfortunately, when displaying in AR, mode it doesn't work. The .scn file is available here.

解决方案

A virtual world in your example is hidden behind a wall. In order to get a portal like in the presented movie you need a wall opening (where an entrance is), not a plane blocking your 3D objects. The alpha channel of portal's entrance should look like right part of the following image:

Also, look at my answers in the SO posts: ARKit hide objects behind walls and ARKit – Rendering a 3D object under an invisible plane for checking how to set up invisible material.

The code might be like this one:

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

And, of course, you can use properties in Material Inspector:

For portal plane the properties are the following: Writes Depth is true, Reads Depth is true, Write to Color is empty, Rendering Order (in Node Inspector) is -1.

For 3D objects inside a portal Rendering Order (in Node Inspector) is greater than 0.

You can definitely observe a hidden effect right in Viewport of Xcode.

Now hidden wall masks a bigger part of 3D to show the real street, and you see your 3D environment through portal (wrong result is on the left, right result is on the right part of this picture).

And the next picture shows how 3D wall (in my case it's extruded plane) looks like :

But for exit of the portal you just need a 3D object like a door (not a wall opening) and this exit should look like the left side of presented pictures. The normals of the door must be pointed inside, the normals of the wall must be pointed outside. The material for both objects is single sided.

Hope this helps.

这篇关于如何仅使用 SceneKit 编辑器在 ARKit 中创建 Portal 效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！