Shader学习笔记（2）- 基本概念与基础效果(1)

void

“main”函数会在每帧被调用。整个系统会努力把Frame Per Second（FPS）保持在60.0。但是如果在Shader中有复杂的数学计算，那么就会拖慢FPS，导致卡顿或者称为掉帧。

 void mainImage( out vec4 fragColor, in vec2 fragCoord ) {      //什么都没有操作默认为黑色        }

单色

“fragColor”是shader的输出，用于决定屏幕的显示。

void mainImage( out vec4 fragColor, in vec2 fragCoord ){     fragColor = vec4(1.,1.,0.,1.); //rgba表示法，红+绿=黄  }

GLSL Vector

“fragColor”被定义为一个vec4变量，由四个float变量组成，前3个为rgb，最后一个为alpha，表示opacity（不透明度）。（4个变量的范围均为0~1，此处不为十六进制表示）。
有两种表示“fragColor”的方式：

a. vec4（float,float,float,float)b. vec4(vec3(...),float)    //使用一个颜色和alpha值组成

void mainImage( out vec4 fragColor, in vec2 fragCoord ){    vec3 color = vec3(0.,1.,1.);    //绿+蓝=青    float alpha = 1.;    fragColor = vec4(color,alpha);   //vec3颜色+alpha值}

RGBA颜色模组

“RGBA”是一种颜色模型，可以通过定义的变量名+“.”来调用。rgba与xyzw是等价的，只是使用rgba来调用可以让人清楚知道这个变量是颜色。
（也许有许多人和我一样不懂得怎么配出好看的颜色，这里推荐这个网站，上面都是色彩大神的配色。）

//自定义函数vec3 HexTo01Color(float redAmount,float greenAmount,float yellowAmount){    vec3 color = vec3(redAmount/255.,greenAmount/255.,yellowAmount/255.);    return color;}//主函数void mainImage( out vec4 fragColor, in vec2 fragCoord ){    vec3 color = vec3(0);    float redAmount = 236.; //r分量    float greenAmount = 8.; //g分量     float blueAmount = 45.; //b分量    color = HexTo01Color(redAmount,greenAmount,blueAmount);     //此处使用自己创建的可以把十六进制颜色转换为0~1值的函数    float alpha = 1.;    fragColor = vec4(color,alpha);   }

fragCoord

“fragCoord”全称为“Fragment Coordinate“，译为片元坐标（或者是像素坐标）。显示的屏幕都是由一个个像素所构成的，每一个像素都有自己的坐标值。固定左下角为（0，0），右上角为（maxWidth，maxHeight）（OpenGL是这样定义的，但是directX是以左上角为（0，0），右下角为最大值）。
”mianImage()“每次执行都会对一个坐标的片元进行绘制。我们就可以对输入的fragCoord来进行改变，从而达到我们想要绘制的图像。

void mainImage( out vec4 fragColor, in vec2 fragCoord ){    vec3 color = vec3(0);    float redAmount = 236.;    float greenAmount = 8.;    float blueAmount = 45.;    float widthStrip = 100.;    //坐标控制值    //当横坐标大于我们定义的像素值，就绘制我们给的颜色    if(fragCoord.x>widthStrip) color = HexTo01Color(redAmount,greenAmount,blueAmount);    //小于就绘制白色    else color = vec3(1.);    float alpha = 1.;    fragColor = vec4(color,alpha);   }