If you follow me on Twitter, you would have noticed that I have been captured by Apple’s recent ARKit launch. Simply put, ARKit is the Apple platform’s answer to augmented reality. There’s a bunch of lovely posts going around about the pros and cons of this new platform so I won’t go into that here. Instead I’d love to quickly share how an iOS novice like myself was able to easily recreate Pink Floyd’s iconic “Dark Side of the Moon” album cover in AR.
Would you believe that I actually met Storm Thorgerson, the artist behind this and basically every Pink Floyd album cover? Given my history with The Mars Volta and the fact that Storm designed the De-loused in The Comatorium cover, I was able to meet him before he passed away. The encounter was at a New Years Eve show in San Francisco which feels like ages ago. If you aren’t hip with his work of Hypnosis, go ahead and get lost in it. This blog post will be here for you when you’re done.
You’ll need to have both Xcode 9 beta installed on your Mac and iOS 11 beta installed on your iOS device. Both are available in the Apple developer portal. I should also note that you’ll need an iOS device with an A9 processing chip. My iPhone 6 didn’t cut it so I was able to buy a prepaid iPhone SE from Best Buy for $100 bucks. Since I didn’t need the cellular function turned on, this worked perfectly.
Upon launching Xcode, you will be greeted with the welcome screen. Start a new project by clicking “Create a new Xcode project.” Choose the Augmented Reality App template and click Next. Then name your project something cool, like “Prism.” Make sure SceneKit is selected as your Content Technology as we’ll be working in 3D. You would choose SpriteKit at this point if your experience was 2D instead. Once your project is created and your compatible iOS device is connected, go ahead and run the project to see Apple’s 🛩 demo flying right in front of you.
Modeling the prism
Now that you have the AR demo app running successfully, let’s start modeling the prism. While originally I thought about having a light shine from the iOS device into the prism with true refraction, I realized I didn’t know what the hell I was talking about. So instead, I opted for two shapes, a pyramid and a plane.
To begin modeling these, let’s create a new SceneKit Scene by going to File > New > File… and choosing “SceneKit Scene File.” Create that file in the art.scnassets folder within your main project directory and give it a simple name like “prism.” Click on the newly created “prism.scn” file in your art.scnassets directory to take a look at the empty scene.
In the bottom right corner of Xcode, you should see an object explorer. Go ahead and filter it by Pyramid and drag that object into your scene. Boom. You should have a big untextured pyramid. Open the node inspector ⌥⌘3 so we can resize this object. ARKit uses the metric system so a scale of 1.0 would be one meter. That’s a bit too big for my New York apartment. Let’s scale this down to 0.1 or 10 centimeters. We’ll do this for the x and z properties, and we’ll use 0.075 for the y property so our pyramid isn’t too pointy. Since the AR camera is initially positioned at
x: 0, y: 0, z: 0we’ll want to position the prism slightly in front. In the same node inspector, let’s adjust the position to
x: 0, y: 0, z: -1. Finally, let’s make our prism black by going to the material inspector ⌥⌘5 and changing the Diffuse color accordingly.
Storm knew that a pyramid on it’s own was boring, so let’s add a spectrum of light through it. In the object explorer, go ahead and filter by Plane and drag one onto the scene. It’s huge right? Let’s resize and position it in the node inspector ⌥⌘3. We’ll want the scale to be
x: 0.225, y: 0.075, z: 0.1 and the position to be
x: 0, y: 0.03, z: -1. This gives us a razor thin plane which travels right through the pyramid. All that’s left is giving the plane an image texture of the white light and rainbow. I hastily created the following texture from existing Pink Floyd imagery, so go ahead and download it and add it to your project by right-clicking on the art.scnassets folder and choosing “Add files to art.scnassets…” Finally, map it to your plane by going to the material inspector ⌥⌘5 and changing the Diffuse to be spectrum.png. While you’re in there, scroll down and make sure Double sided is checked.
Congratulations! You should be looking at the Dark Side of the Moon prism in your SceneKit scene. If not, go ahead and just download the prism.scn. 💁🏻
Implementing within AR
The hard part is over, now we simply need to swap out the default airplane model for our newly sculpted prism. In ViewController.swift, simply change this line change
prism.scn. Your line should look like this:
let scene = SCNScene(named: "art.scnassets/prism.scn")!
Press ⌘R and cross your fingers and you should be looking at the most iconic music visual of all time.
Thanks for reading. If you’re as interested in AR as I am, please follow me here and on Twitter where I’ll be simulating things like Laura Palmer and the Back to the Future hover board in augmented reality. Welcome to this brave new world. I’ll see you on the dark side of the moon.