Update image target docs (#27)

* Update image target docs

* Update image target docs

* Update image target docs

* Update image target docs

* Update image target docs

Author: cmbartschat

docs/api/engine/xrcontroller/configure.md

@@ -16,13 +16,22 @@ Parameter | Type | Default | Description
 disableWorldTracking [Optional] | `Boolean` | `false` | If true, turn off SLAM tracking for efficiency. This needs to be done **BEFORE** [`XR8.run()`](/docs/api/engine/xr8/run) is called.
 enableLighting [Optional] | `Boolean` | `false` | If true, `lighting` will be provided by [`XR8.XrController.pipelineModule()`](pipelinemodule.md) as `processCpuResult.reality.lighting`
 enableWorldPoints [Optional] | `Boolean` | `false` | If true, `worldPoints` will be provided by [`XR8.XrController.pipelineModule()`](pipelinemodule.md) as `processCpuResult.reality.worldPoints`.
-imageTargets [Optional] | `Array` |  | List of names of the image target to detect. Can be modified at runtime. Note: All currently active image targets will be replaced with the ones specified in this list.
+imageTargetData [Optional] | `Array` |  | List of image targets to track, see [image target data](#image-target-data). Note: All currently active image targets will be replaced with the ones specified in this list.
 leftHandedAxes [Optional] | `Boolean` | `false` | If true, use left-handed coordinates.
 mirroredDisplay [Optional] | `Boolean` | `false` | If true, flip left and right in the output.
 scale [Optional] | `String` | `responsive` | Either `responsive` or `absolute`. `responsive` will return values so that the camera on frame 1 is at the origin defined via [`XR8.XrController.updateCameraProjectionMatrix()`](updatecameraprojectionmatrix.md). `absolute` will return the camera, image targets, etc in meters. When using `absolute` the x-position, z-position, and rotation of the starting pose will respect the parameters set in [`XR8.XrController.updateCameraProjectionMatrix()`](updatecameraprojectionmatrix.md) once scale has been estimated. The y-position will depend on the camera's physical height from the ground plane.
 
 **IMPORTANT:** `disableWorldTracking: true` needs to be set **BEFORE** both [`XR8.XrController.pipelineModule()`](pipelinemodule.md) and [`XR8.run()`](/docs/api/engine/xr8/run) are called and cannot be modifed while the engine is running.
 
+### Image Target Data {#image-target-data}
+
+Property | Type | Description
+--------- | ---- | -----------
+imagePath | `String` | The path or URL to fetch the tracked image from. For best results, use a portrait, 480x640, grayscale image.
+type | `String` | 'PLANAR', 'CYLINDER', or 'CONICAL'
+properties | `Object` | Properties of the crop and geometry of the target. This should be generated by image-target-cli or the desktop app.
+metadata [Optional] | any | This property can be used to attach any additional data for use by the application.
+
 ## Returns {#returns}
 
 None
@@ -45,5 +54,9 @@ XR8.run({canvas: document.getElementById('camerafeed')})
 ## Example - Change active image target set {#example---change-active-image-target-set}
 
 ```javascript
-XR8.XrController.configure({imageTargets: ['image-target1', 'image-target2', 'image-target3']})
+XR8.XrController.configure({
+  imageTargetData: [
+    require('../image-targets/my-target.json'),
+  ],
+})
 ```

docs/engine/guides/image-targets.md

@@ -14,6 +14,8 @@ Use the [image target example project](https://github.com/8thwall/studio-image-t
 <br></br>
 <br></br>
 
+![](/images/studio/image-target-intro.gif)
+
 ## Enabling Image Targets
 
 To enable image targets in your project, you must use a World camera.
@@ -27,62 +29,24 @@ To enable image targets in your project, you must use a World camera.
 
 If you do not plan to use World Tracking in your project, you can use the **Disable World Tracking** setting to improve performance.
 
-## Generating Image Target Files {#generating-image-target-files}
-
-To use image targets in your project, you must generate some required assets with a command line interface (CLI). These files contain image target metadata needed by the engine.
-
-:::tip
-See [documentation on Image Target CLI](https://github.com/8thwall/8thwall/blob/main/apps/image-target-cli/README.md) for more details on cropping and cylindrical/conical image targets.
-:::
-
-1. Open a terminal window and run `npx @8thwall/image-target-cli@latest`
-2. Answer the prompts, following the examples below:
-
-```bash
-Enter the path to the image file: 
-
-~/Downloads/target1.png
-```
-
-```bash
-Select the image type:
-1) flat (default)
-2) cylinder
-3) cone
-
-1
-```
+## Adding Image Targets
 
-```bash
-Use default crop? [Y/n]:
-
-y
-```
+### Upload the Image Target
 
-```bash
-Enter the output folder:
+Locate the **Image Targets** panel at the bottom left of the Studio Interface. Click on the **( + )** to add a flat, cylindrical, or conical image target.
 
-~/Documents/8th Wall/my-project/image-targets
-```
-
-```bash
-Enter a name for the image target:
+````mdx-code-block
+<img src={require('/images/studio/image-target-upload.png').default} width="400px"/>
+````
 
-target1
-```
+### Configuring the Image Target
 
-On generation, the following will be outputted to the specified folder:
+Customize the image target's tracking region and metadata.
 
-* Metadata within a JSON file
-* Original image
-* Cropped image
-* Thumbnail image (263x350)
-* Luminance image (grayscale, 480x640)
-* Geometry image (for conical)
+````mdx-code-block
+<img src={require('/images/studio/image-target-config.png').default} width="400px"/>
+````
 
-:::note[Important]
-Make sure the output folder was specified as a folder named `image-targets` at the root of your 8th Wall project. See [Verifying Project Structure](#verifying-project-structure) for more details.
-:::
 
 ## Configuring Image Targets
 
@@ -100,40 +64,25 @@ const onxrloaded = () => {
 window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)
 ```
 
-## Verifying Project Structure {#verifying-project-structure}
-
-1. Click the **Open Externally** button in the assets panel to open project code in your IDE
-
-````mdx-code-block
-<img src={require('/images/studio/guides/image-targets/open-externally.png').default} width="400px"/>
-````
-
-2. Verify the `image-targets` folder is at the **root** of the project, and that `app.js` is within the `src` folder
-
-````mdx-code-block
-<img src={require('/images/studio/guides/image-targets/project-structure.png').default} width="400px"/>
-````
-
 ## Adding the Image Target Entity
 
 To add an image target to your scene:
+
 1. Click **( + )** in the Scene Hierarchy and select **Image Target**.
 
 ````mdx-code-block
 <img src={require('/images/studio/guides/image-targets/add-image-target.png').default} width="400px"/>
 ````
 
-2. Select the image target entity from the scene hierarchy and enter the name of the image target in the inspector.
+2. In the "Image Target" dropdown, select the image target resource you'd like to track.
 
 ````mdx-code-block
-<img src={require('/images/studio/guides/image-targets/image-target-name.png').default} width="400px"/>
+<img src={require('/images/studio/image-target-link.png').default} width="400px"/>
 ````
 
-The name of the image target entered in the inspector should match what was entered in the CLI when generating the image target files. You can double check the name of the image target by looking at the prefix of the image target assets and/or in the JSON file associated with the image target.
-
 ## Using Image Targets
 
-When you add an image target to your project, an image target mesh will appear so that you can align and position other 3D content against the image target. 
+When you add an image target to your project, an image target mesh will appear so that you can align and position other 3D content against the image target.
 
 ````mdx-code-block
 <img src={require('/images/studio/guides/image-targets/image-target-mesh.png').default} width="400px"/>
@@ -143,4 +92,8 @@ Ensure any entities you want to track to the image target are **children** of th
 
 ````mdx-code-block
 <img src={require('/images/studio/guides/image-targets/image-target-children.png').default} width="400px"/>
-````
+````
+
+## Optimizing Tracking
+
+Please reference [this guide](/docs/engine/guides/image-targets#optimizing-image-target-tracking) for details on how to improve tracking accuracy.