webGL 工作原理

WebGL在GPU上的工作基本上分为两部分，第一部分是将顶点（或数据流）转换到裁剪空间坐标，第二部分是基于第一部分的结果绘制像素点

var primitiveType = gl.TRIANGLES;var offset = 0;var count = 9;gl.drawArraysprimitiveType, offset, count;

顶点着色器运行

左侧是你提供的数据，顶点着色器是你写进GLSL中的一个方法，每个顶点调用一次，在这个方法中做一些数学运算后设置一个特殊的gl_position变量，这个变量就是该顶点转换到裁剪空间中坐标值，GPU接收该值并将其保存起来。
假设你正在画三角形，顶点着色器每完成三次顶点处理，WebGL就会用这三个顶点画一个三角形。它计算出这三个顶点对应的像素后，就会光栅化这个三角形，“光栅化”其实就是“用像素画出来” 的花哨叫法。对于每一个像素，它会调用你的片段着色器询问你使用什么颜色。你通过给片段着色器的一个特殊变量gl_FragColor设置一个颜色值，实现自定义像素颜色。

关于buffer和attribute的代码是干什么的

缓冲操作是在GPU上获取顶点和其他顶点数据的一种方式。 gl.createBuffer创建一个缓冲；gl.bindBuffer是设置缓冲为当前使用缓冲； gl.bufferData将数据拷贝到缓冲，这个操作一般在初始化完成。

var positionLocation = gl.getAttribLocationprogram, "a_position";var colorLocation = gl.getAttribLocationprogram, "a_color";gl.enableVertexAttribArraylocation;gl.bindBuffergl.ARRAY_BUFFER, someBuffer;gl.vertexAttribPointerlocation,numComponents, typeOfData, normalizeFlag, strideToNextPieceOfData, offsetIntoBuffer;

vertexAttribPointer 中的 normalizeFlag 参数是什么意思？

标准化标记（normalizeFlag）适用于所有非浮点型数据。如果传递false就解读原数据类型。 BYTE 类型的范围是从 -128 到 127，UNSIGNED_BYTE 类型的范围是从 0 到 255， SHORT 类型的范围是从 -32768 到 32767，等等...

如果标准化标记设为true，BYTE 数据的值-128 to 127将会转换到 -1.0 到 +1.0 之间， UNSIGNED_BYTE 0 to 255 变为 0.0 到 +1.0 之间，SHORT 也是转换到 -1.0 到 +1.0 之间，但比 BYTE 精确度高