قالب وردپرس درنا توس
Home / Tips and Tricks / ARKit 101: How to put a group of balloons around you and let them float into the sky by accident «Mobile AR News :: Next Reality

ARKit 101: How to put a group of balloons around you and let them float into the sky by accident «Mobile AR News :: Next Reality



Have you ever seen pictures or videos of balloons flying in all directions and floating in the air? It's something you often see in classic posters or movies. Guess what? Now you can do that without having to buy hundreds of balloons, all you need is ARKit!

In this tutorial, you will learn how to create a simple augmented reality app for iPads and iPhones ARKit. More specifically, we'll talk about how we can unleash a group of virtual balloons and levitate them in random directions into the sky using Worldtracking and SceneKit physics and animations.

What will you learn?

We & # 39; I will learn how to animate randomly many 3D objects in the AR world. ARKit allows us to create many 3D objects to work on, yet maintain a high refresh rate. We will also get help using the hitTest we have previously discussed.

Minimum Requirements

Step 1: Download the required assets

To help you understand this tutorial I've created a folder with the required 3D asset that is needed for the project. With these files, you can easily follow this guide, so download the zipped folder with the assets and unzip.

Step 2: Set up the AR project in Xcode

If you're not sure how to do so Step 2 in our article on controlling a 3D layer using hitTest to get your AR project in Xcode set up. Give your project a different name. B. NextReality_Tutorial6 . Be sure to do a quick test before continuing with the following tutorial.

Step 3: Import assets into your project

In your Xcode project, go to the Project Navigator in the left sidebar. Right-click on the art.scnassets folder, where you save your 3D SceneKit files and then select Add Files to Art.scnassets. Add the following file from the unzipped "Assets" folder you downloaded in step 1 above: "red_balloon.dae".

Click again in the project navigator with the right mouse button on the yellow folder for "NextReality_Tutorial6" (or whatever yours Named project). Select the option "Add files to & # 39; NextReality_Tutorial6 & # 39; s".

Navigate to the unzipped folder "Assets" and select the file "Balloon.swift". Be sure to check "Copy items as needed" and leave everything else unchanged. Then click on "Add".

"Balloon.swift" should be included in your project and project The navigator should look something like this: [19659023] ARKit 101: How to Place a Group of Balloons Around You and Chance to Float into the Sky ” width=”532″ height=”532″ style=”max-width:532px;height:auto;”/>

This file will take care of the rendering of the red balloon.

Step 4: Use hitTest to place as many 3D balloons as possible

To quickly go over the ARKit hitTest, take a look at our tutorial hitTest

Open the ViewController.swift class by double-clicking it. The rest of this tutorial focuses on editing this document. If you want to follow the final Step 4 code, just open this link to view it on GitHub.

In the ViewController.swift file, change the scene build line in the viewDidLoad () ] method. Change it from:

  let scene = SCNScene (called: "art.scnassets / ship.scn")! 

To the following (which makes sure we do not create a scene with the old ship model): [19659029] let scene = SCNScene ()

Now we activate feature points. Under this line in viewDidLoad () :

  sceneView.showsStatistics = true 

Add the following:

  sceneView.debugOptions = ARSCNDebugOptions.showFeaturePoints 

Run your app on your phone out and go around. Focus on a well-lit area on the ground, and you should be able to see yellow feature points as follows:

Next, at the end of the viewDidLoad () method, add a gesture recognizer that adds a touch event to our view controller. Each time you tap it, the method getapped () is called.

  let gesticRecognizer = UITapGestureRecognizer (target: self, action: #selector (tapped))
sceneView.addGestureRecognizer (GesturesRecognizer) 

Now insert the method getapped () at the end of the file, but before the last curly brace:

  @objc func tapped (gestures: UITapGestureRecognizer) {
leave touchPosition = gesten.stelle (in: sceneView)

// Transfer this 2D point to a 3D point using hitTest (featurePoint). Where there is a featurePoint, add a speech bubble
hitTestResults = sceneView.hitTest (touchPosition, types: .featurePoint)

Guard leave hitTest = hitTestResults.first else {
return
}

addBalloon (hitTest: hitTest)
} 

Here we perform a HitTest based on any feature point that ARKit recognizes in the 3D world. Once we have our hitTest, we call addBalloon () to insert the balloon into the scene.

Next we add the method addBalloon () at the end of the file, but before the last curly brace:

  func addBalloon (hitTest: ARHitTestResult) {
leave the scene = SCNScene (named: "art.scnassets / red_balloon.dae")
let balloonNode = Balloon (Scene: Scene!)
balloonNode.position = SCNVector3 (hitTest.worldTransform.column.3.x, hitTest.worldTransform.column.3.y, hitTest.worldTransform.column.3.z)

sceneView.scene.rootNode.addChildNode (balloonNode)
} 

Run your app and walk around until you see some yellow function points. Type anywhere you see feature points and you should see red balloons, like this:

Checkpoint : Your entire project at the end of this step should look like the last step 4 code on my GitHub.

Step 5: Let the Balloons "Float" in Random Direction

Well, all We have to add dynamic forces to our dynamic balloons as soon as they are inserted into the scene. Feel free to follow the last step 5 code along with while entering the content below.

Add logic to the addBalloon () method. At the end of the addBalloon () method after this line:

  sceneView.scene.rootNode.addChildNode (balloonNode) 

Add the following code:

  balloonNode.physicsBody = SCNPhysicsBody (type : dynamic, form: nil)
balloonNode.physicsBody? .isAffectedByGravity = false
ballonNode.physicsBody? .damping = 0.0
// Randomize direction for horizontal movement
let negativeHorizontal = Int (arc4random_uniform (2)) == 0? -1: 1
Let xCord = 10 + float (arc4random_uniform (50))
Let yCord = 20 + float (arc4random_uniform (100))
balloonNode.physicsBody? .applyForce (SCNVector3 (Float (negativeHorizontal) * xCord, yCord, 0), asImpulse: false) 

This is similar to how we added the dynamic physics effects in the Missile Tutorial. However, we apply the force in a randomized direction for each balloon, ranging from 10 to 60 meters for the x coordinate (horizontal) and 20 to 120 meters for the y coordinate (vertical). We will also randomly choose whether the x-coordinate should be negative or not (so the balloon can move both to the left and to the right). This ensures that all our balloons float in different directions at different horizontal and vertical speeds.

What are you waiting for? Keep the app running, hopefully go outside during the day and let your balloons fly! They should all rise up in random directions immediately. It should look like this:

Checkpoint : Your entire project at the end of this step should look like the last step 5 code on my GitHub.

What we have achieved

Well done! You have been successful in placing a group of balloons in the world around you and letting them fly in random directions into the sky. This is really exciting as SceneKit's power allows us to dynamically add powers (ie floating behavior) in every possible direction. World Tracking through ARKit allows us to continue to see the balloons in the sky as we move away from them. Fascinating, do not you think?

If you need the full code for this project, you can find it in my GitHub repository . I hope you liked this ARKit tutorial, and if you have any comments or feedback, feel free to leave it in the comment section. Happy coding!

Do not Miss : How to Bring Your Own Augmented Reality Missile into the Real World Sky

Cover Picture and Screenshots by Ambuj Punn / Next Reality

Source link