定义所需的几何体

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 ]

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

注意 −

• drawArrays() − 当使用这种方法，我们通过原语使用JavaScript数组的顶点。

• drawElements() − 当使用这种方法，我们通过这两个顶点和原语使用JavaScript数组的索引。

缓冲区对象

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

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

  限定所需的几何形状和它们存储在JavaScript数组，需要将这些阵列传递给对象缓冲器，数据将被传递到着色器程序。下面的步骤是在缓冲器要遵循数据存储。
• 创建一个空的缓冲区。
• 绑定相应的数组对象为空缓冲区。
• 传递数据(顶点/索引)使用类型数组的一个缓冲区。
• 取消绑定缓存(可选)。

注−

• 通常，用于存储顶点数据，我们用Float32Array; 要存储索引数据，我们使用Uint16Array。
• 可以创建类型数组就像使用new关键字JavaScript数组。

创建缓冲区

var vertex_buffer = gl.createBuffer();

注 − gl 是参考变量的当前的 WebGL 的上下文。

绑定缓冲

语法

bindBuffer()方法的语法如下 −

void bindBuffer (enum target, Object buffer)

target − 第一变量是一个枚举值，表示我们要绑定到空缓冲器的缓冲的类型。有两个预定义枚举值作为该参数选项。他们是-

• ARRAY_BUFFER  表示顶点的数据。

• ELEMENT_ARRAY_BUFFER 表示索引数据。

Object buffer − 第二个是参考变量，在上一步中创建的缓冲区对象。参考变量可以是一个索引缓存对象或顶点缓冲对象。

示例

//vertex buffer
var vertex_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

//Index buffer
var Index_Buffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);

数据传递到缓冲区

语法

void bufferData (enum target, Object data, enum usage)

target − 第一个参数是一个枚举值，表示我们使用了数组中缓冲的类型。它们可以是ARRAY_BUFFER或ELEMENT_ARRAY_BUFFER。

Object data − 第二个参数是包含数据写入到缓冲对象的对象的值。在这里，我们使用类型数组来传递数据。

Usage − 该方法的第三个参数是一个枚举变量，来指定如何使用缓冲区对象的数据(存储的数据)来绘制形状。有三种选择此参数如下表所示。

• gl.STATIC_DRAW − 数据将指定一次，多次使用。

• gl.STREAM_DRAW − 数据将指定一次，使用几次。

• gl.DYNAMIC_DRAW − 数据将被重复指定和多次使用。

示例

//vertex buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

//Index buffer
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

取消绑定缓冲区

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);