再讀WebGL之錯誤 bug除錯的API

2021-09-24 17:36:04 字數 866 閱讀 7174

對於用慣了各種框架、庫的程式設計師來說,原生webgl的錯誤提示確實很不友好,經常乙個小bug要找半天才能發現問題所在。給大家提供幾個容易被忽略的api,gl.getshaderparameter()、gl.getshaderinfolog() 、gl.getprogramparameter、 gl.getprograminfolog(),利用這幾個api我們可以檢視日誌資訊從而發現部分bug產生處。

gl.getshaderparameter(shader,pname)

gl.getshaderinfolog(shader)

首先介紹這兩個成對的api,gl.getshaderparameter()用以返回著色器資訊,當其pname引數設定為gl.compile_status時就可以檢查著色器編譯是否成功(成功返回true)。在發現gl.getshaderparameter()返回false時就可以說明是著色器編譯時發生了錯誤,這個時候就需要再呼叫gl.getshaderinfolog()去獲取著色器的資訊日誌,檢視具體的錯誤位置以及錯誤型別。

gl.getprogramparameter(shader,pname)

gl.getprograminfolog(shader)

接下來這兩個api功能與使用方法類似上面兩個,不過檢查物件變成了webgl的程式物件(program)。將gl.getprogramparameter()的pname屬性指定為gl.link_status就可以通過返回值判斷是連線成功,連線失敗時再呼叫

gl.getprograminfolog()去獲取程式物件的資訊日誌,檢視具體的錯誤位置以及錯誤型別。

根據博主前期的經驗,新手大多數的錯誤都是拼寫錯了webgl那長長的api,所以使用支援webgl補全的編輯器或者安裝相應的補全外掛程式將會大大降低你前期的出錯率。

WebGL 繪製Line的bug 三

之前鋪墊了許多,今天可以來分享點純乾貨了。bk.line3d function points,colors bk.line3d.prototype.computedata function if i 0 var idx 3 i var i2 i 2 offset i2 0 5 offset i2 1...

WebGL 繪製Line的bug 三

bk.line3d function points,colors elseelse else if aposition apositionnext else vec2 dira normalize currscreen prevscreen vec2 dirb normalize nextscree...

WebGL 繪製Line的bug 二

以兩個端點組成的線段為例,繪製line的時候只用指定兩個端點,如果通過三角形來模擬一條線段,則至少需要兩個三角形,如下圖 這是兩個三角形模擬的線段。因此要繪製一條線段,則需要六個頂點,兩個三角形 當時從上圖中,可以看出有些頂點是共享,實際上只需要四個頂點,然後通過索引的方式繪製兩個三角形,相信熟悉w...