抗锯齿在 Three.js 中不起作用

Question

我是 Three.js 的新手，最近开始经常使用它。 我真的很喜欢它，我创造了一些令人难以置信的东西。 但是，我不确定为什么但是将抗锯齿设置为 true 时我看不出有什么区别。

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

我已经搜索了可能的解决方案，但我似乎无法找到或理解为什么这不起作用。 为了使抗锯齿工作，我是否缺少或需要某些东西？

编辑：

帮助我解决此问题的链接： https : //github.com/mrdoob/three.js/blob/master/examples/webgl_materials_normalmap2.html https://github.com/mrdoob/three.js/tree/master/examples /js

这需要一些挖掘，但three.js的开发人员已经涵盖了它！

Answer 1

您在WebGLRenderer构造函数的参数对象中使用的属性名称不正确。 根据文档，属性的名称应该是'antialias' ，而不是'antialiasing' 。

我在适用于 Mac OS 的 Google Chrome 中对其进行了测试，在一个以旋转立方体为特色的演示中，边缘渲染明显平滑。

Answer 2

该属性称为antialias ，它的激活方式如下：

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

不适用于所有浏览器，请查看此问题以获取更多信息。

---

笔记：
该属性不可公开访问，因此在构建后设置抗锯齿，如下所示：

renderer.antialias = true; // <-- DOES NOT WORK

不管用。

Answer 3

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

以上适用于我的台式电脑，但似乎不适用于我的笔记本电脑。

Answer 4

如果您的计算机不支持默认的 WebGL AA，调整渲染器大小和画布宽度会给我比 FXAA 更好的结果。 请注意，CSS 保存了实际的宽度和高度值。

var w,h = [your prefs];

renderer.setSize(window.innerWidth*2, window.innerHeight*2);

renderer.domElement.style.width = w;
renderer.domElement.style.height = h;
renderer.domElement.width = w*2
renderer.domElement.height = h*2

Answer 5

我相信这取决于您使用的浏览器和系统。 据我所知，Firefox 现在根本不支持抗锯齿。 此外，它可能取决于您的显卡和驱动程序。 例如，我在 2009 年年中的旧 MacBook Pro 上的 Chrome 中没有抗锯齿，但我在 2012 年末的较新机器上得到了抗锯齿。

此外，您可以考虑使用 FXAA 着色器将抗锯齿作为后处理步骤。 您可以在此处阅读有关后处理的信息。