28

我是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 的开发人员已经涵盖了它！

4

5 回答 5

103

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

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

于 2013-07-12T06:57:27.303 回答
22

该属性被调用antialias并像这样被激活：

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

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

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

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

不管用。

于 2016-01-14T09:57:43.627 回答
4

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

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

于 2013-09-17T17:43:09.343 回答
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
于 2017-06-09T14:41:31.537 回答
1

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.

Also, you may consider using the FXAA shader to do the antialiasing as a postprocessing step. You can read about postprocessing here.

于 2013-06-21T08:42:07.697 回答