Asset viewers and animation previews (#494)

* Added asset viewers

* Added animation preview section

* Update content/en/user-manual/assets/animation.md

---------

Co-authored-by: Steven Yau <syau@snapchat.com>

content/en/user-manual/assets/animation.md

@@ -6,6 +6,17 @@ position: 4
 
 An Animation asset is used to play a single animation on a 3D model. Animations are imported by uploading 3D scenes (such as FBX files) which contain animation data. The animation data is extracted from the uploaded file by the [asset pipeline][asset_pipeline] and a [Target Asset][target_asset] is created to use in game.
 
+## Animation Preview
+
+The inspector has a viewer that can be used to preview the animation with any Template or Model asset. This is useful if you have a single animation that can be applied to different character rigs.
+
+![Asset Inspector Preview][inspector-preview-gif]
+
+There is also a viewer in the [Anim State Graph Editor][anim-state-graph-editor] when you select a state in the graph. When selected, all Entities in the scene that are using the graph will show in a list and can be selected for preview.
+
+![Anim State Graph Preview][anim-state-graph-preview-gif]
+
+
 ## Animation Import Settings
 
 <div class="alert alert-info">
@@ -22,7 +33,7 @@ They can be found in the Project Settings under Asset Tasks.
 
 Only available for GLB export format. When importing an animation, the generated asset name can either be set from the 'Take Name' in the animation file, or use the animation filename instead.
 
-This is useful with assets that are brought/taken from a store such as [Mixamo][1] where all the take names are 'mixamo.com' and using the filename as the asset name is clearer.
+This is useful with assets that are brought/taken from a store such as [Mixamo][mixamo] where all the take names are 'mixamo.com' and using the filename as the asset name is clearer.
 
 ### Sample rate
 
@@ -45,6 +56,7 @@ If enabling this option, it is recommended that Sample Rate is disabled and Curv
 [asset_pipeline]: /user-manual/glossary#asset-pipeline
 [target_asset]: /user-manual/glossary#target-asset
 [animation_import_settings]: /images/user-manual/assets/animation/animation-import-settings.png
-
- [1]: https://www.mixamo.com/
-
+[mixamo]: https://www.mixamo.com/
+[anim-state-graph-editor]: /user-manual/animation/anim-state-graph-assets/
+[inspector-preview-gif]: /images/user-manual/assets/animation/inspector-preview.gif
+[anim-state-graph-preview-gif]: /images/user-manual/assets/animation/anim-state-graph-preview.gif

content/en/user-manual/assets/viewers.md

@@ -0,0 +1,42 @@
+---
+title: Asset Viewers
+layout: usermanual-page.hbs
+position: 19
+---
+
+Some of the assets have viewer tools that can help inspect them more closely. Assets that can be viewed in these will have the option to 'Open in Viewer' in the inspector and context menu.
+
+![Open in Viewer option][open-in-viewer-option]
+
+Clicking on either of these options will open the viewer with the asset in a new tab.
+
+## Model Viewer
+
+![Model Viewer Preview][model-viewer-preview]
+
+(Model: Copyright 2021 Wayfair LLC. [CC BY 4.0][cc-40] International)
+
+The [open source Model Viewer][model-viewer-github] is available for the following asset types:
+
+- Model (Source) that are GLBs
+- Model
+- Container
+- Animation
+
+The Model Viewer is useful for inspecting the model node hierarchy, morph targets and debugging animation issues.
+
+## Texture Tool
+
+![Texture Tool Preview][texture-tool-preview]
+
+The [open source Texture Tool][texture-tool-github] is available for the following asset types:
+
+- Texture
+- Texture Atlas
+
+[open-in-viewer-option]: /images/user-manual/assets/viewers/open-in-viewer-option.jpg
+[model-viewer-preview]: /images/user-manual/assets/viewers/model-viewer-preview.jpg
+[model-viewer-github]: https://github.com/playcanvas/model-viewer
+[texture-tool-preview]: /images/user-manual/assets/viewers/texture-tool-preview.jpg
+[texture-tool-github]: https://github.com/playcanvas/texture-tool
+[cc-40]: https://creativecommons.org/licenses/by/4.0/