WebGL - 关联属性和缓冲区对象

• 

  简述

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

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

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

  获取属性位置

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

  
  ulong getAttribLocation(Object program, string name)
  

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

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

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

  解释，shader_program是着色器程序的对象，coordinates是顶点着色器程序的属性。
• 

  将属性指向一个 VBO

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

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

  此方法接受六个参数，它们将在下面讨论。

  • Location - 它指定属性变量的存储位置。在此选项下，您必须传递getAttribLocation()方法返回的值。
  • Size - 它指定缓冲区对象中每个顶点的组件数。
  • Type - 它指定数据的类型。
  • Normalized - 这是一个布尔值。如果为 true，则非浮动数据被规范化为 [0, 1]；否则，它被归一化为 [-1, 1]。
  • Stride - 它指定不同顶点数据元素之间的字节数，或者默认步幅为零。
  • Offset - 它指定缓冲区对象中的偏移量（以字节为单位）以指示存储顶点数据的字节。如果数据是从头开始存储的，offset为0。

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

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

• 

  启用属性

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

  
  gl.enableVertexAttribArray(coordinatesVar);