three.js - 使用 PMREMGenerator 预处理环境 map

Question

我试图了解如何使用 PMREMGenerator. 正确预处理 envMaps
我现在的情况:
我在设置我的场景后立即创建一个 PMREM，并编译它的等距柱状体着色器(我不清楚编译步骤，但这是我在示例中看到的):

 this.mPmremGenerator = new THREE.PMREMGenerator(this.mRenderer);
this.mPmremGenerator.compileEquirectangularShader();

接下来，我使用 TextureLoader 加载 envmap 纹理，并在其回调中使用 fromEquirectangular将 envmap 预处理为 RenderTarget ，并从中提取新纹理并将其返回。

private preprocessEnvMap(pEnvMap: Texture) { 
     const WorldContext.mainScene.pmremGenerator;
     return aPmremGenerator.fromEquirectangular(pEnvMap).texture;
}

最后，我获取返回的纹理，将其指定为我的 Material 的 envMap ，并调用 Material 的 needsUpdate = true .
结果是我得到了一个着色器错误:

THREE.WebGLProgram: shader error:  0 35715 false gl.getProgramInfoLog No compiled fragment shader when at least one graphics shader is attached.

帮助将不胜感激，
谢谢
编辑:
这是我使用 PMREMGenerator 的示例使用标准 Material :
https://codepen.io/tfreifeld/pen/OJWgdem
您可以看到背景和 envmap 中的图像都很模糊。
这是原图:
https://imgur.com/a/M2mwNFa

Answer 1

(that compile step is not clear to me, but that's what I've seen in examples):

这样做是为了预编译内部着色器。否则，生成器在处理环境贴图时必须这样做。所以打电话 compileEquirectangularShader()只是将一些工作分配给应用程序启动。

Next, I use TextureLoader to load the envmap texture, and in its callback, I use fromEquirectangular to preprocess the envmap into a RenderTarget, and extract the new texture from it and return it.

请记住，您应该使用 PMREMGenerator使用 HDR 纹理以获得最佳质量(尽管这不是强制性的)。所以你可能想要一个你使用的设置 RGBELoader , RGBMLoader或 EXRLoader而不是 TextureLoader以及相应的 HDR 纹理。

Finally, I take the returned texture, assign it as my material's envMap, and call the material's needsUpdate = true.

应该没有必要设置 needsUpdate至 true .
如果错误仍然出现，我建议你用一个活生生的例子来演示这个问题(这样可以调试这个问题)。