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);
    }
`

2. 創建 shader

var vertexShader = gl.createShader(gl.VERTEX_SHADER);
var fragmentShader =  gl.createShader(gl.FRAGMENT_SHADER);

這裏我們創建兩個類型 shader 分別屬 vertexShader 和 fragmentShader

3. 爲 shader 指定程序文本，將

gl.shaderSource(vertexShader,vertexShaderText);
gl.shaderSource(fragmentShader,fragmentShaderText);

4. 然後開始編譯 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;
  }