抗锯齿在 Three.js 中不起作用

Posted 2023-02-22

【中文标题】抗锯齿在 Three.js 中不起作用

【英文标题】：Antialiasing not working in Three.js

【发布时间】：2013-06-17 23:14:22

【问题描述】：

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

【问题讨论】：

恐怕我不明白这些链接如何引导您找到解决方案。对我来说，抗锯齿在 Chrome 中失败，在 Firefox 中有效。

它应该在画布上工作吗？

我一直在使用 WebGL 渲染器。我不确定它是否可以在画布上使用。

花了我整个下午的时间来弄清楚我的系统在 chrome 设置下我没有选中“允许硬件加速可用时”，而且中提琴，抗锯齿现在正在工作。

【参考方案1】：

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

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

【讨论】：

此外，blacklist/whitelist page 很有趣。例如，如果您在 Mac 上使用 chrome，您会看到所有 GPU 的抗锯齿功能都已禁用。

@TusharGupta 您的文档链接已失效，也许您更愿意指向：threejs.org/docs/index.html#api/en/renderers/WebGLRenderer

【参考方案2】：

该属性名为antialias，它的激活方式如下：

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

不适用于所有浏览器，check this issue 了解更多信息。

---

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

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

不会工作。

【讨论】：

感谢您的来信。我认为这也是为什么 THREE 中的抗锯齿无法在活动渲染器上动态打开和关闭的原因，而 setSize 等属性可以在渲染器构建后动态更改。

@noviewpoint 完全一样，这个值只能在渲染器初始化时设置。

这对我来说是关键！感谢您的注意

【参考方案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

【讨论】：

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

【参考方案4】：

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

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

【参考方案5】：

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

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

【讨论】：

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

我目前正在使用 chrome。我做了一些挖掘，找到了 FXAA 的 three.js 文件，但仍然没有任何变化。我一直使用这个例子作为参考，github.com/mrdoob/three.js/blob/master/examples/…，但我仍然看不到任何变化。我可能缺少一些简单的东西，但这对我来说是全新的。