[WebGL入門]四，渲染準備

時間 2019-11-26

標籤 webgl 入門渲染準備简体版

原文原文鏈接

注意：文章翻譯http://wgld.org/，原做者杉本雅広(doxas)，文章中假設有個人額外說明，我會加上［lufy：］。另外。鄙人webgl研究還不夠深刻，一些專業詞語，假設翻譯有誤，歡迎你們指正。javascript

必須準備的東西

上次介紹了3D畫圖的基礎知識。html

講了一下由Z座標的不一樣決定的兩種座標系。以及座標變換的種類。這一次，說一說實際WebGL畫圖的時候必須準備的東西。java

首先，HTML。javascript相關的基礎知識就不解釋了。假設，有不明確的單詞或概念的話。請本身查一下。web

我是以爲你有必定的HTML和javascript基礎的前提下進行解說的。canvas

HTML的準備

就像前面說的那樣(二，開始WebGL以前，先了解一下canvas)。WebGL利用的是canvas的畫圖區域。也就是說。使用WebGL的網頁，HTML裏面確定含有canvas標籤。瀏覽器

向這個canvas標籤上加入一個ID屬性，在javascript中使用getElementById等函數很是easy能獲取到這個canvas對象。獲取了這個canvas以後。利用javascript可以完畢所有的操做。函數

一個最低限度的HTML模版，就是像如下這樣。webgl

<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來動態制定。spa

另外，所有的腳本都寫在HTML中固然是可以的。我的以爲將javascript代碼分離成單獨的文件比較好，這個不是必須的。.net

關於着色器

WebGL中，所謂的固定渲染管線是不存在的。預計會有人問。什麼是固定渲染管線？先來簡單說明一下。

固定渲染管線，簡單來講，就是3d渲染所進行的一連串的計算流程。就像流水線同樣。（說的有點太簡單了。）

固定渲染管線中。上次所說的模型，視圖，投影的座標變換都會替咱們完畢。不需要理解細節，僅僅需要知道所有的這些座標變換都包括在裏面，都會幫咱們計算好。

假設有了固定渲染管線，編敲代碼就比較easy了，因爲所有的變換都是由固定渲染管線來完畢的，但是缺點就是自由度低。

固定渲染管線僅僅能完畢一些最主要的操做，假設想要作一些特殊的處理。就比較麻煩了。

好了，固定渲染管線就講到這裏了。

前面說了。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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。