SceneKit 3D Programming for iOS: Getting Started

Modifying Materials

On the right of the Scene Editor, in the Inspectors panel, select the Materials inspector.

An object’s material is a set of properties that, when combined with the material’s lighting model, determine how to render each pixel of a geometry. Here, you can change the properties that determine the color of the sun’s sphere geometry.

Next, click the Diffuse color to bring up the Color picker. Navigate to the Sliders tab, then set the drop-down to RGB Sliders. Finally, set the Hex Color # to #F2FF2C.

You can think of a material’s diffuse as the “base color” of an object.

Next, set the color of Illumination to white: #FFFFFF. A material’s illumination lets it define how light hits the object. Even if the geometry is obscured from a light source, setting illumination causes the material to color itself as if it were receiving light.

Build and run.

If you don’t see anything, pan the camera until your sphere comes into view.

Behold, the center of our solar system: the sun!

However, it’s a little dainty at the moment. Next, you’ll make it bigger to provide some scale for the other planets.

In the Inspectors panel, click the Attributes inspector. Here, you can control a variety of properties for the node and any of its attachments, like a sphere’s radius.

Change the radius to 10, which will increase the sphere’s size tenfold. Build and run.

Wait, where’d it go? Panning the camera won’t help this time. You’ve increased the size of the sun, and it’s engulfed the camera. You’ll need to move the camera to a safe distance.

Setting Up the Camera Node

In the scene graph, click the camera node. Then, in the Inspectors panel, click the Node inspector.

Here, you can set the position, shape and orientation of the node. How you orient the node will affect anything attached to that node. So, changing the position of the camera node will change the position of the camera attached to it.

Every node in your scene has the following properties, which the Node inspector can edit:

• Identity: The node’s name, used to access the node in code.
• Position: Where the node is placed in the scene relative to its parent.
• Euler: The rotation of the node relative to its parent.
• Scale: Allows you to transform the node, transforming its size along each axis.

To correctly reposition the camera, change Position to x: -55, y: 65 and z: -68.

Then, change Euler to x: 145, y: -13 and z: -158. This orients the camera to point at your sun. It also creates an empty space that your planets will fill.

Now, your transforms will look like this:

Zoom out of the Scene Editor until you can clearly see the camera and the sun.

Your camera is pointing at your scene, but its viewing depth isn’t far enough to see your sun. In the Inspector panel, switch to the Attributes inspector. Here, you’ll find the Z Clipping properties, which let you increase the viewing depth.

Under Z Clipping, change Far to 300.

Build and run.

Now, you can see the sun, along with plenty of space for more planets!

Creating Planets

Next, you’ll add five planets to your solar system:

1. Mercury
2. Venus
3. Earth
4. Mars
5. Saturn

Each is a sphere, like the sun. You’ll change details like each planet’s color, size and position.

Mercury

First, add a new sphere geometry from the Objects Library.

Then, in the Node inspector, change the Name to mercury. Change the Position to x: 0, y: 0 and z: 25.

In the Material inspector, change the Diffuse to #BBBBBB by using the color picker. Then, change Roughness to 1. By changing a material’s roughness, you can make it more or less shiny. Setting a roughness close to 0 makes it shiny and setting a roughness close to 1 makes it less reflective.

Build and run.

SceneKit renders your first planet, Mercury, close to the sun. Next, you’ll add the rest of the planets in order, following the steps you followed for Mercury.

Venus

To create Venus, do the following:

1. Add a sphere to the scene graph.
2. In the Node inspector, change Name to venus. Change Position‘s z value to 35.
3. In the Attributes inspector, change Radius to 2.
4. In the Material inspector, change Diffuse to #59B1D6 and Roughness to 1.

Earth

For the planet we call home, follow these steps:

1. Add a sphere to the scene graph.
2. In the Node inspector, change Name to earth. Change Position‘s z value to 50.
3. In the Attributes inspector, change Radius to 2.
4. In the Material inspector, change Diffuse to #2F5CD6 and Roughness to 1.

Mars

Next, make these changes for the red planet:

1. Add a sphere to the scene graph.
2. In the Node inspector, change Name to mars. Change Position‘s z to 75.
3. In the Material inspector, change Diffuse to #C65B2C and Roughness to 1.

Build and run.

Your solar system is taking shape, but it’s still a bit bland. For some variation, you’ll add everyone’s favorite gas giant: Saturn!

Adding Saturn’s Ring

Saturn follows a similar pattern to the previous planets, but you’ll take it one step further: Saturn needs a ring.

First, create the body of the planet, just as you did for the previous planets:

1. Add a sphere to the scene graph.
2. In the Node inspector, change Name to saturn. Change Position‘s z to 150.
3. In the Attributes inspector, change Radius to 5.
4. In the Material inspector, change Name to saturn, Diffuse to #D69D5F and Roughness to 1.

Pan the Scene Editor to take a closer look at your newest planet.

Saturn is missing its trademark ring. To add the ring, you’ll use another of SceneKit’s primitive shapes: a tube.