Javascript高級編程學習筆記（97）—— WebGL(3) WebGL上下文(1)

WebGL上下文

在支持WebGL的瀏覽器中,WebGL的名字爲 "experimental-webgl",這是因爲 webgl 的規範仍未制定完成

制定完成後名字就會改成簡單的 "webgl"

若是瀏覽器不支持,那麼在獲取webgl上下文的時候瀏覽器會返回 null 因此在使用前須要檢測返回值

基本的獲取 WebGL 代碼以下:

let drawing = document.getElementById("drawing");

// 檢測瀏覽器是否支持canvas
if(drawing.getContext){
    let gl = drawing.getContext("experimental-webgl");
    if(gl){
        // code
    }
}

 

此外在獲取 webgl 上下文時能夠經過傳入第二個參數對象來設置一些選項

支持的配置對象屬性以下:

1. alpha: 默認爲true 爲上下文建立一個 Alpha 通道緩衝區
2. depth: 默認爲true 表示可使用16位深緩衝區
3. stencil: 默認爲false 表示可使用8位模板緩衝區
4. antialias: 默認爲true 表示使用默認機制執行抗鋸齒操做
5. premultipliedAlpha: 默認爲true 表示緩衝區預乘Alpha值
6. preserveDrawingBuffer: 默認爲false 表示在繪圖完成後是否保留繪圖緩衝區

 

在部分瀏覽器中若是 getContext() 沒法獲取webgl上下文會拋出錯誤,因此最好將調用封裝到 try-catch 塊中

let drawing = document.getElementById("drawing");
let gl;

// 檢測瀏覽器是否支持canvas
if(drawing.getContext){
    try{
       gl = drawing.getContext("experimental-webgl");
    }catch(e){}
    if(gl){
        // code
    }else{
        alert("WebGL context could not be created");
    }
}

 

常量

若是使用過 OpenGL 的小夥伴可能對其中常常使用的常量都有所瞭解

WebGL中的常量都保存在剛纔獲取到的 WebGL 上下文中,這些常量的名稱與 OpenGL的常量有所區別即沒有 GL_ 前綴

例如  GL_COLOR_BUFFER_BIT 在WebGL中爲 gl.COLOR_BUFFER_BIT 

WebGL經過這種方式來支持大多數 OpenGL 常量(有一部分的常量不提供支持)

 

方法命名

在開始WebGL的具體操做的學習以前,有一些WebGL\OpenGL的小常識須要瞭解

其中比較重要的就是方法的命名方式了

這些方法的命名經過後綴會告訴咱們這個方法接收幾個參數,以及這幾個參數的類型

例如: gl.uniform4f() 的 4f 則表示接受4個浮點數, gl.uniform3i()則表示接受3個整數

此外 gl.uniform3iv() 的 3iv 最後的 v 則表示 vector 因此即該方法接收 3個整數類型的數組

 

準備繪圖

在開始使用 WebGL 進行繪圖以前,通常來講都須要使用某種實色來清空 canvas,爲繪圖作準備

步驟須要如下兩行代碼:

gl.clearColor(0,0,0,1); // 設置用於清除的實色
gl.clear(gl.COLOR_BUFFER_BIT);// 使用剛剛設置的實色來清空 canvas

 

視口與座標

在清除canvas後,下一個步驟則須要定義 WebGL的視口

默認狀況下,WebGL可以使用整個 canvas 的區域

若是須要改變視口的大小,那麼能夠調用 viewport 方法來調整視口大小

gl.viewport(0,0,drawing.width/2,drawing.height/2);

須要注意的是 這裏的 (0,0)點和一般的網頁座標不一致這裏的 0,0 在canvas 的左下角,通常的網頁座標在左上角

 

此外在 WebGL 視口的內部,(0,0)點則在 剛纔定義的視口的正中心,在繪製過程當中,若是使用了超出視口範圍的座標那麼該部分會被剪切掉

 

緩衝區

在操做中通常來講數據都是保存在 JS 的類型化數組中

不過在使用時不能直接經過 JS 類型化數組來進行使用,須要先將輸入放入 WebGL 的緩衝區

整體步驟爲: 建立緩衝區->綁定緩衝區->填充緩衝區

代碼以下:

let buffer = gl.createBuffer();
gl.bindBuffer (gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0,0.5,1]),gl.STATIC_DRAW);

其中 bufferData()的第三個參數用於指定使用緩衝區的方式

取值範圍是以下幾個常量:

• gl.STATIC_DRAW 數據只加載一次,在屢次繪圖中使用
• gl.STREAM_DRAW 數據只加載一次,在幾回繪圖中使用
• gl.DYNAMIC_DRAW 數據動態改變在屢次繪圖中使用

 

而釋放緩衝區則簡單得多,調用 deleteBuffer() 便可

gl.deleteBuffer(buffer);