Skip to content
This repository has been archived by the owner on Aug 7, 2024. It is now read-only.

docs: update hdr docs #497

Merged
merged 1 commit into from
Nov 3, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions docs/resource-manager.md
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,9 @@ const textureCube = await this.engine.resourceManager.load<TextureCube>({

[TextureCube](${api}core/TextureCube) uses six pictures as original resources, uses urls to pass the links of six pictures, and uses [AssetType.TextureCube](${api}core/AssetType#TextureCube) for type.

### 3. HDR
Of course, if you feel that it is a bit troublesome to pass 6 images, you can also use an HDR loader. The advantage is that only one .hdr texture in RGBE format can be used as the background of the skybox; the disadvantage is that the HDR loader is generally used for baking. The color range exceeds the [0-1] environment map, so the file size will be relatively large. If it is only used as a skybox display, the color beyond the [0-1] range is invalid, and the cost performance will be relatively low.
So HDR Loader is suitable for scenarios where there are other uses for floating point color.

```typescript
import { TextureCube } from "oasis-engine";

Expand All @@ -131,9 +133,8 @@ engine.resourceManager
});
```

HDR Loader use [AssetType.HDR](${api}core/AssetType#HDR) to load texture with .HDR format,The resulting product is also a cube texture.

### 4. Environment
### 3. Environment
Oasis supports offline baking through [Oasis Editor](https://oasis.alipay.com/editor) or [glTF Viewer](https://oasisengine.cn/gltf-viewer) to get IBL baked products `*.env` file.

![gltf viewer](https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*9mGbSpQ4HngAAAAAAAAAAAAAARQnAQ)
Expand All @@ -150,7 +151,7 @@ engine.resourceManager
scene.ambientLight = ambientLight;
});
```
### 5. Compressed texture
### 4. Compressed texture

> For more compressed texture related documents, please refer to [Compressed Texture](${docs}texture-compression).

Expand All @@ -162,7 +163,7 @@ const compressedTexture2D = await this.engine.resourceManager.load<Texture2D>("t

The suffix of compressed texture is generally `ktx`, and you need to pay attention to the compressed texture format supported by the platform when using it. After the compressed texture is loaded, the result is also [Texture2D](${api}core/Texture2D).

### 6. Compressed Cube Texture
### 5. Compressed Cube Texture

The loading of the compressed cube texture is different from the general cube texture. It is a separate binary file path, instead of the file path of 6 images, but it needs to be specified as [AssetType.KTXCube](${api}core/AssetType#KTXCube), because ResourceManager cannot identify which specific type of Loader needs to be used based on the suffix.

Expand All @@ -175,7 +176,7 @@ const compressedTextureCube = await this.engine.resourceManager.load<TextureCube
});
```

### 7. glTF
### 6. glTF

What you get after the resource is loaded is a [GLTFResource](${api}loader/GLTFResource) resource, including [Scene](${api}core/Scene), [Entity](${api}core/Entity), [Texture ](${api}core/Texture), [Material](${api}core/Material) and [AnimationClip](${api}core/AnimationClip) and other objects.

Expand All @@ -189,7 +190,7 @@ const gltf = await this.engine.resourceManager.load<GLTFResource>("test.gltf");

Go to [glTF resources](${docs}gltf) to learn more about glTF related designs.

### 8. Custom Loader
### 7. Custom Loader

Users can also customize the loader to load custom resources:

Expand Down
18 changes: 9 additions & 9 deletions docs/resource-manager.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,9 @@ const textureCube = await this.engine.resourceManager

[TextureCube](${api}core/TextureCube) 使用六张图片作为原始资源,用 urls 传递六张图片链接,type 使用 [AssetType.TextureCube](${api}core/AssetType#TextureCube) 。

### 3. HDR
当然,如果你觉得传递6张图片有点麻烦,也可以使用 HDR 解析器,他的优点是仅需要一张 RGBE 格式的 .hdr 贴图就可以作为天空盒的背景;缺点是 HDR 解析器一般用来烘焙颜色范围超出【0-1】的环境贴图,所以文件体积会比较大,如果仅仅用来当作天空盒展示,超出【0-1】范围的颜色是无效的,性价比会比较低。
因此 HDR Loader 适用于那些对浮点颜色还有别的用途的场景。

```typescript
import { TextureCube } from "oasis-engine";

Expand All @@ -129,15 +131,13 @@ engine.resourceManager
});
```

HDR Loader 使用 [AssetType.HDR](${api}core/AssetType#HDR) 加载 .HDR 格式的贴图,得到的产物也是立方体纹理。


### 4. Environment
### 3. AmbientLight
Oasis 支持通过[编辑器](https://oasis.alipay.com/editor)或者 [glTF Viewer](https://oasisengine.cn/gltf-viewer) 进行离线烘焙得到 IBL 烘焙产物 `*.env` 文件。

![gltf viewer](https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*9mGbSpQ4HngAAAAAAAAAAAAAARQnAQ)

拿到 `*.env` 后,我们可以通过 resourceManager 加载环境光:
拿到 `*.env` 后,我们可以直接通过 resourceManager 加载环境光:

```typescript
engine.resourceManager
Expand All @@ -150,7 +150,7 @@ engine.resourceManager
});
```

### 5. 压缩纹理
### 4. 压缩纹理
> 更多压缩纹理相关文档可查阅[压缩纹理](${docs}texture-compression-cn)。

```typescript
Expand All @@ -161,7 +161,7 @@ const compressedTexture2D = await this.engine.resourceManager.load<Texture2D>("t
压缩纹理后缀一般为 `ktx` ,使用时需注意平台支持的压缩纹理格式。压缩纹理加载后得到的也是 [Texture2D](${api}core/Texture2D) 。


### 6. 压缩立方体纹理
### 5. 压缩立方体纹理
压缩的立方体纹理的加载和一般的立方体纹理加载不一样,是单独的一个二进制文件路径,而不需要 6 张图片的文件路径,但是需要指定为类型为 [AssetType.KTXCube](${api}core/AssetType#KTXCube)。因为 ResourceManager 无法根据后缀识别需要使用哪种特定类型的 Loader。

```typescript
Expand All @@ -170,7 +170,7 @@ import { TextureCube } from "oasis-engine";
const compressedTextureCube = await this.engine.resourceManager.load<TextureCube>({url: "test.ktx", type: AssetType.KTXCube});
```

### 7. glTF
### 6. glTF

资源加载后得到的是一个 [GLTFResource](${api}loader/GLTFResource) 资源,包含 [Scene](${api}core/Scene)、[Entity](${api}core/Entity)、[Texture](${api}core/Texture)、[Material](${api}core/Material) 和 [AnimationClip](${api}core/AnimationClip) 等对象。

Expand All @@ -184,7 +184,7 @@ const gltf = await this.engine.resourceManager.load<GLTFResource>("test.gltf");

前往[ glTF 资源](${docs}gltf-cn) 了解更多 glTF 相关设计。

### 8. 自定义加载器
### 7. 自定义加载器
用户也可以自定义加载器来加载自定义的资源:

```typescript
Expand Down