Get 3D model's height and its transformed screen coordinates - ios

Question

I'm rendering a Collada (*.dae) file with ARKit. As an overlay of my ARSCNView I'm adding a SKScene that simply shows a message bubble (without text yet).
Currently, I know how to modify the position of the bubble so that it looks like it's always at the feet of my 3D model. I'm doing like this:
func renderer(_ renderer: SCNSceneRenderer, didRenderScene scene: SCNScene, atTime time: TimeInterval) {
if let overlay = sceneView.overlaySKScene as? BubbleMessageScene {
guard let borisNode = sceneView.scene.rootNode.childNode(withName: "boris", recursively: true) else { return }
let boxWorldCoordinates = sceneView.scene.rootNode.convertPosition(borisNode.position, from:sceneView.scene.rootNode.parent)
let screenCoordinates = self.sceneView.projectPoint(boxWorldCoordinates)
let boxY = overlay.size.height - CGFloat(screenCoordinates.y)
overlay.bubbleNode?.position.x = CGFloat(screenCoordinates.x) - (overlay.bubbleNode?.size.width)!/2
overlay.bubbleNode?.position.y = boxY
}
}
However my bubble is always at the feet of the 3D model because I can only get the SCNNode position of my model, where it is anchored. I would like it to be at the head of my model.
Is there a way I can get the height of my 3D model, and then its transformed screen coordinates, so no matter where I am with my phone it looks like the bubble message is always next to the head?

Answer 1

Each SCNNode has a boundingBox property which is the:
The minimum and maximum corner points of the object’s bounding box.
So what this means is that:
Scene Kit defines a bounding box in the local coordinate space using two points identifying its corners, which implicitly determine six axis-aligned planes marking its limits. For example, if a geometry’s bounding box has the minimum corner {-1, 0, 2} and the maximum corner {3, 4, 5}, all points in the geometry’s vertex data have an x-coordinate value between -1.0 and 3.0, inclusive.
If you look in SceneKit Editor you will also be able to see the size of your model in meters (I am saying this simply as a point you can refer to in order to check the calculations):
In my example I am using a Pokemon model with the size above.
I scaled the model (which you likely did as well) e.g:
pokemonModel.scale = SCNVector3(0.01, 0.01, 0.01)
So in order to get the boundingBox of the SCNNode we can do this:
/// Returns The Original Width & Height Of An SCNNode
///
/// - Parameter node: SCNNode
func getSizeOfModel(_ node: SCNNode){
//1. Get The Size Of The Node Without Scale
let (minVec, maxVec) = node.boundingBox
let unScaledHeight = maxVec.y - minVec.y
let unScaledWidth = maxVec.x - minVec.x
print("""
UnScaled Height = \(unScaledHeight)
UnScaled Width = \(unScaledWidth)
""")
}
Calling it like so:
getSizeOfModel(pokemonModel)
Now of course since our SCNNode has been scaled this doesn't help much so obviously we need to take this into account, by re-writing the function:
/// Returns The Original & Scaled With & Height On An SCNNode
///
/// - Parameters:
/// - node: SCNode
/// - scalar: Float
func getOriginalAndScaledSizeOfNode(_ node: SCNNode, scalar: Float){
//1. Get The Size Of The Node Without Scale
let (minVec, maxVec) = node.boundingBox
let unScaledHeight = maxVec.y - minVec.y
let unScaledWidth = maxVec.x - minVec.x
print("""
UnScaled Height = \(unScaledHeight)
UnScaled Width = \(unScaledWidth)
""")
//2. Get The Size Of The Node With Scale
let max = node.boundingBox.max
let maxScale = SCNVector3(max.x * scalar, max.y * scalar, max.z * scalar)
let min = node.boundingBox.min
let minScale = SCNVector3(min.x * scalar, min.y * scalar, min.z * scalar)
let heightOfNodeScaled = maxScale.y - minScale.y
let widthOfNodeScaled = maxScale.x - minScale.x
print("""
Scaled Height = \(heightOfNodeScaled)
Scaled Width = \(widthOfNodeScaled)
""")
}
Which would be called like so:
getOriginalAndScaledSizeOfNode(pokemonModel, scalar: 0.01)
Having done this you say you want to position a 'bubble' above your model, which could then be done like so:
func getSizeOfNodeAndPositionBubble(_ node: SCNNode, scalar: Float){
//1. Get The Size Of The Node Without Scale
let (minVec, maxVec) = node.boundingBox
let unScaledHeight = maxVec.y - minVec.y
let unScaledWidth = maxVec.x - minVec.x
print("""
UnScaled Height = \(unScaledHeight)
UnScaled Width = \(unScaledWidth)
""")
//2. Get The Size Of The Node With Scale
let max = node.boundingBox.max
let maxScale = SCNVector3(max.x * scalar, max.y * scalar, max.z * scalar)
let min = node.boundingBox.min
let minScale = SCNVector3(min.x * scalar, min.y * scalar, min.z * scalar)
let heightOfNodeScaled = maxScale.y - minScale.y
let widthOfNodeScaled = maxScale.x - minScale.x
print("""
Scaled Height = \(heightOfNodeScaled)
Scaled Width = \(widthOfNodeScaled)
""")
//3. Create A Buubble
let pointNodeHolder = SCNNode()
let pointGeometry = SCNSphere(radius: 0.04)
pointGeometry.firstMaterial?.diffuse.contents = UIColor.cyan
pointNodeHolder.geometry = pointGeometry
//4. Place The Bubble At The Origin Of The Model, At The Models Origin + It's Height & At The Z Position
pointNodeHolder.position = SCNVector3(node.position.x, node.position.y + heightOfNodeScaled, node.position.z)
self.augmentedRealityView.scene.rootNode.addChildNode(pointNodeHolder)
}
This yields the following result (which I also tested on a few other unfortunate Pokemon as well):
You will probably want to add a bit of 'padding' as well to the calculation, so that the node is a bit higher up than the top of the model e.g:
pointNodeHolder.position = SCNVector3(node.position.x, node.position.y + heightOfNodeScaled + 0.1, node.position.z)
I am not great at Maths, and this uses an SCNNode for the bubble rather than an SKScene, but hopefully it will point you in the right direction...

Answer 2

you can get borisNode.boundingBox : (float3, float3) to calculate the size of the node, you get a tuple of 2 points, then calculate the heigh by subtracting the y from one point from the other. Finally move your overlay's Y position by the number you get.