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

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:

SceneKit 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.

1 answer

  • answered 2018-10-21 00:43 ARGeo

    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 (or hole in a wall), not a plane blocking your 3D objects. The alpha channel of your portal should look like right part of the following image:

    enter image description here

    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:

    func blockingMaterial() -> SCNMaterial {
        let holdout = SCNMaterial()
        holdout.isDoubleSided = true
        holdout.diffuse.contents = CIColor.black
        holdout.colorBufferWriteMask = SCNColorMask(rawValue: 0)
        return holdout
    }
    portalPlane.geometry?.firstMaterial = blockingMaterial()
    

    ...or like this one:

    portalPlane.geometry?.materials.first?.writesToDepthBuffer = true
    portalPlane.geometry?.materials.first?.colorBufferWriteMask = .alpha
    

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

    enter image description here

    enter image description here

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

    enter image description here

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

    enter image description here

    Hope this helps.