shader学习-uniforms

uniforms可以想象成链接GPU和CPU的许多小桥梁。虽然这些uniforms的命名方法千奇百怪，但是在这一系列的例子中，一直有用到u_time（时间）、u_resolution（画布尺寸）和u_mouse（鼠标位置）。按业界传统应在uniform值的名字前加u_。

uniform vec3 iResolution;   // 视口分辨率（以像素计）
uniform vec4 iMouse;        // 鼠标坐标 xy： 当前位置, zw： 点击位置
uniform float iTime;        // shader 运行时间（以秒计）

在下面代码中，使用u_time加上一个sin函数，来展示红色的动态变化。

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

void main() {
	gl_FragColor = vec4(abs(sin(u_time)),0.0,0.0,1.0);
}

GLSL支持我们使用角度、三角函数和指数函数如下：sin(), cos(), tan(), asin(), acos(), atan(), pow(), exp(), log(), sqrt(), abs(), sign(), floor(), ceil(), fract(), mod(), min(), max() 和 clamp()。

gl_FragCoord

就像GLSL有个默认输出值vec4 gl_FragColor一样，它也有个默认输入值vec4 gl_FragCoord。gl_FragCoord存储了活动线程正在处理的像素或屏幕碎片的坐标。有了它我们就知道屏幕上的哪一个线程正在运转。每个像素的坐标都不同，所以我们把它叫做varying（变化值）

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
	vec2 st = gl_FragCoord.xy/u_resolution;
	gl_FragColor = vec4(st.x,st.y,0.0,1.0);
}

上述代码中我们用gl_FragCoord.xy除以u_resolution，坐标进行规范化。这样做是为了使所有的值落在0.0到1.0之间，这样就可以轻松把X和Y的值映射到红色或绿色通道。实现效果如下

![截屏2023-05-10 14.57.41](/Users/a666/Desktop/Lab/Web3D/shader学习文档/images/截屏2023-05-10 14.57.41.png)