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

5. Working with Lights

Wallace Wang1 
(1)
San Diego, CA, USA
 

The simplest way to alter the appearance of a virtual object is to change its color or texture. However, a more subtle way to alter the appearance of virtual objects is to change the lighting source. Think of a typical studio that lets a photographer place one or more lights in different positions around a subject. These lights can be bright or dim, and shine at different intensities and colors to highlight an object in different ways.

Augmented reality is no different. To highlight virtual objects in an augmented reality view, you can place one or more light sources at specific x, y, and z coordinates. In addition, you can also define different types of light sources, such as direction, ambient, or spot to create unique visual effects, as shown in Figure 5-1.
../images/469983_1_En_5_Chapter/469983_1_En_5_Fig1_HTML.jpg
Figure 5-1

Different light types available

By adding light and customizing the appearance of light through color, intensity, and temperature, you can illuminate virtual objects in unique ways within an augmented reality view.

Using Color, Intensity, and Temperature

Color light can illuminate virtual objects in different ways, especially if the virtual objects display their own colors. While color is an obvious way to change a light, two other ways to change the appearance of light involve temperature and intensity.

Temperature works by multiplying the color value by a color corresponding to the light’s temperature. The default value of 6500 represents a pure white light, while lower values (down to a minimum of zero) add a “warmer” yellow or orange effect to the light source. On the other hand, higher values (up to a maximum of 40000) add a “cooler” blue effect.

Intensity modifies light by brightening or dimming the light where a value of 1000 leaves the light unaffected. Lower values dim the light while higher values brighten the light.

To learn how to use light to modify the appearance of virtual objects, let’s start by creating a new Xcode project by following these steps:
  1. 1.

    Start Xcode. (Make sure you’re using Xcode 10 or greater.)

     
  2. 2.

    Choose File ➤ New ➤ Project. Xcode asks you to choose a template.

     
  3. 3.

    Click the iOS category.

     
  4. 4.

    Click the Single View App icon and click the Next button. Xcode asks for a product name, organization name, organization identifiers, and content technology.

     
  5. 5.

    Click in the Product Name text field and type a descriptive name for your project, such as Light Sources. (The exact name does not matter.)

     
  6. 6.

    Click the Next button. Xcode asks where you want to store your project.

     
  7. 7.

    Choose a folder and click the Create button. Xcode creates an iOS project.

     
Now modify the Info.plist file to allow access to the camera and to use ARKit by following these steps:
  1. 1.

    Click the Info.plist file in the Navigator pane. Xcode displays a list of keys, types, and values.

     
  2. 2.

    Click the disclosure triangle to expand the Required Device Capabilities category to display Item 0.

     
  3. 3.

    Move the mouse pointer over Item 0 to display a plus (+) icon.

     
  4. 4.

    Click this plus (+) icon to display a blank Item 1.

     
  5. 5.

    Type arkit under the Value category in the Item 1 row.

     
  6. 6.

    Move the mouse pointer over the last row to display a plus (+) icon.

     
  7. 7.

    Click on the plus (+) icon to create a new row. A popup menu appears.

     
  8. 8.

    Choose Privacy – Camera Usage Description.

     
  9. 9.

    Type AR needs to use the camera under the Value category in the Privacy – Camera Usage Description row.

     
Now it’s time to modify the ViewController.swift file to use ARKit and SceneKit by following these steps:
  1. 1.

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

     
  2. 2.
    Edit the ViewController.swift file so it looks like this:
    import UIKit
    import SceneKit
    import ARKit
    class ViewController: UIViewController, ARSCNViewDelegate {
        let configuration = ARWorldTrackingConfiguration()
        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view, typically from a nib.
        }
    }
     
To view augmented reality in our app, we need to add the following objects to the Main.storyboard user interface:

  • One ARKit SceneKit View (ARSCNView)—For displaying augmented reality with the camera view

  • Two UISliders—For controlling the temperature and intensity of the light

  • Two UILabels—For identifying the purpose of each slider

  • Five UIButtons—For choosing different colors for the light

To design the user interface, click on the Main.storyboard file in the Navigator pane and click on the Object Library button to open the Object Library. Then drag and drop the different user interface items on to the user interface. The user interface should eventually look similar to Figure 5-2.
../images/469983_1_En_5_Chapter/469983_1_En_5_Fig2_HTML.jpg
Figure 5-2

Designing the user interface

After you’ve designed the user interface, you need to put constraints on those user interface items. To add constraints, choose Editor ➤ Resolve Auto Layout Issues ➤ Reset to Suggested Constraints at the bottom half of the menu under the All Views in Container category.

After adding constraints, the next step is to modify the user interface objects. Double-click on the two UILabels and change their titles to Temperature and Intensity (see Figure 5-2).

Now modify the UISlider next to the Temperature label by following these steps:
  1. 1.

    Click on the Temperature UISlider.

     
  2. 2.

    Click the Attributes Inspector icon or choose View ➤ Inspectors ➤ Show Attributes Inspector.

     
  3. 3.

    Type in the Value text field the number 6500.

     
  4. 4.

    Type in the Minimum text field 0.

     
  5. 5.

    Type in the Maximum text field 40000, as shown in Figure 5-3.

     
../images/469983_1_En_5_Chapter/469983_1_En_5_Fig3_HTML.jpg
Figure 5-3

Defining values for the Temperature slider

  1. 6.

    Click on the Intensity UISlider.

     
  2. 7.

    Type in the Value text field the number 1000.

     
  3. 8.

    Type in the Minimum text field 0.

     
  4. 9.

    Type in the Maximum text field 10000, as shown in Figure 5-4.

     
../images/469983_1_En_5_Chapter/469983_1_En_5_Fig4_HTML.jpg
Figure 5-4

Defining values for the Intensity slider

Now it’s time to modify the UIButtons at the bottom of the screen by resizing each button, removing the title, and displaying a background color. To do this, follow these steps:
  1. 1.

    Click on UIButton.

     
  2. 2.

    Click on the Size Inspector icon or choose View ➤ Navigators ➤ Show Size Inspector.

     
  3. 3.

    Type 30 in the Width and Height text fields in the View category, as shown in Figure 5-5.

     
../images/469983_1_En_5_Chapter/469983_1_En_5_Fig5_HTML.jpg
Figure 5-5

Defining a width and height for the UIButton

  1. 4.

    Click on the Attributes Inspector icon or choose View ➤ Navigators ➤ Show Attributes Inspector.

     
  2. 5.

    Delete the title from the UIButton.

     
  3. 6.

    Click on the Background popup menu under the View category and choose a color, as shown in Figure 5-6.

     
../images/469983_1_En_5_Chapter/469983_1_En_5_Fig6_HTML.jpg
Figure 5-6

Defining a background color for a UIButton

  1. 7.

    Repeat Steps 2-6 for each UIButton except choose a different color for each UIButton in Step 5. (The specific colors you choose won’t matter but make sure you don’t choose the same color for two or more UIButtons.)

     
After designing the user interface, the next step is to connect the user interface items to the Swift code in the ViewController.swift file. To do this, follow these steps:
  1. 1.

    Click the Main.storyboard file in the Navigator pane.

     
  2. 2.

    Click the Assistant Editor icon or choose View ➤ Assistant Editor ➤ Show Assistant Editor to display the Main.storyboard and the ViewController.swift file side by side.

     
  3. 3.

    Move the mouse pointer over the ARSCNView, hold down the Control key, and Ctrl-drag under the class ViewController line.

     
  4. 4.

    Release the Control key and the left mouse button. A popup menu appears.

     
  5. 5.
    Click in the Name text field and type sceneView, then click the Connect button. Xcode creates an IBOutlet as shown here:
    @IBOutlet var sceneView: ARSCNView!
     
  6. 6.
    Underneath this IBOutlet, type the following:
              let showLight = SCNNode()
     
  7. 7.
    Edit the viewDidLoad function so it looks like this:
        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]
        }
     
  8. 8.
    Edit the viewWillAppear function so it looks like this:
        override func viewWillAppear(_ animated: Bool) {
            super.viewWillAppear(animated)
            showShape()
            lightOn()
            sceneView.session.run(configuration)
    }

    This viewWillAppear function calls on a showShape and a lightOn function. The showShape function displays a sphere and the lightOn function defines a light source.

     
  9. 9.
    Type the following underneath the viewWillAppear function :
        func showShape() {
            let sphere = SCNSphere(radius: 0.03)
            sphere.firstMaterial?.diffuse.contents = UIColor.white
            let node = SCNNode()
            node.geometry = sphere
            node.position = SCNVector3(0.1, 0, 0)
            sceneView.scene.rootNode.addChildNode(node)
        }
        func lightOn() {
            showLight.light = SCNLight()
            showLight.light?.type = .omni
            showLight.light?.color = UIColor(white: 0.6, alpha: 1.0)
            showLight.position = SCNVector3(0,0,0)
            sceneView.scene.rootNode.addChildNode(showLight)
        }
     
  10. 10.

    Move the mouse pointer over the Temperature UISlider, hold down the Control key, and Ctrl-drag underneath the lightOn function.

     
  11. 11.

    Release the control key and left mouse button. A popup menu appears.

     
  12. 12.

    Click on the Connection popup menu and choose Action.

     
  13. 13.

    Click in the Name text field and type temperatureChange.

     
  14. 14.

    Click in the Type popup menu and choose UISlider, then click the Connect button. This creates an IBAction method.

     
  15. 15.
    Edit this temperatureChange IBAction method as follows:
        @IBAction func temperatureChange(_ sender: UISlider) {
            showLight.light?.temperature = CGFloat(sender.value)
        }
     
  16. 16.

    Move the mouse pointer over the Intensity UISlider, hold down the Control key, and Ctrl-drag underneath the lightOn function .

     
  17. 17.

    Release the control key and left mouse button. A popup menu appears.

     
  18. 18.

    Click on the Connection popup menu and choose Action.

     
  19. 19.

    Click in the Name text field and type intensityChange .

     
  20. 20.

    Click in the Type popup menu and choose UISlider, then click the Connect button. This creates an IBAction method.

     
  21. 21.
    Edit this intensityChange IBAction method as follows:
        @IBAction func intensityChange(_ sender: UISlider) {
            showLight.light?.intensity = CGFloat(sender.value)
        }
     
  22. 22.

    Move the mouse pointer over any UIButton, hold down the Control key, and Ctrl-drag at the bottom of the ViewController.swift file right above the last } bracket.

     
  23. 23.

    Release the Control key and the left mouse button. A popup menu appears.

     
  24. 24.

    Click on the Connection popup menu and choose Action.

     
  25. 25.

    Click in the Name text field and type colorButton.

     
  26. 26.

    Click in the Type popup menu and choose UIButton, then click the Connect button. This creates an IBAction method.

     
  27. 27.
    Edit this colorButton IBAction method as follows:
        @IBAction func colorButton(_ sender: UIButton) {
            //colorMe.backgroundColor = sender.backgroundColor
            showLight.light?.color = sender.backgroundColor!
        }
     
  28. 28.

    Move the mouse pointer over another UIButton (not the one you originally used to Ctrl-drag into the ViewController.swift file to create the colorButton IBAction method), hold down the Control key, and Ctrl-drag the mouse over the colorButton IBAction method that you just created until it’s highlighted, as shown in Figure 5-7.

     
../images/469983_1_En_5_Chapter/469983_1_En_5_Fig7_HTML.jpg
Figure 5-7

Connecting additional UIButtons to an existing IBAction method

  1. 29.

    When the entire colorButton IBAction method appears highlighted, release the Control key and the left mouse button.

     
  2. 30.

    Repeat Steps 28-29 for each additional UIButton until all UIButtons are connected to the same colorButton IBAction method.

     
The entire ViewController.swift file should look like this:
import UIKit
import SceneKit
import ARKit
class ViewController: UIViewController, ARSCNViewDelegate {
    @IBOutlet var sceneView: ARSCNView!
    let configuration = ARWorldTrackingConfiguration()
    let showLight = SCNNode()
    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)
        showShape()
        lightOn()
        sceneView.session.run(configuration)
    }
    func showShape() {
        let sphere = SCNSphere(radius: 0.03)
        sphere.firstMaterial?.diffuse.contents = UIColor.white
        let node = SCNNode()
        node.geometry = sphere
        node.position = SCNVector3(0.1, 0, 0)
        sceneView.scene.rootNode.addChildNode(node)
    }
    func lightOn() {
        showLight.light = SCNLight()
        showLight.light?.type = .omni
        showLight.light?.color = UIColor(white: 0.6, alpha: 1.0)
        showLight.position = SCNVector3(0,0,0)
        sceneView.scene.rootNode.addChildNode(showLight)
    }
    @IBAction func temperatureChange(_ sender: UISlider) {
        showLight.light?.temperature = CGFloat(sender.value)
    }
    @IBAction func intensityChange(_ sender: UISlider) {
        showLight.light?.intensity = CGFloat(sender.value)
    }
    @IBAction func colorButton(_ sender: UIButton) {
        showLight.light?.color = sender.backgroundColor!
    }
}
This app places a light source at the world origin (0, 0, 0) and places a white sphere at (0.1, 0, 0) so it appears on the x-axis. To run this app, follow these steps:
  1. 1.

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

     
  2. 2.

    Click the Run button or choose Product ➤ Run.

     
  3. 3.

    When the app runs, a sphere appears on the x-axis. Click on any of the color buttons at the bottom of the screen to change the light source color.

     
  4. 4.

    Slide the Temperature and Intensity sliders left and right to see how it alters the appearance of the light, as shown in Figure 5-8.

     
../images/469983_1_En_5_Chapter/469983_1_En_5_Fig8_HTML.jpg
Figure 5-8

Changing the temperature, intensity, and color of a light source

  1. 5.

    Click the Stop button or choose Product ➤ Stop.

     
Try running this app again except in the lightOn function , change the light type from .omni to .directional like this:
showLight.light?.type = .directional
Also comment out the showLight.position command like this:
//showLight.position = SCNVector3(0,0,0)
A directional light illuminates virtual objects from the positive z-axis so there’s no need to define a position for a directional light. When you run the app with a directional light instead of an omni light, you’ll notice a different lighting effect that only illuminates the half of the sphere in the positive z-axis direction, as shown in Figure 5-9.
../images/469983_1_En_5_Chapter/469983_1_En_5_Fig9_HTML.jpg
Figure 5-9

Using directional light instead of omni light

Using a Spotlight

In a theater, people can position one or more spotlights in different locations and aim them at different angles to create interesting visual effects. When you create a spotlight, you need to define its location and angle.

By default, the spotlight aims down the negative z-axis so if you place a spotlight at the world origin (0, 0, 0), then the spotlight will shine down the z-axis away from the user. If a virtual object off the z-axis, the spotlight will miss it completely.

To verify this, rewrite the Swift code in the ViewController.swift file and position the spotlight at the world origin (0, 0, 0) like this:
showLight.position = SCNVector3(0,0,0)
showLight.light?.type = .spot

If you run this code, the spotlight will appear at the world origin (0, 0, 0) and shine down the z-axis, missing the sphere completely, leaving the sphere completely unlit.

To make sure a spotlight shines on a virtual object, you can do one or more of the following:

  • Change the spotlight’s position relative to any virtual objects you want to illuminate

  • Change the angle that the spotlight points

To change the angle that the spotlight points, you need to define the eulerAngles property of the spotlight that defines the following axes of rotation:

  • Pitch (the x component) is the rotation about the node’s x-axis.

  • Yaw (the y component) is the rotation about the node’s y-axis.

  • Roll (the z component) is the rotation about the node’s z-axis.

To see how the spotlight’s position and angle alter the way it shines on virtual objects, follow these steps:
  1. 1.

    Start Xcode. (Make sure you’re using Xcode 10 or greater.)

     
  2. 2.

    Choose File ➤ New ➤ Project. Xcode asks you to choose a template.

     
  3. 3.

    Click the iOS category.

     
  4. 4.

    Click the Single View App icon and click the Next button. Xcode asks for a product name, organization name, organization identifiers, and content technology.

     
  5. 5.

    Click in the Product Name text field and type a descriptive name for your project such as Spotlight. (The exact name does not matter.)

     
  6. 6.

    Click the Next button. Xcode asks where you want to store your project.

     
  7. 7.

    Choose a folder and click the Create button. Xcode creates an iOS project.

     
Now modify the Info.plist file to allow access to the camera and to use ARKit by following these steps:
  1. 1.

    Click the Info.plist file in the Navigator pane. Xcode displays a list of keys, types, and values.

     
  2. 2.

    Click the disclosure triangle to expand the Required device capabilities category to display Item 0.

     
  3. 3.

    Move the mouse pointer over Item 0 to display a plus (+) icon.

     
  4. 4.

    Click this plus (+) icon to display a blank Item 1.

     
  5. 5.

    Type arkit under the Value category in the Item 1 row.

     
  6. 6.

    Move the mouse pointer over the last row to display a plus (+) icon.

     
  7. 7.

    Click on the plus (+) icon to create a new row. A popup menu appears.

     
  8. 8.

    Choose Privacy – Camera Usage Description.

     
  9. 9.

    Type AR needs to use the camera under the Value category in the Privacy – Camera Usage Description row.

     
Now modify the ViewController.swift file to use ARKit and SceneKit by following these steps:
  1. 1.

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

     
  2. 2.
    Edit the ViewController.swift file so it looks like this:
    import UIKit
    import SceneKit
    import ARKit
    class ViewController: UIViewController, ARSCNViewDelegate {
        let configuration = ARWorldTrackingConfiguration()
        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view, typically from a nib.
        }
    }
     
To view the effects of a spotlight in augmented reality within our app, we need to add the following objects to the Main.storyboard user interface:

  • One ARKit SceneKit View (ARSCNView)—For displaying augmented reality with the camera view

  • Three UISliders—For controlling the pitch, yaw, and roll of the spotlight

  • Three UILabels—For identifying the pitch, yaw, and roll sliders

To design the user interface, click on the Main.storyboard file in the Navigator pane and click on the Object Library button to open the Object Library. Then drag and drop the different user interface items on to the user interface. The user interface should eventually look similar to Figure 5-10.
../images/469983_1_En_5_Chapter/469983_1_En_5_Fig10_HTML.jpg
Figure 5-10

Designing the user interface

After you’ve designed the user interface, you need to put constraints on those user interface items. To add constraints, choose Editor ➤ Resolve Auto Layout Issues ➤ Reset to Suggested Constraints at the bottom half of the menu under the All Views in Container category.

After adding constraints, the next step is to modify the user interface objects. Double-click on the three UILabels and change their titles to Pitch (x-axis), Yaw (y-axis), and Roll (z-axis) (see Figure 5-10).

Now modify the UISlider next to the Pitch (x-axis) label by following these steps:
  1. 1.

    Click on the Pitch (x-axis) UISlider.

     
  2. 2.

    Click the Attributes Inspector icon or choose View ➤ Inspectors ➤ Show Attributes Inspector.

     
  3. 3.

    Type in the Value text field the number 0.

     
  4. 4.

    Type in the Minimum text field -360.

     
  5. 5.

    Type in the Maximum text field 360, as shown in Figure 5-11.

     
../images/469983_1_En_5_Chapter/469983_1_En_5_Fig11_HTML.jpg
Figure 5-11

Customizing the UISlider

  1. 6.

    Repeat Steps 1-5 for the Yaw (y-axis) and Roll (z-axis) UISliders.

     
After designing the user interface, the next step is to connect the user interface items to the Swift code in the ViewController.swift file. To do this, follow these steps:
  1. 1.

    Click the Main.storyboard file in the Navigator pane.

     
  2. 2.

    Click the Assistant Editor icon or choose View ➤ Assistant Editor ➤ Show Assistant Editor to display the Main.storyboard and the ViewController.swift file side by side.

     
  3. 3.

    Move the mouse pointer over the ARSCNView, hold down the Control key, and Ctrl-drag under the class ViewController line.

     
  4. 4.

    Release the Control key and the left mouse button. A popup menu appears.

     
  5. 5.
    Click in the Name text field and type sceneView, then click the Connect button. Xcode creates an IBOutlet as shown here:
    @IBOutlet var sceneView: ARSCNView!
     
  6. 6.
    Underneath this IBOutlet, type the following:
        let configuration = ARWorldTrackingConfiguration()
        let showLight = SCNNode()
        var currentX : Float = 0
        var currentY : Float = 0
        var currentZ : Float = 0
     
  7. 7.
    Edit the viewDidLoad function so it looks like this:
        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)
            showShape()
            lightOn()
            sceneView.session.run(configuration)
        }

    This viewWillAppear function calls on a showShape and a lightOn function. The showShape function displays a sphere and the lightOn function defines a light source.

     
  8. 8.
    Type the following underneath the viewWillAppear function:
        func showShape() {
            let plane = SCNPlane(width: 0.75, height: 0.75)
            plane.firstMaterial?.diffuse.contents = UIColor.yellow
            let node = SCNNode()
            node.geometry = plane
            node.position = SCNVector3(0, 0, -0.3)
            sceneView.scene.rootNode.addChildNode(node)
        }
        func lightOn() {
            showLight.light = SCNLight()
            showLight.light?.type = .spot
            showLight.light?.color = UIColor(white: 0.6, alpha: 1.0)
            showLight.position = SCNVector3(0, 0, 0)
            showLight.eulerAngles = SCNVector3(0, 0, 0)
            sceneView.scene.rootNode.addChildNode(showLight)
        }

    This code creates a yellow plane that appears at -0.03 behind the world origin (0, 0, 0). Then the code creates a spotlight at the world origin aimed at the plane. Even though the spotlight is white, it will shine on the black plane and display yellow because the plane is yellow.

     
  9. 9.

    Move the mouse pointer over the Pitch (x-axis) UISlider, hold down the Control key, and Ctrl-drag underneath the lightOn function .

     
  10. 10.

    Release the control key and left mouse button. A popup menu appears.

     
  11. 11.

    Click on the Connection popup menu and choose Action.

     
  12. 12.

    Click in the Name text field and type pitchChange.

     
  13. 13.

    Click in the Type popup menu and choose UISlider, then click the Connect button. This creates an IBAction method.

     
  14. 14.
    Edit this pitchChange IBAction method as follows:
        @IBAction func pitchChanged(_ sender: UISlider) {
            currentX = GLKMathDegreesToRadians(sender.value)
            showLight.eulerAngles = SCNVector3(currentX, currentY, currentZ)
        }
     
  15. 15.

    Move the mouse pointer over the Yaw (y-axis) UISlider, hold down the Control key, and Ctrl-drag underneath the lightOn function .

     
  16. 16.

    Release the control key and the left mouse button. A popup menu appears.

     
  17. 17.

    Click on the Connection popup menu and choose Action.

     
  18. 18.

    Click in the Name text field and type yawChange.

     
  19. 19.

    Click in the Type popup menu and choose UISlider, then click the Connect button. This creates an IBAction method.

     
  20. 20.
    Edit this yawChange IBAction method as follows:
        @IBAction func yawChanged(_ sender: UISlider) {
            currentY = GLKMathDegreesToRadians(sender.value)
            showLight.eulerAngles = SCNVector3(currentX, GLKMathDegreesToRadians(sender.value), currentZ)
        }
     
  21. 21.

    Move the mouse pointer over the Roll (z-axis) UISlider, hold down the Control key, and Ctrl-drag underneath the lightOn function .

     
  22. 22.

    Release the control key and left mouse button. A popup menu appears.

     
  23. 23.

    Click on the Connection popup menu and choose Action.

     
  24. 24.

    Click in the Name text field and type rollChange.

     
  25. 25.

    Click in the Type popup menu and choose UISlider, then click the Connect button. This creates an IBAction method.

     
  26. 26.
    Edit this rollChange IBAction method as follows:
        @IBAction func rollChanged(_ sender: UISlider) {
            currentZ = GLKMathDegreesToRadians(sender.value)
            showLight.eulerAngles = SCNVector3(currentX, currentY, currentZ)
        }
     
The entire ViewController.swift file should look like this:
import UIKit
import SceneKit
import ARKit
class ViewController: UIViewController, ARSCNViewDelegate {
    @IBOutlet var sceneView: ARSCNView!
    let configuration = ARWorldTrackingConfiguration()
    let showLight = SCNNode()
    var currentX : Float = 0
    var currentY : Float = 0
    var currentZ : Float = 0
    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)
        showShape()
        lightOn()
        sceneView.session.run(configuration)
    }
    func showShape() {
        let plane = SCNPlane(width: 0.75, height: 0.75)
        plane.firstMaterial?.diffuse.contents = UIColor.yellow
        let node = SCNNode()
        node.geometry = plane
        node.position = SCNVector3(0, 0, -0.3)
        sceneView.scene.rootNode.addChildNode(node)
    }
    func lightOn() {
        showLight.light = SCNLight()
        showLight.light?.type = .spot
        showLight.light?.color = UIColor(white: 0.6, alpha: 1.0)
        showLight.position = SCNVector3(0, 0, 0)
        showLight.eulerAngles = SCNVector3(0, 0, 0)
        sceneView.scene.rootNode.addChildNode(showLight)
    }
    @IBAction func pitchChanged(_ sender: UISlider) {
        currentX = GLKMathDegreesToRadians(sender.value)
        showLight.eulerAngles = SCNVector3(currentX, currentY, currentZ)
    }
    @IBAction func yawChanged(_ sender: UISlider) {
        currentY = GLKMathDegreesToRadians(sender.value)
        showLight.eulerAngles = SCNVector3(currentX, GLKMathDegreesToRadians(sender.value), currentZ)
    }
    @IBAction func rollChanged(_ sender: UISlider) {
        currentZ = GLKMathDegreesToRadians(sender.value)
        showLight.eulerAngles = SCNVector3(currentX, currentY, currentZ)
    }
}
To test this app on an iOS device, follow these steps:.
  1. 1.

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

     
  2. 2.

    Click the Run button or choose Product ➤ Run.

     
  3. 3.

    Slide the Pitch (x-axis), Yaw (y-axis), and Roll (z-axis) sliders left and right to see how the spotlight shines on the plane on different areas. Although the spotlight is white, the plane is yellow so the spotlight appears to be a yellow light, as shown in Figure 5-12.

     
../images/469983_1_En_5_Chapter/469983_1_En_5_Fig12_HTML.jpg
Figure 5-12

Shining a white spotlight on a yellow plane

  1. 4.

    Click the Stop button or choose Product ➤ Stop.

     

Summary

In many cases, you can simply display virtual objects through an augmented reality view but if you want to create interesting visual effects, you can define different types of light sources. Think of a theater where you can place multiple lights in different locations and colors to shine on different objects.

By altering the color, intensity, and temperature, you can make a light appear brighter or dimmer. By using a spotlight, you can shine a light in different directions after placing a light anywhere within your augmented reality view.

Experiment with lights and the placement of virtual objects. Lights can give you multiple ways to change the appearance of what users see in your augmented reality app.

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

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