顶点着色器

01 Attributes

可以被JavaScript代码操作，也可以在 vertex shader 中被作为变量访问。Attributes 通常被用于存储颜色、纹理坐标以及其他需要在JavaScript代码和 vertex shader 之间互相传递的数据。

缓冲是发送到GPU的一些二进制数据序列，通常情况下缓冲数据包括位置，法向量，纹理坐标，顶点颜色值等。 你可以存储任何数据。
属性用来指明怎么从缓冲中获取所需数据并将它提供给顶点着色器。 例如你可能在缓冲中用三个32位的浮点型数据存储一个位置值。 对于一个确切的属性你需要告诉它从哪个缓冲中获取数据，获取什么类型的数据（三个32位的浮点数据）， 起始偏移值是多少，到下一个位置的字节数是多少。
缓冲不是随意读取的。事实上顶点着色器运行的次数是一个指定的确切数字， 每一次运行属性会从指定的缓冲中按照指定规则依次获取下一个值。
_

  1. //init colors
  2.     var vertexColors = [
  3.         vec4( 0.0, 0.0, 0.0, 1.0 ),  // black
  4.         vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
  5.         vec4( 1.0, 1.0, 0.0, 1.0 ),  // yellow
  6.         vec4( 0.0, 1.0, 0.0, 1.0 ),  // green
  7.         vec4( 0.0, 0.0, 0.0, 1.0 ),  // black
  8.         vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
  9.         vec4( 1.0, 1.0, 0.0, 1.0 ),  // yellow
  10.         vec4( 0.0, 1.0, 0.0, 1.0 ),  // green
  11.     ];
  13.  var cBuffer = gl.createBuffer();
  16. //continued
  17. //create buffer to store colors and reference it to "vColor" which is in GLSL
  18.     gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
  19.     gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );
  21.     var vColor = gl.getAttribLocation( program, "vColor" );
  22.     gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
  23.     gl.enableVertexAttribArray( vColor );
  25. //glsl
  26. attribute  vec4 vColor;
  28. void main()
  29. {
  31. fColor = vColor;
  32. }

例如在threejs生成的，我们可以在geometry中的attribute中获取相应的自定义生成的属性比如这个
比如对应生成的属性（attribute）的属性
BufferAttribute( array : TypedArray, itemSize : Integer, normalized : Boolean )
然后我们就可以在片元着色器（VertexShader）中拿到position这个属性；attribute vec3 position

  1. const geometry = new THREE.BufferGeometry();
  2. // 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
  3. // 因为在两个三角面片里，这两个顶点都需要被用到。
  4. const vertices = new Float32Array( [
  5.     -1.0, -1.0,  1.0,
  6.      1.0, -1.0,  1.0,
  7.      1.0,  1.0,  1.0,
  9.      1.0,  1.0,  1.0,
  10.     -1.0,  1.0,  1.0,
  11.     -1.0, -1.0,  1.0
  12. ] );
  14. // Float32Array 类型数组代表的是平台字节顺序为32位的浮点数型数组(对应于 C 浮点数据类型) 。 如果需要控制字节顺序， 使用 DataView 替代。其内容初始化为0。一旦建立起来，你可以使用这个对象的方法对其元素进行操作，或者使用标准数组索引语法 (使用方括号)。
  16. // itemSize = 3 因为每个顶点都是一个三元组。
  17. geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
  18. const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
  19. const mesh = new THREE.Mesh( geometry, material );

02 Varyings

可变量是一种顶点着色器给片断着色器传值的方式，依照渲染的图元是点， 线还是三角形，顶点着色器中设置的可变量会在片断着色器运行中获取不同的插值。

03 Uniforms

全局变量在着色程序运行前赋值，在运行过程中全局有效。

04 Textures

纹理是一个数据序列，可以在着色程序运行中随意读取其中的数据。 大多数情况存放的是图像数据，但是纹理仅仅是数据序列， 你也可以随意存放除了颜色数据以外的其它数据。