序章？
想來學(xué)習(xí)WEBGL也一年有余了，多多少少有些心得也有些感想，然后又突然想開始寫寫博客，那我人生的第一篇博客就來談?wù)勥@些心得與感想吧。
一開始接觸WEBGL的緣由那是相當(dāng)簡(jiǎn)單，僅僅是因?yàn)樾枰?。那是大二的時(shí)候，學(xué)校突然跟我們說，這里有一堆項(xiàng)目，你們?nèi)绻雲(yún)⒓拥脑捑挖s快報(bào)名。當(dāng)時(shí)一群人就那么當(dāng)看見項(xiàng)目里面有黃金似的報(bào)名去了，我當(dāng)時(shí)看這情況，雖然不是很明白到底怎么回事，但總覺得很厲害的樣子，于是也跟風(fēng)報(bào)名去了。然后？然后項(xiàng)目就升級(jí)了到現(xiàn)在都沒結(jié)題，平時(shí)還沒什么事做。。
總而言之，我就這么接觸WEBGL了。
之后就是學(xué)習(xí)過程了，這個(gè)我就不說了，說多了會(huì)得出我很懶的結(jié)論，這樣不太好所以還是不說了。
WEBGL實(shí)在是個(gè)相當(dāng)?shù)讓拥臇|西，接口說起來其實(shí)不多，常用的也就那幾個(gè)，然后這個(gè)特點(diǎn)直接導(dǎo)致了如果沒有圖形學(xué)基礎(chǔ)的話，原生WEBGL學(xué)起來是在是有夠復(fù)雜的。什么你說你直接three.js 搞起？好吧請(qǐng)當(dāng)我什么都沒說。。
我才不會(huì)跟人說當(dāng)時(shí)我學(xué)WEBGL的時(shí)候從原生的跳到three.js，然后因?yàn)樵S多東西搞不懂就又從three.js跳回原生的WEBGL呢。。
為什么學(xué)WEBGL？
WEBGL接口很低級(jí)，相關(guān)資料偏少，學(xué)習(xí)起來有一定的難度，一出問題調(diào)試起來，我就呵呵了；
WEBGL性能上毫無疑問輸給了OPENGL；
WEBGL似乎沒有關(guān)于燈光的效果的接口函數(shù)，具體效果需要編寫著色器程序來實(shí)現(xiàn)；
WEBGL甚至沒有相機(jī)的概念，要用的時(shí)候還得自己定義；
WEBGL沒有相機(jī)的概念就算了，它竟然連三維物體的轉(zhuǎn)換函數(shù)都沒有，還得利用第三方庫去進(jìn)行各種矩陣運(yùn)算，對(duì)沒錯(cuò)，就是這樣，連矩陣堆棧都要自己定義是怎樣！
那為什么我還要學(xué)WEBGL?。?/p>
項(xiàng)目需要?。。L！）
其實(shí)是這樣的：
WEBGL雖然性能上比不上OPENGL，但仍然擁有相當(dāng)高的性能；
WEBGL通過對(duì)著色器的編程，甚至可以掌控所有顯示到屏幕上的像素的顏色；
WEBGL程序調(diào)試時(shí)可以極度挑戰(zhàn)你的耐心（—_—#?。?；
回到正題。。最重要的一點(diǎn)是，WEBGL可以在支持它的瀏覽器上，實(shí)現(xiàn)不需要插件就能運(yùn)行的三維程序；
就沖最后一點(diǎn)，WEBGL學(xué)了也不會(huì)吃虧啊。
學(xué)習(xí)資料有那些？
為了方便想學(xué)習(xí)WEBGL的看官，就介紹一下我用過的一些資料及教材。
目前網(wǎng)上有一個(gè)似乎叫做HiWebGL的系列，有中譯版本的，不過沒有圖形學(xué)基礎(chǔ)的同學(xué)我不太推薦，因?yàn)槲耶?dāng)時(shí)就是沒圖形學(xué)基礎(chǔ)就去看的，結(jié)果看完之后我的狀況就是：雖然不知道是怎么回事，但總感覺很厲害的樣子。
現(xiàn)在O'Reilly也出有一本名為《WEBGL》的動(dòng)物書，封面是個(gè)奇怪的不明物種，現(xiàn)在似乎還沒有中譯版（更正，最近中譯版出來了）。很坑的是，雖然它封面寫的是WEBGL，但實(shí)際上介紹的卻是Three.js框架，而且除了Three.js框架外，里面介紹的例子還使用了大量的第三方工具庫，讓讀者幾乎沒有可能接觸到WEBGL的原生接口，以及一些不懂是在不太好的圖形學(xué)原理。看完了原生WebGL想去了解Three.js框架的同學(xué)，我感覺可以入手這本書。
最后就是我有老老實(shí)實(shí)看完的一本書了，真的有看完哦不騙你。。書名是《WebGL Beginner's Guide》書中除了一些運(yùn)算用的工具庫之外，幾乎沒有用到別的什么奇怪的東西。書中有很詳細(xì)的介紹一個(gè)原生WEBGL應(yīng)用的結(jié)構(gòu)，幾乎從零開始介紹WEBGL原生接口的使用方法以及使用原因。著色器編程也花了不少的篇幅介紹。最重要的是，開頭就介紹了WEBGL的渲染管線，而且?guī)缀趺恳徽露加羞m當(dāng)?shù)亟榻B相關(guān)的圖形學(xué)知識(shí)。這對(duì)沒有圖形學(xué)基礎(chǔ)的初學(xué)者是相當(dāng)?shù)暮线m啊～！好吧至少對(duì)我來說的確是相當(dāng)?shù)暮线m。。。這書依然沒有中譯版哦～，似乎。
要做什么才畫得出來一個(gè)球？
那么最簡(jiǎn)單的一個(gè)WEBGL程序需要做什么呢？
初始化畫板什么的，就略過吧。
首先要編寫著色器程序，并編譯鏈接。著色器程序包含兩個(gè)部分，一個(gè)是頂點(diǎn)著色器，一個(gè)是片元著色器。最簡(jiǎn)單的著色器程序用頂點(diǎn)著色器計(jì)算三維物體頂點(diǎn)的位置在哪，同時(shí)用片元著色器設(shè)定每個(gè)片元的顏色。
然后要初始化三維物體的Buffers，具體說來就是用WEBGL提供的接口新建一些Buffer，并向其打入數(shù)據(jù)。
再然后就是初始化燈光（A：喂你不是說沒有燈光接口嘛！ 我：閉嘴?。?。初始化燈光干的事情其實(shí)是利用WEBGL提供的接口設(shè)置著色器程序中某些常量型數(shù)據(jù)的值，具體說來就是名為uniform的變量。嚴(yán)格的說，這個(gè)步驟干的并不僅僅是初始化燈光這件事
接下來做的就是設(shè)置視口，清除緩沖區(qū)，設(shè)置投影錐，進(jìn)行矩陣運(yùn)算并把矩陣數(shù)據(jù)打入到著色器程序中。當(dāng)有多個(gè)著色器程序是，當(dāng)然要先切換著色器。
上面的都干完了之后，就進(jìn)入繪制階段了，這個(gè)階段做的事情其實(shí)不多，也就把前面所定義的緩沖區(qū)的引用傳遞給著色器，并使用索引緩沖區(qū)進(jìn)行網(wǎng)格片面的繪制就完了。
如果上面的步驟一切正常的話，希望繪制的場(chǎng)景就會(huì)顯示在瀏覽器的canvas畫板上了。
（喂！怎么沒看見設(shè)置相機(jī)？）
（就說沒有相機(jī)對(duì)象了，給我閉嘴?。?/p>
為什么我的程序就是不正常？
初學(xué)WEBGL的時(shí)候很是容易碰到各種各樣的問題，一個(gè)不小心寫的程序出來的效果就詭異的跟什么一樣，我在學(xué)習(xí)過程中碰到過的狀況也不少了，就果斷分享被折磨后得到的經(jīng)驗(yàn)吧！
狀況1： 場(chǎng)景只有背景色，其他什么都沒有
解決方案：
先看看JS代碼是否有錯(cuò)（這真不是廢話）；
看看三維物體的緩沖區(qū)打入數(shù)據(jù)時(shí)是否發(fā)生錯(cuò)誤，API參數(shù)是否設(shè)置正確，打入數(shù)據(jù)前是否有綁定；
看看繪制階段的緩沖區(qū)引用傳遞操作是不是有問題，相應(yīng)API函數(shù)的第二個(gè)參數(shù)最有嫌疑，還應(yīng)該看看綁定操作有沒有做，做的對(duì)不對(duì)；
仔細(xì)檢查下著色器程序是不是有奇怪的地方，或者是有沒有切換到正確的著色器程序；
檢查下相機(jī)是不是位置設(shè)置在了物體的內(nèi)部，或者是指向了錯(cuò)誤的方向。
（喂你不剛說了沒相機(jī)么？）
（就說了是自己定義的，再不閉嘴砍你喔）
狀況2：我明明貼了材質(zhì)，為什么那東西還是黑的？
解決方案：
總之先刷新一下（ 就說我不會(huì)隨便說廢話的了）；
檢查所使用的材質(zhì)是否合法，WEBGL只支持長(zhǎng)寬都為2的n次方的材質(zhì)；
檢查材質(zhì)坐標(biāo)是不是正確的傳遞到了著色器程序中；
檢查著色器程序的相關(guān)代碼有沒有問題；
檢查繪制之前是否綁定了材質(zhì)；
最后就是看看你是不是把材質(zhì)貼到物體內(nèi)側(cè)了。
狀況3：我明明用了很多個(gè)材質(zhì)，為什么最后畫出來的東西用的都是同一個(gè)材質(zhì)？
解決方案：
這肯定是繪制新的物體時(shí)沒有用gl.bindTexture()函數(shù)綁定相應(yīng)的材質(zhì)了。
狀況4：我明明設(shè)置了透明效果，為什么被擋住的部分還是消失了？
解決方案：
沒有完美的解決方案。這個(gè)并不是程序的錯(cuò)誤導(dǎo)致的，而是WEBGL所使用的機(jī)制導(dǎo)致的。想知道具體原理可以參考http://stackoverflow.com/questions/8763603/transparent-textures-behaviour-in-webgl ；具體解決方案的話，可以參考以下：
首先繪制不透明的物體（在相當(dāng)多的情況中可以解決問題）
余下的透明物體，距離相機(jī)最遠(yuǎn)的最先繪制
以上。什么你問我相交的物體怎么辦？我怎么知道啊～我也只是個(gè)菜鳥啊～
狀況5：我的場(chǎng)景明明正確顯示了，為什么還會(huì)有一堆Index outof Range的提示？
解決方案：
這種情況問題多半出在著色器程序上，著色器程序編譯鏈接的時(shí)候，似乎會(huì)為了效率起見，剔除掉對(duì)最終結(jié)果沒有任何貢獻(xiàn)的變量。如果你是懶人，那么這種情況放著不管就好了。如果是在受不了那堆提示，那就好好檢查下著色器程序，手動(dòng)剔除掉沒用的代碼，再適當(dāng)?shù)男薷腤EBGL代碼就好。
總之到現(xiàn)在為止遇到的狀況也就上面這幾種了，以后還有遇到奇怪情況的話，解決后會(huì)來更新這一部分的。
----于2013／06／17----
狀況6：材質(zhì)坐標(biāo)什么的我調(diào)來又調(diào)去的，怎么材質(zhì)就是貼的亂七八糟的，就是不出現(xiàn)需要的效果？
可能的解決方案：
檢查下你的材質(zhì)坐標(biāo)是跟哪個(gè)坐標(biāo)一一對(duì)應(yīng)生成的，如果是跟索引數(shù)組意義對(duì)應(yīng)生成的話，那試試改成與定點(diǎn)坐標(biāo)意義對(duì)應(yīng)看看，很可能就bingo了.
居然有調(diào)試器？
最后再介紹個(gè)調(diào)試器，名叫WebGL Inspector，是Chrome下的一個(gè)插件，這東西可是調(diào)試WEBGL程序的神器哦～誰用誰知道。。
最后～
大概也沒什么想說的了。熬夜不好就先睡了。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
重慶分公司
重慶分公司
