WebGL 繪製Line的bug（一）

 

今天說點跟WebGL相關的事兒，不知道你們有沒有碰到過相似的煩惱。

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

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

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

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

 

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

用firefox試試：

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

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

https://bugs.chromium.org/p/chromium/issues/detail?id=60124

 

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

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

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

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

 

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

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

無插件純Web 3D機房，HTML5+WebGL傾力打造