我的娘噶， 我真的学的太慢了， webgl,不行得加快脚楽。
上节课就是随便介绍了一下webgl， 这节课的知识特别的多呢。 感觉得分为两次讲呢。
你就随着我的脚步慢慢走吧。
一 、首先，介绍一下，webgl里面的 坐标系。右手坐标系。不说了，直接上图
这就不用介绍了吧, 伸出你的右手比划一下，Z轴是穿出你的屏幕的，刺向你的哦， 不要眨眼， 不会伤害你的眼睛， 不过温馨提示，注意休息眼睛哦。
二 、 介绍两个shader, 与显卡GPU有关
webgl的程序需要两个着色器， 顶点着色器（vertex Shader） 和 片段着色器 （fragment Shader）。
1.vertex Shader: 顶点shader, 以后我们就这样称呼了。
描述顶点的特性 （如： 位置， 大小， 颜色），就是画一个点，在二维或三维空间中的坐标， 这个点的大小， 和点的颜色。
<script id = "shader-vs">
attribute vec3 v3Position; // attribute , 变量类型， 只在顶点shader里面使用个，只是定义顶点的位置。 这个以后会专门出一篇介绍变量的。
void main(void){
gl_Position = vec4(v3Position, 1.0); // 设置顶点的位置， vec3 3个浮点数表示的矢量
}
</script>
2.fragmentShader: 片段shader。
对片元进行处理， 片元可以理解为像素。 比如光照的效果， 明暗，影子等。这些通过设置片元来体现出来。 ·
<script id = "shader-fs">
void main(void){
//指定三角形的颜色
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
注意 ： 3维世界里面， 点划线，线画面，再构成我们形态各异的立体， 最小单元是点哦。 不过我们以后所建立的模型是由三角形筑成的。
看到了咩，都是三角形构成了一只兔子哦。
三、 创建一个可执行程序
programObject = webgl.createProgram();
然后关联两个shader.
四、 创建一个缓冲区
缓冲区对象是 webgl 系统中的一块存储区， 可以保存 所有的顶点数据。
1. 创建缓冲区
webgl.createBuffer();
2. 绑定缓冲区
webgl.bindBuffer(target, buffer);
target ：两个参数，
webgl. ARRAY_BUFFER 表示缓冲区对象中包含了顶点的数据。
webgl.ELEMENT_ARRAY_BUFFER 表示缓冲区包含了顶点的索引值。
buffer： 之前所创建的缓冲区， 在在这里与之进行绑定
3. 向缓冲区中写入数据
webgl.bufferData(target , data, usage)
target ： webgl.ARRAY_BUFFER 或 webgl.ELEMENT_ARRAY_BUFFER
data： 写入缓冲区对象的数据usage： webgl.STATIC_DRAW 向缓冲区中写入一次数据， 但需要绘制很多次
webgl.STREAM_DRAW 写入一次数据，绘制若干次
webgl.DYNAMIC_DRAW 向缓冲区中多次写入数据， 绘制多次
4.
triangleBuffer = webgl.createBuffer(); //1. 创建缓冲区对象
webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer); //2. 绑定缓冲区对象，
webgl.bufferData(webgl.ARRAY_BUFFER, dataPoint, webgl.STATIC_DRAW); //3. 将数据写入缓冲区
webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0); //4. 缓冲区和 attribute 变量绑定
webgl.enableVertexAttribArray(v3PositionIndex); // 5. 开启attribute 变量
五、 绘制图形
webgl.drawArrays(webgl.TRIANGLES, 0, 3);
webgl.drawArrays(mode, first, count);
1. mode ， 绘制的方式
2. first ， 从哪个顶点开始绘制 ， 整型数
3. count ， 绘制所需要的顶点数 ， 整数型