From 19c336d0bcbe9ece427a61f1a9926aab21708006 Mon Sep 17 00:00:00 2001 From: luo2430 Date: Fri, 31 Jul 2026 19:48:04 +0800 Subject: [PATCH] docs: refactor skybox setup docs to use AssetType.HDR loading - Replace 6-face texture loading with single HDR file loading - Add textureDecodeRGBM flag for HDR output format - Remove BimAnt HDRI reference, keep only Poly Haven - Simplify cube texture creation instructions with link to dedicated page --- docs/en/graphics/background/sky.mdx | 43 ++++++++++++----------------- docs/en/graphics/texture/cube.mdx | 2 +- docs/zh/graphics/background/sky.mdx | 43 ++++++++++++----------------- docs/zh/graphics/texture/cube.mdx | 2 +- 4 files changed, 38 insertions(+), 52 deletions(-) diff --git a/docs/en/graphics/background/sky.mdx b/docs/en/graphics/background/sky.mdx index ecd41d38e7..0a924705a4 100644 --- a/docs/en/graphics/background/sky.mdx +++ b/docs/en/graphics/background/sky.mdx @@ -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**. - - +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 @@ -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({ - 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({ + 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 diff --git a/docs/en/graphics/texture/cube.mdx b/docs/en/graphics/texture/cube.mdx index ce19913801..1ef72918ca 100644 --- a/docs/en/graphics/texture/cube.mdx +++ b/docs/en/graphics/texture/cube.mdx @@ -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. - 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/). After preparing the HDR image, follow the steps: diff --git a/docs/zh/graphics/background/sky.mdx b/docs/zh/graphics/background/sky.mdx index 7119309a63..512f518b1f 100644 --- a/docs/zh/graphics/background/sky.mdx +++ b/docs/zh/graphics/background/sky.mdx @@ -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 贴图** -> **立方纹理资产创建完毕** 操作即可。 - - +天空盒纹理就是一张[立方纹理](/docs/graphics/texture/cube/)，如何从 HDR 贴图创建立方纹理资产请参考[立方纹理 - 创建](/docs/graphics/texture/cube/#创建)。 ### 2. 创建天空盒材质 @@ -37,26 +33,23 @@ label: Graphics/Background ### 代码设置天空盒 ```typescript -// 创建天空盒纹理 -const textureCube = await engine.resourceManager.load({ - 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({ + 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); + }); ``` ## 设置程序化天空 diff --git a/docs/zh/graphics/texture/cube.mdx b/docs/zh/graphics/texture/cube.mdx index 187bc523e4..fa0e0bb79b 100644 --- a/docs/zh/graphics/texture/cube.mdx +++ b/docs/zh/graphics/texture/cube.mdx @@ -22,7 +22,7 @@ label: Graphics/Texture 编辑器支持通过上传 HDR 贴图来生成立方体纹理，这个方式生成的立方体纹理能够表达 HDR 色域且比较方便。 - 可以在 [Poly Haven](https://polyhaven.com/) 或 [BimAnt HDRI](http://hdri.bimant.com/) 下载免费的 HDR 贴图 + 可以在 [Poly Haven](https://polyhaven.com/) 下载免费的 HDR 贴图