javascript 抗锯齿在 Three.js 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17224795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Antialiasing not working in Three.js
提问by zaidi92
I am new to three.js and have starting working with it a lot recently. I really enjoy it and I have created some incredible things. However, I'm unsure why but when setting antialiasing to true I see no difference.
我是 Three.js 的新手，最近开始经常使用它。我真的很喜欢它，我创造了一些令人难以置信的东西。但是，我不确定为什么但是将抗锯齿设置为 true 时我看不出有什么区别。
renderer = new THREE.WebGLRenderer({ antialiasing: true });
I have searched for possible solutions, yet I can't seem to find or understand why this doesn't work. Is there something I am missing or need to in order to get antialiasing to work?
我已经搜索了可能的解决方案，但我似乎无法找到或理解为什么这不起作用。为了使抗锯齿工作，我是否缺少或需要某些东西？
EDIT:
编辑：
Links that helped me fix this issue: https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_normalmap2.htmlhttps://github.com/mrdoob/three.js/tree/master/examples/js
帮助我解决此问题的链接：https: //github.com/mrdoob/three.js/blob/master/examples/webgl_materials_normalmap2.html https://github.com/mrdoob/three.js/tree/master/examples /js
It took some digging but the developers for three.js have it covered!
这需要一些挖掘，但 Three.js 的开发人员已经涵盖了它！
回答by iBorg
The property name you are using in the argument object of the WebGLRendererconstructor is incorrect. According to the documentation,
the name of the property should be 'antialias', not'antialiasing'.
您在WebGLRenderer构造函数的参数对象中使用的属性名称不正确。根据文档，属性的名称应该是'antialias'，而不是'antialiasing'。
I tested it in Google Chrome for Mac OS and there was a noticeable smoothing in the rendering of edges in a demo featuring a spinning cube.
我在适用于 Mac OS 的 Google Chrome 中对其进行了测试，在一个以旋转立方体为特色的演示中，边缘渲染明显平滑。
回答by Wilt
The property is called antialiasand It is activated like this:
该属性被调用antialias并被激活，如下所示：
renderer = new THREE.WebGLRenderer({ antialias: true });
Doesn't work for all browsers, check this issuefor more information.
不适用于所有浏览器，请查看此问题以获取更多信息。
Note:
The property is NOT publicly accessible, so setting antialias after construction like this:
注意：
该属性不可公开访问，因此在构建后设置抗锯齿，如下所示：
renderer.antialias = true; // <-- DOES NOT WORK
will not work.
不管用。
回答by potomek
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new THREE.WebGLRenderer( { antialias: true } );
The above works with my desktop computer, but it doesn't seem to work with my laptop.
以上适用于我的台式电脑，但似乎不适用于我的笔记本电脑。
回答by MrX
In case your computer does not support default WebGL AA, resizing the renderer size and canvas width gives me much better result than FXAA. Mind you the CSS holds the real width and height values.
如果您的计算机不支持默认的 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
回答by angryobject
I believe that this depends on the browser and system you are using. As far as i know, Firefox doesn't support antialiasing right now at all. Also it may be dependant on your graphics card and drivers. For example, i don't get antialiasing in Chrome on my old mid 2009 MacBook Pro, but i do get antialiasing on my newer late 2012 machine.
我相信这取决于您使用的浏览器和系统。据我所知，Firefox 现在根本不支持抗锯齿。此外，它可能取决于您的显卡和驱动程序。例如，我在 2009 年年中的旧 MacBook Pro 上的 Chrome 中没有抗锯齿，但我在 2012 年末的较新机器上得到了抗锯齿。
Also, you may consider using the FXAA shader to do the antialiasing as a postprocessing step. You can read about postprocessing here.
