diff --git a/docs/api/engine/xrcontroller/configure.md b/docs/api/engine/xrcontroller/configure.md index e1af912..7eef91e 100644 --- a/docs/api/engine/xrcontroller/configure.md +++ b/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'), + ], +}) ``` diff --git a/docs/engine/guides/image-targets.md b/docs/engine/guides/image-targets.md index 09977c0..ec5ffbf 100644 --- a/docs/engine/guides/image-targets.md +++ b/docs/engine/guides/image-targets.md @@ -1,10 +1,17 @@ --- id: image-targets sidebar_position: 6 +description: Bring signage, magazines, boxes, bottles, cups, and cans to life with 8th Wall Image Targets. --- # Image Targets +:::tip +Use the [image target example project](https://github.com/8thwall/aframe-image-targets-example) as a reference to get started and confirm your project structure is set up correctly. +::: + +## Introduction + Bring signage, magazines, boxes, bottles, cups, and cans to life with 8th Wall Image Targets. 8th Wall Web can detect and track flat, cylindrical and conical shaped image targets, allowing you to bring static content to life. @@ -15,14 +22,7 @@ ability to track directly to it. Image targets can work in tandem with our World Tracking (SLAM), enabling experiences that combine image targets and markerless tracking. -You may track up to 5 image targets simultaneously with World Tracking enabled or up to 10 when it -is disabled. - -Up to 5 image targets per project can be **"Autoloaded"**. An Autoloaded image target is enabled -immediately as the page loads. This is useful for apps that use 5 or fewer image targets such as -product packaging, a movie poster or business card. - -The set of active image targets can be changed at any time by calling +You may track up to 32 image targets simultaneously. The set of active image targets can be changed at any time by calling [XR8.XrController.configure()](/docs/api/engine/xrcontroller/configure). This lets you manage hundreds of image targets per project making possible use cases like geo-fenced image target hunts, AR books, guided art museum tours and much more. If your project utilizes SLAM most of the time but image targets @@ -33,140 +33,84 @@ scans to enter the experience. ## Image Target Types {#image-target-types} -Type | Image | Description ----- | ----- | ----------- -**Flat**|![FlatTarget](/images/flat.jpg)| Track 2D images like posters, signs, magazines, boxes, etc. -**Cylindrical**|![CylindricalTarget](/images/cylindrical.jpg)| Track images wrapped around cylindrical items like cans and bottles. -**Conical**|![ConicalTarget](/images/conical.jpg)| Track images wrapped around objects with different a top vs bottom circumference like coffee cups, etc. - -## Image Target Requirements {#image-target-requirements} - -* File Types: **.jpg**, **.jpeg** or **.png** -* Dimensions: - * Minimum: **480 x 640 pixels** - * Maximum length or width: **2048 pixels**. - * Note: If you upload something larger, the image is resized down to a max length/width of 2048 - , maintaining aspect ratio. -* Hosting: All image targets must be uploaded to your 8th Wall project before they can be - used. You can self-host the rest of your Web AR experience (if on an Enterprise or Legacy Pro - plan) but the source image target is always hosted by 8th Wall. Please see below for instructions - on creating/uploading flat or curved image targets. - -## Image Target Quantities {#image-target-quantities} - -There is no limit to the number of image targets that can be associated with a project, however, -there are limits to the number of image targets that can be **active** in the user's browser at any -given time. - -* Active image targets per Project: **32** - -## Manage Image Targets {#manage-image-targets} - -Click the Image Target icon in the left navigation or the "Manage Image Targets" link on the Project -Dashboard to manage your image targets. - -This screen allows you to create, edit, and delete the image targets associated with your project. -Click on an existing image target to edit. Click the "+" icon for the desired image target type to -create a new one. - -## Create Flat Image Target {#create-flat-image-target} - -1. Click the "+ Flat" icon to create a new flat image target. - -![ImageTargetFlat1](/images/image-target-create-flat.jpg) - -2. **Upload Flat Image Target**: Drag your image (.jpg, .jpeg or .png) into the upload panel, or click within the dotted region and use your file browser to select your image. - -3. **Set Tracking Region** (and Orientation): Use the slider to set the region of the image that will be used to detect and track your target within the WebAR experience. The rest of the image will be discarded, and the region which you specify will be tracked in your experience. +Type | Description +---- | ----------- +**Flat** | Track 2D images like posters, signs, magazines, boxes, etc. +**Cylindrical** | Track images wrapped around cylindrical items like cans and bottles. +**Conical** | Track images wrapped around objects with different a top vs bottom circumference like coffee cups, etc. -![SetTrackingRegion](https://media.giphy.com/media/RCFntZ0hn5VO3W9Mld/giphy.gif) +## Generating Image Target Files {#generating-image-target-files} -4. **Edit Flat Image Target properties**: +To use image targets in your project, you can generate the required assets with a command line interface (CLI). These files contain image target metadata needed by the engine. -* (1) Give your image target a **name** by editing the field at the top left of the window. -* (2) **IMPORTANT!** Test your image target: The best way to determine if your uploaded image will make a good or bad image target (see [Optimizing Image Target Tracking](#optimizing-image-target-tracking)) is to use the Simulator to assess tracking quality. Scan the QR code with your camera app to open the simulator link, then point your device at the screen or physical object. -* (3) Click **Load automatically** if you want the image target to be enabled automatically as the WebAR project loads. Up to 5 image targets can be loaded automatically without writing a single line of code. More targets can be loaded programnatically through the Javascript API. -* (4) Optional: If you would like to add metadata to your image, in either Text or JSON format, click the **Metadata** button at the bottom of the window. +:::info +If a graphical interface is preferred, you can also create image targets via the [Desktop App](/downloads). Even if you don't intend to use Studio, you can create an empty project, and after creating the target as desired, copy the generated files into your own project. +::: -![EditFlatImageTarget](/images/edit-flat-image-target.jpg) +1. Open a terminal window and run `npx @8thwall/image-target-cli@latest` +2. Answer the prompts, following the examples below: -5. Changes made on this screen are automatically saved. Click **Close** to return to your image target library. +```bash +Enter the path to the image file: -## Create Cylindrical Image Target {#create-cylindrical-image-target} - -1. Click the "+ Cylindrical" icon to create a new flat image target. - -![ImageTargetFlat1](/images/image-target-create-cylindrical.jpg) - -2. **Upload Flat Image Target**: Drag your image (.jpg, .jpeg or .png) into the upload panel, or click within the dotted region and use your file browser to select your image. - -3. **Set Tracking Region** (and Orientation): Use the slider to set the region of the image that will be used to detect and track your target within the WebAR experience. The rest of the image will be discarded, and the region which you specify will be tracked in your experience. - -![](https://media.giphy.com/media/AdgvL3hqQAULWEHWTg/giphy.gif) - -4. **Edit Cylindrical Image Target properties**: - -* (1) Give your image target a **name** by editing the field at the top left of the window. -* (2) **Drag the sliders** until the shape of your label appears as expected in the simulator, or **input the measurements** directly. -* (3) **IMPORTANT!** Test your image target: The best way to determine if your uploaded image will make a good or bad image target (see [Optimizing Image Target Tracking](#optimizing-image-target-tracking)) is to use the Simulator to assess tracking quality. Scan the QR code with your camera app to open the simulator link, then point your device at the screen or physical object. -* (4) Click **Load automatically** if you want the image target to be enabled automatically as the WebAR project loads. Up to 5 image targets can be loaded automatically without writing a single line of code. More targets can be loaded programnatically through the Javascript API. -* (5) Optional: If you would like to add metadata to your image, in either Text or JSON format, click the **Metadata** button at the bottom of the window. - -![EditCylindricalImageTarget](/images/edit-cylindrical-image-target.jpg) - -5. Changes made on this screen are automatically saved. Click **Close** to return to your image target library. - -## Create Conical Image Target {#create-conical-image-target} - -1. Click the "+ Conical" icon to create a new flat image target. - -![ImageTargetFlat1](/images/image-target-create-conical.jpg) - -2. **Upload Conical Image Target**: Drag your image (.jpg, .jpeg or .png) into the upload panel, or click within the dotted region and use your file browser to select your image. The uploaded image should be in "unwrapped", aka "rainbow" format, cropped like so: +~/Downloads/target1.png +``` -![conical rainbow image](/images/conical-rainbow-image.jpg) +```bash +Select the image type: +1) flat (default) +2) cylinder +3) cone -3. **Set Large Arc Alignment**: Drag the slider until the **red** line overlays the uploaded image's **large arc**. +1 +``` -![set large arc](https://media.giphy.com/media/1zcOKYrjOmhaxUJ7lh/giphy.gif) +```bash +Use default crop? [Y/n]: -4. **Set Small Arc Alignment**: Do the same for the small arc. Drag the slider until the **blue** line overlays the uploaded image's **small arc**. +y +``` -5. **Set Tracking Region** (and Orientation): Drag and zoom on the image to set the portion of the image that is detected and tracked. This should be the most feature rich area of your image. +```bash +Enter the output folder: -![set tracking](https://media.giphy.com/media/t2rSve9UshxGB07US2/giphy.gif) +~/Documents/8th Wall/my-project/image-targets +``` -6. **Edit Conical Image Target properties**: +```bash +Enter a name for the image target: -* (1) Give your image target a **name** by editing the field at the top left of the window. -* (2) **Drag the sliders** until the shape of your label appears as expected in the simulator, or **input the measurements** directly. -* (3) **IMPORTANT!** Test your image target: The best way to determine if your uploaded image will make a good or bad image target (see [Optimizing Image Target Tracking](#optimizing-image-target-tracking)) is to use the Simulator to assess tracking quality. Scan the QR code with your camera app to open the simulator link, then point your device at the screen or physical object. -* (4) Click **Load automatically** if you want the image target to be enabled automatically as the WebAR project loads. Up to 5 image targets can be loaded automatically without writing a single line of code. More targets can be loaded programnatically through the Javascript API. -* (5) Optional: If you would like to add metadata to your image, in either Text or JSON format, click the **Metadata** button at the bottom of the window. +target1 +``` -![EditConicalImageTarget](/images/edit-conical-image-target.jpg) +:::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. +::: -7. Changes made on this screen are automatically saved. Click **Close** to return to your image target library. +On generation, the following will be outputted to the specified folder: -## Edit Image Targets {#edit-image-targets} +* Metadata within a JSON file +* Original image +* Cropped image +* Thumbnail image (263x350) +* Luminance image (grayscale, 480x640) +* Geometry image (for conical) -Click on any of the image targets under **My Image Targets** to view and/or modify their properties: +## Configuring Image Targets -1. Image Target Name -2. Sliders / Measurements (Cylindrical/Conical image targets only) -3. Simulator QR Code -4. Delete Image Target -5. Load Automatically -6. Metadata -7. Orientation and Dimensions -8. Autosave status -9. Close +Create a file named `app.js` in the `src` folder (if you don't have one already). At the top of the file, configure image targets by providing paths to each image target's metadata JSON file. -Type | Fields ----- | ------ -Flat | ![flat target](/images/edit-flat-image-target-full.jpg) -Cylindrical | ![cylindrical target](/images/edit-cylindrical-image-target-full.jpg) -Conical | ![conical target](/images/edit-conical-image-target-full.jpg) +```javascript +const onxrloaded = () => { + XR8.XrController.configure({ + imageTargetData: [ + require('../image-targets/target1.json'), + require('../image-targets/target2.json') + ], + }) +} +window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded) +``` ## Changing Active Image Targets {#changing-active-image-targets} @@ -176,12 +120,6 @@ The set of active image targets can be modified at runtime by calling Note: The set of currently active image targets will be **replaced** with the new set passwd to [XR8.XrController.configure()](/docs/api/engine/xrcontroller/configure). -#### Example - Change active image target set {#example---change-active-image-target-set} - -```javascript -XR8.XrController.configure({imageTargets: ['image-target1', 'image-target2', 'image-target3']}) -``` - ## Optimizing Image Target Tracking {#optimizing-image-target-tracking} To ensure the highest quality image target tracking experience, be sure to follow these guidelines when selecting an image target. @@ -221,103 +159,5 @@ Good Markers | Bad Markers #### Example Projects {#example-projects} - - - - ---- - -The new API allows image targets to be defined directly from code as `XrController.configure({imageTargetData: [{...}]})`. - -## Flat Image Target - -If you are setting up a new flat image target: - -1. Start by converting the image to grayscale and cropping/scaling/rotating to 480x640 pixels. -2. Define the image target data: -``` -const imageTarget = { - "imagePath": "./path/to/image.png", - "metadata": {}, // available for custom use cases - "name": "my-image-target", - "type": "PLANAR", - "properties": { - "left": 0, - "top": 0, - "width": 480, - "height": 640, - "originalWidth": 480, - "originalHeight": 640, - "isRotated": false, // set this to true if you rotated the image when you cropped it - } -} -``` - -## Cylindrical Image Target - -For cylindrical targets, there are more parameters to provide (`cylinderSideLength`, `cylinderCircumferenceTop`, `targetCircumferenceTop`, `cylinderCircumferenceBottom`, `arcAngle`, `coniness`) - -1. Define the image target data: -``` -const imageTarget = { - "imagePath": "./path/to/image.png", - "metadata": {}, // available for custom use cases - "name": "my-image-target", - "type": "CYLINDER", - "properties": { - "left": 0, - "top": 18, - "width": 1476, - "height": 1968, - "originalWidth": 1476, - "originalHeight": 2000, - "isRotated": false, // set this to true if you rotated the image when you cropped it - "cylinderSideLength": 135.5, - "cylinderCircumferenceTop": 257.14, // This should match circumferencce bottom - "targetCircumferenceTop": 100, - "cylinderCircumferenceBottom": 257.14, - "arcAngle": 140.0, - "coniness": 0, // This should be 0 for all cylinders - "inputMode": "BASIC", - "unit": "mm", - } -} -``` - -## Conical Image Target - -For conical targets, there is the unconification, plus the input format is different from what was uploaded to the web. - -1. Start with a rainbow image cropped by the top (dotted green line) and bottom (bold green line) radius - -![](/images/migration/conical.png) - -2. Stretch the rainbow image to be flat, and crop/scale/rotate the dimensions of the flat, unconified image to be a grayscale 480x640 pixels (this cropped image should be the image provided in the image path) -3. Define the image target data: -``` -const imageTarget = { - "imagePath": "./path/to/image.png", // path to unconified image - "metadata": {}, // available for custom use cases - "name": "my-image-target", - "type": "CONICAL", - "properties": { - "left": 177, - "top": 554, - "width": 564, - "height": 752, - "originalWidth": 842, - "originalHeight": 2000, - "isRotated": false, // set this to true if you rotated the image when you cropped it - "topRadius": 4479, - "bottomRadius": 3630.644, - "cylinderSideLength": 21.05, - "cylinderCircumferenceTop": 100, - "targetCircumferenceTop": 50, - "cylinderCircumferenceBottom": 81.06, - "arcAngle": 180, - "coniness": 0.303, // log2(topRadius / bottomRadius) - "inputMode": "BASIC", - "unit": "mm", - } -} -``` +- https://github.com/8thwall/aframe-image-targets-example +- https://github.com/8thwall/studio-image-targets-example diff --git a/docs/studio/guides/xr/image-targets.mdx b/docs/studio/guides/xr/image-targets.mdx index 32f5e1e..bb0c29d 100644 --- a/docs/studio/guides/xr/image-targets.mdx +++ b/docs/studio/guides/xr/image-targets.mdx @@ -14,6 +14,8 @@ Use the [image target example project](https://github.com/8thwall/studio-image-t



+![](/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 + +```` -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 + +```` -:::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 - -```` - -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 - -```` - ## 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 ```` -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 - + ```` -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 @@ -143,4 +92,8 @@ Ensure any entities you want to track to the image target are **children** of th ````mdx-code-block -```` \ No newline at end of file +```` + +## Optimizing Tracking + +Please reference [this guide](/docs/engine/guides/image-targets#optimizing-image-target-tracking) for details on how to improve tracking accuracy. diff --git a/static/images/conical-rainbow-image.jpg b/static/images/conical-rainbow-image.jpg deleted file mode 100644 index bd9a597..0000000 Binary files a/static/images/conical-rainbow-image.jpg and /dev/null differ diff --git a/static/images/conical.jpg b/static/images/conical.jpg deleted file mode 100644 index 5952ff4..0000000 Binary files a/static/images/conical.jpg and /dev/null differ diff --git a/static/images/cylindrical.jpg b/static/images/cylindrical.jpg deleted file mode 100644 index 547318e..0000000 Binary files a/static/images/cylindrical.jpg and /dev/null differ diff --git a/static/images/edit-conical-image-target-full.jpg b/static/images/edit-conical-image-target-full.jpg deleted file mode 100644 index ec9c8d9..0000000 Binary files a/static/images/edit-conical-image-target-full.jpg and /dev/null differ diff --git a/static/images/edit-conical-image-target.jpg b/static/images/edit-conical-image-target.jpg deleted file mode 100644 index 411c7c1..0000000 Binary files a/static/images/edit-conical-image-target.jpg and /dev/null differ diff --git a/static/images/edit-cylindrical-image-target-full.jpg b/static/images/edit-cylindrical-image-target-full.jpg deleted file mode 100644 index 013b520..0000000 Binary files a/static/images/edit-cylindrical-image-target-full.jpg and /dev/null differ diff --git a/static/images/edit-cylindrical-image-target.jpg b/static/images/edit-cylindrical-image-target.jpg deleted file mode 100644 index 2f1782e..0000000 Binary files a/static/images/edit-cylindrical-image-target.jpg and /dev/null differ diff --git a/static/images/edit-flat-image-target-full.jpg b/static/images/edit-flat-image-target-full.jpg deleted file mode 100644 index d542008..0000000 Binary files a/static/images/edit-flat-image-target-full.jpg and /dev/null differ diff --git a/static/images/edit-flat-image-target.jpg b/static/images/edit-flat-image-target.jpg deleted file mode 100644 index a95a766..0000000 Binary files a/static/images/edit-flat-image-target.jpg and /dev/null differ diff --git a/static/images/flat.jpg b/static/images/flat.jpg deleted file mode 100644 index 4b9de61..0000000 Binary files a/static/images/flat.jpg and /dev/null differ diff --git a/static/images/image-target-create-conical.jpg b/static/images/image-target-create-conical.jpg deleted file mode 100644 index 31458a4..0000000 Binary files a/static/images/image-target-create-conical.jpg and /dev/null differ diff --git a/static/images/image-target-create-cylindrical.jpg b/static/images/image-target-create-cylindrical.jpg deleted file mode 100644 index 3d5d2fc..0000000 Binary files a/static/images/image-target-create-cylindrical.jpg and /dev/null differ diff --git a/static/images/image-target-create-flat.jpg b/static/images/image-target-create-flat.jpg deleted file mode 100644 index 3aca215..0000000 Binary files a/static/images/image-target-create-flat.jpg and /dev/null differ diff --git a/static/images/studio/guides/image-targets/image-target-children.png b/static/images/studio/guides/image-targets/image-target-children.png index aab0de1..8c75cf7 100644 Binary files a/static/images/studio/guides/image-targets/image-target-children.png and b/static/images/studio/guides/image-targets/image-target-children.png differ diff --git a/static/images/studio/guides/image-targets/image-target-mesh.png b/static/images/studio/guides/image-targets/image-target-mesh.png index 0614385..494c29c 100644 Binary files a/static/images/studio/guides/image-targets/image-target-mesh.png and b/static/images/studio/guides/image-targets/image-target-mesh.png differ diff --git a/static/images/studio/guides/image-targets/image-target-name.png b/static/images/studio/guides/image-targets/image-target-name.png deleted file mode 100644 index 65e500b..0000000 Binary files a/static/images/studio/guides/image-targets/image-target-name.png and /dev/null differ diff --git a/static/images/studio/guides/image-targets/open-externally.png b/static/images/studio/guides/image-targets/open-externally.png deleted file mode 100644 index d87ce71..0000000 Binary files a/static/images/studio/guides/image-targets/open-externally.png and /dev/null differ diff --git a/static/images/studio/guides/image-targets/project-structure.png b/static/images/studio/guides/image-targets/project-structure.png deleted file mode 100644 index 58af8e2..0000000 Binary files a/static/images/studio/guides/image-targets/project-structure.png and /dev/null differ diff --git a/static/images/studio/image-target-config.png b/static/images/studio/image-target-config.png new file mode 100644 index 0000000..2d98335 Binary files /dev/null and b/static/images/studio/image-target-config.png differ diff --git a/static/images/studio/image-target-intro.gif b/static/images/studio/image-target-intro.gif new file mode 100644 index 0000000..705d67b Binary files /dev/null and b/static/images/studio/image-target-intro.gif differ diff --git a/static/images/studio/image-target-link.png b/static/images/studio/image-target-link.png new file mode 100644 index 0000000..c9e8e41 Binary files /dev/null and b/static/images/studio/image-target-link.png differ diff --git a/static/images/studio/image-target-upload.png b/static/images/studio/image-target-upload.png new file mode 100644 index 0000000..ed90436 Binary files /dev/null and b/static/images/studio/image-target-upload.png differ