# ARFoundationPlacementIndicator This is a template project for Unity's AR Foundation system. It's ready to build and includes an AR placement indicator. This is a reticle that tracks the center of your screen in the AR world. So it snaps to surfaces such as tables, the floor, walls, etc. It can be used to spawn in objects, or any other feature you wish to include in your AR app. # What is AR Foundation? Right now, there are two main AR SDK's available. ARCore for Android and ARKit for iOS. AR Foundation is an API which allows the developer to create AR apps for both platforms seamlessly. Developers don't need to create separate projects for Android and iOS, or have even more convoluted code. It's all packaged into one with AR Foundation. So what can we do with AR Foundation? - Detect surfaces - Identify feature points in the world - Track virtual objects in the real world - Adjust the lighting in Unity based on a real world estimate - Face, image and object tracking - Unity documentation Due to these advanced features, there are restrictions to which devices can actually run this. - Supported Android devices (for ARCore) - Supported iOS devices (for ARKit) # Demo Scene AR Session: runs and manages the current AR session. AR Session Origin: defines the center of the AR session. Also includes a few other components that we need: AR Raycast Manager, AR Plane Manager. AR Camera: renders the device camera and AR objects. PlacementIndicator: AR reticle which snaps to the tracked surfaces. # Tutorial Let's now go over how we can setup the project from scratch. First, create a new Unity project. In the editor, open up the Package Manager window (Window > Package Manager). Here, we want to install: - AR Foundation - ARCore XR Plugin (if you're developing for Android) - ARKit XR Plugin (if you're developing for iOS) ![Package Manager](https://camo.githubusercontent.com/b4d99fa403c5ba29bece91b8d7671296d8525a5ff278cfcb864012aa6851282e/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436343761643164643032382e706e67) We can now close that window. Next, let's go over to the Hierarchy (a list of all the objects in our current scene) and delete the MainCamera object. This is because we're now going to add in 2 new objects (which includes an AR camera). Right click the Hierarchy and select: - XR > AR Session Origin - XR > AR Session The AR Session Origin defines the center of the AR world. It also has an AR camera as a child which has the scripts needed to work in AR. Then we create the AR Session object. This basically runs the AR session and detects inputs. ![AR objects](https://camo.githubusercontent.com/9f1f5825f6f7577361030fe47330f14a6d89b563a926215485ad80246f0279a7/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436343762626330356237332e706e67) Select the AR Session Origin object and look over in the Inspector. Click Add Component and add two components: - AR Raycast Manager - AR Plane Manager ![AR Session Origin](https://camo.githubusercontent.com/de696fdcf3864828878efa573f3144eecf8b3747f50f25f7c3d712f8d87644ad/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436343966313630373566342e706e67) Before we continue, let's switch our platform over to whatever device we're building for. Open up the Build Settings window (File > Build Settings). First, let's click the Add Open Scenes button to add the current scene to the build list. The find your platform (Android or iOS) in the list. Select it and then click Switch Platform. ![Build Settings](https://camo.githubusercontent.com/ec55c0d9d122b8e8502c1e65590cfb897503f60f63bc26919ab10c4802ab2993/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436343764323636396230362e706e67) # Creating the Placement Indicator In the repo, we've got a PNG file called PlacementMarkerBase. Create a new Material called PlacementIndicator. ![New Material](https://camo.githubusercontent.com/e1b4991d44930e487a97f0714c79ba5bf1778df5cd57d1dcb731c0566a5e9635/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436343766386161623035312e706e67) Let's now edit the material. Select it and in the Inspector, we can set the properties: - Set the Shader to Unlit/Transparent - Drag the PlacementIndicator.PNG into the texture field ![PlacementIndicator Material](https://camo.githubusercontent.com/42d52bdb3b6fec688572316fc705a0bff170e787aef54e55bdb52e1d8e78605a/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436343766653661303963642e706e67) Now we can add the in-game object. In the Hierarchy, right click and select Create Empty. Rename this object to PlacementIndicator. If you select it, in the Inspector set the Position to 0, 0, 0. ![PlacementIndicator object](https://camo.githubusercontent.com/36593e7d5cdb8079bb083bc8954ee90ec7c9c227159496a8be3b386fbf735be4/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436343831336565633036632e706e67) Right click the object in the Hierarchy and select 3D Object > Plane. This will create a white plane object. Drag the material we just made onto it to apply. You might see that the object has a MeshCollider component attached to it. In the Inspector, right click on the collider's name and select Remove Component. ![PlacementIndicator object 2](https://camo.githubusercontent.com/886d90c9fd023787eacea8271356ce530ff0e23257ba693418c429fd04a23e94/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436343831646433303530372e706e67) Right now, our placement indicator would be very large in AR. To make it more manageable and around 1x1 inch, select the Plane and set the Scale to 0.01, 0.01, 0.01. ![Plane Scale](https://camo.githubusercontent.com/a2a03808395108876bc072143e95f70810ad304fffe252b13140e26828b0d08d/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436343832393532383032622e706e67) # Scripting the Placement Indicator Next, let's create the script which will be the code controlling the placement indicator. In the Project panel, right click and select Create > C# Script. Call this PlacementIndicator. ![PlacementIndicator Script](https://camo.githubusercontent.com/4c28e1c74ad073775ccfdf73d978bf80ff0cec1e0699084745d5cbd1dc9c9a91/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436343835393134326437312e706e67) Let's attach the script to the object. Select the PlacementIndicator and drag the script into the Inspector. You should see the script component attached. ![Attaching the Component](https://camo.githubusercontent.com/8bcec11ab31fc51a4a37fd06ce0e2785ca8fed6046aa58bd25a0ddcdbc5c8150/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436343836353431616434322e706e67) Double click on the script file to open it up in Visual Studio. You should have the default script template inside. - The public class PlacementIndicator : MonoBehaviour code is where the contents of the script are contained - The Start function gets called once when the object is initialized (at the start of the game) - The Update function gets called every frame (e.g. 60 times a second if the app is running at 60 FPS) Above the class, you should see three lines of code with using before it. These are external libraries we're using. We need to add two more libraries specifically for AR Foundation. ``` using UnityEngine.XR.ARFoundation; using UnityEngine.XR.ARSubsystems; ``` Back down in our class, let's start by adding in some variables to keep track of. ``` private ARRaycastManager rayManager; private GameObject visual; ``` Inside the Start function we can set the two variables and start off by hiding the placement indicator visual. ``` // get the components rayManager = FindObjectOfType(); visual = transform.GetChild(0).gameObject; // hide the placement indicator visual visual.SetActive(false); ``` Then down in the Update function, we're going to be shooting a raycast from the center of our screen. A raycast is basically a line that can detect objects (think shooting a bullet). We give it an origin position and direction and it will then tell us what it hits. We're looking to hit an AR plane (automatically generated when it detects the world). Let's start by creating a list to hold all of the AR planes we hit. Then we can cast the raycast. ``` // shoot a raycast from the center of the screen List hits = new List(); rayManager.Raycast(new Vector2(Screen.width / 2, Screen.height / 2), hits, TrackableType.Planes); ``` Under that, let's check if we hit anything. ``` // if we hit an AR plane surface, update the position and rotation if(hits.Count > 0) { } ``` Inside of the if statement, let's set the position and rotation of the placement indicator to be where the raycast hit it. ``` transform.position = hits[0].pose.position; transform.position = hits[0].pose.rotation; ``` Let's also enable the visual if it's disabled. ``` // enable the visual if it's disabled if(!visual.activeInHierarchy) visual.SetActive(true); ``` The script is now complete. We can return back to the editor now. # Building to Android If you have an Android device and want to build your app to it, follow these steps. First, we need to enable Developer Options on your device. - Open the Settings app and select the System button - Scroll to the bottom and select About Phone - Tab the Build Number 7 times - Now there should be a Developer Options tab in the settings app - Go into that and enable USB Debugging Back in Unity, let's open up the Build Settings window (File > Build Settings...). Click Refresh then find your plugged in device. After that, click Player Settings to open the Player Settings window. ![player settings](https://camo.githubusercontent.com/3c47fd5fa0c2726c7fe31096e2f0ff3f249c0cdceebcec28409655674609fd72/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436343962353433656338332e706e67) - Go to the Player screen - The Product Name is what the app will be called on your device - In the Other Settings tab... - Enable Auto Graphics API - Disable Multithread Rendering ![Player Settings](https://camo.githubusercontent.com/9cb6ee8d2041cb4fd2156c272a31afb103d6f40503aab80b8278fe74823d702f/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436343962646566343233302e706e67) Scroll down a bit and create a Package Name. This is a unique identifier for your app. The format is com.CompanyName.ProductName. This can really be whatever you want, just follow the structure. Also set the Minimum API Level to Android 7.0 "Nougat" (API level 24). ![Package Name](https://camo.githubusercontent.com/58416c60efda96c6f06e3807dfbff0383137c786894bd71f7cc3f7bfd741ef51/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436343963393533356435312e706e67) Now go to the XR tab and click the Create button to create a new AR Core setting asset. Save this in the Assets folder. Then the screen should change. Set Requirement to Optional. ![ARCore](https://camo.githubusercontent.com/d35ce3f09ce6081544bf8f2fc2675f088e90234ee911d4f612a2f67f0b602cf9/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436373335373262366363372e706e67) Let's go back to the Build Settings window and click Build and Run. You can save the .apk where ever you want as it's automatically going to install onto our device. ![Build Settings](https://camo.githubusercontent.com/6e7ccffc2313114dcd8bf936197cb0b122332e02ae8acc6dbb048d7bd0473bb4/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436343964313033643737382e706e67) When the app launches, it should only take a second or so for the placement indicator to appear. # Building to iOS Building to iOS is similar to Android, yet it includes a few extra steps. First, we need to install an app called Xcode. You can download it from the App Store or Apple website. Inside of Unity, we first need to change our build platform. Go to the Build Settings window (File > Build Settings...) Select the iOS platform and click Switch Platform. Then click on the Player Settings button to go to the Project Settings window. Here, make sure you're on the Player tab. - Set the Product Name to what you want the app to be called on your device - In Other Settings, make sure Auto Graphics API is enabled ![ios project settings](https://camo.githubusercontent.com/4533991a35d0d5c04c6b8cc9480e677ae66de870b766b170d9f3a47fe93a770b/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436373465386565656135642e706e67) Scroll down a bit more as we need to change a few more things. - Set the Bundle Identifier to a unique identifier for your app. The format is normally com.CompanyName.ProductName - Set the Camera Usage Description to what we want to use the camera for - Set the Architecture to ARM64 ![player settings](https://camo.githubusercontent.com/e46550d828947608f6929d18758572197c8e53f83f401f1846a379b755be9052/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436373466313362666161372e706e67) Now click on the XR > ARKit tab to go to the ARKit screen. Here, we want to click Create and save the file to the Assets folder. ![arkit 1](https://camo.githubusercontent.com/82cff11a1ab2c11879744a109d5d5cf7411a41cfdf47f960883bac9ad096278a/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436373531323163633237362e706e67) After that, the screen will change so set the Requirement to Optional. ![arkit 2](https://camo.githubusercontent.com/3bfb7eac711082436de7e5b29c33faff64efae90ad1e9696cdc2e53ba894bfd9/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436373531343530393839392e706e67) Now we can build our app. Go back to the Build Settings window (File > Build Settings...) and click Build. Save where ever you want. ![build settings](https://camo.githubusercontent.com/3e68bec549d064b5338282c689315f71996e00efe64bd541b7ae146c5c38312f/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436373531613739313939302e706e67) After the project has been built, let's go to that folder and double-click on the Unity-iPhone.xcodeproj file to open it up in Xcode. ![finder](https://camo.githubusercontent.com/4e6210c6e51b318351820393924c4bec6c890503b5ef51f47cb51a34bc237662/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436373532623736613434332e706e67) Inside of Xcode is where we publish to our device. To open the project, click on Unity-iPhone in the top left. ![xcode](https://camo.githubusercontent.com/b8fde8b08d6789a8e273356008462f223fda4714981795b0d36d49f5aa39713e/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436373532643837623438352e706e67) In order to build to a device, we need an account connected. Go to the Preferences window (Xcode > Preferences) and then click on the Accounts tab. Here, let's click on the ' + ' icon and select Apple ID. Login and then you should see your account pop-up in the list. ![apple id](https://camo.githubusercontent.com/aec00b11b70aecab392869fc4dd3b79441e5ce918177cf98c92a774d7b90b969/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436373533303965653030302e706e67) Back in the main Xcode window, let's enable Automatically manage signing. ![auto sign](https://camo.githubusercontent.com/07ae4470ad9ec3e2ef9b7ca62608b93ef2b85d7d876ba80acd3a9d503467bcfa/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436373534316464653535352e706e67) Then, set your Team to your account. Now we're good to go, so make sure your device is connected and click the Play button to begin the build. ![team sign](https://camo.githubusercontent.com/0035630611afb8411b39d9905e26a80d094f0cf134c751b44977ea8ab46b7ff1/68747470733a2f2f767267616d65646576656c6f706d656e742e70726f2f77702d636f6e74656e742f75706c6f6164732f323031392f30382f696d675f356436373534616231333363612e706e67) When the app launches, it should only take a second or two for the placement indicator to appear.