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 的开发人员已经解决了这个问题！

- zaidi92

---

很抱歉，我不明白那些链接是如何帮助你解决问题的。对我来说，在Chrome中反锯齿失败了，在Firefox中却成功了。 - sandover

它应该在画布中工作吗？ - expiredninja

我一直在使用WebGL渲染器工作。我不确定它是否适用于画布。 - zaidi92

我花了整个下午才弄清楚，在我的系统下，Chrome设置中我没有勾选“启用硬件加速（如果可用）”，然后，哇，抗锯齿现在可以工作了。 - Gavin Simpson

Answer 1

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

我在Mac OS的Google Chrome中进行了测试，在展示旋转立方体的演示中，渲染边缘时有明显的平滑效果。

- tborzecki

---

此外，这个黑名单/白名单页面很有意思。例如，如果你在Mac上使用Chrome，你会发现所有GPU的抗锯齿都被禁用了。 - Fluxine

@TusharGupta，您的文档链接已经失效了，也许您更喜欢指向：https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer - juagicre

Answer 2

这个属性叫做antialias，它的激活方式如下：

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

并非所有浏览器都适用，请查看此问题获取更多信息。

---

注意：
该属性不是公开可访问的，因此无法在构建后像这样设置抗锯齿效果：

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

无法工作。

- Wilt

---

谢谢留言。我认为这也是为什么在活动渲染器上无法动态开启和关闭抗锯齿，而像setSize这样的属性可以在渲染器构建后动态更改的原因。 - noviewpoint

@noviewpoint 没错，这个值只能在渲染器初始化时设置。 - Wilt

这对我来说非常关键！感谢你的提示。 - spacorum

Answer 3

如果你的电脑不支持默认的WebGL抗锯齿技术，调整渲染器大小和画布宽度比使用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

- MrX

---

setSize 实际上有一个 updateStyle 参数，我已经通过像 renderer.setSize(width * 2, height * 2, false); 这样的调用使这个模式工作了，但是仍然需要使用 CSS 设置实际尺寸。 - nnyby

Answer 4

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

这段代码可以在我的台式电脑上运行，但是在我的笔记本电脑上似乎无法工作。

- potomek

Answer 5

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

另外，您可以考虑使用FXAA着色器作为后处理步骤来进行抗锯齿。您可以阅读有关后处理here的信息。

- angryobject

---

实际上，Firefox（最新版本）支持抗锯齿。在尝试使用FXAA着色器之前，您应该在其他计算机上尝试您的代码。 - gaitat

我目前在Chrome上工作。我进行了一些挖掘，找到了FXAA的three.js文件，但仍然没有改变。我一直在使用此示例作为参考：https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_normalmap2.html，但我仍然看不到任何变化。可能有一些简单的东西我漏了，但这对我来说都是新的。 - zaidi92

Answer 6

一些浏览器（尤其是移动端）默认不支持抗锯齿，但是这些浏览器支持手动 MSAA。有趣的是，这种类型的抗锯齿与 { antialias: true } 相同，只需要更多的设置：

https://threejs.org/examples/webgl2_multisampled_renderbuffers

为什么移动浏览器禁用了易用的{ antialias: true }？可能是因为历史上认为MSAA很昂贵。我认为这已经不再重要了，手机GPU的性能越来越强了。

缺少{ antialias: true }可能会导致开发者使用最简单的解决方法，即使用width和height属性将画布设置为比屏幕更高的分辨率，并使用CSS将其尺寸设置回屏幕大小。这是对性能最糟糕的事情，而“昂贵”的MSAA会快得多。

- Pawel