GLSL三种基本类型（着色器语言三种变量）

 

着色器语言和C语言一样，通过一个表示特定数据类型的关键词声明一个变量，比如int num;通过int关键字声明一个整数型变量num，不过着色器语言还提供了三个关键字attribute、uniform和varying用来声明特定用途的变量。

attribute和uniform关键字的目的主要是为了javascript语言可以通过相关的WebGL API把一些数据传递给着色器，如果一个着色器中一个变量，着色器代码中变量不通过attribute或uniform声明标识，该变量是不能从javascript代码中获得相应的数据。

 

关键字(变量类型)	数据传递	声明变量
attribute	javascript——>顶点着色器	声明顶点数据变量
uniform	javascript——>顶点、片元着色器	声明非顶点数据变量
varying	顶点着色器——>片元着色器	声明需要插值计算的顶点变量

attribute：

1）只在顶点着色器中使用。

2）一般用于表示顶点坐标、纹理坐标等。

3）使用bindAttributeLocation来设置变量在着色器程序中参数列表的索引。

4）使用glVertexAttribPointer来设置attribute的数值。

// attribute声明顶点位置变量
attribute vec4 position;
// 与顶点相关的浮点数
attribute float scale;
void main() {
  // 每个顶点的x坐标乘以该顶点对应的一个系数scale
  gl_Position = vec4(position.x*scale,position.y,position.z,1.0);
}
​

uniform：

1）uniform是由外部程序传递给顶点着色器和片元着色器的变量。

2）当顶点着色器和片元着色器声明了一个完全一样的unifrom变量，则两者都可以访问到数据，但不能修改，相当于只读全局变量。

3）一般情况下用于表示材质数据。

片元着色器中通过uniform关键字声明了一个颜色变量color，为了给该变量传递数据在ShaderMaterial对象的uniforms属性中定义了一个名为color的属性，按照Three.js系统uniform变量数据自动传递的机制，如果你在着色器代码中自定义声明了多个uniform变量，只要名字和ShaderMaterial对象中uniform数据的名字保持一直就可以正确完成数据传递。

<!-- 片元着色器 -->
<script id="fragmentShader" type="x-shader/x-fragment">
  // color变量数据来自ShaderMaterial的uniforms属性的color属性
  uniform vec3 color;
  void main() {
 // gl_FragColor = vec4(1.0,0.0,0.0,1.0);
 gl_FragColor = vec4(color,1.0);
  }
</script>

ShaderMaterial的uniforms属性代码

var material = new THREE.ShaderMaterial({
  //定义uniforms属性，uniforms的属性和着色器中的uniform变量相对应
  uniforms:{
// 颜色属性clor对应片元着色器代码中uniform声明的color变量
color:{value:new THREE.Color(0xff0000)}
  },
  // 顶点着色器
  vertexShader: document.getElementById('vertexShader').textContent,
  // 片元着色器
  fragmentShader: document.getElementById('fragmentShader').textContent,
})

varing：

1）用于顶点着色器和片元着色器之间传递的变量。

2）由顶点着色器赋值，片元着色器只读。

3）二者的声明必须完全一直，外部程序不能使用该变量。

<!-- 顶点着色器源码 -->
<script id="vertexShader" type="x-shader/x-vertex">
  //attribute声明vec4类型变量apos
  attribute vec4 apos;
  // attribute声明顶点颜色变量
  attribute vec4 a_color;
  //varying声明顶点颜色插值后变量
  varying vec4 v_color;
  void main() {
    // 顶点坐标apos赋值给内置变量gl_Position
    gl_Position = apos;
    //顶点颜色插值计算
    v_color = a_color;
  }
​
</script>
<!-- 片元着色器源码 -->
<script id="fragmentShader" type="x-shader/x-fragment">
  // 所有float类型数据的精度是lowp
  precision lowp float;
  // 接收顶点着色器中v_color数据
  varying vec4 v_color;
  void main() {
    // 插值后颜色数据赋值给对应的片元
    gl_FragColor = v_color;
  }
​
</script>