使用 PMREMGenerator 预处理环境图

Question

我正在尝试了解如何使用 PMREMGenerator. 正确预处理 envMaps

我现在的情况：

我在设置场景后立即创建一个 PMREM，并编译它的 equirectangular 着色器（我不清楚编译步骤，但这是我在示例中看到的）：

 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;
}

最后，我获取返回的纹理，将其指定为我的材质的envMap，并调用材质的needsUpdate = true。

结果是我得到一个着色器错误：

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

我们将不胜感激，

谢谢

编辑：

这是我将PMREMGenerator 与标准材料一起使用的示例： https://codepen.io/tfreifeld/pen/OJWgdem

您可以看到背景中的图像和 envmap 中的图像都是模糊的。

这是原图：

https://imgur.com/a/M2mwNFa

Answer 1

（我不清楚编译步骤，但这就是我在示例中看到的）：

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

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

请记住，您应该使用带有 HDR 纹理的 PMREMGenerator 以获得最佳质量（尽管这不是强制性的）。因此，您可能想要使用RGBELoader、RGBMLoader 或EXRLoader 而不是TextureLoader 以及相应的HDR 纹理的设置。

最后，我获取返回的纹理，将其分配为我的材质的 envMap，并调用材质的 needsUpdate = true。

不必将needsUpdate 设置为true。

如果仍然弹出错误，我建议您通过一个现场示例演示该问题（以便可以调试该问题）。