三.js 渲染质量

【问题标题】：Three.js quality of rendering三.js 渲染质量
【发布时间】：2020-04-11 18:19:33
【问题描述】：

我是 three.js 和 3D 建模的新手。我设法加载了我的 gltf 模型并使用 three.js 在浏览器中显示它，请参见这张图片：

当我转动立方体时，我注意到渲染边缘的质量不是很高（在图片中，背面的边缘看起来是“之字形”）。我能以某种方式改进吗？

【问题讨论】：

标签： three.js

【解决方案1】：

边缘上的人工制品被称为aliasing

在 WebGLRenderer 中将 antialias 设置为 true

https://threejs.org/docs/#api/en/renderers/WebGLRenderer.antialias

即

renderer = new THREE.WebGLRenderer({ antialias: true });

【讨论】：

【解决方案2】：

此时可能有点太高级了，但是如果您以后想使用post-effects，则不能在渲染器上使用 antialias:true 来改善边缘。但这可以使用称为FXAA 的东西作为后期效果来实现。如果出于性能原因禁用抗锯齿，也可以使用此功能。在较旧的手机或复杂场景中，有时最好在不使用抗锯齿的情况下进行渲染并改用后期效果。没有那么好，但总比没有好。

【讨论】：