SceneKit to show 3D content in Swift 5

Lito
4 min readApr 27, 2019
SceneKit

— In this history, I going to show how easy was show 3D content with SceneKit framework using high-level scene descriptions.

What Apple’s says about SceneKit framework?:

Create 3D games and add 3D content to apps using high-level scene descriptions. Easily add animations, physics simulation, particle effects, and realistic physically based rendering.

SceneKit combines a high-performance rendering engine with a descriptive API for import, manipulation, and rendering of 3D assets. Unlike lower-level APIs such as Metal and OpenGL that require you to implement in precise detail the rendering algorithms that display a scene, SceneKit requires only descriptions of your scene’s contents and the actions or animations you want it to perform.

This means that we can use SceneKit for easy things (normal development), and Metal or OpenGL to make high-level customization e.g.: Games or for a high level of images manipulation.

In addition, there is little documentation to use the metal and OpenGL, adding its complexity of use.

The next image represents the hierarchy between SceneKit, SpriteKit, Unity, Metal and OpenGL in front of the graphics processing unit (GPU):

After putting ourselves in context and getting the theory, it’s time for the code 💻...

So, we going to make a simple detail view of any shopping app and our result should be the next:

I will show how to open .obj files, although SceneKit it is able to open more kinds of files like a .dae, .blend, .scn

⇣⇣ I download ⇣⇣ the 3D model from this 🔗website🔗..

So, open Xcode… Create new project… Select Single View App…

⌨ TIME FOR CODING…

Go to your ViewController.swift and copy & paste below code:

Step by step explanation

The main task is import SceneKit framework, next of that we can use all classes from SceneKit.

// 1: In order to load the .obj file, we need to use SCNScene class loading it

// 2: Next create a new SCNCamera object and assign it to the camera property

// 3: Then set the camera position with key points.

🎥 The SCNCamera works with this three-axis system to represent the position in 3D space.

Apple’s information source SCNCamera

// 4: Next, you add cameraNode to the scene as a child node of the scene’s root node

// 5 & 6: You can use your custom lights or automatic lighting, in my case in order to improve the aspect of the image using better way, I preferred to use custom lights because .autoenablesDefaultLighting don’t isn’t enough. This two SCNLight will be added to the root node.

This is not mandatory, you can load a file without using lights, but for this history has more content about the different settings

//: The next points are self-explanatory, and you can play with all of them to try!

👁 The basic UI

Next, go to your storyboard and add from the Interface Builder a SceneKit View on your View dragging and drop it, and connecting the IBOutlets to your → @IBOutlet weak var sceneView: SCNView!

CONCLUSION

This it’s all, Apple 🍎 was right, was so simple working adding 3D content to apps using high-level scene descriptions

You can download the demo project used for history

Collaborate

If you want and you liked the content you can support this writer, thank you very much 😀

--

--

Lito

iOS developer at Kairos DS | iOS Lover | Valencian living on Madrid | Sometimes I try to be a writer