WebGL 繪制Line的bug（一）
阿新 • • 發佈：2018-07-10
系統 電腦 關註 連線 存在 alter tps 公眾號 WebG 熟悉WebGL的同學都知道，WebGL繪制模式有點、線、面三種；通過點的繪制可以實現粒子系統等，通過線可以繪制一些連線關系；面就強大了，通過面，我們可以繪制我們想繪制的所有的三維對象。
一切看起來都很完美，perfect。
然而，不幸的是，WebGL在繪制線條的時候，存在一個缺陷，那就是在一些機器的一些瀏覽器上面（應該是大多數情況下）線寬只能設置為1，而不能設置成其他的值。
通過網址http://alteredqualia.com/tmp/webgl-linewidth-test/，我們可以測試自己的電腦是否有線寬的不能設置的bug，以下是我的電腦（mac 電腦）用chrome（版本59.0.3071.115）的測試效果：
macOS chrome測試效果
（麻蛋，以前的mac 下的chrome是好使的，看來這病越來越嚴重了）
用firefox試試：
macOS下firefox測試結果
在firefox下面看來還是正常的。
事實上，這是一個長久以來一直存在的bug，下面這個地址就是證明：
https://bugs.chromium.org/p/chromium/issues/detail?id=60124
Line width bug
很早之前就有人提過了，只是一直沒有解決。
這是病，得治，只是那些搞瀏覽器大佬們不想出藥。
我們就只能想點偏方來自己治療了。
偏方是啥，由於Line的線寬是底層問題，我們並不好解決；不過，我們可以考慮通過面的繪制來模擬線，線的特點就是不隨鏡頭變化而改變寬度，只要能夠達到這個特點就可以達到模擬的效果。
下一篇將會介紹 如何通過三角形（面）的方式來模擬線條的繪制。
更多精彩內容，請關註公眾號。
更多精彩內容，請關註公眾號: ITman彪叔
WebGL 繪制Line的bug（一）