Three.js使用WebGLRenderTarget将平面渲染结果贴到球体时出现模糊锯齿问题

原问题说明 #

非常感谢您查看这个问题。我对THREE了解不多，但目前有使用需求。

相关效果截图 #

现有实现代码 #

const RTScene = this.vr.scene;
this.RTScene = RTScene;
var renderer = this.vr.renderer;
var camera = this.vr.camera;
var materials = []; //创建一个贴图数组
const video1 = document.getElementById("videos1");
const texture1 = new THREE.VideoTexture(video1);
texture1.maxFilter = THREE.NearestFilter;
texture1.minFilter = THREE.NearestFilter;
var geometry = new THREE.PlaneGeometry(400, 200, 3, 3);
// const geometry = new THREE.SphereGeometry(30, 32, 32, 0, 6.28, 3.14, 3.14);
this.handleGetTxture();
materials = new THREE.MeshBasicMaterial({
  map: texture1,
  side: THREE.DoubleSide,
});

var bufferGeometry = new THREE.BufferGeometry().fromGeometry(geometry);
this.planegeometry = geometry;
this.bufferGeometry = bufferGeometry;
// var material = new THREE.MeshFaceMaterial(materials);
var mesh = new THREE.Mesh(bufferGeometry, materials); //网格模型对象Mesh
mesh.position.z = 200;
RTScene.add(mesh); //网格模型添加到场景中
const RenderTarget = new THREE.WebGLRenderTarget(1000, 1000, {
  minFilter: THREE.LinearFilter,
  magFilter: THREE.LinearFilter,
  wrapS:THREE.RepeatWrapping
});
this.RenderTarget = RenderTarget;
this.vr.RenderTarget = RenderTarget;
this.vr.RTScene = RTScene;

var scene = this.vr.scene;
var renderer = this.vr.renderer;
var camera = this.vr.camera;
var RenderTarget = this.RenderTarget;
var obj = this.vr.VRObject.getObjectByName("__mxrealityDefault");

if (obj) {
  obj.material.map = RenderTarget.texture;
  // obj.material.map = RenderTarget.texture;
}

问题描述 #

将渲染得到的纹理贴到球体上后效果异常，纹理模糊且有锯齿，不符合预期。想咨询需要做哪些额外配置或者方法调用才能解决这个问题？ #

具体修复步骤 #

• 修正视频纹理的采样模式，删除原来设置的最近点采样配置，Three.js默认的线性采样可以大幅减少锯齿：

// 移除以下两行代码
texture1.maxFilter = THREE.NearestFilter;
texture1.minFilter = THREE.NearestFilter;

• 调整WebGLRenderTarget的配置：首先你当前设置的1000x1000不是2的幂次，会被Three.js自动降级处理导致模糊，建议修改为和视频分辨率匹配的2的幂次尺寸，同时开启采样抗锯齿：

// 示例修改为2048*2048，可根据视频实际宽高调整为2048*1024等匹配宽高比的尺寸
const RenderTarget = new THREE.WebGLRenderTarget(2048, 2048, {
  minFilter: THREE.LinearFilter,
  magFilter: THREE.LinearFilter,
  wrapS: THREE.RepeatWrapping,
  wrapT: THREE.RepeatWrapping,
  // 开启抗锯齿，需要Three.js版本≥r138，且渲染器初始化时开启antialias: true
  samples: 4
});

• 给最终球体的纹理开启各向异性过滤，提升倾斜角度下的纹理清晰度：

if (obj) {
  obj.material.map = RenderTarget.texture;
  // 新增以下两行
  obj.material.map.anisotropy = renderer.capabilities.getMaxAnisotropy();
  obj.material.needsUpdate = true;
}

• 检查渲染器的像素比配置，高DPI屏幕下未设置正确像素比会导致全局画面模糊：

// 渲染器初始化阶段添加该行配置
renderer.setPixelRatio(window.devicePixelRatio);

• 如果你的业务场景没有强制要求走渲染目标中间层，可直接将VideoTexture贴到球体材质上，减少一次渲染流程的画质损失，同时降低性能消耗。

内容的提问来源于stack exchange，提问作者穿拖鞋的小涵