three.js - RGBELoader 低质量纹理 - 256 x 256

Question

出于某种原因，RGBELoader() 生成 256x256 纹理，无论源是什么 (4k)。我尝试使用 pmremGenerator，无论有无它似乎都无法正常工作。

new RGBELoader()
                .setPath( './maps/' )
                .load( 'empty_warehouse_01_4k.hdr', function ( texture ) {

                        //texture.mapping = THREE.EquirectangularReflectionMapping;
                        const envMap = pmremGenerator.fromEquirectangular( texture ).texture;

                        scene.background = envMap; //or 'texture' to bypass pmremGenerator
                        scene.environment = envMap;

}

let pmremGenerator = new THREE.PMREMGenerator( renderer )
pmremGenerator.compileEquirectangularShader();

结果如下:

这是 4k HDR 质量:

唯一具有高质量背景和环境贴图的示例是这个，但它使用 THree.CubeTextureLoader() 并且它只采用 LDR (.jpg)。

https://threejs.org/examples/?q=env#webgl_materials_envmaps [Source]

Answer 1

RGBELoader 不会改变纹理的分辨率。您的代码中的问题是 PMREMGenerator 的结果不应用于 Scene.background。

此外，自 r131 起，渲染器使用 PMREMGenerator 为 PBR Material 自动预处理分配的 HDR 环境贴图。因此，当通过 RGBELoader 或 EXRLoader 等类加载 HDR 环境贴图时，没有理由在最新版本的应用程序级别使用 PMREMGenerator。

请使用官方glTF示例作为代码模板:https://threejs.org/examples/webgl_loader_gltf