具有线性过滤的等距矩形地图渲染中的闪电伪影答案

【问题标题】：Lightning artifacts in equirectangular map rendering with linear filtering具有线性过滤的等距矩形地图渲染中的闪电伪影
【发布时间】：2021-08-11 16:57:39
【问题描述】：

在使用 magFilter = LinearFiltering 渲染背景 HDR 时，我看到了类似闪电的伪影。背景是一张低分辨率的等距矩形地图，图像中包含极度模糊。

代码sn-p：

new RGBELoader()
  .setDataType(THREE.UnsignedByteType)
  .load(this.background, (hdrtexture) => {
    hdrtexture.mapping = THREE.EquirectangularReflectionMapping;
    hdrtexture.encoding = THREE.RGBEEncoding;
    hdrtexture.name = this.background;
    hdrtexture.magFilter = THREE.LinearFilter;
    hdrtexture.needsUpdate = true;

    // If the gui is set to show the env map, set the background to be the new map
    if (this.params.showMap) {
      this.scene.background = hdrtexture;
    }
  });

如果没有线性过滤，我会在两极看到最近的过滤器问题（块状像素化），因此我要应用线性过滤器。

去除这些闪电伪影的最佳方法是什么？转换成立方体贴图？

【问题讨论】：

标签： three.js

【解决方案1】：

将 equirectangular 贴图转换为立方体贴图可以解决伪影问题。

片段：

    new RGBELoader()
  .setDataType(THREE.UnsignedByteType)
  .load(this.background, (hdrtexture) => {
    hdrtexture.mapping = THREE.EquirectangularReflectionMapping;
    hdrtexture.encoding = THREE.RGBEEncoding;
    hdrtexture.name = this.background;
    hdrtexture.magFilter = THREE.LinearFilter;
    hdrtexture.needsUpdate = true;

    const pmrem = new THREE.PMREMGenerator(this.renderer);
    const envMap = pmrem.fromEquirectangular(hdrtexture).texture;

    // If the gui is set to show the env map, set the background to be the new map
    if (this.params.showMap) {
      this.scene.background = envMap;
    }
  });

【讨论】：