SceneKit: first steps — Part 1: Just a box
Background
In the spirit of #showyourwork, and learning in the open, I’ve decided to document my journey as I teach myself about SceneKit on iOS and OS X, and modern 3D APIs.
Early 1980s
My first foray into 3D was sometime in the early 1980s, when I played with drawing a 3D model of the earth. My inspiration was most likely Robert Tinney’s cover for the May 1979 issue of BYTE magazine:
Unfortunately inspiration didn’t equal reality on my home-brewed TRS-80 clone. Its 128×48 graphics mode was a bit limiting, and state-of-the-art 3D on that platform looked like subLogic Flight Simulator:
Mid 1990s
In the mid 1990s I was experimenting with projecting from 3D to 2D, then drawing directly to Windows’ GDI API. Later, I played around with Microsoft’s WinG API, then Direct3D.
Early 2000s
By about 2000, my inspiration was the movie Toy Story, and the game Train Simulator (fuelled by my then two-year-old son’s train obsession). I still have a bunch of books with titles like OpenGL Programming Guide (the “red book”), Advanced RenderMan, Real-Time Rendering, and Advanced Animation and Rendering Techniques.
At the time I played around with modelling the front of a locomotive, in code, and rendering it with OpenGL.
Now
Today’s inspiration are games like The Witness and Monument Valley:
Getting started
Enough history. Let’s get started!
Through this series, I’m being guided by Apple’s SceneKit documentation, David Rönnqvist’s SceneKit article from objc.io, and his excellent iBooks book 3D Graphics with Scene Kit.
I’ll be doing all of these steps in a simple single-view application. The scene is presented in an SCNView
that completly covers the app’s main view. The SCNView
from the storyboard is accessed through an @IBOutlet
called sceneView
. The complete listing for the view controller can be found at the bottom of this post.
An empty scene
The first step is to create an empty scene. Note that I set the scence view’s background color to black, for that super-spooky look (and to make sure that the simple lighting looks realistic). I also get a reference to the scene’s root node, as a convenience for later:
let scene = SCNScene()
sceneView.scene = scene
sceneView.debugOptions = [] // [.ShowLightExtents, .ShowBoundingBoxes]
sceneView.backgroundColor = UIColor.blackColor()
sceneView.allowsCameraControl = true // allow dragging the camera around
let rootNode = scene.rootNode
An actor
Next up we need something to look at. In this first test, it’s going to be a 1 × 1 × 1 cube with rounded edges. SceneKit provides the SCNBox
class which creates some geometry in the shape of a rounded box. Add one of those to a node, and add that node to the root node of the scene, and we have our boxy actor:
func createBoxNode() -> SCNNode {
// make a 1×1×1 box
let box = SCNBox(width: 1, height: 1, length: 1, chamferRadius: 0.1)
let boxNode = SCNNode(geometry: box)
return boxNode
}
…
let boxNode = createBoxNode()
rootNode.addChildNode(boxNode)
Camera
At this point the scene will render, but with a default light and camera. The position of the default camera means that the cube will fill the entire viewport. To fix that we need our own camera.
func createCameraNode(lookingAt target: SCNNode) -> SCNNode {
let lookAt = SCNLookAtConstraint(target: target)
lookAt.gimbalLockEnabled = true
let camera = SCNCamera()
camera.xFov = 60.0;
let cameraNode = SCNNode()
cameraNode.camera = camera
cameraNode.constraints = [lookAt]
return cameraNode
}
…
let cameraNode = createCameraNode(lookingAt: boxNode)
cameraNode.position = SCNVector3(x: 2, y: 1.5, z: 2.5)
rootNode.addChildNode(cameraNode)
Here I’ve setup a camera with a field-of-view of 60º in the x-axis (xFov
), a constraint that keeps the camera looking at the box, and with gimbal-lock enabled to keep the horizon level if the camera moves.
With the camera moved into place, here’s what we can see (remember that we’re still using the default light source):
Lights
So, things don’t look great with the default lighting. Let’s replace the defaults with our own light:
func createOmniDirectionalLightNode() -> SCNNode {
let omniLight = SCNLight()
omniLight.type = SCNLightTypeOmni
omniLight.color = UIColor.init(red: 1, green: 0.75, blue: 0.75, alpha: 1)
omniLight.attenuationStartDistance = 1;
omniLight.attenuationEndDistance = 10;
let omniLightNode = SCNNode()
omniLightNode.light = omniLight
return omniLightNode
}
…
let omniLightNode = createOmniDirectionalLightNode()
omniLightNode.position = SCNVector3(x: 1, y: 1.5, z: 1)
rootNode.addChildNode(omniLightNode)
I’ve placed a light pink (rose gold!) omnidirectional light to the right, above, and in-front of the box. I’ve also used attenuationStartDistance
and attenuationEndDistance
to make sure that the brightness falls off with distance from the light. Here’s what it looks like now:
The cube is starting to look better, but some better materials and texture could definitely spruce things up. Next time I’ll look at adding some of those.
ViewController.swift
class ViewController: UIViewController {
@IBOutlet weak var sceneView: SCNView!
override func viewDidLoad() {
super.viewDidLoad()
// create a brand-new scene
let scene = SCNScene()
let rootNode = scene.rootNode
let boxNode = createBoxNode()
rootNode.addChildNode(boxNode)
let omniLightNode = createOmniDirectionalLightNode()
omniLightNode.position = SCNVector3(x: 1, y: 1.5, z: 1)
rootNode.addChildNode(omniLightNode)
let cameraNode = createCameraNode(lookingAt: boxNode)
cameraNode.position = SCNVector3(x: 2, y: 1.5, z: 2.5)
rootNode.addChildNode(cameraNode)
sceneView.pointOfView = cameraNode
sceneView.scene = scene
}
func createBoxNode() -> SCNNode {
// make a 1x1x1 box
let box = SCNBox(width: 1, height: 1, length: 1, chamferRadius: 0.1)
let boxNode = SCNNode(geometry: box)
return boxNode
}
func createOmniDirectionalLightNode() -> SCNNode {
let omniLight = SCNLight()
omniLight.type = SCNLightTypeOmni
omniLight.color = UIColor.init(red: 1, green: 0.75, blue: 0.75, alpha: 1)
omniLight.attenuationStartDistance = 1;
omniLight.attenuationEndDistance = 10;
let omniLightNode = SCNNode()
omniLightNode.light = omniLight
return omniLightNode
}
func createCameraNode(lookingAt target: SCNNode) -> SCNNode {
let lookAt = SCNLookAtConstraint(target: target)
let camera = SCNCamera()
let cameraNode = SCNNode()
cameraNode.camera = camera
cameraNode.constraints = [lookAt]
return cameraNode
}
}