SceneKit 3D Programming for iOS: Getting Started

Have you ever wanted to make your own video game? Or maybe you want to make your iOS app stand out by adding beautiful 3D graphics? The world of 3D graphics programming can be intimidating. Between shaders, samplers, mipmaps and tessellation, it’s hard to know where to start. Fortunately, on iOS, you can hit the ground running with SceneKit, Apple’s high-level API for 3D programming!

SceneKit handles a lot of the tedious work of 3D programming for you, allowing you to concentrate on the content that makes your game or app unique. In low-level APIs like Metal, you’re left to grapple with physics and mathematics. SceneKit, on the other hand, abstracts away a lot of this complexity, making it easy to program your scene in code.

Alternatively, you can use Xcode’s powerful Scene Editor to lay out scenes, similar to using Interface Builder for storyboards. What’s more, SceneKit integrates smoothly with everything you might need to create your blockbuster video game: Metal, GameplayKit, Model I/O and more!

In this tutorial, you’ll propel a bland 2D solar system app into an interactive 3D world using SceneKit. Along the way, you’ll learn about:

• The fundamentals of 3D programming.
• Creating and modifying scenes in code or in the Scene Editor.
• Nodes, geometries and materials.
• How lighting determines the look of your scene.
• Changing what the user sees with cameras and constraints.

Get ready to step into the world of 3D graphics!

Getting Started

Download the starter project by clicking the Download Materials button at the top or bottom of the tutorial.

Open the starter project in Xcode, then build and run.

Solar Scenes is a beautiful, informative app designed to teach people facts about the solar system they live in. At least, it will be when you’re done with it.

Right now, it’s missing the beautiful part. It’s your job to add it. :]

Solar Scenes covers only five planets so far:

• Mercury
• Venus
• Earth
• Mars
• Saturn

When you’re finished with this tutorial, you’ll be ready to add the missing planets — and maybe a few extra creations of your own!

Exploring Solar Scenes

In Xcode, take a look at the structure of the app in the Project navigator.

Here’s what each group does:

• Data Model: Hosts the different planets and some facts about them.
• UI: Contains various SwiftUI controls that style the current UI.
• ContentView.swift: With help from ViewModel.swift, this is the body of the app., Here, you’ll load the SceneKit scene that makes the app come to life.

Creating Your First Scene

To create your scene, you’ll use Xcode’s Scene Editor to manage a scene file. In Xcode’s menu bar, select File ▸ New ▸ File… and select the SceneKit Scene File template.

Click Next, and name the file Solar Scene.

Then, click Create. Xcode’s Scene Editor will load your first blank scene file.

If you don’t see the camera node listed on the left, open the Screen graph by selecting the Scene Graph View button in the lower-left corner of the scene:

SceneKit uses scene graphs to organize scenes as a tree of nodes. The scene graph starts with a root node, and you add any content for your scene as child nodes under that root node.

A node is nothing more than a location; it has no behavior or appearance. Despite this, nodes are the heart of your scene. To add anything to your scene, you’ll need to attach it to a node.

Your scene graph already comes with one child node, which has one attachment:

The camera node has a camera object attached to it. You can have as many cameras in your scene as you want, but you’ll need at least one to see anything.

Loading a Scene

To see your scene in action inside the app, you’ll need to create a SceneView. Open ContentView.swift.

First, import SceneKit at the top of the file:

import SceneKit

Next, add this inside ContentView:

// 1
static func makeScene() -> SCNScene? {
  let scene = SCNScene(named: "Solar Scene.scn")
  return scene
}

// 2
var scene = makeScene()

In the code above, you:

1. Create your scene from your scene file.
2. Call makeScene() to load your scene.

Now, you need to get a reference to your camera node. Below body, just before the closing brace of ContentView, add this:

func setUpCamera(planet: Planet?) -> SCNNode? {
  let cameraNode = scene?.rootNode
    .childNode(withName: "camera", recursively: false)
  return cameraNode
}

You’ll expand on this later. For now, setUpCamera(planet:) simply grabs a reference to your camera node.

Finally, you’re ready to create your scene view. Near the start of body, remove ColorPalette.secondary and its view modifier. Then, add this:

SceneView(
  // 1
  scene: scene,
  // 2
  pointOfView: setUpCamera(planet: viewModel.selectedPlanet),
  // 3
  options: [.allowsCameraControl]
)
// 4
.background(ColorPalette.secondary)
.edgesIgnoringSafeArea(.all)

You’ve replaced the blank background of the app with a SceneView. Here’s what’s happening, step by step:

1. Choose the scene for the view to display.
2. The scene view’s pointOfView is the camera that will display the scene. Some games swap between multiple cameras by using this property to change the current point of view.
3. You can control SceneView‘s behavior using a set of options. Here, .allowsCameraControl lets the user manipulate the camera.
4. Set the scene view’s background color, which you’ll see while the scene loads, and stretch the scene across the entire window.

At last, you’re ready to see your first scene! Build and run.

It’s not much, but it’s pretty impressive considering how little code you’ve written so far. Solar Scene.scn provides a default background and camera, and your scene view’s allowsCameraControl option lets you scroll and zoom around the scene freely. Best of all, you accomplished this without having to write a single line of code.

Right now, you have a camera, but nothing to see. Next, you’ll add a sun to test your scene.

Adding Objects

Open Solar Scene.scn. At the top right of the Scene Editor, click the plus (+) button to access the Object Library.

Find the Sphere object and drag it into your scene graph, just below the camera node.

With sphere selected, click it and change its name to sun. If you can’t see it in the scene editor, zoom in or out to to get a good view of your sun:

It doesn’t look like much. Right now, your sun is a simple node with a geometry object attached.

Remember, nodes have no appearance or behavior by default. SceneKit includes a variety of geometric shapes that you can use to give nodes an appearance, but you’re not limited. Using Metal or an external 3D modeling tool, you can create your own custom geometries.

While you’ve made a sphere, it doesn’t look much like a sun. So, to give your sun a more fitting appearance, you’ll modify its material.