如何

使用HDR环境(用于PBR)


使用HDR环境(用于PBR)

介绍

如您之前所见, 强烈建议您设置环境纹理的方法是通过HDR就绪文件(DDS或ENV),该文件包含带有预过滤的MipMap的多维数据集纹理。

要加载HDR环境,可以使用 createDefaultEnvironment:

scene.createDefaultEnvironment();

这将从asset.babylonjs.com加载文件environmentSpecular.env。

要加载自定义HDR纹理,只需设置scene.environmentTexture:

var hdrTexture = new BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.dds", scene);
hdrTexture.gammaSpace = false;
scene.environmentTexture = hdrTexture;

下面将详细介绍创建此类文件的两种受支持的方式。第一个依赖于名为IBL Baker的开源框架,而第二个则基于名为Lys的专有软件来创建更高的分辨率结果。

请注意,如果需要,可以旋转您的environmentTexture:

var hdrRotation = 10; // in degrees
hdrTexture.setReflectionTextureMatrix(
    BABYLON.Matrix.RotationY(
        BABYLON.Tools.ToRadians(hdrRotation)
    )
);

从IBL Baker创建dds环境文件

您可以在以下位置找到IBLBakehttps://github.com/derkreature/IBLBaker

克隆存储库后,您将可以转到/bin64文件夹并启动IBLBaker.exe。

现在使用Load environment按钮加载HDR图像(也可以从那里尝试一个)

我们建议您使用环境比例来定义所需的亮度。

您可能还想通过将镜面分辨率设置为128来减小输出大小,以确保模糊下降的正确性:

iblbaker

一旦您对整体结果感到满意,只需单击save environment按钮,您就可以开始了!选择的文件是SpecularHDR。

请不要忘记写全名和扩展名,以使保存正确进行。.

从LYS创建DDS环境文件

Lys可以在knaldtech网站上找到

使用Lys,生成的mipmap的输出质量将是更高的标准,其粗糙度响应实际上与Unity标准材料接近。您可以使用Lys生成:128、256或512像素宽的dds多维数据集纹理。

请按照以下步骤操作,以确保响应的物理正确性。

首先,您需要在主窗口中选择以下设置(根据您的选择128、256或512调整大小):

Main Window

完成后,在“首选项”选项卡中,请设置旧版dds模式(BabylonJS不支持4 CC):

Preferences

在导出窗口中,您可以选择适当的选项(将DDS设置为32位应最后完成,因为我们已经看到默认将其设置为8位):

ExportSettings

最后,您可以通过主选项卡导出纹理:

Export

您已经准备就绪,可以在CubeTexture.CreateFromPrefilteredData函数中使用导出的纹理。

创建压缩的环境纹理

由于生成的DDS文件可能相对较大(512px宽的文件为32Mb),因此我们在巴比伦引入了一种打包纹理的特殊方法。以下是创建.env在BabylonJS中使用的文件的步骤:

  • 沙盒
  • 拖放PBR场景文件(示例)
  • 拖放dds environmentTexture文件 (示例)
  • 打开检查器,转到“工具”,然后单击 Generate .env texture

inspector env texture tool

  • 您现在可以.env使用以下代码下载并使用您的环境:
scene.environmentTexture = new BABYLON.CubeTexture("environment.env", scene);

什么是.env(技术深度学习)

我们使用.env解决的问题是IBL环境纹理的大小和质量。我们决定实施自定义打包,以简化共享和下载这些资产的过程。该文件需要跨平台工作才能轻松部署,因此为什么我们不直接依赖压缩纹理。

然后,我们将一个json清单标头,多项式信息以及来自.jpg格式的预过滤立方体纹理的mipmap链的所有面打包到一个文件(类似于DDS或KTX)中(该压缩比实际压缩得要快得多,并且在所有浏览器。)。

为了保持png对HDR的支持,我们选择依赖RGBD,因为通过保持[0-1]范围不变(知道通常会更频繁地使用它),它在RGB范围内提供比RGBM更好的低值分布。在需要时,在运行时进行解码也比LogLUV复杂。对于我们来说,这似乎是最好的折衷方案。

RGBD在较低范围内也没有提供低透明度,因此无法阻止浏览器依靠alpha的预乘来散布最可见区域中的数据。我们还从最大范围引入了一个特殊的偏移量,以确保我们不会在旧版浏览器中达到有问题的alpha值(当alpha距离0太近时,会产生无法接受的条带失真现象,从而导致色彩量化)。

在WebGL2浏览器中,如果支持加速运行时间并允许正确的某些插值,则我们会将数据解压缩为HalfFloat或FullFloat纹理。

该文件还将多项式谐波与球形压缩在一起,以匹配巴比伦所期望的内部性能,因为不再需要对其进行计算或转换,从而加快了加载时间。

由于渲染到LOD或什至复制到Half / Fulll浮点纹理的LOD在基于WebGL1的浏览器上无法始终如一地工作,因此我们正在对片段着色器中的数据进行实时解压缩。由于RGBD插值不正确,因此我们在不同的测试案例中确保了生成的视觉伪像值得传输增益。在我们已经测试过的纹理集中看起来还不错。

作为结果的一个示例,我们现在可以依靠512px立方体大小的纹理,其中大约3Mb的数据与32Mb的未打包版本的数据有关,而无需注意任何块质量下降。通过不再需要多项式的计算,这也加快了我们到达第一帧的时间。

使用纯立方体纹理

虽然使用dds多维数据集纹理是最佳选择,但您可能仍要依赖经典的多维数据集纹理(主要是出于大小原因)。因此,您仍然可以执行以下操作:

scene.environmentTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);

在这种情况下,您将无法获得HDR渲染,并且可能会出现一些视觉瑕疵(主要是在使用光泽度或粗糙度时)。