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

Question

我一直坚持使用three.js的CanvasRenderer渲染线比WebGLRenderer更平滑的问题。看起来好像WebGLRenderer不应用抗锯齿。

当我从http://mrdoob.github.io/three.js/examples/canvas_lines.html获取three.js canvas - lines - random示例时，我使用CanvasRenderer看到了这一点：

更改以下行时

renderer = new THREE.CanvasRenderer();

到

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

，我明白这一点：

正如您所看到的，WebGL显然质量低劣。我做错了什么？

Answer 1

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

根据我的经验，WebGL中GL_LINES的抗锯齿现在还没有被广泛支持，这解释了差异。 Antialias似乎只适用于三角形。唯一的解决方法是渲染分辨率高于屏幕的FBO，然后自己执行抗锯齿。

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

Answer 2

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