时间戳

首页 > 解决方案 > 具有线性过滤的等距矩形地图渲染中的闪电伪影

three.js - 具有线性过滤的等距矩形地图渲染中的闪电伪影

问题描述

在使用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;
    }
  });

使用 hdrtexture.magFilter = THREE.LinearFilter 减轻伪影；

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

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

标签： three.js

解决方案

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

推荐阅读