WebGL几何体

所有原语(或对象模型)应该有明确定义的几何细节。这些细节可以包括顶点，指数，颜色，纹理等。在WebGL中几何详细信息存储在JavaScript数组。
图形对象由其中在GPU上运行的着色器程序来创建。几何信息传递到使用缓冲区对象着色器程序。

定义所需的几何体

使用顶点所绘的2D或3D模型被称为网格。在网格的每个面被称为多边形和多边形是由3个或更多的顶点组成。
要绘制模型在WebGL中渲染，必须定义使用 JavaScript 数组的顶点和索引。举例来说，如果我们想创建一个三角形的位于坐标{(5,5)，(5,-5)，(-5，-5)}如图所示，图中，那么可以创建一个数组的顶点

var vertices = [
   0.5,0.5,  //Vertex 1
   0.5,-0.5, //Vertex 2
  -0.5,-0.5, //Vertex 3
];

同样，可以创建一个数组的索引。指数为上述三角形索引将是[0，1，2]，可以定义为

var indices = [ 0,1,2 ]

为了更好地理解索引，考虑更多复杂的模型，如正方形。我们可以代表一个正方形为一组的两个三角形。如果(0,3,1)和(3,1,2)是用两个三角形，我们打算绘制一个正方形，那么索引将被定义为

var indices = [0,3,1,3,1,2];

注意

	对于绘图图元，WebGL 提供了以下两种方法 -
	drawArrays() − 当使用这种方法，我们通过原语使用JavaScript数组的顶点。	
	drawElements() − 当使用这种方法，我们通过这两个顶点和原语使用JavaScript数组的索引。

缓冲区对象

缓冲对象是由WebGL的提供了一个机制，用于指示分配到系统中的存储器区域。在这些缓冲区对象，可以存储要绘制模型的数据，对应的顶点，索引，颜色等。
使用这些缓冲区对象，可以通过它的属性变量中的一个传递多个数据的着色器程序(顶点着色器)。由于这些缓冲对象驻留在GPU存储器，它们可以被直接呈现，这反过来又提高了性能。
为了处理几何形状，有两种类型的缓冲区的对象。他们是-

	顶点缓冲区对象 (VBO) − 它保持所述图形模型，要被渲染的每个顶点的数据。我们使用顶点缓冲对象中的WebGL存储和处理关于顶点诸如顶点坐标，法线，色彩，纹理坐标数据。

	索引缓冲区对象(IBO) − 它保持所述图形模型的索引(索引数据)，这是要被渲染的。

	限定所需的几何形状和它们存储在JavaScript数组，需要将这些阵列传递给对象缓冲器，数据将被传递到着色器程序。下面的步骤是在缓冲器要遵循数据存储。
	
	创建一个空的缓冲区。

	绑定相应的数组对象为空缓冲区。

	传递数据(顶点/索引)使用类型数组的一个缓冲区。

	取消绑定缓存(可选)。

WebGL提供了一种特殊类型数组称为类型数组来传输数据元素，如索引顶点和纹理。这些类型的数组存储大量数据并处理它们在本地二进制格式，这将产生更好的性能。使用WebGL类型数组是Int8Array，Uint8Array，Int16Array，Uint16Array，Int32Array，UInt32Array，Float32Array和Float64Array。

	通常，用于存储顶点数据，我们用Float32Array; 要存储索引数据，我们使用Uint16Array。

	可以创建类型数组就像使用new关键字JavaScript数组。