Блог

Я вижу артефакты, похожие на молнии, при рендеринге HDR-фона с magFilter = LinearFiltering помощью . Фон представляет собой равноугольную карту с низким разрешением с экстремальным размытием, запеченную в изображении.

Фрагмент кода:

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

Без линейной фильтрации я вижу проблемы с ближайшими фильтрами (блочная пикселизация) на полюсах, поэтому я применяю линейный фильтр.

Каков наилучший способ удалить эти артефакты молнии? Преобразовать в кубическую карту?

Преобразование равноугольной карты в кубическую карту решает проблемы артефактов.

Отрывок:

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