Getting to know Lidar scanning

In this tutorial, you will learn how to paint walls using the Remodel-AR framework's LiDAR Scanner approach.

Before starting this tutorial, make sure you've completed Setting up Remodel-AR in UIKit. A link to the starting project is provided here for your convenience.

37KB

Setting up RemodelAR Code.zip

archive

Step 1

To get started, refactor ViewController and rename it to LidarViewController.

Step 2

Open LidarViewController.swift and import the RemodelAR and ARKit frameworks.

import ARKit
import RemodelAR

Step 3

Open Main.storyboard and add an ARSCNView object. Next, connect the ARSCNView outlet to LidarViewController.swift as arscnView.

Step 4

In LidarViewController.swift, create a new variable to contain the ARController object.

private var arController: ARController?

Step 5

Create an extension and add a new method, configureView() to it. Inside configureView(), assign arController and start the scene as shown below.

extension LidarViewController {
    private func configureView() {
        arController = RemodelARLib.makeLidarARController(with: arscnView)
        arController?.startScene(reset: true)
    }
}

Step 6

Call configureView() from LidarViewController’s ViewWillAppear() method.

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    configureView()
}

Step 7

Build and run the project. You will see a mesh start to be overlaid on top of the wall.

Step 8

Open Main.storyboard and add a CollectionView and connect it to the view controller with the name it ColorPickerCollectionView. Don't forget to connect its Outlet.

Update its bottom constraint to safe area. Add any other necessary constraints to the view. Update the cell size to the desired size. Now your CollectionView should be positioned at the bottom of the ViewController. This CollectionView will work as a ColorPicker.

In the CollectionView's cell, add a UIView. Next complete all the necessary implementation details for the CollectionView and its cell.

Step 9

Now create an array of WallPaint objects.

let colors = [WallPaint(id: "0", color: .orange),
              WallPaint(id: "1", color: .red),
              WallPaint(id: "2", color: .yellow),
              WallPaint(id: "3", color: .green),
              WallPaint(id: "4", color: .black),
              WallPaint(id: "5", color: .blue),
              WallPaint(id: "7", color: .brown),
              WallPaint(id: "8", color: .lightGray),
              WallPaint(id: "9", color: .darkGray),
              WallPaint(id: "10", color: .systemPink),
              WallPaint(id: "11", color: .purple),
              WallPaint(id: "12", color: .cyan),
              WallPaint(id: "14", color: .magenta),
              WallPaint(id: "15", color: .gray)]

Set this array as the CollectionView's datasource. Set WallPaint's color as UIView's background color in the cell.

After finishing the CollectionView's setup, run the app and test the CollectionView to see different colored cells you can scroll through.

Step 10

Open Main.storyboard and add another CollectionView and name it TexturePickerCollectionView. Don't forget to connect its Outlet.

Add this CollectionView on top of the ColorPickerCollectionView. Update its constraints as needed. This CollectionView will work as a TexturePicker.

In CollectionView's cell, add a UIImageView, then finish adding all the necessary implementation details for the CollectionView and its cell.

Step 11

Next create an array of textureNames

var textureNames: [String] {
           ["ChalkPaints",
            "ConcreteEffects1",
            "ConcreteEffects2",
            "Corium",
            "Ebdaa",
            "Elora",
            "Glostex",
            "GraniteArenal",
            "Khayal_Beauty",
            "Linetex",
            "Marmo",
            "Marotex",
            "Mashasco",
            "Newtex",
            "Rawa",
            "RawaKothban",
            "Said",
            "Texture",
            "Tourmaline",
            "Worood"]
}

Set this array as the CollectionView's datasource. Set textureName in the Cell UIImageView image.

textureImageView.image = UIImage(named: textureName)

Note: You can find texture images in the sample UIKit project.

After finishing the CollectionView setup, run the app and test to see the CollectionView load with different texture images you can scroll through.

Step 12

Open the Main.storyboard. Add four buttons and set the button's image to camera.fill, saveMesh, reset and info.circle.fill respectively.

Embed these buttons in a Horizontal StackView. Now set the StackView's top constraint to safe area, then implement any other necessary constraints for the StackView.

Next connect the button's IBActions to LidarViewController.swift and modify the IBActions as shown below.

//Saves an image of the current scene to the camera roll
@IBAction func onSavePhotoTapped(_ sender: PaintyButton) {
    let savedImage = arController.savePhoto()
    UIImageWriteToSavedPhotosAlbum(savedImage, self, nil, nil)
}

// Saves the current mesh of the room to an OBJ file and an USDZ
// file to the documents directory. Also displays a share dialog
// to enable easy sharing of the model files.    
@IBAction func onSave3DMeshTapped(_ sender: PaintyButton) {
    arController.save3DModel()
}
    
// Resets the AR scene
@IBAction func onResetTapped(_ sender: PaintyButton) {
    arController.resetScene()
}

// Retrieves the list of painted walls along with any important information.    
@IBAction func onGetPaintInfoTapped(_ sender: PaintyButton) {
    let paintInfo = arController.retrievePaintInfo()
    print("Paint Info:- ", paintInfo as Any)
}

Step 13

Open Main.storyboard and add a label to it. Connect the label's outlet to LidarViewController.swift and name it planarMeshesCountLabel.

This label will inform you about the count of planar meshes.

Now modify createARView() method as show below:

private func createARView() {
    arController = RemodelARLib.makeLidarARController(with: arscnView)

    arController.planarMeshCountUpdated = { [weak self] meshCount in
        DispatchQueue.main.async {
            self?.planarMeshesCountLabel.text = "Planar Meshes: \(meshCount)"
        }
    }
}

Step 14

Finally, Override the touchesEnded(_ touches: Set, with event: UIEvent?) method in LidarViewController.swift.

public override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
   guard let touch = touches.first else { return }

   let point = touch.location(in: arscnView)
   // Call this method when the user touches the ARSCNView for mesh 
   // hit testing to determine which mesh to color when the user taps 
   // on the view
   arController.handleTouch(point: point)
}

Now, you should be able to create and paint walls.

To paint a wall, select different colors and textures then tap on a wall. You can also save a picture and a mesh of your room.

If at any point you need help from the Passio team, please reach out to us at [e-mail]