WebGL 繪製Line的bug（一）

插播一則廣告（長期有效）

MONO哥須要在武漢招JavaScript工程師若干
要求：對前端技術(JavasScript、HTML、CSS)，對可視化技術(Canvas、WebGL)有濃厚的興趣
基礎很差的可培養，基礎好的可共謀大事
感興趣的給我發郵件：hr@servasoft.com

------------------------------------------------------------正文的分割線----------------------------------------------------------------

今天來談點跟WebGL有關的事兒，不知道你們有沒有碰到過相似的困擾。

熟悉WebGL的同窗都知道，WebGL繪製模式有點、線、面三種；經過點的繪製能夠實現粒子系統等，經過線能夠繪製一些連線關係；面就強大了，經過面，咱們能夠繪製咱們想繪製的全部的三維對象。

一切看起來都很完美，perfect。

然而，不幸的是，WebGL在繪製線條的時候，存在一個缺陷，那就是在一些機器的一些瀏覽器上面（應該是大多數狀況下）線寬只能設置爲1，而不能設置成其餘的值。

經過網址http://alteredqualia.com/tmp/...，咱們能夠測試本身的電腦是否有線寬的不能設置的bug，如下是個人電腦（mac 電腦）用chrome（版本59.0.3071.115）的測試效果：

（麻蛋，之前的mac 下的chrome是好使的，看來這病癒來愈嚴重了）

用firefox試試：

在firefox下面看來仍是正常的。

事實上，這是一個長久以來一直存在的bug，下面這個地址就是證實：

https://bugs.chromium.org/p/c...

很早以前就有人提過了，只是一直沒有解決。

這是病，得治，只是那些搞瀏覽器大佬們不想出藥。

咱們就只能想點偏方來本身治療了。 

偏方是啥，因爲Line的線寬是底層問題，咱們並很差解決；不過，咱們能夠考慮經過面的繪製來模擬線，線的特色就是不隨鏡頭變化而改變寬度，只要可以達到這個特色就能夠達到模擬的效果。

下一篇將會介紹 如何經過三角形（面）的方式來模擬線條的繪製。

若是你對WebGL 感興趣，能夠了解下咱們用WebGL開發的3D機房項目：

HTML5，不僅是看上去很美（第二彈：打造最美3D機房）