WebGL 繪制Line的bug(一)

熟悉WebGL的同學都知道,WebGL繪制模式有點、線、面三種;通過點的繪制可以實現(xiàn)粒子系統(tǒng)等,通過線可以繪制一些連線關系;面就強大了,通過面,我們可以繪制我們想繪制的所有的三維對象。

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

然而,不幸的是,WebGL在繪制線條的時候,存在一個缺陷,那就是在一些機器的一些瀏覽器上面(應該是大多數(shù)情況下)線寬只能設置為1,而不能設置成其他的值。

通過網(wǎng)址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的線寬是底層問題,我們并不好解決;不過,我們可以考慮通過面的繪制來模擬線,線的特點就是不隨鏡頭變化而改變寬度,只要能夠達到這個特點就可以達到模擬的效果。

下一篇將會介紹 如何通過三角形(面)的方式來模擬線條的繪制。

如果你對WebGL 感興趣,可以了解下我們用WebGL開發(fā)的3D機房項目:

HTML5,不只是看上去很美(第二彈:打造最美3D機房)

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 上一篇已經(jīng)講述了通過面模擬線條時候,每一個頂點的頂點數(shù)據(jù)包括:端點坐標、偏移量、前一個端點坐標、后一個端點坐標,當...
    ITman彪叔閱讀 803評論 0 2
  • 瀏覽器發(fā)展史 現(xiàn)在瀏覽器已經(jīng)成為網(wǎng)上生活的重要家園和工具。而從1991年,Web之父Tim Berners-Lee...
    波段頂?shù)?/span>閱讀 17,959評論 6 86
  • 珍惜現(xiàn)在的別人對自己的愛,用心感受這份愛。 故事開始在最初的那個愛情中,她過得很幸福,那時滿天的星光只因她而...
    追逐螢火般的光芒閱讀 881評論 0 0
  • 本文集僅供摘抄用。 ↑重要的事請自行默讀三遍?!?第二本 《西游殤》 作者頁:傅人目錄頁:西游殤目錄 故事梗概:...
    抱雪球球閱讀 345評論 0 1
  • 我以為我超規(guī)劃聯(lián)系好了 但還是錯了 面對自己的無能非常憤怒 一下班就沖回家 敏兒回來了 帶了好多禮物 么么噠 晚上...
    角落蜷縮閱讀 153評論 0 0

友情鏈接更多精彩內(nèi)容