How can i add a 2dView having text in ARkit scene iOS

Question

How can i add a 2dView having text in ARkit scene iOS.How can i add that view in top of a node that won't rotate when we rotate the node.

Answer 1

You can add a SCNPlane and use a SCNLookAtConstraint to so that the plane always looks at the camera.

You can create a custom material and set it's material properties to:

• A color (UIColor or CGColor), specifying a constant color across the material’s surface A number (

• An image (UIImage or CGImage), specifying a texture to be mapped across the material’s surface

• A Core Animation layer (CALayer)
• A texture (SKTexture, MDLTexture, MTLTexture, or GLKTextureInfo)
• A SpriteKit scene (SKScene)

You can also display animated contents using CoreAnimation or SpriteKit but

SceneKit cannot use a layer that is already being displayed elsewhere (for example, the backing layer of a UIView object)

---

Here is an example using SpriteKit:

1. Create your SpriteKit Scene:

e.g.:

let skScene = SKScene(size: CGSize(width: 200, height: 200))
skScene.backgroundColor = UIColor.clear

let rectangle = SKShapeNode(rect: CGRect(x: 0, y: 0, width: 200, height: 200), cornerRadius: 10)
rectangle.fillColor = #colorLiteral(red: 0.807843148708344, green: 0.0274509806185961, blue: 0.333333343267441, alpha: 1.0)
rectangle.strokeColor = #colorLiteral(red: 0.439215689897537, green: 0.0117647061124444, blue: 0.192156866192818, alpha: 1.0)
rectangle.lineWidth = 5
rectangle.alpha = 0.4
let labelNode = SKLabelNode(text: "Hello World")
labelNode.fontSize = 20
labelNode.fontName = "San Fransisco"
labelNode.position = CGPoint(x:100,y:100)
skScene.addChild(rectangle)
skScene.addChild(labelNode)

2. Create your plane and set the scene as your material property

e.g.

let plane = SCNPlane(width: 20, height: 20)
let material = SCNMaterial()
material.isDoubleSided = true
material.diffuse.contents = skScene
plane.materials = [material]
let node = SCNNode(geometry: plane)
scene.rootNode.addChildNode(node)

3. Animate your scene

e.g.

labelNode.run(SKAction.repeatForever(SKAction.rotate(byAngle: .pi, duration: 2)))

Answer 2

Probably worth mentioning that you can also use a couple of other things for contents... A list can be found here... https://developer.apple.com/documentation/scenekit/scnmaterialproperty/1395372-contents

I tried the code from the answer above and it worked fine, but was slowing down my FPS because I have many nodes that need it. And the SKScene is probable quite heavy.

I was able to use an SKView with a SKLabelNode but the problem was that the text would not update visually, My guess would be that I would have to call texture(from:) every time and I figured that would be just as slow SKView texture(from:) https://developer.apple.com/documentation/spritekit/skview/1520114-texture

I saw another way to do it with a CALayer but thought id have the same problem with changing text so I just went with SCNText.

Also worth mentioning SCNBillboardConstraint as an alternative to LookatConstraint https://developer.apple.com/documentation/scenekit/scnbillboardconstraint