[WebGL入門]四，渲染準備

lufy發表於2014-07-31
Web

注：文章譯自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的額外說明，我會加上［lufy：］，另外，鄙人webgl研究還不夠深入，一些專業詞語，如果翻譯有誤，歡迎大家指正。


必須準備的東西

上次介紹了3D繪圖的基礎知識。講了一下由Z座標的不同決定的兩種座標系，以及座標變換的種類。這一次，說一說實際WebGL繪圖的時候必須準備的東西。

首先，HTML，javascript相關的基礎知識就不解釋了。如果，有不明白的單詞或概念的話，請自己查一下。我是認為你有一定的HTML和javascript基礎的前提下進行講解的。


HTML的準備

就像前面說的那樣(二，開始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繪圖的核心內容，矩陣。


轉載請註明：轉自lufy_legend的部落格http://blog.csdn.net/lufy_legend

相關文章