attribute 和 uniform

「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」

webgl就是js + glsl.用js和shader交互是最基本的。js只能改变在着色器中已声明的顶点数据和片元数据，或者说，着色器通过这种方式来input数据，然后给我们输出一副图。

简单的说，attribute是顶点私有数据，只能写在顶点着色器中，uniform是顶点公共数据，不限制着色器,都是修饰符。格式就是 attribute/uniform type name

attribute

attribute是顶点数据,意思就是说，每个顶点都有自己的独立的一份数据。比如说

attribute float a_Color 我们声明一个浮点类型的变量，假如现在有两个顶点，我们就可以给这两个顶点不同的color.

在js中使用const a_Color = gl.getAttribLocation(program, 'a_Color') ; 来获取该变量在着色器中的索引，然后使用 gl.vertexAttrib4fv 这个函数族 或者 使用缓冲区的 gl.vertexAttribPointer方法写入数据。

uniform

uniform是片元数据，既可以写在片元着色器中，也能写在顶点着色器中，不过注意不要同时在两个着色器里声明同一个uniform变量，因为这会触发重复声明错误。,全部的片元共用的数据，大家都是一样。 就像我们之前声明了紫色，结果绘制出来全部是紫色。

在js中使用const a_Color = gl.getUniformLocation(program, 'u_Color') ; 来获取该变量在着色器中的索引，然后使用 gl.vertexAttrib4fv 这个函数族 或者 使用缓冲区的 gl.vertexAttribPointer方法写入数据。

所以问题来了,顶点数据只能在顶点使用，片元数据只能在片元使用，片元数据又是公用的， 上色掌控在片元这边，

如何给不同的顶点上不同的色？

varying

片元着色器和顶点着色器之间有一种变量是都能访问到的，那就是， 通过varying 修饰的变量。

一般都是在顶点做色器中给这个varying变量赋值，在片元着色器使用。

attribute vec4 a_Position ; 
attribute vec3  a_Color ; 
varying vec3 v_Color ;

void main(){
    gl_Position = a_Position ;
    gl_PointSize = 422.0;
    v_Color = a_Color ;
}

顺便一提，这个precision mediump float 是用来指定浮点数精度的 mediump 代表中精度。

precision  mediump float ;
varying vec3 v_Color ;
 void main(){
     gl_FragColor =  vec4(v_Color,1);
}

这样我们来给之前的三角形每个顶点不同的颜色。