文档重构：整理文档目录 (#961)

docs/animation-animatorController.zh-CN.md

@@ -13,7 +13,7 @@ label: Animation
 
 通过动画控制器的编辑器，用户可以在其中组织[动画片段](${docs}animation-clip)的播放逻辑
 
-1. 准备好动画片段（[制作动画片段](${docs}animation-clip-)）
+1. 准备好动画片段（[制作动画片段](${docs}animation-clip)）
 
 ![1](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*Qc8sQ6iJd8IAAAAAAAAAAAAADsJ_AQ/original)
 

docs/animation-clip.zh-CN.md

@@ -27,7 +27,7 @@ label: Animation
 
 ### Transform 组件示例
 
-1. 在资产面板中 右键/点击+ 创建 `动画片段` 资产
+1. 在 **[资产面板](${docs}interface-assets)** 中 右键/点击+ 创建 `动画片段` 资产
 
 ![1](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*Bs6UQ6Vwz1UAAAAAAAAAAAAADsJ_AQ/original)
 

docs/animation-sprite-sheet.zh-CN.md

@@ -11,15 +11,15 @@ Galacean 支持引用类型的动画曲线，你可以添加类型为资产的
 
 ![Alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*PxdFQKal1JEAAAAAAAAAAAAADsJ_AQ/original)
 
-2. 在资产面板中创建 `AnimationClip`
+2. 在 **[资产面板](${docs}interface-assets)** 中创建 `AnimationClip`
 
 ![Alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*t1KMQb0s8V8AAAAAAAAAAAAADsJ_AQ/original)
 
 3. 在 `AnimationClip` 编辑器中添加 `sprite` 属性
 
 ![Alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*yFnYT5-NDFEAAAAAAAAAAAAADsJ_AQ/original)
 
-4. 开启录制模式，编辑器中点到对应的帧数，在 `SpriteRenderer` 中添加 `Sprite` （sprite 上传相关详见[精灵](${docs}graphics-sprite)）即可自动添加关键帧
+4. 开启录制模式，编辑器中点到对应的帧数，在 `SpriteRenderer` 中添加 `Sprite` （sprite 上传相关详见[精灵](${docs}graphics-2d-sprite)）即可自动添加关键帧
 
 ![Alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*wN9sSYfs2eAAAAAAAAAAAAAADsJ_AQ/original)
 

docs/assets-gc.zh-CN.md

@@ -0,0 +1,39 @@
+---
+order: 3
+title: 资产的释放
+type: 资产工作流
+label: Resource
+---
+
+# 资产释放
+
+为了避免重复加载资源，当资源被加载完成之后，会被缓存在 _ResourceManager_ 内。缓存本身会占用内存和显存，当开发者不再需要缓存的内容时，需要手动去释放缓存的内容。
+
+> 注意：资源之间是相互依赖的。
+
+例如下图展示的实体包含 [MeshRenderer](${api}core/MeshRenderer) 组件，依赖于 [Material](${api}core/Material)， _Material_ 可能被多个 _MeshRenderer_ 引用，如果释放 _Material_ ，那么引用此的其他 _MeshRenderer_ 则会找不到该 _Material_ 而报错。
+
+![image.png](https://gw.alipayobjects.com/mdn/mybank_yulibao/afts/img/A*wXmqRIwqI18AAAAAAAAAAAAAARQnAQ)
+
+> 注意：JavaScript 无法追踪对象的引用。 一般在 JavaScript 等弱类型语言中，是没有提供给开发者内存管理的功能的，所有对象的内存都是通过垃圾回收机制来管理，你没有办法去判断对象什么时候会被释放，所以没有[析构函数(destructor)](https://zh.wikipedia.org/wiki/%E8%A7%A3%E6%A7%8B%E5%AD%90)去调用引用资源的释放。
+
+`ResourceManager` 提供了一套基于引用计数的资源释放，需要开发者手动调用 [gc](${api}core/ResourceManager#gc)：
+
+```typescript
+engine.resourceManager.gc();
+```
+
+## 验证资产释放
+
+如果您需要验证资产是否释放成功，可按照以下步骤，在空白页打开以下示例：
+
+<playground src="assets-gc.ts"></playground>
+
+该示例在初始化时会通过创建 `Texture2D` 和 `Sprite` 渲染 2D 精灵，当点击右上角 GC 按钮后，`root` 节点被销毁，纹理和精灵资产的引用计数都被清空，此时这些资产会被真正销毁，分别在 `gc` 前后拍摄内存快照可以更直观地感受这个过程
+
+1. gc 前： **开发者工具** -> **内存** -> **拍摄堆快照** 
+2. gc 后： **开发者工具** -> **内存** -> **拍摄堆快照** -> **比较** -> **选择 gc 前快照**
+
+<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*CtRmTqXDgt0AAAAAAAAAAAAADhuCAQ/original" alt="image-1" style="zoom:50%;" />
+
+<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*E5PwQ7ocw2EAAAAAAAAAAAAADhuCAQ/original" alt="image-1" style="zoom:50%;" />

docs/assets-load.zh-CN.md

@@ -0,0 +1,145 @@
+---
+order: 2
+title: 资产的加载
+type: 资产工作流
+label: Resource
+---
+
+# 资产的加载
+
+在 Galacean 中，资产加载一般由使用它的情形分为三种情况：
+
+- 资产被导入到编辑器中，且在某个场景中使用
+- 资产被导入到编辑器中，但没有在场景中使用
+- 资产没有被导入到编辑器中
+
+> 若使用项目加载器加载项目，项目只会加载**主场景**中使用到的资源，编辑器里的其他资源不会被加载。
+
+```typescript
+await engine.resourceManager.load({
+  type: AssetType.Project,
+  url: "xxx.json",
+});
+```
+
+> 对应地，若使用场景加载器加载某个场景，场景加载器只会加载**该场景**中使用到的资源，其他资源默认不会被加载。
+
+```typescript
+const scene = await engine.resourceManager.load({
+  type: AssetType.Scene,
+  url: "xxx.json",
+});
+engine.sceneManager.activeScene = scene;
+```
+
+> 至于那些没有在场景中使用的资产，可以使用挂载在 Engine 实例中的 [resourceManager.load](${api}core/Engine#resourceManager#load) 加载资源。
+
+```typescript
+// 若只传入 URL ，引擎会依据后缀推断加载的资产类型，如 `.png` 对应纹理， `.gltf` 则对应模型
+const gltf1 = await this.engine.resourceManager.load<GLTFResource>(
+  "test1.gltf"
+);
+// 也可以通过 `LoadItem` 定义加载的资产类型，重试次数，重试间隔等信息
+const gltf2 = await this.engine.resourceManager.load<GLTFResource>({
+  type: AssetType.GLTF,
+  url: "test2.gltf",
+  retryCount: 5,
+  timeout: 500,
+  retryInterval: 500,
+});
+// 也支持传入数组批量加载，返回按顺序排列的加载好的资源队列。
+const [texture2D, glTFResource] = await this.engine.resourceManager.load([
+  "a.png",
+  "b.gltf",
+]);
+```
+
+下面将具体介绍在运行时加载资源的：
+
+- 资源路径
+- 加载进度
+- 取消加载
+- 获取加载过的资产
+
+## 资源路径
+
+资源的 url 路径支持**相对路径**，**绝对路径**与**虚拟路径**：
+
+- 相对路径是针对运行时根路径而言的，若路径有误，可在开发者工具中根据加载报错信息进行调整
+- 绝对路径是完整指定文件位置的路径，如 `https://xxxx.png`，也包含 `blob` 与 `base64`
+- 虚拟路径是在编辑器的资产文件中的路径，一般为 `Assets/sprite.png`
+
+```typescript
+// 加载相对路径下的资源
+this.engine.resourceManager.load("a.png");
+
+// 加载绝对路径下的资源
+this.engine.resourceManager.load("https://a.png");
+
+// 加载 base64
+this.engine.resourceManager.load<GLTFResource>({
+  url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
+  type: AssetType.Texture2D,
+});
+
+// 加载编辑器虚拟路径下的资源
+this.engine.resourceManager.load<GLTFResource>("Assets/texture.png");
+```
+
+> 在编辑器中可以通过  **[资产面板](${docs}interface-assets)**  -> **右键资产** -> **Copy relative path** 快速复制资产的相对路径
+
+### baseUrl
+
+`ResourceManger` 目前也支持了 `baseUrl` 的设置：
+
+```typescript
+engine.resourceManager.baseUrl = "https://cdn.galacean.com"
+```
+
+如果设置了 `baseUrl`，加载的相对路径会和 `baseUrl` 组合：
+
+```typescript
+engine.resourceManager.load('img/2d.png');
+```
+
+上面两段代码可以得出实际的加载路径是`https://cdn.galacean.com/img/2d.png`。
+
+## 加载进度
+
+调用加载队列可以得到一个 [AssetPromise](${api}core/AssetPromise) 对象，可以使用 [onProgress](${api}core/AssetPromise#onProgress) 获取加载进度。
+
+```typescript
+this.engine.resourceManager
+  .load(["a.png", "b.gltf"])
+  .onProgress((progress: number) => {
+    console.log(`当前加载进度为 ${progress}`);
+  });
+```
+
+## 取消加载
+
+_ResourceManager_ 对象中有 [cancelNotLoaded](${api}core/ResourceManager#cancelNotLoaded) 方法，可以通过调用此方法取消未加载完成的资源。传入 url 会取消特定的 url 的资源加载。
+
+```typescript
+// 取消所有未加载完的资源。
+this.engine.resourceManager.cancelNotLoaded();
+// 取消特定的 url 资源加载。
+this.engine.resourceManager.cancelNotLoaded("test.gltf");
+```
+
+> 注意：目前取消加载未完成资源会抛出异常。
+
+## 获取加载过的资产
+
+目前加载过的资产会缓存在 _ResourceManager_ 中，如需获取加载过的资产，可以通过较为保险的 `load` 这个**异步方法**，**即使资产没有在缓存中**，该接口也会重新加载对应资源。
+
+```typescript
+const asset = await this.engine.resourceManager.load(assetItem);
+```
+
+若明确地知道这个资源现在在缓存中，也可以调用 `getFromCache` 这个**同步方法**：
+
+```typescript
+// 获取传入的 URL 对应的资产
+const asset = this.engine.resourceManager.getFromCache(url);
+```

docs/assets-overall.zh-CN.md

@@ -0,0 +1,27 @@
+---
+order: 0
+title: 资产总览
+type: 资产工作流
+label: Resource
+---
+
+# 资产总览
+
+在 Galacean 中，网格，材质，纹理，精灵，图集，动画片段，动画控制器等等都属于资产。
+
+## 资产工作流
+
+在 Galacean 中，资产的工作流通常如下：
+
+```mermaid
+flowchart LR
+   导入资产 --> 编辑资产 --> 构建导出 --> 分发 --> 加载
+```
+
+本章节将主要讲述：
+
+- [资产类型](${docs}assets-type)：介绍**内置资产类型**和如何**自定义资产加载器**
+- 编辑状态下[资产的增删改查](${docs}interface-assets)
+- 构建项目后[资产如何导出并部署](${interface-publish})
+- 运行时如何[加载资产](${docs}assets-load)
+- 运行时如何[垃圾回收](${docs}assets-gc)

docs/assets-type.zh-CN.md

@@ -0,0 +1,46 @@
+---
+order: 1
+title: 资产类型
+type: 资产工作流
+label: Resource
+---
+
+# 资产类型
+
+Galacean 定义了一系列开箱即用的内置资产，同时也提供了灵活的定制加载能力。
+
+## 内置资源类型
+
+| 资源        | 加载类型              | 参考                                                                       |
+| ----------- | --------------------- | -------------------------------------------------------------------------- |
+| Texture2D   | AssetType.Texture2D   | [示例](https://galacean.antgroup.com/#/examples/latest/wrap-mode)          |
+| TextureCube | AssetType.HDR         | [示例](https://galacean.antgroup.com/#/examples/latest/hdr-loader)         |
+| glTF        | AssetType.GLTF        | [示例](https://galacean.antgroup.com/#/examples/latest/gltf-basic)         |
+| 压缩纹理    | AssetType.KTX2        | [示例](https://galacean.antgroup.com/#/examples/latest/compressed-texture) |
+| 环境光      | AssetType.Env         | [示例](https://galacean.antgroup.com/#/examples/latest/ambient-light)      |
+| 图集        | AssetType.SpriteAtlas | [示例](https://galacean.antgroup.com/#/examples/latest/sprite-atlas)       |
+| 字体        | AssetType.Font        | [示例](https://galacean.antgroup.com/#/examples/latest/text-renderer-font) |
+
+> 注意：环境光烘焙产物来自编辑器，或者使用 glTF Viewer，参考下图：
+
+![gltf viewer](https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*9mGbSpQ4HngAAAAAAAAAAAAAARQnAQ)
+
+## 自定义资产加载器
+
+用户也可以自定义加载器来加载自定义的资源：
+
+```typescript
+@resourceLoader(FBX, ["fbx"])
+export class FBXLoader extends Loader<FBXResource> {
+	load(item: LoadItem, resourceManager: ResourceManager): AssetPromise<FBXResource> {
+  	return new AssetPromise((resolve, reject)=> {
+    	...
+    })
+  }
+}
+```
+
+1. 通过 [@resourceLoader](${api}core/resourceLoader) 装饰器标注为 _ResourceLoader_，传入类型枚举和被解析的资源后缀名。上面的例子 `FBX` 是类型枚举， `["fbx"]`  是被解析资源的后缀名。
+2. 重写 [load](${api}core/ResourceManager#load) 方法， `load`  方法会传入 `loadItem` 和 `resourceManager` ， `loadItem`  包含了加载的基信息， `resourceManager`  可以帮助加载其他引用资源。
+3. 返回 [AssetPromise](${api}core/AssetPromise)  对象， `resolve`  解析后的资源结果，例如 FBX 返回特定的 `FBXResource` 。
+4. 若报错则 `reject`  错误。