使用CanvasRenderer在three.js中繪製線條使線條比WebGLRenderer更平滑

Question

我一直在用three.js的CanvasRenderer渲染線條比WebGLRenderer平滑得多。它看起來好像WebGLRenderer不應用反鋸齒。

當我走three.js所畫布 - 線 - 從http://mrdoob.github.io/three.js/examples/canvas_lines.html無規例如，我看到此使用CanvasRenderer：

當改變以下行

renderer = new THREE.CanvasRenderer(); 

到

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

，I se E本：

正如你所看到的，WebGL的明確有質量低劣。我究竟做錯了什麼？

Answer 1

我一直在尋找同樣的問題，它似乎是Three.js中的CanvasRenderer使用CanvasRenderingContext2D，它根本不使用WebGL。所有的線投影都是用軟件完成的，然後使用普通的2D畫布將輸出呈現爲2D線。由於繪畫是用軟件完成的，因此您的瀏覽器將更有可能通過抗鋸齒處理撫摸。

根據我的經驗，WebGL中GL_LINES的抗鋸齒現在不被廣泛支持，這就解釋了差異。 Antialias似乎只適用於三角形。唯一的解決方法是呈現給分辨率高於屏幕的FBO，然後自行執行反鋸齒。

希望未來會更好，因爲我覺得在WebGL中渲染流暢的線條應該是所有瀏覽器和機器的默認功能。