fix images and add index.md

Author: RuiyuZ

com.unity.perception/Documentation~/FAQ/FAQ.md

@@ -42,7 +42,7 @@ Keep in mind that any new label added with this method should already be present
   Labeling works on the GameObject level, so to achieve the scenarios described here, you will need to break down your main object into multiple GameObjects parented to the same root object, and add `Labeling` components to each of the inner objects, as shown below.
 
 <p align="center">
-<img src="images/inner_objects.png" width="800"/>
+<img src="../images/FAQ/images/inner_objects.png" width="800"/>
 </p>
 
   Alternatively, in cases where parts of the surface of the object need to be labeled (e.g. decals on objects), you can add labeled invisible surfaces on top of these sections. These invisible surfaces need to have a fully transparent material. To create an invisible material:
@@ -54,7 +54,7 @@ Keep in mind that any new label added with this method should already be present
   An example labeled output for an object with separate labels on inner objects and decals is shown below:
 
 <p align="center">
-<img src="images/inner_labels.gif" width="600"/>
+<img src="../images/FAQ/images/inner_labels.gif" width="600"/>
 </p> 
 
 ---
@@ -118,7 +118,7 @@ Most human character models use Skinned Mesh Renderers. Unfortunately, at this t
   The ***Inspector*** view of a prefab cluster asset looks like below:
 
   <p align="center">
-<img src="images/prefab_cluster.png" width="400"/>
+<img src="../images/FAQ/images/prefab_cluster.png" width="400"/>
 </p>  
 
   Now all that is left is to use our prefab clusters inside a Randomizer. Here is some sample code:
@@ -146,7 +146,7 @@ public class ClusterRandomizer : UnityEngine.Perception.Randomization.Randomizer
 This Randomizer takes a list of `PrefabCluster` assets, then, on each Iteration, it goes through all the provided clusters and samples one prefab from each. The ***Inspector*** view for this Randomizer looks like this:
 
 <p align="center">
-<img src="images/cluster_randomizer.png" width="400"/>
+<img src="../images/FAQ/images/cluster_randomizer.png" width="400"/>
 </p>  
 
 ---
@@ -426,7 +426,7 @@ Suppose we need to drop a few objects into the Scene, let them interact physical
 
 
 <p align="center">
-<img src="images/object_drop.gif" width="700"/>
+<img src="../images/FAQ/images/object_drop.gif" width="700"/>
 </p>  
 
 ---
@@ -494,7 +494,7 @@ HDRP projects have motion blur and a number of other post processing effects ena
 
 
 <p align="center">
-<img src="images/volume.png" width="500"/>
+<img src="../images/FAQ/images/volume.png" width="500"/>
 </p>  
 
 ---
@@ -573,25 +573,25 @@ A visual comparison of the different lighting configurations in HDRP is shown be
 Default HDRP:
 
 <p align="center">
-<img src="images/hdrp.png" width="700"/>
+<img src="../images/FAQ/images/hdrp.png" width="700"/>
 </p>  
 
 HDRP with Global Illumination (notice how much brighter the scene is with ray traced light bouncing):
 
 <p align="center">
-<img src="images/hdrp_rt_gi.png" width="700"/>
+<img src="../images/FAQ/images/hdrp_rt_gi.png" width="700"/>
 </p>  
 
 HDRP with Path Tracing (128 samples) (notice the red light bleeding from the cube onto the floor and the increased shadow quality):
 
 <p align="center">
-<img src="images/hdrp_pt_128_samples.png" width="700"/>
+<img src="../images/FAQ/images/hdrp_pt_128_samples.png" width="700"/>
 </p>  
 
 HDRP with Path Tracing (4096 samples) (more samples leads to less ray tracing noise but also a longer time to render):
 
 <p align="center">
-<img src="images/hdrp_pt_4096_samples.png" width="700"/>
+<img src="../images/FAQ/images/hdrp_pt_4096_samples.png" width="700"/>
 </p>  
 
 ---

com.unity.perception/Documentation~/HPTutorial/TUTORIAL.md

@@ -8,12 +8,13 @@ In this tutorial, **":green_circle: Action:"** mark all of the actions needed to
 
 Steps included in this tutorial:
 
-* [Step 1: Import `.fbx` Models and Animations](#step-1)
-* [Step 2: Set Up a Humanoid Character in a Scene](#step-2)
-* [Step 3: Set Up the Perception Camera for Keypoint Annotation](#step-3)
-* [Step 4: Configure Animation Pose Labeling](#step-4)
-* [Step 5: Add Joints to the Character and Customize Keypoint Templates](#step-5)
-* [Step 6: Randomize the Humanoid Character's Animations](#step-6)
+- [Human Pose Labeling and Randomization Tutorial](#human-pose-labeling-and-randomization-tutorial)
+    - [<a name="step-1">Step 1: Import `.fbx` Models and Animations</a>](#step-1-import-fbx-models-and-animations)
+    - [<a name="step-2">Step 2: Set Up a Humanoid Character in a Scene</a>](#step-2-set-up-a-humanoid-character-in-a-scene)
+    - [<a name="step-3">Step 3: Set Up the Perception Camera for Keypoint Annotation</a>](#step-3-set-up-the-perception-camera-for-keypoint-annotation)
+    - [<a name="step-4">Step 4: Configure Animation Pose Labeling</a>](#step-4-configure-animation-pose-labeling)
+    - [<a name="step-5">Step 5: Add Joints to the Character and Customize Keypoint Templates</a>](#step-5-add-joints-to-the-character-and-customize-keypoint-templates)
+    - [<a name="step-6">Step 6: Randomize the Humanoid Character's Animations</a>](#step-6-randomize-the-humanoid-characters-animations)
 
 > :information_source: If you face any problems while following this tutorial, please create a post on the **[Unity Computer Vision forum](https://forum.unity.com/forums/computer-vision.626/)** or the **[GitHub issues](https://github.com/Unity-Technologies/com.unity.perception/issues)** page and include as much detail as possible.
 
@@ -32,7 +33,7 @@ We will use this duplicated Scene in this tutorial so that we do not lose our gr
 Your Scenario should now look like this:
 
 <p align="center">
-<img src="Images/scenario_empty.png" width="400"/>
+<img src="../images/HPTutorial/Images/scenario_empty.png" width="400"/>
 </p>
 
 * **:green_circle: Action**: Select `Main Camera` and in the _**Inspector**_ view of the `Perception Camera` component, **disable** all previously added labelers using the check-mark in front of each. We will be using a new labeler in this tutorial.
@@ -45,7 +46,7 @@ We now need to import the sample files required for this tutorial.
 Once the sample files are imported, they will be placed inside the `Assets/Samples/Perception` folder in your Unity project, as seen in the image below:
 
 <p align="center">
-<img src="Images/project_folders_samples.png" width="600"/>
+<img src="../images/HPTutorial/Images/project_folders_samples.png" width="600"/>
 </p>
 
 * **:green_circle: Action**: Select all of the assets inside the `Assets/Samples/Perception/<perception-package-version>/Human Pose Labeling and Randomization/Models and Animations`.
@@ -61,7 +62,7 @@ Note how `Animation Type` is set to `Humanoid` for all selected assets. This is
 * **:green_circle: Action**: Select the new `Player` object in the Scene and in the _**Inspector**_ tab set its transform's position and rotation according to the image below to make the character face the camera.
 
 <p align="center">
-<img src="Images/character_transform.png" width="800"/>
+<img src="../images/HPTutorial/Images/character_transform.png" width="800"/>
 </p>
 
 The `Player` object already has an `Animator` component attached. This is because the `Animation Type` property of all the sample `.fbx` files is set to `Humanoid`.
@@ -71,7 +72,7 @@ To animate our character, we will now attach an `Animation Controller` to the `A
 * **:green_circle: Action**: Double click the new controller to open it. Then right-click in the empty area and select _**Create State**_ -> _**Empty**_. 
 
 <p align="center">
-<img src="Images/anim_controller_1.png" width="600"/>
+<img src="../images/HPTutorial/Images/anim_controller_1.png" width="600"/>
 </p>
 
 This will create a new state and attach it to the Entry state with a new transition edge. This means the controller will always move to this new state as soon as the `Animator` component is awoken. In this example, this will happen when the **▷** button is pressed and the simulation starts.
@@ -83,19 +84,19 @@ In the selector window that pops up, you will see several clips named `Take 001`
 * **:green_circle: Action**: Select the animation clip originating from the `TakeObjects.fbx` file, as seen below:
 
 <p align="center">
-<img src="Images/select_clip.png" width="600"/>
+<img src="../images/HPTutorial/Images/select_clip.png" width="600"/>
 </p>
 
 * **:green_circle: Action**: Assign `TestAnimationController` to the `Controller` property of the `Player` object's `Animator` component. 
 
 <p align="center">
-<img src="Images/assign_controller.png" width="400"/>
+<img src="../images/HPTutorial/Images/assign_controller.png" width="400"/>
 </p>
 
 If you run the simulation now you will see the character performing an animation for picking up a hypothetical object as seen in the GIF below.
 
 <p align="center">
-<img src="Images/take_objects.gif" width="600"/>
+<img src="../images/HPTutorial/Images/take_objects.gif" width="600"/>
 </p> 
 
 
@@ -116,7 +117,7 @@ Similar to the labelers we used in the Perception Tutorial, we will need a label
 * **:green_circle: Action**: In the _**Inspector**_ UI for this new `Labeling` component, expand `HPE_IdLabelConfig` and click _**Add to Labels**_ on `MyCharacter`.
 
 <p align="center">
-<img src="Images/add_label_from_config.png" width="400"/>
+<img src="../HPTutorial/Images/add_label_from_config.png" width="400"/>
 </p> 
 
 * **:green_circle: Action**: Return to `Perception Camera` and assign `HPE_IdLabelConfig` to the `KeyPointLabeler`'s label configuration property.
@@ -125,14 +126,14 @@ Similar to the labelers we used in the Perception Tutorial, we will need a label
 The labeler should now look like the image below:
 
 <p align="center">
-<img src="Images/keypoint_labeler.png" width="500"/>
+<img src="../HPTutorial/Images/keypoint_labeler.png" width="500"/>
 </p>
 
 
 The `Active Template` tells the labeler how to map default Unity rig joints to human joint labels in the popular COCO dataset so that the output of the labeler can be easily converted to COCO format. Later in this tutorial, we will learn how to add more joints to our character and how to customize joint mapping templates.
 
 <p align="center">
-<img src="Images/take_objects_keypoints.gif" width="600"/>
+<img src="../images/HPTutorial/Images/take_objects_keypoints.gif" width="600"/>
 </p> 
 
 You can now check out the output dataset to see what the annotations look like. To do this, click the _**Show Folder**_ button in the `Perception Camera` UI, then navigate inside to the dataset folder to find the `captures_000.json` file. Here is an example annotation for the first frame of our test-case here:
@@ -276,15 +277,15 @@ You can now use the `Timestamps` list to define poses. Let's define four poses h
 Modify `MyAnimationPoseConfig` according to the image below:
 
 <p align="center">
-<img src="Images/anim_pos_conf.png" width="800"/>
+<img src="../images/HPTutorial/Images/anim_pos_conf.png" width="800"/>
 </p> 
 
 The pose configuration we created needs to be assigned to our `KeyPointLabeler`. So:
 
 * **:green_circle: Action**: In the _**Inspector**_ UI for `Perception Camera`, set the `Size` of `Animation Pose Configs` for the `KeyPointLabeler` to 1. Then, assign the `MyAnimationPoseConfig` to the sole slot in the list, as shown below:
 
 <p align="center">
-<img src="Images/keypoint_labeler_2.png" width="500"/>
+<img src="../images/HPTutorial/Images/keypoint_labeler_2.png" width="500"/>
 </p> 
 
 If you run the simulation again to generate a new dataset, you will see the new poses we defined written in it. All frames that belong to a certain pose will have the pose label attached.
@@ -305,7 +306,7 @@ In the _**Inspector**_ view of `CocoKeypointTemplate`, you will see the list of
 
 
 <p align="center">
-<img src="Images/coco_template.png" width="500"/>
+<img src="../images/HPTutorial/Images/coco_template.png" width="500"/>
 </p> 
 
 If you review the list you will see that the `left_ear` and `right_ear` joints are also not associated with the rig.
@@ -317,7 +318,7 @@ We will create our three new joints under the `Head` object.
 * **:green_circle: Action**: Create three new empty GameObjects under `Head` and place them in the proper positions for the character's nose and ears, as seen in the GIF below (make sure the positions are correct in 3D space):
 
 <p align="center">
-<img src="Images/new_joints.gif" width="600"/>
+<img src="../images/HPTutorial/Images/new_joints.gif" width="600"/>
 </p> 
 
 The final step in this process would be to label these new joints such that they match the labels of their corresponding keypoints in `CocoKeypointTemplate`. For this purpose, we use the `Joint Label` component.
@@ -327,7 +328,7 @@ The final step in this process would be to label these new joints such that they
 If you run the simulation now, you can see the new joints being visualized:
 
 <p align="center">
-<img src="Images/new_joints_play.gif" width="600"/>
+<img src="../images/HPTutorial/Images/new_joints_play.gif" width="600"/>
 </p> 
 
 You could now look at the latest generated dataset to confirm the new joints are being detected and written.
@@ -347,7 +348,7 @@ The `Animation Randomizer Tag` accepts a list of animation clips. At runtime, th
 If you run the simulation now, your character will randomly perform one of the above four animations, each for 150 frames. This cycle will recur 20 times, which is the total number of Iterations in your Scenario.   
 
 <p align="center">
-<img src="Images/randomized_results.gif" width="600"/>
+<img src="../images/HPTutorial/Images/randomized_results.gif" width="600"/>
 </p> 
 
 > :information_source: The reason the character stops animating at certain points in the above GIF is that the animation clips are not set to loop. Therefore, if the randomly selected timestamp is sufficiently close to the end of the clip, the character will complete the animation and stop animating for the rest of the Iteration.

com.unity.perception/Documentation~/Index.md

@@ -33,7 +33,7 @@ Continue reading for more details concerning the primary components driving rand
 
 <br>
 <p align="center">
-<img src="Images/randomization_uml.png" width="900"/>
+<img src="../images/Randomization/Images/randomization_uml.png" width="900"/>
   <br><i>Class diagram for the randomization framework included in the Perception package</i>
 </p>
 

com.unity.perception/Documentation~/Randomization/Index.md

@@ -13,7 +13,7 @@ By default, the Perception package includes one ready-made Scenario, the `FixedL
 Scenarios have a number of lifecycle hooks that are called during execution. Below is a diagram visualizing the sequence of operations run by a typical scenario:
 
 <p align="center">
-<img src="Images/scenario-lifecycle-diagram.png" width="600"/>
+<img src="../images/Randomization/Images/scenario-lifecycle-diagram.png" width="600"/>
 </p>
 
 

com.unity.perception/Documentation~/Randomization/Scenarios.md

@@ -61,7 +61,7 @@ The main difference between this schema and nuScenes is that we use **document b
 This means that instead of requiring multiple id-based "joins" to explore the data, data is nested and sometimes duplicated for ease of consumption.
 
 ## Components
-![image alt text](image_0.png)
+![image alt text](../images/Schema/image_0.png)
 
 ### captures
 
@@ -96,7 +96,7 @@ We cannot use timestamps to synchronize between two different events because tim
 Instead, we use a "step" counter which make it easy to associate metrics and captures that occur at the same time. 
 Below is an illustration of how captures, metrics, timestamps and steps are synchronized. 
 
-![image alt text](captures_steps_timestamps.png)
+![image alt text](../images/Schema/captures_steps_timestamps.png)
 
 Since each sensor might trigger captures at different frequencies, at the same timestamp we might contain 0 to N captures, where N is the total number of sensors included in this scene. 
 If two sensors are captured at the same timestamp, they should share the same sequence, step and timestamp value.
@@ -169,7 +169,7 @@ annotation {
 
 A grayscale PNG file that stores integer values (label pixel_value in [annotation spec](#annotation_definitionsjson) reference table, semantic segmentation) of the labeled object at each pixel. 
 
-![image alt text](image_2.png)
+![image alt text](../images/Schema/image_2.png)
 
 #### capture.annotation.values
 
@@ -285,7 +285,7 @@ How to support instance segmentation (maybe we need to use polygon instead of pi
 
 A grayscale PNG file that stores integer values of labeled instances at each pixel. 
 
-![image alt text](image_4.png)
+![image alt text](../images/Schema/image_4.png)
 -->
 
 ### metrics

com.unity.perception/Documentation~/Schema/Synthetic_Dataset_Schema.md

@@ -18,15 +18,15 @@ This will download a Docker image from Unity. If you get an error regarding the
 * **:green_circle: Action**: The image is now running on your computer. Open a web browser and navigate to `http://localhost:8888` to open the Jupyter notebook:
 
 <p align="center">
-<img src="Images/jupyter1.png" width="800"/>
+<img src="../images/Tutorial/Images/jupyter1.png" width="800"/>
 </p>
 
 * **:green_circle: Action**: To make sure your data is properly mounted, navigate to the `data` folder. If you see the dataset's folders there, we are good to go.
 * **:green_circle: Action**: Navigate to the `datasetinsights/notebooks` folder and open `Perception_Statistics.ipynb`.
 * **:green_circle: Action**: Once in the notebook, remove the `/<GUID>` part of the `data_root = /data/<GUID>` path. Since the dataset root is already mapped to `/data`, you can use this path directly.
 
 <p align="center">
-<img src="Images/jupyter2.png" width="800"/>
+<img src="../images/Tutorial/Images/jupyter2.png" width="800"/>
 </p>
 
 This notebook contains a variety of functions for generating plots, tables, and bounding box images that help you analyze your generated dataset. Certain parts of this notebook are currently not of use to us, such as the code meant for downloading data generated through Unity Simulation (coming later in this tutorial).
@@ -37,7 +37,7 @@ Below, you can see a sample plot generated by the Dataset Insights notebook, dep
 
 
 <p align="center">
-<img src="Images/object_count_plot.png" width="600"/>
+<img src="../images/Tutorial/Images/object_count_plot.png" width="600"/>
 </p>
 
 
@@ -61,7 +61,7 @@ Once the Docker image is running, the rest of the workflow is quite similar to w
 * **:green_circle: Action**: In the `data_root = /data/<GUID>` line, the `<GUID>` part will be the location inside your `<download path>` where the data will be downloaded. Therefore, you can just remove it so as to have data downloaded directly to the path you previously specified:
 
 <p align="center">
-<img src="Images/di_usim_1.png" width="900"/>
+<img src="../images/Tutorial/Images/di_usim_1.png" width="900"/>
 </p>
 
 * **:green_circle: Action**: In the block of code titled "Unity Simulation [Optional]", uncomment the lines that assign values to variables, and insert the correct values, based on information from your Unity Simulation run. 
@@ -93,7 +93,7 @@ The `access_token` you need for your Dataset Insights notebook is the access tok
 Once you have entered all the information, the block of code should look like the screenshot below (the actual values you input will be different):
 
 <p align="center">
-<img src="Images/di_usim_2.png" width="800"/>
+<img src="../images/Tutorial/Images/di_usim_2.png" width="800"/>
 </p>
 
 
@@ -102,7 +102,7 @@ Once you have entered all the information, the block of code should look like th
 You will see a progress bar while the data downloads:
 
 <p align="center">
-<img src="Images/di_usim_3.png" width="800"/>
+<img src="../images/Tutorial/Images/di_usim_3.png" width="800"/>
 </p>
 
 
@@ -111,7 +111,7 @@ The next couple of code blocks (under "Load dataset metadata") analyze the downl
 * **:green_circle: Action**: Once you reach the code block titled "Built-in Statistics", make sure the value assigned to the field `rendered_object_info_definition_id` matches the id displayed for this metric in the table output by the code block immediately before it. The screenshot below demonstrates this (note that your ids might differ from the ones here):
 
 <p align="center">
-<img src="Images/di_usim_4.png" width="800"/>
+<img src="../images/Tutorial/Images/di_usim_4.png" width="800"/>
 </p>
 
 Follow the rest of the steps inside the notebook to generate a variety of plots and stats.