关联属性和缓冲区对象

顶点着色器程序中的每个属性都指向一个顶点缓冲区对象。创建顶点缓冲区对象后，程序员必须将它们与顶点着色器程序的属性相关联。每个属性仅指向一个顶点缓冲区对象，从中提取数据值，然后将这些属性传递给着色器程序。

要将顶点缓冲区对象与顶点着色器程序的属性相关联，您必须遵循以下步骤 -

  • 获取属性位置
  • 将属性指向顶点缓冲区对象
  • 启用该属性

获取属性位置

WebGL 提供了一个名为getAttribLocation()的方法，该方法返回属性位置。其语法如下 -

ulong getAttribLocation(Object program, string name)

该方法接受顶点着色器程序对象和顶点着色器程序的属性值。

以下代码片段展示了如何使用此方法。

var coordinatesVar = gl.getAttribLocation(shader_program, "coordinates");

这里，shader_program是着色器程序的对象，坐标是顶点着色器程序的属性。

将属性指向 VBO

为了将缓冲区对象分配给属性变量，WebGL 提供了一个名为vertexAttribPointer()的方法。这是该方法的语法 -

void vertexAttribPointer(location, int size, enum type, bool normalized, long stride, long offset)

该方法接受六个参数，下面将对其进行讨论。

  • Location - 它指定属性变量的存储位置。在此选项下，您必须传递getAttribLocation()方法返回的值。

  • Size - 它指定缓冲区对象中每个顶点的组件数量。

  • 类型- 它指定数据的类型。

  • 标准化- 这是一个布尔值。如果为 true，则非浮动数据标准化为 [0, 1]；否则，它被标准化为 [-1, 1]。

  • 步幅- 它指定不同顶点数据元素之间的字节数，或者默认步幅为零。

  • Offset - 它指定缓冲区对象中的偏移量（以字节为单位），以指示顶点数据从哪个字节存储。如果从头开始存储数据，则offset为0。

以下代码片段显示了如何在程序中使用vertexAttribPointer() -

gl.vertexAttribPointer(coordinatesVar, 3, gl.FLOAT, false, 0, 0);

启用属性

激活顶点着色器属性以访问顶点着色器中的缓冲区对象。对于此操作，WebGL 提供了enableVertexAttribArray()方法。此方法接受属性的位置作为参数。以下是如何在程序中使用此方法 -

gl.enableVertexAttribArray(coordinatesVar);