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

WebGL與紋理

WebGL中紋理的限制

當然，做一些處理的話，不是2的階乘的圖片資料也是可以用的，但是基本上作為紋理使用的影象資料的大小必須是2的階乘。

另外，看一下普通的網頁就能感覺到，網頁上的圖片資料的讀取是要花一點時間的，在進行紋理轉換的話，必須是在圖片讀取完之後才行，這裡需要做一些特殊的處理，如果對javascript不太熟悉的話可能會無從下手，這個後面會說。

紋理的生成和使用

那麼，下面就開始說一說紋理使用的步驟吧。

紋理在WebGL中要使用紋理物件來處理，生成紋理物件需要使用createTexture函式。

>createTexture的使用例子

var tex = gl.createTexture();

大家想一想，之前在WebGL中使用快取物件的時候也是需要進行和WebGL的繫結處理，比如使用VBO的時候，這次也和快取一樣，要進行繫結處理。要對紋理資料進行操作的時候，首先必須先進行繫結，然後使用操作紋理的一些函式，被繫結的紋理物件才能適用這些處理。

把紋理資料和WebGL進行繫結的函式是bindTexture。

>bindTexture的使用例子

gl.bindTexture(gl.TEXTURE_2D, tex);

>texImage2D的使用例子

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);

圖片讀取時間的考慮

剛才也說了，使用texImage2D函式可以把圖片資料接分配給紋理，但是網頁中的圖片的讀取是要花一點時間的。

這裡需要注意的是，texImage2D函式被呼叫的時候，必須是圖片已經讀取完了之後，如果在圖片讀取完之前呼叫texImage2D，則無法正確的將圖片資料分配給紋理。。

這裡需要在圖片讀取完後的事件中來呼叫。

具體流程，就是先用javascript來生成圖片物件，圖片物件有onload事件可以監測到圖片讀取完成。在這裡把紋理相關的處理做完，最後給圖片物件指定圖片地址開始讀取圖片。

這裡比較重要的一點是，在圖片開始讀取之前，要先新增onload事件，在事件中新增紋理相關的處理，這樣，圖片讀取完成之後就可以自動進行紋理相關的這些處理了。

上面說的這些處理，寫成函式的話，就是下面這樣。

>紋理的生成函式

function create_texture(source){
    // イメージオブジェクトの生成
    var img = new Image();
    
    // データのオンロードをトリガーにする
    img.onload = function(){
        // テクスチャオブジェクトの生成
        var tex = gl.createTexture();
        
        // テクスチャをバインドする
        gl.bindTexture(gl.TEXTURE_2D, tex);
        
        // テクスチャへイメージを適用
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
        
        // ミップマップを生成
        gl.generateMipmap(gl.TEXTURE_2D);
        
        // テクスチャのバインドを無効化
        gl.bindTexture(gl.TEXTURE_2D, null);
        
        // 生成したテクスチャをグローバル変數に代入
        texture = tex;
    };
    
    // イメージオブジェクトのソースを指定
    img.src = source;
}

執行了generateMipmap函式之後，就能生成紋理映射了，這個函式的引數和bindTexture一樣，也是gl.TEXTURE_2D。

和VBO一樣，WebGL中同一時間只能繫結一個紋理，所以最後要解除繫結。在最終生成紋理物件的時候，使用了全域性變數，因為onload沒有辦法返回自己本身。上面的例子，變數texture必須是create_texture函式能夠參考到的空間內。

onload的對應結束之後，最後給圖片物件指定圖片地址，因為已經加了onload事件，圖片讀取完成之後會自動呼叫onload事件，執行生成紋理的程式碼。

紋理座標和頂點的屬性

好了，已經知道了紋理物件的生成的方法了，那麼重要的就是如何把紋理放到多邊形中了。

在前面的文章（九，頂點快取的基礎）中已經詳細介紹了，向頂點中新增資訊需要使用新的VBO。那麼這一次新新增的VBO中需要儲存頂點的紋理座標。紋理座標就是為了表示使用紋理的哪個座標。紋理座標使用的範圍是0 ～ 1，而且有橫豎兩個方向。所以，表示紋理座標的時候類似於(0.0, 0.0)這樣，需要兩個元素。（lufy:翻譯的有點繞嘴，看後面的使用部分就明白了。）

而且，這裡有些奇怪的地方，一般，圖片資料的座標系是以左上為原點來考慮的，如下圖所示。

從左上角的原點，向右以及向下來對應X和Y的值的大小。

而WebGL中的紋理座標系則是像下面這樣。

座標系上下顛倒了一下。就是說紋理座標系中，左下是原點，縱方向上的數值越向上表示越大。但是，對照兩個圖看一下就知道了，指定紋理座標的時候也不需要考慮太多。為什麼呢？因為圖片也是上下翻轉的，所以和以左上角為原點的圖片一樣考慮就行，結果是一致的。

現在的階段，只需要知道紋理空間上座標系是上下翻轉的就可以了。*以後使用紋理進行一些特殊的處理的時候才需要詳細瞭解相關的知識。

javascript 的修正

這次沒有任何光照效果，渲染的只是帶有影象的多邊形而已。雖然用圓環體也可以，但是還需要處理一些細節部分，所以還從多邊形模型來開始介紹。

首先，準備模型的頂點資料，剛才也說了，為了儲存紋理座標，要新增新的頂點屬性，而因為不需要光照效果，所以法線等情報這次也不使用。

>頂點資料的準備

// attributeLocationを配列に取得
var attLocation = new Array();
attLocation[0] = gl.getAttribLocation(prg, 'position');
attLocation[1] = gl.getAttribLocation(prg, 'color');
attLocation[2] = gl.getAttribLocation(prg, 'textureCoord');

// attributeの要素數を配列に格納
var attStride = new Array();
attStride[0] = 3;
attStride[1] = 4;
attStride[2] = 2;

// 頂點の位置
var position = [
    -1.0,  1.0,  0.0,
     1.0,  1.0,  0.0,
    -1.0, -1.0,  0.0,
     1.0, -1.0,  0.0
];

// 頂點色
var color = [
    1.0, 1.0, 1.0, 1.0,
    1.0, 1.0, 1.0, 1.0,
    1.0, 1.0, 1.0, 1.0,
    1.0, 1.0, 1.0, 1.0
];

// テクスチャ座標
var textureCoord = [
    0.0, 0.0,
    1.0, 0.0,
    0.0, 1.0,
    1.0, 1.0
];

// 頂點インデックス
var index = [
    0, 1, 2,
    3, 2, 1
];

// VBOとIBOの生成
var vPosition     = create_vbo(position);
var vColor        = create_vbo(color);
var vTextureCoord = create_vbo(textureCoord);
var VBOList       = [vPosition, vColor, vTextureCoord];
var iIndex        = create_ibo(index);

// VBOとIBOの登録
set_attribute(VBOList, attLocation, attStride);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iIndex);

頂點資料是用一個數組來表示的，和之前一樣生成VBO和IBO。這和之前所作的是完全一樣的。這樣，頂點相關的處理，也就是說著色器內用attribute變數處理的資料的準備都已經ok了。

這次因為不進行光照處理，所以準備好座標變換矩陣就可以處理頂點了。逆矩陣和光源的位置等都是不需要的。

但是考慮一下uniform修飾符的變數的話，需要增加一個，uniform修飾符定義的變數是指全部頂點都進行一致處理的資料，所以，作為所有頂點都同樣被使用的紋理資料，就必須使用uniform變數來傳遞資料了。

>uniform相關處理

// uniformLocationを配列に取得
var uniLocation = new Array();
uniLocation[0]  = gl.getUniformLocation(prg, 'mvpMatrix');
uniLocation[1]  = gl.getUniformLocation(prg, 'texture');

設定紋理有效

要將特定的紋理單位設定為有效使用的是activeTexture函式。

>紋理單位有效化

// 有効にするテクスチャユニットを指定
gl.activeTexture(gl.TEXTURE0);

向著色器中傳入紋理資料

將相應的紋理單位設定為有效之後，接著就需要將紋理和WebGL進行繫結處理了，這個在將圖片資料轉換成紋理資料的時候也做過了，所以簡單如下。

>紋理和WebGL繫結

// テクスチャをバインドする
gl.bindTexture(gl.TEXTURE_2D, texture);

>將紋理資料傳給著色器

// uniform変數にテクスチャを登録
gl.uniform1i(uniLocation[1], 0);

著色器修改

接著，是著色器的修改了，首先是頂點著色器。

>頂點著色器程式碼

attribute vec3 position;
attribute vec4 color;
attribute vec2 textureCoord;
uniform   mat4 mvpMatrix;
varying   vec4 vColor;
varying   vec2 vTextureCoord;

void main(void){
    vColor        = color;
    vTextureCoord = textureCoord;
    gl_Position   = mvpMatrix * vec4(position, 1.0);
}

>片段著色器程式碼

precision mediump float;

uniform sampler2D texture;
varying vec4      vColor;
varying vec2      vTextureCoord;

void main(void){
    vec4 smpColor = texture2D(texture, vTextureCoord);
    gl_FragColor  = vColor * smpColor;
}

這次的例子，頂點著色器中用attribute定義的頂點的紋理座標，在片段著色器中用varying變數來接收，然後在片段著色器一側將這個紋理座標，傳入到texture2D函式中。

這樣，用texture2D函式獲取到紋理的顏色資訊之後，再和頂點顏色（varying變數vColor）相乘，就得到最終的顏色了。

總結

紋理的使用方法，用了雙倍的時間來講解了，應該理解了吧。

雖然這次只是最基本的部分的封裝，但是變更點非常的多，所以最後會貼出全部程式碼（lufy:我就不貼了，大家直接用瀏覽器檢視就行了。），另外，最後給出了執行demo。

四邊形中使用紋理的demo