webgl入门必备

怎样描绘出一个简单的webgl图形

由于最近在搞一个其他的东西，所以我的webgl学习系列博客都没有更新了，所以在这里先做一个总结。

新知识

我们对webgl有一个初步的认识，就是需要先获取到canvas的上下文，那么我们今天就需要了解一下将图像发布到画布上。

1. 思路 将数据由main()函数传到顶点着色器的attribute变量上去！
2. 先获取到attribute变量的地址

3. Gl.program. a_Position = gl.getAttribLocation(Program, ‘a_program’);
   

4. 传输数据

5. Gl.vertexAttribute3f(a_Postition, (数据));// 顶点的位置数据属性
   

6. 顶点着色器：顶点着色器是用来描述顶点特性（如位置、颜色等）的程序。
7. 片元着色器：逐片元处理过程的程序（如颜色的数据）。
8. 变量：attribute uniform两种变量
   1、attribute： 传输与顶点相关的数据。
   2、Uniform：对于所有定点都相同的数据。
   我们习惯将attribute的变量声明为a_xxxxx,将uniform类型的变量声明为u_xxxx

缓冲区对象：然后我们说下缓冲区对象。
因为在实际的实现当中，我们的顶点、颜色、光照等有很大的一片数据，一般我们用数组存放，但是对数组进行操作的时候比较麻烦所以我们用缓冲区对象去进行处理。
1、 创建一个顶点数组。

	var vertices = new Float32Array([]);

2、 创建缓冲区对象。

	var vertexBuffer = gl.createBuffer();

3、 绑定缓冲区。

	gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);

4、 向对象中写入数据。
5、 将缓冲区对象分配给attribute变量。

	gl.vertexAttributePointer(a_Position, 2, gl.FLOAT, false, 0, 0);

6、 连接a_Position变量与分配给它的缓冲区。（也称为开启attribute变量）

Gl.enableVertexAttributeArray(a_Position);