How to create a Portal effect in ARKit just using the SceneKit editor?

Question

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

Answer 1

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.