CODEWITHSUNDEEP
swiftxcodescenekitaugmented-realityarkit
Claus
Claus

Reputation: 5742

How to create an AR Portal effect 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.

Upvotes: 1

Views: 1460

Answers (1)

Andy Jazz
Andy Jazz

Reputation: 58503

ARKit + SceneKit

enter image description here

A virtual world in ARPortal-like scene must be blocked from user by 3D wall. This wall must have an opening, where the entrance is, through which you'll see the 3D objects of the portal. The wall's material is Occlusion material. This type of material is an invisible material that hides 3D objects rendered behind it but shows a video coming from iPhone's AR camera instead. SceneKit doesn't have such a material out of the box, so let's create it.

enter image description here

This code shows how to programmatically assign an Occlusion material to SceneKit object:

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

This image shows how to set properties in Xcode's Material Inspector:

enter image description here

And this image shows how to set property in Node Inspector:

enter image description here

On the other side, to exit the portal, you need a 3D object like a door. The poly normals of the door should point inward, and the poly normals of the wall with the opening should point outward. The material for both objects is single-sided.

RealityKit

In RealityKit, you are capable of using Occlusion Material out of the box.

portalPlane.model.materials[0] = OcclusionMaterial()

Upvotes: 4

Related Questions