three.js - Three.js 中的自定义抗锯齿设置

Question

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

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

这是一个屏幕截图(均在 Chrome 上，均显示在视网膜显示屏上)。左侧加载在非视网膜上，右侧加载在视网膜上:/image/EJ0mS.png

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

提前非常感谢您的帮助:)

---

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

Answer 1

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

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

.setPixelRatio ( value )

Sets device pixel ratio. This is usually used for HiDPI device to prevent blurring output canvas.

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

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