我是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的开发人员已经覆盖了它!
答案 0 :(得分:96)
您在WebGLRenderer
构造函数的参数对象中使用的属性名称不正确。根据{{3}},
该属性的名称应为'antialias'
,不是 'antialiasing'
。
我在Google Chrome for Mac OS中进行了测试,并且在带有旋转立方体的演示中,边缘渲染有明显的平滑。
答案 1 :(得分:16)
该属性名为antialias
,它的激活方式如下:
renderer = new THREE.WebGLRenderer({ antialias: true });
不适用于所有浏览器 check this issue 以获取更多信息。
注意:强>
该属性不可公开访问,因此在构建后设置antialias如下:
renderer.antialias = true; // <-- DOES NOT WORK
无效。
答案 2 :(得分:4)
renderer = new THREE.WebGLRenderer({antialias:true}); - 适用于我的桌面电脑,但不适用于笔记本电脑,我可以看到可怕的楼梯
答案 3 :(得分:3)
如果您的计算机不支持默认的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
答案 4 :(得分:0)
我认为这取决于您使用的浏览器和系统。据我所知,Firefox目前根本不支持抗锯齿功能。它也可能取决于您的显卡和驱动程序。例如,我在2009年中期的MacBook Pro上没有在Chrome中获得抗锯齿功能,但我确实在我2012年末的机器上获得抗锯齿功能。
此外,您可以考虑使用FXAA着色器进行抗锯齿处理作为后处理步骤。您可以阅读有关后处理here的信息。