© Wallace Wang 2018
Wallace WangBeginning ARKit for iPhone and iPadhttps://doi.org/10.1007/978-1-4842-4102-8_4

4. Working with Shapes

Wallace Wang1 
(1)
San Diego, CA, USA
 

In the previous chapter, we used a debugging option that allowed our augmented reality app to display the world origin, which showed the x-, y-, and z-axes based on the iOS device’s current location. Based on this world origin, we can place virtual objects in the augmented reality view by defining its x, y, and z coordinates.

ARKit offers another debugging option, called feature points. Like the world origin, you’ll only use feature points to debug your app. When it’s time to ship your app, you’ll remove both the world origin and feature points from appearing.

To make feature points appear, modify the debugOptions line like this:
sceneView.debugOptions = [ARSCNDebugOptions.showWorldOrigin, ARSCNDebugOptions.showFeaturePoints]

This line tells Xcode to display both the world origin (.showWorldOrigin) and feature points (.showFeaturePoints).

In our previous app, we could create yellow spheres along with the world origin, and then reset tracking to make the world origin appear in the new current location of the iOS device. Generally when you reset tracking and delete any existing virtual objects (such as our yellow spheres), you’ll also want to remove anchors.

Anchors define the position of virtual objects in an augmented reality view. Our previous app just removed the virtual objects from view, but once we delete the yellow sphere, we also don’t need to know the sphere’s previous position or anchor anymore, so we should delete that as well.

To make anchors of virtual objects disappear, we just need to modify the session.run line when we reset world tracking like this:
sceneView.session.run(configuration, options: [.resetTracking, .removeExistingAnchors])

This code resets the world origin (.resetTracking) and removes any invisible anchors defining the position of virtual objects (.removeExistingAnchors).

To see how to make feature points appear (and delete invisible anchor points of the yellow spheres), modify the previous app’s code so the entire ViewController.swift file looks like this:
import UIKit
import SceneKit
import ARKit
class ViewController: UIViewController, ARSCNViewDelegate {
    @IBOutlet var sceneView: ARSCNView!
    @IBOutlet var Xslider: UISlider!
    @IBOutlet var Yslider: UISlider!
    @IBOutlet var Zslider: UISlider!
    let configuration = ARWorldTrackingConfiguration()
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        sceneView.delegate = self
        sceneView.showsStatistics = true
        sceneView.debugOptions = [ARSCNDebugOptions.showWorldOrigin, ARSCNDebugOptions.showFeaturePoints]
    }
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        sceneView.session.run(configuration)
    }
    @IBAction func addButton(_ sender: UIButton) {
        showShape()
    }
    @IBAction func resetButton(_ sender: UIButton) {
        sceneView.session.pause()
        sceneView.scene.rootNode.enumerateChildNodes { (node, _) in
            if node.name == "sphere" {
              node.removeFromParentNode()
            }
        }
        sceneView.session.run(configuration, options: [.resetTracking, .removeExistingAnchors])
    }
    func showShape() {
        let node = SCNNode()
        node.geometry = SCNSphere(radius: 0.05)
        node.geometry?.firstMaterial?.diffuse.contents = UIColor.yellow
        node.position = SCNVector3(Xslider.value,Yslider.value,Zslider.value)
        node.name = "sphere"
        sceneView.scene.rootNode.addChildNode(node)
    }
}

Click the Run button or choose Product ➤ Run with an iOS device connected to your Macintosh through its USB cable. When the app runs, you’ll see feature points displayed as yellow dots that show you when ARKit detects surfaces of objects in the real world. The more dots that appear, the better ARKit detects that surface.

If you point an augmented reality app at a clearly visible surface, such as a table top, along with contrasting neighboring objects like a vertical wall and horizontal floor, you’ll see more feature point dots appear, as shown in Figure 4-1. If you point the camera at the same area but from a different angle, you can see how ARKit displays fewer feature points, meaning it doesn’t recognize the nearby area as well.
../images/469983_1_En_4_Chapter/469983_1_En_4_Fig1_HTML.jpg
Figure 4-1

Feature points show how ARKit recognizes surfaces in the real world

Click the Stop button or choose Product ➤ Stop to stop your app from running.

Displaying Different Geometric Shapes

Geometric shapes are the simplest types of virtual objects you can display in an augmented reality view. In the previous chapter, we created a sphere, but SceneKit actually offers several different types of geometric shapes to use. Each geometric shape may require you to specify different dimensions.

For example, you can create a sphere by defining its radius, but to create a box, you need to define its width, height, and depth. The different geometric shapes available are:

  • SCNFloor

  • SCNBox

  • SCNCapsule

  • SCNCone

  • SCNCylinder

  • SCNPlane

  • SCNPyramid

  • SCNTorus

  • SCNTube

All of these geometric shapes work alike in that you can define a color for their surface, as UIColor.blue or UIColor.red. By combining multiple geometric shapes, you can create simple virtual objects that appear within an augmented reality view.

To create a sphere, we just needed to define its radius like this:
node.geometry = SCNSphere(radius: 0.05)

To create a box, we need to define its height, width, and length, as shown in Figure 4-2. In addition, you can also define the edges of the box to make them sharp or round. To modify the corner of a box, you need to define its chamfer radius. A radius of zero creates a sharp edge while non-zero values create a rounded edge. The higher the value, the rounder the edge.

To see how to display a box instead of a sphere, follow these steps:
  1. 1.

    Click on the ViewController.swift file of the current app that displays three sliders for defining the x, y, and z coordinates of a shape.

     
  2. 2.
    Move the cursor to the front of the node.geometry = SCNSphere(radius: 0.05) line and type //, which turns the line into a comment. That means the text appears visible but won’t affect your app in any way. As soon as you type // in front of the line, Xcode dims the code like this:
    // node.geometry = SCNSphere(radius: 0.05)
     
  3. 3.
    Type underneath this line the following code:
    node.geometry = SCNBox(width: 0.1, height: 0.2, length: 0.1, chamferRadius: 0)
     
  4. 4.
    Replace where text "sphere" with "shape" in two places like this:
             if node.name == "shape" {
                  node.removeFromParentNode()
                }
    and
    node.name = "shape"
     
  5. 5.

    Connect an iOS device to your Macintosh through its USB cable.

     
  6. 6.

    Click the Run button or choose Product ➤ Run.

     
  7. 7.

    Adjust the x, y, and z sliders to change the location of the shape.

     
  8. 8.

    Tap the Add button to see a yellow box appear in the augmented reality view, as shown in Figure 4-2.

     
../images/469983_1_En_4_Chapter/469983_1_En_4_Fig2_HTML.jpg
Figure 4-2

Displaying a box in augmented reality

  1. 9.

    Click the Stop button or choose Product ➤ Stop.

     
Notice that the chamferRadius is zero, which creates a sharp edge. If the chamferRadius is non-zero, this will create a more rounded edge. Change this value to 0.05 to create a rounded edge, as shown in Figure 4-3.
../images/469983_1_En_4_Chapter/469983_1_En_4_Fig3_HTML.jpg
Figure 4-3

Displaying a box with rounded edges

Try defining different shapes with their dimensions as follows:

  • node.geometry = SCNSphere(radius: 0.05)

  • node.geometry = SCNBox(width: 0.1, height: 0.2, length: 0.1, chamferRadius: 0.05)

  • node.geometry = SCNTorus(ringRadius: 0.2, pipeRadius: 0.05)

  • node.geometry = SCNTube(innerRadius: 0.08, outerRadius: 0.1, height: 0.2)

  • node.geometry = SCNCapsule(capRadius: 0.06, height: 0.4)

  • node.geometry = SCNCylinder(radius: 0.04, height: 0.3)

  • node.geometry = SCNCone(topRadius: 0, bottomRadius: 0.05, height: 0.2)

  • node.geometry = SCNPyramid(width: 0.2, height: 0.4, length: 0.2)

  • node.geometry = SCNPlane(width: 0.2, height: 0.3)

Remember, just use one of these lines in your code at a time, not all of them. By experimenting with different shapes and dimensions, you can see how to create geometric objects of any size, as shown in Figure 4-4.
../images/469983_1_En_4_Chapter/469983_1_En_4_Fig4_HTML.jpg
Figure 4-4

Displaying a torus

Besides displaying a yellow color, try other colors such as brown, cyan, darkGray, gray, green, lightGray, magenta, orange, purple, red, or white like this:
node.geometry?.firstMaterial?.diffuse.contents = UIColor.purple

Displaying Text

Besides displaying geometric shapes in augmented reality, you can also display text. When displaying text you can define a string to display along with the text’s font, size, and color.

The first part to creating text is to define the string you want to display and its extrusion depth. The extrusion depth defines the thickness of the letters. An extrusion depth of zero creates a flat appearance while a non-zero value for the extrusion depth creates a thickness that makes letters visible when viewed from the side. To define a string and an extrusion depth, you need to use code like this:
let text = SCNText(string: "Hello", extrusionDepth: 1)
At this point, we’ve created text but we can’t see it. Just as we applied a color to a geometric shape like making a sphere yellow or red, we need to choose a color for text as well. To do that, we need to define a material class like this:
let material = SCNMaterial()
Next, we need to choose a color for the material and diffuse it across the entire surface like this:
material.diffuse.contents = UIColor.orange
Finally, we need to apply this material color on the text itself. We can actually apply multiple materials to text where each item appears in an array. Since we’re just defining a single color, the array only contains the material color:
text.materials = [material]
Now that we’ve defined text and its outer appearance, the next step is to place that text in the augmented reality view as a node. That involves defining a node, the node’s x, y, and z coordinates, and its scale that defines a node’s width, height, and depth:
let node = SCNMaterial()
node.position = SCNVector3(Xslider.value, Yslider.value, Zslider.value)
node.scale = SCNVector3(0.01, 0.01, 0.01)
Finally, we need to define the node’s geometry as the text we defined using SCNText like this:
node.geometry = text
Finally, we need to add this node to the root node of the augmented reality scene:
sceneView.scene.rootNode.addChildNode(node)
To see how this code works to display orange text at x, y, and z coordinates you specify, follow these steps:
  1. 1.

    Modify the World Tracking project or create a new project identical to the World Tracking project except give it a different name such as Node Placement Text.

     
  2. 2.
    Modify the ViewController.swift file so the code looks like this:
    import UIKit
    import SceneKit
    import ARKit
    class ViewController: UIViewController, ARSCNViewDelegate {
        @IBOutlet var sceneView: ARSCNView!
        @IBOutlet var Xslider: UISlider!
        @IBOutlet var Yslider: UISlider!
        @IBOutlet var Zslider: UISlider!
        let configuration = ARWorldTrackingConfiguration()
        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view, typically from a nib.
            sceneView.delegate = self
            sceneView.showsStatistics = true
            sceneView.debugOptions = [ARSCNDebugOptions.showWorldOrigin, ARSCNDebugOptions.showFeaturePoints]
        }
        override func viewWillAppear(_ animated: Bool) {
            super.viewWillAppear(animated)
            sceneView.session.run(configuration)
        }
        @IBAction func addButton(_ sender: UIButton) {
            showShape()
        }
        @IBAction func resetButton(_ sender: UIButton) {
            sceneView.session.pause()
            sceneView.scene.rootNode.enumerateChildNodes { (node, _) in
                if node.name == "shape" {
                  node.removeFromParentNode()
                }
            }
            sceneView.session.run(configuration, options: [.resetTracking, .removeExistingAnchors])
        }
        func showShape() {
            let text = SCNText(string: "Hello", extrusionDepth: 1)
            let material = SCNMaterial()
            material.diffuse.contents = UIColor.orange
            text.materials = [material]
            let node = SCNNode()
            node.position = SCNVector3(Xslider.value, Yslider.value, Zslider.value)
            node.scale = SCNVector3(0.01, 0.01, 0.01)
            node.geometry = text
            node.name = "shape"
            sceneView.scene.rootNode.addChildNode(node)
        }
    }
     
  3. 3.

    Connect an iOS device to your Macintosh through its USB cable.

     
  4. 4.

    Click the Run button or choose Product ➤ Run.

     
  5. 5.

    Tap the Add button. Orange text appears where you defined the x, y, and z coordinates, as shown in Figure 4-5.

     
../images/469983_1_En_4_Chapter/469983_1_En_4_Fig5_HTML.jpg
Figure 4-5

Displaying text in augmented reality

  1. 6.

    Click the Stop button or choose Product ➤ Stop.

     

Try experimenting with different text and extrusion depth along with different colors.

Adding Textures to Shapes

In the examples we’ve created so far, we’ve simply used solid colors to color the geometric shapes we’ve added to our augmented reality view. However, you can apply graphic images to the surface of geometric shapes. This can create interesting visual effects such as showing shapes as planets or boxes that looks like they’re made out of bricks.

You can find public domain texture images from various sites on the Internet by searching for “texture images” in your favorite search engine. Such a search will help you find texture images of all varieties, as shown in Figure 4-6.
../images/469983_1_En_4_Chapter/469983_1_En_4_Fig6_HTML.jpg
Figure 4-6

Finding texture images on the Internet

Once you download one or more texture images, you need to add the texture image to your Xcode project by following these steps:
  1. 1.

    Modify the current Xcode project you used to display text or create a new project that allows the use of the camera to display an augmented reality view. (This should be the Xcode project you created earlier for this chapter.)

     
  2. 2.

    Drag the texture image to the navigator pane of your Xcode project. A window appears, displaying different options for adding a file, as shown in Figure 4-7.

     
../images/469983_1_En_4_Chapter/469983_1_En_4_Fig7_HTML.jpg
Figure 4-7

Adding a file to an Xcode project

  1. 3.

    Make sure the Copy Items if Needed check box is selected and then click the Finish button.

     
  2. 4.

    Click on the stexture file you just added in the Navigator pane. Xcode displays the contents of that texture image, as shown in Figure 4-8.

     
../images/469983_1_En_4_Chapter/469983_1_En_4_Fig8_HTML.jpg
Figure 4-8

Selecting a texture file displays its contents in Xcode

Once you’ve added a texture image to your Xcode project, the final step is to define that texture image to appear on the surface of a geometric shape such as a sphere, box, or pyramid. First, define the geometric shape separately like this:
let sphere = SCNSphere(radius: 0.05)
Next, define a material for the sphere. We’ll need to first create a material then assign the texture image to that material contents. Finally, we’ll need to apply the material to the sphere like this:
        let material = SCNMaterial()
        material.diffuse.contents = UIImage(named: "earth.jpg")
        sphere.materials = [material]

In this example, the texture image is called earth.jpg but you’ll need to change this to the name of your specific image file, including the file extension such as .jpg.

After defining a sphere and its material (the texture image), the final step is to create a node, assign that node’s geometry to the sphere, and position that node in the augmented reality view like this:
        let node = SCNNode()
        node.geometry = sphere
        node.position = SCNVector3(Xslider.value,Yslider.value,Zslider.value)
To edit the ViewController.swift file , follow these steps:
  1. 1.

    Click on the ViewController.swift file in the Navigator pane.

     
  2. 2.
    Edit the contents of the ViewController.swift file so it looks like the following:
    import UIKit
    import SceneKit
    import ARKit
    class ViewController: UIViewController, ARSCNViewDelegate {
        @IBOutlet var sceneView: ARSCNView!
        @IBOutlet var Xslider: UISlider!
        @IBOutlet var Yslider: UISlider!
        @IBOutlet var Zslider: UISlider!
        let configuration = ARWorldTrackingConfiguration()
        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view, typically from a nib.
            sceneView.delegate = self
            sceneView.showsStatistics = true
            sceneView.debugOptions = [ARSCNDebugOptions.showWorldOrigin, ARSCNDebugOptions.showFeaturePoints]
        }
        override func viewWillAppear(_ animated: Bool) {
            super.viewWillAppear(animated)
            sceneView.session.run(configuration)
        }
        @IBAction func addButton(_ sender: UIButton) {
            showShape()
        }
        @IBAction func resetButton(_ sender: UIButton) {
            sceneView.session.pause()
            sceneView.scene.rootNode.enumerateChildNodes { (node, _) in
                if node.name == "shape" {
                  node.removeFromParentNode()
                }
            }
            sceneView.session.run(configuration, options: [.resetTracking, .removeExistingAnchors])
        }
        func showShape() {
            let sphere = SCNSphere(radius: 0.05)
            let material = SCNMaterial()
            material.diffuse.contents = UIImage(named: "earth.jpg")
            sphere.materials = [material]
            let node = SCNNode()
            node.geometry = sphere
            node.position = SCNVector3(Xslider.value,Yslider.value,Zslider.value)
            node.name = "shape"
            sceneView.scene.rootNode.addChildNode(node)
        }
    }
     
  3. 3.

    Connect an iOS device to your Macintosh with its USB cable.

     
  4. 4.

    Click the Run button or chose Product ➤ Run.

     
  5. 5.

    Use the sliders to define an x, y, and z coordinate for your sphere and tap the Add button. The sphere appears covered in the texture file you specified, as shown in Figure 4-9.

     
../images/469983_1_En_4_Chapter/469983_1_En_4_Fig9_HTML.jpg
Figure 4-9

Displaying a texture file over a geometric shape

  1. 6.

    Click the Stop button or choose Product ➤ Stop in Xcode.

     
Experiment with different geometric shapes and texture images, such as a pyramid and a wood texture, as shown in Figure 4-10.
        let pyramid = SCNPyramid(width: 0.04, height: 0.03, length: 0.04)
        let material = SCNMaterial()
        material.diffuse.contents = UIImage(named: "wood.jpg")
        pyramid.materials = [material]
../images/469983_1_En_4_Chapter/469983_1_En_4_Fig10_HTML.jpg
Figure 4-10

You can display different geometric shapes and textures

Changing the Transparency of Shapes

Normally when you add a texture or color to a geometric shape, that texture or color appears solid. However, you can define a transparency value between 0 and 1 where 1 creates a solid appearance and 0 essentially makes the texture or color completely invisible, such as:
material.transparency = 0.6
To see how to change the transparency, follow these steps:
  1. 1.

    Use the Xcode project that displayed a texture over a geometric shape.

     
  2. 2.

    Click on the ViewController.swift file in the Navigator pane.

     
  3. 3.
    Add the following line under the line that defines the texture of a geometric shape, such as:
            material.diffuse.contents = UIImage(named: "wood.jpg")
            material.transparency = 0.6
    Remember to replace "wood.jpg" with the filename and extension of the texture file you’re using. The entire ViewController.swift file should look like this:
    import UIKit
    import SceneKit
    import ARKit
    class ViewController: UIViewController, ARSCNViewDelegate {
        @IBOutlet var sceneView: ARSCNView!
        @IBOutlet var Xslider: UISlider!
        @IBOutlet var Yslider: UISlider!
        @IBOutlet var Zslider: UISlider!
        let configuration = ARWorldTrackingConfiguration()
        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view, typically from a nib.
            sceneView.delegate = self
            sceneView.showsStatistics = true
            sceneView.debugOptions = [ARSCNDebugOptions.showWorldOrigin, ARSCNDebugOptions.showFeaturePoints]
        }
        override func viewWillAppear(_ animated: Bool) {
            super.viewWillAppear(animated)
            sceneView.session.run(configuration)
        }
        @IBAction func addButton(_ sender: UIButton) {
            showShape()
        }
        @IBAction func resetButton(_ sender: UIButton) {
            sceneView.session.pause()
            sceneView.scene.rootNode.enumerateChildNodes { (node, _) in
                if node.name == "shape" {
                  node.removeFromParentNode()
                }
            }
            sceneView.session.run(configuration, options: [.resetTracking, .removeExistingAnchors])
        }
        func showShape() {
            //let sphere = SCNSphere(radius: 0.05)
            let pyramid = SCNPyramid(width: 0.04, height: 0.03, length: 0.04)
            let material = SCNMaterial()
            material.diffuse.contents = UIImage(named: "wood.jpg")
            material.transparency = 0.6
            //material.diffuse.contents = UIImage(named: "earth.jpg")
            //sphere.materials = [material]
            pyramid.materials = [material]
            let node = SCNNode()
            node.geometry = pyramid// sphere
            node.position = SCNVector3(Xslider.value,Yslider.value,Zslider.value)
            node.name = "shape"
            sceneView.scene.rootNode.addChildNode(node)
        }
    }
     
  4. 4.

    Connect an iOS device to your Macintosh with its USB cable.

     
  5. 5.

    Click the Run button or choose Product ➤ Run.

     
  6. 6.

    Modify the sliders to define the x, y, and z coordinates of the shape.

     
  7. 7.

    Tap the Add button. Notice that the shape now appears transparent, as shown in Figure 4-11.

     
../images/469983_1_En_4_Chapter/469983_1_En_4_Fig11_HTML.jpg
Figure 4-11

Displaying a geometric shape and texture as transparent

  1. 8.

    Click the Stop button or choose Product ➤ Stop.

     

Drawing Shapes

By offering different geometric shapes you can customize, ARKit makes it easy to add virtual objects to any augmented reality view. However, what if you want to create a shape that doesn’t fit within the confines of a common geometric shape like a box or a sphere? The simplest solution is to draw your own shape.

The simplest type of shape to draw is a plane, which you can create by defining two different sets of points. To draw a shape, you must define a BezierPath object like this:
let plane = UIBezierPath()
After creating a BezierPath object, the next step is to define a starting set of x and y coordinates such as 0, 0, like this:
plane.move(to: CGPoint(x: 0, y: 0))
Remember, these x and y coordinates don’t define the physical position of the shape in the augmented reality view. After defining a starting point, you can define a second set of x, y coordinates that defines a plane like this:
plane.addLine(to: CGPoint(x: 0, y: 0.1))

This plane.addLine command tells Xcode to start drawing at the beginning x and y coordinates defined by the plane.move command. Then the plane.addLine command draws a line 0 that points along the x-axis and 0.1 distance that points along the y-axis.

Finally, you need to define the shape as an SCNShape object, which also specifies how thick to make the shape along the z-axis, known as the extrusion depth. To do this, you define the shape name along with its extrusion depth like this:
let customShape = SCNShape(path: plane, extrusionDepth: 0.1)
After creating a custom shape, the final step is to assign this shape to a node and display this node at specific x, y, and z coordinates like this:
      let node = SCNNode()
        node.geometry = customShape
        node.geometry?.firstMaterial?.diffuse.contents = UIColor.yellow
        node.position = SCNVector3(0,0,0)
        sceneView.scene.rootNode.addChildNode(node)
This code creates a yellow plane that extends 0.1 points along the z-axis, rises 0.1 points up on the y-axis, and doesn’t extend at all along the x-axis, as shown in Figure 4-12.
../images/469983_1_En_4_Chapter/469983_1_En_4_Fig12_HTML.jpg
Figure 4-12

Displaying a plane defined by its distance along the x-, y-, and z-axes

By adding multiple addLine commands , you can define additional planes on a custom shape. To see how to create a wedge shape, follow these steps:
  1. 1.

    Use the Xcode project that displayed a texture over a geometric shape.

     
  2. 2.

    Click on the ViewController.swift file in the Navigator pane.

     
  3. 3.
    Edit the showShape function so the entire ViewController.swift file looks like this:
    import UIKit
    import SceneKit
    import ARKit
    class ViewController: UIViewController, ARSCNViewDelegate {
        @IBOutlet var sceneView: ARSCNView!
        @IBOutlet var Xslider: UISlider!
        @IBOutlet var Yslider: UISlider!
        @IBOutlet var Zslider: UISlider!
        let configuration = ARWorldTrackingConfiguration()
        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view, typically from a nib.
            sceneView.delegate = self
            sceneView.showsStatistics = true
            sceneView.debugOptions = [ARSCNDebugOptions.showWorldOrigin, ARSCNDebugOptions.showFeaturePoints]
        }
        override func viewWillAppear(_ animated: Bool) {
            super.viewWillAppear(animated)
            sceneView.session.run(configuration)
        }
        @IBAction func addButton(_ sender: UIButton) {
            showShape()
        }
        @IBAction func resetButton(_ sender: UIButton) {
            sceneView.session.pause()
            sceneView.scene.rootNode.enumerateChildNodes { (node, _) in
                if node.name == "shape" {
                  node.removeFromParentNode()
                }
            }
            sceneView.session.run(configuration, options: [.resetTracking, .removeExistingAnchors])
        }
        func showShape() {
            let plane = UIBezierPath()
            plane.move(to: CGPoint(x: 0, y: 0))
            plane.addLine(to: CGPoint(x: 0.1, y: 0.1))
            plane.addLine(to: CGPoint(x: 0.1, y: -0.03))
            let customShape = SCNShape(path: plane, extrusionDepth: 0.1)
            let node = SCNNode()
            node.geometry = customShape
            node.geometry?.firstMaterial?.diffuse.contents = UIColor.yellow
            node.position = SCNVector3(Xslider.value,Yslider.value,Zslider.value)
            node.name = "shape"
            sceneView.scene.rootNode.addChildNode(node)
        }
    }
     
  4. 4.

    Connect an iOS device to your Macintosh through its USB cable.

     
  5. 5.

    Click the Run button or choose Product ➤ Run.

     
  6. 6.

    Tap the Add button when the app runs. A yellow wedge appears, as shown in Figure 4-13.

     
  7. 7.

    Click the Stop button or choose Product ➤ Stop.

     
../images/469983_1_En_4_Chapter/469983_1_En_4_Fig13_HTML.jpg
Figure 4-13

Two addLine commands help define a wedge shape

The first addLine command defined the left side of the wedge and the second addLine command defined the right side of the wedge:
        plane.addLine(to: CGPoint(x: 0.1, y: 0.1))
        plane.addLine(to: CGPoint(x: 0.1, y: -0.03))

By using as many addLine commands as you wish, you can define your own custom three-dimensional shapes that can’t be created by common geometric shapes like spheres, boxes, or cones.

Summary

Besides displaying 3D images, ARKit can also display geometric shapes in an augmented reality view. Some common geometric shapes include boxes, spheres, planes, and cylinders. By specifying dimensions and positions, you can make a geometric shape appear anywhere.

After defining the dimensions of a geometric shape, you can modify its appearance by choosing different colors for its surface. For more variety, you can also apply different texture images to cover the surfaces of any geometric shapes you create.

In case no geometric shape matches what you need, you can draw individual lines to create your own virtual objects to display in an augmented reality view. By drawing lines and combining multiple geometric shapes, you can create custom shapes limited only by your imagination.

Colors and textures can give your geometric shapes a distinctive appearance. In the next chapter, we learn other ways to alter the appearance of virtual objects using different lighting sources.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.137.218.215