Scene Kit Tutorial: Getting Started

Note from Ray: This is an abbreviated version of a chapter from iOS 8 by Tutorials released as part of the iOS 8 Feast to give you a sneak peek of what’s inside the book. We hope you enjoy!

In iOS 7, Apple made a huge push in the casual, mobile gaming space by introducing Sprite Kit, an incredible 2D-graphics framework. Developers had plenty to chew on for a whole year, and Sprite Kit gave everyone the capability to make simple iOS games with relative ease.

However, the 3D space continued to be largely inaccessible, requiring expert knowledge of computer graphics (OpenGL ES), or a sizeable wallet (Unity Pro).

Well, not anymore. :]

At WWDC 2012, Apple introduced Scene Kit to Mac OS X developers, and iOS-only devs like myself felt a little jealous that we weren’t invited to the party. Fortunately, it was just a short matter of time before Scene Kit joined the mobile space, and it’s very exciting to have it available to us in iOS 8!

While the focus of Scene Kit is 3D games, the fact of the matter is that it’s a powerful, easy to access, general-purpose 3D-graphics framework that has marvelous potential for non-gaming apps too.

Scene Kit: The Mac OS X warrior finally comes to iOS!

Scene Kit: The Mac OS X warrior finally comes to iOS!

In this Scene Kit tutorial, you’ll learn how to build a simple Scene Kit app by developing a 3D Carbon Visualizer.

3D visualization is a great option for explaining complex concepts – like chemical compounds, in this case – in a fun, playful, and easily digestible format. Words and diagrams are essential, but Scene Kit can definitely elevate your work to a new level!

Scene Kit Quick Start

By providing a built-in project template, Xcode 6 makes it very easy to get started with Scene Kit. Unlike Xcode 5’s OpenGL Game template, the new version of Scene Kit is a great introduction to the framework, and a solid starting point for a new project. In this section, you’ll take a quick look at this template and familiarize yourself with a basic Scene Kit scene.

Open Xcode and create a new project. Choose the iOS/Application/Game template and click Next.

Type in QuickStart for Product Name, select Swift for Language and select SceneKit for Game Technology. Leave everything else as-is, and click Next. Select a directory of your choice and click Create.

There is no need to examine or modify any code right now, just build and run! You’ll see a simple, rotating 3D plane, similar to the following screenshot:

Feel free to explore the scene using the available gestures (pinch, rotate, pan, tap). Also, be sure to take note of the scene statistics at the bottom of the view, defined by the following symbols:

• fps: frames per second
• ◆: draw calls per frame
• Δ: number of polygons
• •: number of vertices

This particular scene, with all the included functionality, is the result of a single file and about 100 lines of code. That’s how powerful Scene Kit is. :]

Close your QuickStart project now, because you’re going to build a new one from scratch!

Getting Started

First, download the starter pack for this tutorial, unzip the contents and open the Xcode project titled CarbonVisualizer.xcodeproject. Build and run the project to see this screen:

Simple enough. At this stage, the project is very lightweight and takes care of the bulk of the setup steps for you, without writing any significant Scene Kit code just yet. The project contains all the Swift files you need, which you’ll implement incrementally as you work through this tutorial.

Furthermore, Main.storyboard contains a single view controller with two standard UI components, already linked to ViewController.swift. There’s also a new component, a SceneKit View; open up Main.storyboard so you can learn about it a bit more.

SceneKit View is a great out-of-the-box component available from the Object library of Interface Builder. SceneKit View is built for 3D graphics rendering – much like GLKit View – and allows you and/or your designer to set up many defining attributes of a scene quickly. For now though, you’ll be doing most of the work programmatically so you can switch between different solutions with ease.

Let’s get started with Scene Kit!

Your First Scene

With a SCNView already set up, your first step is to create an actual scene to display; but first, a primer on Scene Kit…

Scene Kit is a node-based framework that allows for uncomplicated construction and rendering of powerful scene graphs. The SCNScene object you’ll create and manipulate in this tutorial contains a rootNode property to which you can add several other SCNNode objects as child nodes, thus forming a tree structure like so:

SceneGraph from Apple’s Scene Kit Programming Guide

SceneGraph from Apple’s Scene Kit Programming Guide

One major advantage of this system – especially in relation to this tutorial – is that any transformations applied to a node’s geometry also apply to that node’s children. For example, if a 3D Ferrari lunges forward 10ft, then all of its parts, like the seats and tires, move forward 10ft too – simulating real-world physics. Additionally, every component’s relative position to the car remains unchanged and independent e.g. a seat may tilt back without the car tilting back too.

Scene graph systems are very common in 3D graphics applications and you can read more about them here.

Your First Scene

Now it’s time to sit in the director’s chair and create your first scene! After a quick conference with your casting scouts, you’ve decided to cast a box as the lead actor of your pilot show.

You need to set up a quick test scene first to make sure the box looks good, so add the following function to ViewController.swift, just below viewDidAppear(animated:):

// MARK: Scene
func sceneSetup() {
  // 1
  let scene = SCNScene()
    
  // 2
  let boxGeometry = SCNBox(width: 10.0, height: 10.0, length: 10.0, chamferRadius: 1.0)
  let boxNode = SCNNode(geometry: boxGeometry)
  scene.rootNode.addChildNode(boxNode)
    
  // 3
  sceneView.scene = scene
}

Here’s what this code snippet does:

1. You simply instantiate an empty scene (SCNScene), which will soon evolve into a more complex scene graph with lights, camera and geometry.
2. A box is created by defining a geometry instance (SCNBox) and attaching it to a node (SCNNode), which is then appended to your scene’s root node.
3. Finally, your scene is attached to your sceneView.

Next, add the following line inside viewDidAppear(animated:) just below the call to super:

sceneSetup()

Build and run!

If you’re familiar with OpenGL development, you might be very excited about how you can render an object to your screen so few lines of code :]

However, you can’t tell whether your starring actor is a box or a flat square. How about you add some lighting to help here?

Lighting plays a critical role in any 3D scene and defines the “look and feel” of your work, and can be a bit of work to get perfect. Sometimes – like right now – you just need the bare minimum to get a glimpse of what’s going on. Thankfully, SCNView has a property to accomplish this task by enabling default lighting. Add the following line to your code, just below sceneView.scene = scene in sceneSetup:

sceneView.autoenablesDefaultLighting = true

Build and run to see an improved rendering of your scene:

After shining a little light on the subject, it’s easier to infer depth and see a box taking shape on your screen. SCNView has several powerful built-in features and default lighting is just the touching the surface (pun totally intended).

At the moment, your box is taking up far too much space in your scene, so it would be a good idea to zoom out of the object. The next SCNView property you’ll enable is a helpful debugging feature that allows you to navigate your scene easily. Add the following line to the bottom of sceneSetup to enable camera controls:

sceneView.allowsCameraControl = true

Build and run, then use the following gestures to your interact with your scene:

• Pan (one finger) or rotation: rotates the camera around the scene.
• Pan (two fingers): pans the camera across the scene.
• Pinch: zooms in/out of the scene.

If you’re using the iOS Simulator and having trouble making these gestures, please take a look at the iOS Simulator User Guide for more information.