Skip to content

docs: refactor skybox setup docs to use AssetType.HDR loading #3085

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
luo2430 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: refactor skybox setup docs to use AssetType.HDR loading #3085

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
43 changes: 18 additions & 25 deletions docs/en/graphics/background/sky.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,7 @@ In the editor, simply follow these steps to set the skybox for the background:

### 1. Create Skybox Texture

> You can download free HDR maps from [Poly Haven](https://polyhaven.com/) or [BimAnt HDRI](http://hdri.bimant.com/)

A skybox texture is a [cube texture](/en/docs/graphics/texture/cube/). After preparing the HDR, follow the path **[Asset Panel](/en/docs/assets/interface)** -> **Right-click Upload** -> **Select TextureCube(.hdr)** -> **Choose the corresponding HDR map** -> **Cube texture asset creation complete**.

<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Oi3FSLEEaYgAAAAAAAAAAAAADhuCAQ/original" />
A skybox texture is a [cube texture](/en/docs/graphics/texture/cube/). Refer to [Cube Texture - Creation](/en/docs/graphics/texture/cube/#creation) for how to create a cube texture asset from an HDR image.

### 2. Create Skybox Material

Expand All @@ -37,26 +33,23 @@ Finally, follow the path **[Hierarchy Panel](/en/docs/interface/hierarchy)** ->
### Code to Set Skybox

```typescript
// 创建天空盒纹理
const textureCube = await engine.resourceManager.load<TextureCube>({
urls: [
"px - right 图片 url",
"nx - left 图片 url",
"py - top 图片 url",
"ny - bottom 图片 url",
"pz - front 图片 url",
"nz - back 图片 url",
],
type: AssetType.TextureCube,
});
// 创建天空盒材质
const skyMaterial = new SkyBoxMaterial(engine);
skyMaterial.texture = textureCube;
// 设置天空盒
const background = scene.background;
background.mode = BackgroundMode.Sky;
background.sky.material = skyMaterial;
background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
// Load HDR as cube texture
engine.resourceManager
.load<TextureCube>({
type: AssetType.HDR,
url: "***.hdr",
})
.then((texture) => {
const skyMaterial = new SkyBoxMaterial(engine);
skyMaterial.texture = texture;
// HDR output is in RGBM format
skyMaterial.textureDecodeRGBM = true;
// Set skybox
const background = scene.background;
background.mode = BackgroundMode.Sky;
background.sky.material = skyMaterial;
background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
});
```

## Setting Procedural Sky
Expand Down
2 changes: 1 addition & 1 deletion docs/en/graphics/texture/cube.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Due to this sampling characteristic, cube textures can be used to implement effe
The editor supports generating cube textures by uploading HDR images. This method allows for HDR color gamut representation and is relatively convenient.

<Callout type="info">
You can download free HDR images from [Poly Haven](https://polyhaven.com/) or [BimAnt HDRI](http://hdri.bimant.com/).
You can download free HDR images from [Poly Haven](https://polyhaven.com/).
</Callout>

After preparing the HDR image, follow the steps:
Expand Down
43 changes: 18 additions & 25 deletions docs/zh/graphics/background/sky.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,7 @@ label: Graphics/Background

### 1. 创建天空盒纹理

> 可以在 [Poly Haven](https://polyhaven.com/) 或 [BimAnt HDRI](http://hdri.bimant.com/) 下载免费的 HDR 贴图

天空盒纹理就是一张[立方纹理](/docs/graphics/texture/cube/)，首先在准备好 HDR 后，依照路径 **[资产面板](/docs/assets/interface)** -> **右键上传** -> **选择 TextureCube(.hdr)** -> **选择对应 HDR 贴图** -> **立方纹理资产创建完毕** 操作即可。

<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Oi3FSLEEaYgAAAAAAAAAAAAADhuCAQ/original" />
天空盒纹理就是一张[立方纹理](/docs/graphics/texture/cube/)，如何从 HDR 贴图创建立方纹理资产请参考[立方纹理 - 创建](/docs/graphics/texture/cube/#创建)。

### 2. 创建天空盒材质

Expand All @@ -37,26 +33,23 @@ label: Graphics/Background
### 代码设置天空盒

```typescript
// 创建天空盒纹理
const textureCube = await engine.resourceManager.load<TextureCube>({
urls: [
"px - right 图片 url",
"nx - left 图片 url",
"py - top 图片 url",
"ny - bottom 图片 url",
"pz - front 图片 url",
"nz - back 图片 url",
],
type: AssetType.TextureCube,
});
// 创建天空盒材质
const skyMaterial = new SkyBoxMaterial(engine);
skyMaterial.texture = textureCube;
// 设置天空盒
const background = scene.background;
background.mode = BackgroundMode.Sky;
background.sky.material = skyMaterial;
background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
// 加载 HDR 作为立方纹理
engine.resourceManager
.load<TextureCube>({
type: AssetType.HDR,
url: "***.hdr",
})
.then((texture) => {
const skyMaterial = new SkyBoxMaterial(engine);
skyMaterial.texture = texture;
// HDR 输出为 RGBM 格式
skyMaterial.textureDecodeRGBM = true;
// 设置天空盒
const background = scene.background;
background.mode = BackgroundMode.Sky;
background.sky.material = skyMaterial;
background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
});
```

## 设置程序化天空
Expand Down
2 changes: 1 addition & 1 deletion docs/zh/graphics/texture/cube.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ label: Graphics/Texture
编辑器支持通过上传 HDR 贴图来生成立方体纹理，这个方式生成的立方体纹理能够表达 HDR 色域且比较方便。

<Callout type="info">
可以在 [Poly Haven](https://polyhaven.com/) 或 [BimAnt HDRI](http://hdri.bimant.com/) 下载免费的 HDR 贴图
可以在 [Poly Haven](https://polyhaven.com/) 下载免费的 HDR 贴图
</Callout>


Expand Down
Loading