Javascript高級編程學習筆記（98）—— WebGL(4) WebGL上下文(2)

錯誤

Javascript與WebGL之間的一個最大區別在於,WebGL的操做通常不會拋出錯誤

若是但願獲取WebGL的錯誤信息,那麼就須要手動調用  gl.getError() 方法

 

該方法會返回如下錯誤常量之一:

• gl.NO_ERROR: 上一次操做沒有發生錯誤
• gl.INVALID_ENUM: 應該給WebGL方法傳入常量可是傳錯了參數
• gl.INVALID_VALUE: 在須要無符號數的地方傳入了負值
• gl.INVALID_OPERATION: 在當前狀態下不能完成操做
• gl.OUT_OF_MEMORY: 沒有足夠的內存完成操做
• gl.CONTEXT_LOST_WEBGL: 因爲外部因素干擾丟失了當前的 WebGL 上下文

 

須要注意的 getError() 方法一次只會返回一個錯誤值,若是產生了多個錯誤最好循環調用該方法,直到該方法的返回值是一個 gl.NO_ERROR 爲止

 

着色器

着色器(shader) 是 OpenGL 中的另外一個概念, WebGL中有兩種着色器

1. 頂點着色器: 用於將3D頂點轉換爲須要渲染的2D頂點
2. 片斷(像素)着色器: 用於準確計算每一個須要繪製像素的顏色

WebGL着色器的難點在於着色器並非使用JAVAScript編寫的,這些着色器是使用 GLSL (一種類C語言編寫的)

 

在開始代碼前簡單介紹一下着色器編寫的相關事宜

1. 每一個着色器都有一個main方法,該方法在繪圖期間會重複執行
2. 爲着色器傳遞數據的方法有兩種: Attribute 和 Uniform
3. Attribute用於向着色器傳遞頂點信息
4. Uniform 用於向着色器傳入常量值

 

因爲瀏覽器不能解析 GLSL 程序,因此咱們須要準備好字符串形式的 GLSL 程序,以便編譯連接到着色器程序

如:

<script type="x-webgl/x-vertex-shader" id="vertexShader">
attribute vec2 aVertexPosition;

void main(){
    gl_Position = vec4(aVertexPosition, 0.0, 1.0);
}
</script>

<script type="x-webgl/x-vertex-shader" id="fragmentShader">
uniform vec4 uColor;

void main(){
    gl_FragColor = uColor;
}
</script>

而後咱們須要經過上面的片斷來建立着色器對象:

let vertexGlsl = document.getElementById("vertexShader").text,
fragmentGlsl = document.getElementById("fragmentShader").text;

// 建立着色器
let vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexGlsl);
// 編譯着色器
gl.compileShader(vertexShader);

let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentGlsl);
gl.compileShader(fragmentShader);

let program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

gl.useProgram(program);

 

着色器傳值

上方建立完成的着色器必須接收一個值才能工做

傳入變量須要兩個步驟,首先須要獲取變量的位置,而後給該變量賦值

let uColor = gl.getUniformLocation(program, "uColor");
gl.uniform4fv(uColor, [0, 0, 0, 1]);

let aVertexPosition = gl.getAttribLocation(program,"aVertexPosition");
gl.enableVertexAttribArray(aVertexPosition);// 啓用Attribute變量
gl.vertexAttribPointer(aVertexPosition, itemSize, gl.FLOAT, false ,0,0);// 建立指針,指向gl.bindBuffer指定的緩衝區並保存在 aVertexPosition中供頂點着色器使用

 

着色器調試

與WebGL的其餘操做同樣 着色器操做也可能會失敗,而且也是靜默失敗

若是但願獲取着色器的錯誤信息,那麼則須要調用 gl.getShaderParameter(),來獲取着色器的編譯狀態

if(!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)){
    alert(get.getShaderInfoLog(vertexShader));
}

若是要檢測連接效果可使用以下代碼

if(!gl.getProgramParameter(program, gl.LINK_STATUS)){
    alert(get.getProgramInfoLog(program));
}