WebGL 探祕 (2)
可能開始有些內容是重複的沒為題，大家就當複習一下，我也提出一些新的內容
const gl = canvas.getContext("webgl");
通過呼叫 canvas 的 getContext 方法會返回一個 WebGLRenderingContext物件，這是一個提供 webgl 介面方法的物件，如果瀏覽器不支援 webgl 會返回一個 null，
我們可以通過判斷 gl 來判斷是否瀏覽器支援 webgl
if(!gl){
alert("您的不支援 webGL")
}
這個方法主要是清理螢幕使用，下面是將螢幕設定為黑色，我們在做動畫和遊戲是，在繪製每一幀前可能都需要清一下螢幕
gl.clearColor(0.0, 0.0, 0.0, 1.0);
僅僅呼叫 clear 是無法是實現清屏
// Clear the color buffer with specified clear color gl.clear(gl.COLOR_BUFFER_BIT);
webgl 所有靜態變數都可以通過訪問 gl 來獲取。
這裡有兩種方式供 clear 使用 COLOR_BUFFER_BIT 和 DEPTH_BUFFER_BIT
我們想象一下，要繪製一個圖片，圖片是由一個一個的頂點組成的，那麼我們需要資料來描述這些頂點，然後將描述資料傳入渲染引擎進行渲染。這是我在開始之前一點認識。
shader
什麼是 shader 呢？ shader 的用途是什麼，可以帶著這兩個問題進行簡單瞭解 shader。shader 可以簡單理解著色器，我們通常考慮材質通常只會考慮顏色或文理而忽略了光和材質對
每一個 shader 都是一個小程式，看 glsl 程式碼這裡一個 main 函式，
- 根據 shader 型別建立 shader
- 讓後把程式文字作為資源寫入 shader
有兩種型別的 shader ，這裡是個人的他們理解，理解有限隨後會不斷重新整理我對這兩 shader 的認識
- 頂點 shader : 用於定義點的位置，以及其變形
- fragment shader : 定義頂點的顏色
我們看兩個 shader 檔案
precision mediump float;
attribute vec2 vertPosition;
attribute vec3 vertColor;
varying vec3 fragColor;
void main()
{
fragColor = vertColor;
gl_Position = vec4(vertPosition, 0.0, 1.0);
}
這裡返回值 gl_Position 用於定義位置，所以返回 vec4 型別的位置資訊值，我瞭解暫時也不多，隨後我會分享相關內容。大家暫時有一個印象。這裡大家注意到了有 main 函式，說明這是一個可執行的程式，我們
precision mediump float;
attribute vec3 vertColor;
varying vec3 fragColor;
void main()
{
gl_FragColor = vec4(fragColor, 1.0);
}
這個 fragment 返回的顏色資訊資料。
1. 引入 shader 程式以文字形式引用
var vertexShaderText =
[
'precision mediump float;',
'',
'attribute vec2 vertPosition;',
'',
'void main()',
'{',
'gl_Position = vec4(vertPosition, 0.0, 1.0);',
'}'
].join('\n');
也可以用新語法來寫方便多了
const vertexShaderText1 =
`
precision mediump float;
attribute vec2 vertPosition;
void main()
{
gl_Position = vec4(vertPosition, 0.0, 1.0);
}
`
- 建立 shader
var vertexShader = gl.createShader(gl.VERTEX_SHADER); var fragmentShader =gl.createShader(gl.FRAGMENT_SHADER);
這裡我們建立兩個型別 shader 分別屬 vertexShader 和 fragmentShader
- 為 shader 指定程式文字，將
gl.shaderSource(vertexShader,vertexShaderText); gl.shaderSource(fragmentShader,fragmentShaderText);
- 然後開始編譯 shader
gl.compileShader(vertexShader); gl.compileShader(fragmentShader);
我們需要判斷一下 shader 是否正常，這兩個可以寫在一個方法裡
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(vertexShader));
gl.deleteShader(vertexShader);
return;
}
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(fragmentShader));
gl.deleteShader(fragmentShader);
return;
}