[webGL学习记录]

1. webGL着色器内置变量

　　参考文章  这个作者的系列文章有时间都可以看一下的 基础向 通俗易懂

　　结合同作者这篇文章可以更好地读懂这几个内置变量的意义和使用

　　普通变量,着色器语言和js等语言一样要先声明再使用, 内置变量就是不用声明可以直接赋值, 主要是为了实现特定的功能

　　gl_PointSize内置变量 当webGL执行绘制函数gl.drawArrays()绘制模式是点模式gl.POINS的时候, 顶点着色器语言main函数中才会用到内置变量gl_PointSize, 使用内置变量gl_PointSize主要是设置顶点渲染出来的方形点像素大小

void main(){
    //给内置变量gl_PointSize赋值像素大小,注意是浮点数
    gl_PointSize = 20.0;  
}


//绘制函数   绘制模式:点模式gl_POINTS
gl.drawArrays(gl.Points,0,点数量);

 

　　gl_Position内置变量 主要和顶点相关 他表示最终传入片元着色器片元化要使用的顶点位置坐标.

　　如果只有一个顶点,直接在顶点着色器中给内置变量gl_Position赋值就可以, gl_Position的值是四维向量vec4(x, y, z, 1.0), 前三个参数表示顶点的xyz坐标值, 第四个参数是浮点数1.0

void main(){
    //顶点位置,位于坐标原点
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
}

　　逐顶点:在着色器中给一个内置变量赋值, 如果有多个顶点, 可以理解为每个顶点都要执行一遍顶点着色器主函数main中的程序

　　gl_FragColor内置变量 主要用来设置片元像素的颜色, 值是四维向量vec4(r,g,b,a)  --------- 逐片元:顶点经过片元着色器片元化后 得到一个个片元, 或者说是像素点, 然后通过内置变量gl_FragColor给每一个片元设置颜色值, 所有片元可以使用同一个颜色值, 也可能不是同一个颜色值,可以通过特定算法计算或者纹理像素采样

//1. 根据位置设置渐变色
void main(){
     //片元沿着x方向渐变
    gl_FragColor = vec4(gl_FragCoord.x / 500.0  * 1.0, 1.0, 0.0, 1.0);  
 }

//2. 纹理采样

//接收插值后的纹理坐标
varying vec2 v_TextCoord;
//纹理图片像素数据
uniform sample2D u_Sampler;
void main(){
    //采集纹素, 逐片元赋值像素值
    gl_FragColor = texture2D(u_Sampler, v_TextCoord);  
}