今天又重看了一遍《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