Getting Started with Scene Kit

Scene Kit is Apple’s framework for developing 3D applications. At first, it was only available on OS X, but it was added to iOS at the release of iOS 8. There are many ways to create a 3D application for iOS. Some of the more popular ways include Unity 3D or Unreal Engine. The advantages of using Scene Kit is that it is developed by Apple, so it will always work with the latest OS and it is integrated directly into Xcode! Lets get started.

Step 1: Requirements

  1. First, you are going to need a computer running OS X Yosemite or later.
  2. Second, you are going to need Xcode 7.2

That’s all you need to get started!

Step 2: Creating the Project

When you open up Xcode, go to File > New > Project. You should see a window pop up and ask you some options. Go under iOS > Application and choose Game. Then click Next.

In the next screen, you should see other options, including the language, technology, and device. Name the project GettingStartedWithSceneKit and change you’re settings to look like mine.

Finally, click create.

Step 3: The Default Scene and Running on the Simulator

When Xcode created your game, it added sample code into the project to help you get started. To see your code in action, you can run it on the simulator or on an actual device. For this tutorial, we will just run it on the simulator. Look in the top left of the Xcode window. Next to the minimize button is a play button. These are the controls to run your application.

Options for Running your Application

Leave the options for now and press play. You should see a rotating spaceship and information printed on the bottom of the simulator. If your screen is too small for the simulator, go to Window > Scale and choose the scale you would like. Keep in mind that when creating a real app, it is better to test on an actual device because the information on the simulator can be unreliable. Now that you can run on the simulator, it’s ready to start your first scene.

Step 4: Your First Scene

At the end of this tutorial, we will have a nice Earth floating in space! Replace the code in GameViewController.swift with this:

import UIKit
import QuartzCore
import SceneKit
class GameViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
    let scene = SCNScene() // 1
    let scnView = self.view as! SCNView // 2
    scnView.scene = scene // 3
    scnView.allowsCameraControl = true // 4
    scnView.autoenablesDefaultLighting = true // 5
    scnView.showsStatistics = true // 6
    scnView.backgroundColor = UIColor.blackColor() // 7
  }
  override func prefersStatusBarHidden() -> Bool {
    return true
  }
}

Most code in here is basic setup code so I’ll only go over the numbered lines.

Line 1 creates a new scene kit scene to put all of our objects into. The second line retrieves the scene view set up for us in Main.storyboard. Line 3 puts our scene into the scene view so the user can see our scene. The fourth and fifth lines apply default settings to our scene. Each scene needs a camera to see through and lights to light your scene. These 2 lines set up the default camera and lighting. Line 6 tells scene kit to show information in the bottom bar and line 7 sets the background to black.

If you run in the simulator now, all you will get is a black screen. We’ll take care of that next.

Step 5: Adding Nodes

What kind of game has just a black screen? Probably no fun games. Let’s start with adding a sphere into our game to represent Earth. Add these lines under scnView.backgroundColor = UIColor.blackColor().

let sphereGeometry = SCNSphere(radius: 2) // 1
let sphereNode = SCNNode(geometry: sphereGeometry) // 2
sphereNode.position = SCNVector3Zero // 3
scene.rootNode.addChildNode(sphereNode) // 4

This is all we need to do to add a sphere to our scene. Each node contains a mesh, or the vertices that make up the shape. This allows you to have complex shapes in your scene. sphereGeometry holds the mesh information that we add to our node in line 2. Line 3 simply sets the position of the sphere in our scene. For now, we can just leave it at the center.

A Sample Scene Graph

Line 4 is special. It adds the sphere node to the scene. You may notice however, that it doesn’t add it to the scene. It adds it to the rootNode. In scene kit, a heirarchy of nodes is created, commonly referred to as a scene graph. Nodes inside of nodes…Node-ception! The rootNode is the highest node. It is not a sub-node of any other node. When you want to add a node to the scene, you can add it to the rootNode or as a sub-node of other nodes in the scene graph. If we run our code now, we have a sphere in the center of the screen.

What we have so far.

Step 6: The Camera

While setting up the camera like this is easy, it isn’t good in a real app. It’s better to set up the camera manually. Then we can put it in any position we want and rotate it to whatever angle desired. Comment out this line:

scnView.allowsCameraControl = true

Add this under where we set up the sphere:

let cameraNode = SCNNode()
cameraNode.camera = SCNCamera()
cameraNode.position = SCNVector3Make(0, 0, 8)
scene.rootNode.addChildNode(cameraNode)

A camera is very easy to set up. The rotation is already set up for us, so there is no need to change it. Each node has a camera property and we set that to a SCNCamera(). Then we set the position so we can see the sphere and then add the camera into our scene.

Now we have a camera!

Step 7: Lighting

Since we shouldn’t set up the camera with the default settings, you might’ve guessed that we shouldn’t set up lights like this either. It’s better to set them up manually. Comment out this line:

scnView.autoenablesDefaultLighting = true

Then, under where we set the camera properties, add this:

let omniLight = SCNLight()
omniLight.type = SCNLightTypeOmni
let omniLightNode = SCNNode()
omniLightNode.light = omniLight
omniLightNode.position = SCNVector3Make(10, 10, 10)
scene.rootNode.addChildNode(omniLightNode)

This is basically the same thing we’ve done for everything else. We create a light named omniLight and set it’s type to SCNLightTypeOmni. Then we make a SCNNode and set it’s light property to omniLight. After that we set it’s position and add it to the scene. If we run now, we get a cool lighting effect with only one thing missing, the texture.

A cool lighting effect!

Step 8: Textures

This step can be completed in just one line of code, but you will need an external image. I found my texture on NASA’s website here. Import it into your project and add this line of code right after let sphereGeometry = SCNSphere(radius: 2).

sphereGeometry.firstMaterial?.diffuse.contents = UIImage(named: "world.topo.bathy.200412.3x5400x2700.png")

This sets the diffuse of the material to a UIImage. If we run our app, Earth is now nicely floating in space.

Hello, World!

Step 9: Final Thoughts

This was just a scratch on the surface of what you can do with Scene Kit. To go further, I’d look into animations, reponding to touch events, and gestures. You can find the completed project files on my GitHub repository here: https://github.com/BrodyEller/articleFiles. I hope you enjoyed this tutorial and good luck with Scene Kit!