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>

————————————————
原文链接：https://blog.csdn.net/Janent168/article/details/118031769