使用CanvasRenderer在three.js中绘制线条比WebGLRenderer更平滑

Question

我遇到了一个问题，三个.js 的 CanvasRenderer 渲染线比 WebGLRenderer 更流畅。看起来好像 WebGLRenderer 没有应用抗锯齿。

当我从http://mrdoob.github.io/three.js/examples/canvas_lines.html 获取three.js 画布 - 线条 - 随机示例时，我使用 CanvasRenderer 看到了这一点：

更改以下行时

renderer = new THREE.CanvasRenderer();

到

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

，我看到了：

如您所见，WebGL 的质量明显较差。我做错了什么？

Answer 1

我一直在研究同样的问题，似乎 Three.js 中的 CanvasRenderer 使用了CanvasRenderingContext2D，它根本不使用 WebGL。所有的线投影都在软件中完成，然后使用常规的 2D 画布将输出渲染为 2D 线。由于绘画是在软件中完成的，您的浏览器将更有可能处理带有抗锯齿的描边。

根据我的经验，WebGL 中 GL_LINES 的抗锯齿目前并未得到广泛支持，这就解释了其中的区别。抗锯齿似乎只适用于三角形。唯一的解决方法是渲染到比您的屏幕分辨率更高的 FBO，然后自己执行抗锯齿。

希望这在未来会更好，因为我觉得在 WebGL 中渲染流畅的线条应该是所有浏览器和机器的默认功能。

Answer 2

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