Flying sharks with ARKit

Introduction

You’ve probably heard of Sharknado, a movie with a very sound theme – flying sharks everywhere. In this post, we will try to accomplish something similar with ARKit, using the SceneKit editor in Xcode. As you will see, we will not need a lot of code to accomplish the effect of shark coming from the window, doing several bites and going back.

The result would be something like the video below.

1413884897_463198.jpg

Implementation

To get started, create a new Augmented Reality project called ARAnimals.

Screen Shot 2018-09-08 at 18.04.24

Next, go to TurboSquid.com, a site for free 3D models and take this awesome shark.  The shark is available in several formats, but the most compatible with Apple’s SceneKit (which we are using for the rendering of 3D models in ARKit) is the .dae format or collada. So unzip that one and you will see one file with the .dae extension, as well as several texture images. Add those to the Xcode project, select the .dae file, rename it to sharks and press “Convert to SceneKit scene file format” in the editor section. This will convert the collada file to SceneKit file. After you import it, you will see the following structure.

Screen Shot 2018-09-10 at 12.50.00.png

There are a lot of things that we don’t need here, such as the image plane and the two cameras. Delete those, create one parent node and put the Armature and Parent_Sharkbody in that parent node, which will be called shark. The resulting structure should be like the one below.

Screen Shot 2018-09-10 at 16.44.35.png

Next, we need to set the texture of the shark body and its teeth. To do this, select the Parent_Sharkbody node, go to the Material inspector and change its Diffuse to be the image Sharktexture002.png, which is in the zip file of the downloaded 3D model. This will give texture to the body of the shark. The child node of the Parent_Sharkbody, which is called Sharkjaw contains the mouth of the shark. Again, in the Material inspector, change the Diffuse to be the image Sharkmouthtexture002.png. This will give the shark its scary teeth.

Screen Shot 2018-09-10 at 16.46.29

Now let’s set the position of the Shark. For x and y, put 0 and for z something ranging from -5 to -10. This will make the shark appear in front of you. The euler angler should be 0 for all axis, since the shark is already in the orientation. Since the model is quite big, set the scale of the shark somewhere around 0.5 for x, y and z.

Screen Shot 2018-09-10 at 16.53.14

Before we run the app, we should modify the Xcode generated code in the ViewController a bit, so it loads our scene. This is done in the viewDidLoad method, which loads the sharks.scn scene, instead of the default one, ship.scn.

Screen Shot 2018-09-10 at 17.05.57.png

Now, run the app and you should see a shark floating in front of you.

Next, let’s make the shark come to us and attack us. To do this, we will add move MoveBy action, where the offset would be positive for the z axis. Since the shark is already in a negative position, in order to see it in front of us, a positive value will make it approach us. Also, when the shark attacks us, we would respond appropriately and make the shark run away. In order to do this, we will rotate the shark and add another MoveBy action, now with negative value, which will give the effect that the shark is leaving.

Action can be added just like any other element, node or particles, in the Library section.

Screen Shot 2018-09-10 at 16.57.21.png

For the first move action, we can specify that it starts after 1 second, lasts for 5 seconds and its offset is only changed in the z-axis, by 10 meters.

Screen Shot 2018-09-10 at 16.59.40

Now, we need to rotate the shark, by using the RotateByEuler action.

Screen Shot 2018-09-10 at 17.00.54.png

In order to make the shark turn around, we need to rotate it by -180 degrees on the y-axis. This can be done in the 7th second of the scene, and it would last a second.

Screen Shot 2018-09-10 at 17.02.25.png

Finally, we need to add the opposite move by action, which will bring back the shark in front of us, but now with its back turned.

Screen Shot 2018-09-10 at 17.03.58

Run the app, and you will see the shark coming to you. After it comes, waits for one second, rotates and leaves.

To make it more interesting, copy the shark node few times, and change the values for x, y and z, as well as the duration and offsets of the move actions. This will make the scene more scary, with many sharks coming to you. Additionally, you can add some particles effect when the sharks come to you, like red points that might mean spilling some blood (of course the sharks’).

As you can see, we have done this with minimal code. The SceneKit editor is pretty powerful and you can do many useful things, without writing code. The source code for this little project can be found here.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s