如何在Three.js中提高EffectComposer的分辨率？

Posted 2021-05-02

我正在使用EffectComposer将皮肤效果应用到我的头像。但是，与没有后处理的版本相比，最终分辨率看起来相当模糊。我试图改变pixelRatio设置，但没有太大的成功。

我正在使用以下示例中的代码：https://threejs.org/examples/webgl_materials_normalmap.html

更新：我比较了THREE.js中相同法线贴图示例的两种不同实现，在那里我可以看到不同的分辨率质量。我认为设置renderer.setPixelRatio（window.devicePixelRatio）（等于2）允许模型适合屏幕但看起来模糊（特别是在缩小时）。但是，如果未设置renderer.setPixelRatio，则应用标准值1，从而使模型变得更清晰，但仅在窗口大小的25％处呈现。

下面是一个更好的图像来比较清晰度/分辨率。右边的那个比左边的那个更锐利。

我需要在窗口的完整大小上呈现更清晰的版本。

有什么建议？先感谢您。

答案

渲染目标时，WebGL不支持抗锯齿。虽然可以应用额外的后处理效果来补偿它。另外，EffectsComposer和抗锯齿可能存在问题。我自己没有深入研究过，但看看这些主题：

https://github.com/mrdoob/three.js/issues/568

https://github.com/openworm/org.geppetto.frontend/issues/724

和

https://github.com/openworm/org.geppetto.frontend/pull/728