100 lines of code to write a phone AR

Learning objectives in this section

Learn how to use the SceneKit framework to efficiently develop AR projects

First look at the effect of two video

100 lines of code to write a phone AR
Scenekit_17.gif
100 lines of code to write a phone AR
Scenekit_16.gif

Use technology

Apple Pro son SceneKit 3D framework

Words do not say directly to work


Implementation ideas

The first step – camera to capture life scene
second step frame loading 3D model file SceneKit
third step – use gravity induction class to obtain the rotation angle in the model of mobile phone, camera position.


Code implementation part

  • The first step – through the camera to capture real-life scenes, this must be iOS developers are familiar with, I would simply say

Use the framework AVFoundation

Step-1. achieve two protocols
1.AVCaptureMetadataOutputObjectsDelegate
2.UINavigationControllerDelegate

Step-2. create a capture device object

Let device = AVCaptureDevice.defaultDevice (withMediaType: AVMediaTypeVideo)

Step-3. creates an input and output device object

Let input = try; AVCaptureDeviceInput (device: device) output = AVCaptureMetadataOutput (session) output.setMetadataObjectsDelegate (self, queue: DispatchQueue.main) = AVCaptureSession ()

Step-4. creates a session scenario to add input and output device objects to the session scenario

Session.canSetSessionPreset (AVCaptureSessionPresetHigh) if (session.canAddInput (input)) {session.addInput (input)} if (session.canAddOutput (output)) {session.addOutput (})}

Step-5. creates a preview view object to display the images captured by the camera

Let preview = AVCaptureVideoPreviewLayer (session: session) preview = AVLayerVideoGravityResizeAspectFill preview = self.bounds self.layer.addSublayer (preview!):.Frame.VideoGravity!

Step-6. start capture screen

Session.startRunning ()

The first step is done, the next second steps

  • The second step is to create a scene that renders the 3D model

Step-1. create a dedicated view rendering 3D model

Var scnView:SCNView = {view = SCNView / let game scene (return)} (view)

Step-2. creates camera node objects for viewing 3D scenes

Var eyeNode:SCNNode = {/ / node = SCNNode (eye node let) = SCNCamera (node.camera) node.camera?.automaticallyAdjustsZRange = true; return} (node)

Step-3. configuration 3D view

Self.scnView.frame = self.frame self.addSubview (self.scnView) self.scnView.scene = (SCNScene) self.scnView.scene (.RootNode.addChildNode) (self.eyeNode)

Step-4. to create a method to add a 3D model to the scene

Func addModelFile (file:URL, position:SCNVector3) {let scene = try (url: file, options: SCNScene! Nil let node) = scene.rootNode node.position = position self.scnView.scene.RootNode.addChildNode (node)}?

The second step. The content is completed, continue the third step

  • The third step is to create a gravity sensor object to detect changes in cell phone angle

Step-1. create object

Var motionManager = CMMotionManager ()

Step-2. set refresh frequency

MotionManager.deviceMotionUpdateInterval = 1/30.0

Step-3. start detection

MotionManager.startDeviceMotionUpdates (using:.XMagneticNorthZVertical, to: OperationQueue.main) {(motion, error) in if let attitude = motion?.attitude, error var = SCNVector3Zero if = = nil{vector (UIDevice.current.orientation.isPortrait) / / home key right {vector.x = Float; vector.y = (attitude.pitch) (Float) (attitude.roll);}else if (UIDevice.current.orientation.isLandscape) {vector.x = (Float) (attitude.pitch); vector.y = Float; vector.x =}else{(attitude.roll) (Float) (attitude.pitch) vector.y = Float (attitude.roll);} vector.z = Float (attitude.yaw); self .eyeNode.eulerAngles = vector}}

That’s all

100 lines of code to write a phone AR
A5556ACE-2593-4C8B-B946-E77BC2F0C070.png

Above is the demo project directory

All content is encapsulated in a ARView file, and then look at how to use it

Create a AR scene self.arView = ARView / (frame: UIScreen.main.bounds) self.view.addSubview (self.arView) 3D let URL / / add file = Bundle.main.url (forResource: "boss_attack" withExtension: "DAE" self.arView.addModelFile (file:), position: SCNVector3Make URL! (0, 0, -1000))

May be a lot of iOS developers have never used the SceneKit 3D framework, because there is too little information in this regard in china. But the engine is especially strong, and is very simple to use, there is Chinese eBook on Appstore, when you need to join the 3D project elements in your application, you can go to download and see, application called < SceneKit>

To show you a picture, you know how powerful it is

/ 100 lines of code to write a phone AR

This demo code, I have put here

Swift tutorial
SceneKit Chinese tutorial
VR panoramic player