著色器初始化流程圖

王工發表於2016-05-18
流程圖

今天又重看了一遍《WebGL程式設計指南》，第一次學的時候連物件是什麼都搞不清。居然寫了一個能動的小人

enter image description here
感受一下

在對JS有了一點深入瞭解後，現在終於能看懂初始化流程了，於是準備拾起圖形學，第一步就是整理一下著色器初始化流程圖：

enter image description here
可以通過 ProcessOn 開啟

var cv = document.getElementById("cv"),
        gl = cv.getContext('webgl');

        gl.clearColor(0,0.1,1,0.5);
        gl.clear(gl.COLOR_BUFFER_BIT);

var VSHADER_SOURCE = 'void main(){gl_Position = vec4(0.0,0.0,0.0,1.0);gl_PointSize = 10.0;}';
var FSHADER_SOURCE = 'void main(){gl_FragColor = vec4(1.0,0.0,0.0,1.0);}';

     function initShader(gl){

         // 1.建立著色器物件
         var vShaderObj = gl.createShader(gl.VERTEX_SHADER),
             fShaderObj = gl.createShader(gl.FRAGMENT_SHADER);

         // 2.向著色器物件傳入 GLSL 著色器
        gl.shaderSource(vShaderObj,VSHADER_SOURCE);
        gl.shaderSource(fShaderObj,FSHADER_SOURCE);

         // 3.編譯著色器物件
           gl.compileShader(vShaderObj);
         gl.compileShader(fShaderObj);

             // 著色器物件除錯資訊
             // 獲取著色器物件引數資訊
//             console.dir(gl.getShaderParameter(vShaderObj,gl.COMPILE_STATUS));
             // 檢視編譯日誌
//             console.dir(gl.getShaderInfoLog(vShaderObj));

         // 4.建立程式物件
         var programObj = gl.createProgram();

             // 刪除程式物件
//            gl.deleteProgram(programObj);

        // 5.著色器對角分配給程式物件
        gl.attachShader(programObj,vShaderObj);
        gl.attachShader(programObj,fShaderObj);

             // 刪除分配物件
//            gl.detachShader(programObj,vShaderObj);

        // 6. 連結程式物件中的兩種著色器
        gl.linkProgram(programObj);

            // 程式物件除錯資訊
             // 獲取程式物件引數資訊
//            console.dir(gl.getProgramParameter(programObj,gl.LINK_STATUS));
            // 檢視錯誤日誌
//             console.dir(gl.getProgramInfoLog(programObj));

        // 7. 可以使用程式物件了
        gl.useProgram(programObj);


//        gl.program = 'Why this is programObj';
//         console.log(gl);
     };

     initShader(gl);

    gl.drawArrays(gl.POINTS,0,1);

這裡只不過畫出了一個紅色的點，不過終於知道了 WebGL 的初始化了，還是挺高興的。

本來對 WebCL很感興趣，覺得可以在前端進行平行計算，是一件多厲害的事情，可是感覺關於WebCL的一些文章都是幾年前的了，這幾年也沒什麼更新，到目前為止 Chrome 也沒有正式支援 WebCL，到底是為啥呢？沒有需求？現在努力鑽研，等到浪潮來臨的時候也許可以一波帶走 ：D

相關文章