抗锯齿不在Three.js中工作

Question

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

 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构造函数的参数对象中使用的属性名称不正确。根据documentation，该物业的名称应该是'antialias'，而不是'antialiasing'。

我在Google Chrome for Mac OS中进行了测试，并且在具有旋转立方体的演示中，边缘渲染有明显的平滑。

Answer 2

该属性被称为antialias，它被激活如下：

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

不适用于所有浏览器，check this issue以获取更多信息。

---

注意： 该属性不可公开访问，因此在构造后设置antialias如下：

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着色器进行抗锯齿处理作为后处理步骤。你可以阅读有关后处理here的信息。