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

Question

我试图了解如何使用 PMREMGenerator 正确预处理 envMap。

我目前的情况:

我在设置场景后立即创建一个 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

您可以看到背景和环境图中的图像都很模糊。

这是原图:

/image/fFNqH.jpg

Answer 1

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

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

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。

如果错误仍然出现，我建议您通过实例演示该问题(以便可以调试该问题)。