[WebGL入門]四，渲染準備，webgl入門渲染準備
註：文章譯自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的額外說明，我會加上［lufy：］，另外，鄙人webgl研究還不夠深入，一些專業詞語，如果翻譯有誤，歡迎大家指正。
上次介紹了3D繪圖的基礎知識。講了一下由Z座標的不同決定的兩種座標系，以及座標變換的種類。這一次，說一說實際WebGL繪圖的時候必須準備的東西。
首先，HTML，javascript相關的基礎知識就不解釋了。如果，有不明白的單詞或概念的話，請自己查一下。我是認為你有一定的HTML和javascript基礎的前提下進行講解的。
就像前面說的那樣(二，開始WebGL之前，先瞭解一下canvas)，WebGL利用的是canvas的繪圖區域。也就是說，使用WebGL的網頁，HTML裡面肯定含有canvas標籤。
向這個canvas標籤上添加一個ID屬性，在javascript中使用getElementById等函數很容易能擷取到這個canvas對象，擷取了這個canvas之後，利用javascript可以完成所有的操作。
一個最低限度的HTML模版，就是像下面這樣。
<html> <head> <title>WebGL TEST</title> <script src="script.js" type="text/javascript"></script> </head> <body> <canvas id="canvas"></canvas> </body></html>上面代碼中，script.js是自己準備的包含各種處理的javascript檔案。canvas的大小可以在HTML中設定，當然也可以使用javascript來動態制定。
另外，所有的指令碼都寫在HTML中當然是可以的，個人認為將javascript代碼分離成單獨的檔案比較好，這個不是必須的。
WebGL中，所謂的固定管線是不存在的。估計會有人問，什麼是固定管線？先來簡單說明一下。
固定管線，簡單來說，就是3d渲染所進行的一連串的計算流程，就像流水線一樣。（說的有點太簡單了。）
固定管線中，上次所說的模型，視圖，投影的座標變換都會替我們完成。不需要理解細節，只需要知道所有的這些座標變換都包含在裡面，都會幫我們計算好。
如果有了固定管線，編寫程式就比較容易了，因為所有的變換都是由固定管線來完成的，但是缺點就是自由度低。固定管線只能完成一些最基本的操作，如果想要做一些特殊的處理，就比較麻煩了。
好了，固定管線就說到這裡了。
前面說了，WebGL中不存在固定管線。也就是說，座標變換必須全部由自己來做。而且，這個記述了座標變換的機制就叫做著色器(Shader)。
這樣可以由程式員控制的機制叫做可編輯著色器。而著色器又有 處理幾何圖形頂點的頂點著色器和處理像素的片段著色器兩種類型。
由於WebGL中沒有固定管線，所以必須準備好頂點著色器和片段著色器。
頂點著色器和片段著色器要怎麼準備呢？
實際上，著色器的添加可以有多種做法。著色器是由程式員自己編寫的，而且著色器的代碼就是簡單的字串而已。所以，不管用什麼方法，只要把這個著色器字串傳給程式就可以了。
最簡單的方法，就是把著色器記錄在HTML中。使用這種方法的話，是利用HTML的script標籤來做的。下面是一個簡單的例子。
<script id="vshader" type="x-shader/x-vertex"> ※頂點著色器</script><script id="fshader" type="x-shader/x-fragment"> ※片段著色器</script>canvas也一樣，為了在javascript中可以調用，給script標籤加上了id屬性。另外，type屬性是和javascript不同的，不要誤認為是javascript代碼。
>>指定type屬性的理由
type屬性指定了［x-shader/x-vertex］和［x-shader/x-fragment］，這並不是HTML中定義的正式的寫法。但是一般的瀏覽器如果遇到不識別的標籤的話會無視掉的，瀏覽器不會認為這是javascript代碼的。瀏覽器只會把它當成無意義的字串，而程式中則可以使用標籤裡面的內容。
另一個，也可以不使用script標籤來做。
主要是因為著色器的代碼就是簡單的字串，可以直接在javascript內部定義字串。這樣的話，著色器被定義在了javascript檔案中，HTML的代碼就變的簡單多了，並不是說，這種做法比前一種做法好。
總結
使用WebGL進行3D渲染，這次說了下面幾個必須要做的準備。
最低限度，需要HTML，canvas標籤，處理WebGL的javascript代碼，頂點著色器和片段著色器的代碼。
另外，比如要描畫3D模型的模型資料，圖片檔案等當然有時候也是需要的，但是根據你用WebGL想要做的東西不同而不同。真要說最新限度的話，只需要一個HTML檔案。javascript代碼和著色器代碼都可以記錄在HTML檔案中。
基本上，本網站的所有javascript代碼都是記錄在單獨的檔案內的，而著色器的代碼，也不是必須記錄在HTML中，要根據情況隨機應變吧。
下次，介紹3D繪圖的核心內容，矩陣。
轉載請註明：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
