Javascript高級編程學習筆記（99）—— WebGL(5) 繪圖

繪圖

WebGL只能繪製三種形狀: 

1. 點
2. 線
3. 三角

其它的形狀都是由上面的三種形狀合成以後繪製到三維空間中的

 

執行繪圖操做 WebGL 提供了兩種方法:

1. gl.drawElements()
2. gl.drawArrays()

這兩個方法的第一個參數都是一個常量

常量的取值範圍以下:

1. gl.POINTS: 將每一個頂點當成一個點來繪製
2. gl.LINES: 將數組當成一系列的頂點,在這些頂點間劃線,每一個頂點既是起點也是終點,所以數組中必須包含偶數個頂點才能完成繪製
3. gl.LINE_LOOP: 將數組當成一系列頂點,在頂點間劃線,從第一個點到第二個點,再從第二個點到第三個點,最後從最後一個點到第一個點
4. gl.LINE_STRIP: 與LINE_LOOP相同,只不過不會繪製從最後一個點到第一個點的線
5. gl.TRIANGLES:　將數組當成一系列頂點，在頂點間繪製三角形，除非明確規定不然每一個三角形都單獨繪製，不與其它三角形共享頂點
6. gl.TRIANGLES_STRIP: 與上一個相比繪製三角形時會取前兩個點與新的點構成新的三角形,即若是有 ABCD 四個點 第一次繪製三角形 ABC 第二次繪製三角形 BCD
7. gl.TRIANGLES_FAN : 與上一個的區別在於若是有 ABCD 四個點 第一個繪製 ABC 而後繪製 ACD

 

此外,gl.drawElement() 還接收兩個參數

1. 數組緩衝區起始索引
2. 緩衝區中的頂點個數

例如繪製三角形能夠使用如下代碼

// 已經完成了使用着色器清理窗口等初始化操做,具體操做參考前面的文章

// 定義三個頂點的座標
let vertices = new Float32Array([0,1,1,-1,-1,-1]),
    buffer = gl.createBuffer(),
    vertexSetSize = 2,
    vertexSetCount = vertices.length/vertexSetSize,
    uColor, aVertexPosition;

// 將數據放到緩衝區
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 爲片斷着色器傳入顏色值
uColor = gl.getUniformLocation(program, "uColor");
gl.uniform4fv(uColor, [0, 0, 0, 1]);

// 爲着色器傳入頂點信息
aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
gl.enableVertexAttribArray(aVertexPosition);
gl.vertexAttribPointer(aVertexPosition, vertexSetSize, gl.FLOAT, false, 0, 0);

// 繪製
gl.drawArrays(gl.TRIANGLES, 0, vertexSetCount);

 

紋理

WebGL 的紋理能夠使用DOM中的圖像,建立紋理須要調用 gl.createTexture()

圖像加載完成前,紋理不會初始化,因此最好在load事件後設置紋理

let image = new Image(),
texture;
image.src = "smile.gif";
image.onload = function(){
    texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D,texture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

    gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,     
    gl.UNSIGNED_BYTE, image);
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST);

    // 清除紋理
    gl.bindTexture(gl.TEXTURE_2D,null);
}

 

讀取像素

WebGL讀取像素須要使用 readPixels()

參數:

1. x座標
2. y座標
3. 寬度
4. 高度
5. 圖像格式
6. 數據類型
7. 類型化數組

示例:

let pixels = new Uint8Array(25*25);
gl.readPixels(0, 0, 25, 25, gl.RGBA, gl.UNSIGNED_BYTE, pixels);