WebGL 存储限定符attribute、gl.getAttribLocation、gl.vertexAttrib3f及其同族函数和矢量版本的介绍

目录

attribute变量规范

 获取attribute变量的存储位置

gl.getAttribLocation（）函数的规范：

向attribute变量赋值 

gl.vertexAttrib3f（）的规范。 

gl.vertexAttrib3f（）的同族函数 

 示例代码

效果图

---

attribute变量规范

关键词attribute被称为存储限定符，它表示接下来的变量是一个attribute变量。attribute变量必须声明成全局变量，数据将从着色器外部传给该变量。变量的声明必须按照以下的格式：＜存储限定符＞ ＜类型＞ ＜变量名＞，如图所示。

 一旦声明a_Position之后，我们将其赋值给gl_Position：

gl_Position = a_Position;\n' 

 获取attribute变量的存储位置

在WebGL系统中建立了顶点着色器。然后，WebGL就会对着色器进行解析，辨识出着色器具有的attribute变量，每个变量都具有一个存储地址，以便通过存储地址向变量传输数据。比如，当你想要向顶点着色器的a_Position变量传输数据时，首先需要向WebGL系统请求该变量的存储地址。我们使用gl.getAttribLocation（）来获取attribute变量的地址。 

 

方法的第一个参数是一个程序对象gl.program，它包括了顶点着色器和片元着色器，注意，你必须在调用initShader（）之后再访问gl.program，因为是initShader（）函数创建了这个程序对象。第二个参数是想要获取存储地址的attribute变量的名称。 

方法的返回值是attribute变量的存储地址。这个地址被存储在JavaScript变量a_Position中，以备之后使用。

gl.getAttribLocation（）函数的规范如下：

向attribute变量赋值 

一旦将attribute变量的存储地址保存在JavaScript变量a_Position中，下面就需要使用该变量来向着色器传入值。我们使用gl.vertexAttrib3f（）函数来完成这一步。

下面是gl.vertexAttrib3f（）的规范。 

该函数的第1个参数是attribute变量的存储地址，即gl.getAttribLocation（）的返回值；第2、3、4个参数是三个浮点型数值，即点的x、y和z坐标值。函数被调用后，这三个值被一起传给顶点着色器中的a_Position变量。下图显示了获取attribute变量的存储地址并向其传值的过程。 

接着，在顶点着色器中，a_Position的值就被赋给了gl_Position，这样我们就成功地将点的x、y和z的坐标值从JavaScript传入了着色器，并赋值给了gl_Position，gl_Position的值还是（0.0，0.0，0.0，1.0）。

最后，使用gl.clear（）清空＜canvas＞，并使用gl.drawArrays（）绘制点。 

你可能已经注意到，第4行的a_Position变量是vec4类型的，但是gl.vertex-Attrib3f（）仅传了三个分量值（x、y和z）而不是4个。是不是漏掉了1个呢？实际上，如果你省略了第4个参数，这个方法就会默认地将第4个分量设置为了1.0，如下图所示。颜色值的第4个分量为1.0表示该颜色完全不透明，而齐次坐标的第4个分量为1.0使齐次坐标与三维坐标对应起来，所以1.0是一个“安全”的第4分量。 

gl.vertexAttrib3f（）的同族函数 

gl.vertexAttrib3f（）是一系列同族函数中的一个，该系列函数的任务就是从JavaScript向顶点着色器中的attribute变量传值。gl.vertexAttrib1f（）传输1个单精度值（v0），gl.vertexAttrib2f（）传输2个值（v0和v1），而gl.vertexAttrib4f（）传输4个值（v0、v1、v2和v3）。

你也可以使用这些方法的矢量版本，它们的名字以“v”（vector）结尾，并接受类型化数组作为参数，函数名中的数字表示数组中的元素个数 

其中，函数名中的4表示数组长度是4。

在上面的例子gl.vertexAttrib3f（）中，基础函数名是vertexAttrib，参数个数是3，参数类型是f（即float，浮点数类型）。这个函数是OpenGL中的glVertexAttrib3f（）的WebGL版本。另一种参数类型的字符表示是i，代表整型数。你可以使用gl.vertexAttrib［1234］f这样的符号来表示从gl.vertexAttrib1f（）到gl.vertexAttrib4f（）的所有函数。这里，［］表示可以使用其中的任何一个数字。

如果函数名后面跟着一个v，就表示函数也可以接收数组作为参数。在这种情况下，函数名中的数字表示数组中的元素个数。

 示例代码

// HelloPint2.js (c) 2012 matsuda 41
// Vertex shader program
var VSHADER_SOURCE = 
  'attribute vec4 a_Position;\n' + // attribute variable
  'attribute float a_PointSize;\n' + // attribute variable
  'void main() {\n' +
  '  gl_Position = a_Position;\n' +
  '  gl_PointSize = a_PointSize;\n' +
  '}\n'; 

// Fragment shader program
var FSHADER_SOURCE = 
  'void main() {\n' +
  '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
  '}\n';

function main() {
  // Retrieve <canvas> element
  var canvas = document.getElementById('webgl');

  // Get the rendering context for WebGL
  var gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  // Initialize shaders
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }

  // Get the storage location of a_Position 请求a_Position该attribute变量的存储位置 P4
  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  if (a_Position < 0) {
    console.log('Failed to get the storage location of a_Position');
    return;
  }

  var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
  if (a_PointSize < 0) {
    console.log('Failed to get the storage location of a_PointSize');
    return;
  }

  
  // Pass vertex position to attribute variable 将顶点属性传递给属性变量  P44
  gl.vertexAttrib3f(a_Position, 0.0, 0.3, 0.0); 
  gl.vertexAttrib1fv(a_PointSize, new Float32Array([100.0])); // vertexAttrib方法的矢量版本，加v，数字表示数组item的个数

  // Specify the color for clearing <canvas>
  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  // Clear <canvas>
  gl.clear(gl.COLOR_BUFFER_BIT);
    
  // Draw
  gl.drawArrays(gl.POINTS, 0, 1);
}

效果图