three.js 中的自定义抗锯齿设置答案

【问题标题】：Custom antialiasing settings in three.jsthree.js 中的自定义抗锯齿设置
【发布时间】：2016-02-24 13:41:42
【问题描述】：

我正在尝试找到一种方法来在 three.js/WebGL 中指定一些抗锯齿设置以尝试改进结果。

问题是，使用完全相同的代码，如果我在 Retina 显示器上加载模型，抗锯齿效果非常好（即使我之后将其移至非视网膜外接显示器），但如果我将其全部像素化首先在非视网膜屏幕上加载它。

这是一个屏幕截图（都在 Chrome 上，都显示在视网膜显示器上）。左加载在非视网膜上，右加载在视网膜上：https://i.imgur.com/krNavZU.png

我从中得到的是，three.js 在初始化抗锯齿时会以某种方式使用像素密度。有没有办法调整它，以便我可以强制它变得更好？

非常感谢您的帮助:)

旁注：据记录，抗锯齿似乎在 Firefox 上也效果更好，有人知道为什么吗？

【问题讨论】：

不是 three.js 评论。仅供参考 webgl 根本不允许您控制硬件抗锯齿的级别。我认为您所看到的两张图片是用不同的原始分辨率绘制的。 Google/SO .devicePixelRatio 并检查 2 个不同显示器的 canvas.width 是否相同。再次，不知道如何在三个js中做到这一点。
是的，我不确定它是 three.js 还是 WebGL，我找不到要开始寻找的东西。那么感谢您的指示！

【解决方案1】：

以防万一有人想做我尝试过的相同类型的调整，我会回答我自己的问题。

根据 WaclawJasper 的评论，我在 Three.js 中找到了一些与我的问题相关的文档。来自http://threejs.org/docs/#Reference/Renderers/WebGLRenderer：

.setPixelRatio(值)

设置设备像素比率。这通常用于 HiDPI 设备以防止输出画布模糊。

我在初始化时使用了renderer.setPixelRatio( window.devicePixelRatio );，这就是为什么渲染取决于页面的首次加载位置。

与抗锯齿有关，我现在在非视网膜屏幕上使用renderer.setPixelRatio(2); 人为地提高像素密度。这会导致更有效的抗锯齿，但会增加计算量。

【讨论】：

知道您所看到的差异会受到 Apple HiDPI 实际工作方式的影响。对于典型的 Retina 15" macbook pro 屏幕，您的物理分辨率为 2880x1800。如果使用默认分辨率，它将以设备比率 2 渲染网页，因此 CSS 像素实际上是 2 个物理像素（屏幕为 1440x900 CSS 像素），如果将 devicepixelratio 设置为 2，则三个将以“完整物理”分辨率呈现。如果将系统显示设置设置为“更多空间”，则这是 1920x1200 CSS 像素分辨率，内部以 3840x2400 呈现。
因此，如果您运行“更多空间”设置，您的所有像素比 2 内容实际上将在屏幕的物理像素密度上略微超采样。 Apple 所做的缩减质量非常高，因此总体而言结果非常不错。如果您仍然想知道为什么它在不同的操作系统上看起来不完全相同，那么这可能就是原因。