Question

一句话来描述，WebGL API指的就是gl=canvas.getContext('webgl')返回对象gl的一系列绘制渲染方法，通过WebGL API可以把一个三维场景绘制渲染出来。比如上面代码中gl.createShader()、gl.shaderSource()、gl.drawArrays()等方法就是WebGl API。

WebGL API多数与GPU硬件相关，控制相关图形处理单元，比如说通过gl.createShader()、gl.shaderSource()等方法可以对着色器代码进行编译，然后在GPU的着色器单元上执行；比如说drawArrays不执行，GPU渲染管线的顶点、片元着色器是不会把顶点坐标转化为显示器上的像素显示出来。

如果你有 数字电路的知识，可编程芯片不仅仅只有GPU，针对不同的应用情形，都有特定的可编程芯片，图形处理用到的是可编程GPU，也就是说可以运行程序。处理声音是声卡，处理图像是显卡，自然而然它们 都会以CPU为核心，接受CPU的调度。以上描述在有些地方可能不太严谨，大家也不必记忆，主要目的是让大家有基本的认识，可以更好的编写程序。GPU相比CPU最大的特点是并行计算，不过WebGL API都 进行了封装，如果你想学习并行计算可以关注CUDA或OpenCL。GPU硬件(渲染管线)、显卡驱动、操作系统、浏览器、WebGL API是逐层抽象的。每一层都会为上一层提供一个接口，这里可以看出WebGL API是 首先通过浏览器的的解析，才能够经过一系列层驱动GPU工作，生成像素缓存，显示器会按照一定的频率扫描像素缓存，最终显示出来。

初始化着色器函数initShader()

关于着色器函数initShader()中封装的WebGL API代码，案例代码中都进行了注释，可以先简单阅读一下，具体的细节可以先不去学习，当成一个黑箱处理，你只需要知道通过initShader()函数可以完成着色器代码的编译，然后在GPU上执行。

初始化着色器函数initShader()，主要是把顶点着色器源代码vertexShaderSource， 片元着色器源代码fragShaderSource，进行编译处理，然后顶点着色器代码在GPU的顶点着色器单元执行，片元着色器代码在GPU的片元着色器单元执行。

//声明初始化着色器函数
function initShader(gl,vertexShaderSource,fragmentShaderSource){
    //创建顶点着色器对象
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    //创建片元着色器对象
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    //引入顶点、片元着色器源代码
    gl.shaderSource(vertexShader,vertexShaderSource);
    gl.shaderSource(fragmentShader,fragmentShaderSource);
    //编译顶点、片元着色器
    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);
    //创建程序对象program
    var program = gl.createProgram();
    //附着顶点着色器和片元着色器到program
    gl.attachShader(program,vertexShader);
    gl.attachShader(program,fragmentShader);
    //链接program
    gl.linkProgram(program);
    //使用program
    gl.useProgram(program);
    //返回程序program对象
    return program;
}

绘制方法gl.drawArrays()

gl.drawArrays()方法的作用就是通知GPU执行着色器代码，然后根据着色器代码在Canvas画布上进行渲染绘制。