Uniforms

随时间变化的红色：

1
2
3
4
5
6
7
8
9

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

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

• 降低颜色变化的速率，直到肉眼都看不出来。

  gl_FragColor = vec4(sin(u_time*0.001),0.0,0.0,1.0);

  sin中参数变小就可以减低速率。

• 加速变化，直到颜色静止不动。

  gl_FragColor = vec4(sin(u_time*10000.0),0.0,0.0,1.0);

  sin中参数变大就可以加速速率直到不发生变化。

• 玩一玩 RGB 三个通道，分别给三个颜色不同的变化速度，看看能不能做出有趣的效果。

  改变vec4的四个值可以随意组合

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

#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

gl_FragCoord存储了活动线程正在处理的像素或屏幕碎片的坐标。有了它我们就知道了屏幕上的哪一个线程正在运转。他不是一个uniform值，因为他在不断变化。

对于这样一张图来说，作者给出了四个问题：

• 你明白 (0.0,0.0) 坐标在画布上的哪里吗？

  B通道是0，所以（0,0,0,1）是纯黑，也就是左下角。

• 那 (1.0,0.0), (0.0,1.0), (0.5,0.5) 和 (1.0,1.0) 呢？ 首先左下角是(0,0)那么右上角就是(1.0,1.0)，紧接着我们查看四角，RGB中，(1,0,0)代表红色，也就是右下角，(0,1,0)代表绿色，也就是左上角：

  

• 你知道如何用未规范化（normalized）的 u_mouse 吗？你可以用它来移动颜色吗？

  规范化：vec2 mouseNorm = u_mouse / u_resolution;

  使用mouseNorm.xy就可以实现鼠标移动到坐标位置，全图展示出上图对应的颜色。

  • 为什么不写u_mouse.xy / u_resolution呢？

    因为u_mouse本身就是一个二维变量，xy直接包含在里面了。但是gl_FragCoord是当前像素的vec4变量，xy表示坐标，z表示深度，w分量通常是1（齐次坐标）。

• 你可以用 u_time 和 u_mouse 来改变颜色的图案吗？不妨琢磨一些有趣的途径。

  1 2 3 4 5 6 7 8 9 10 11 12 13

  void main() { vec2 st = gl_FragCoord.xy / u_resolution; vec2 mouseNorm = u_mouse / u_resolution; // 使用 u_time 和 u_mouse 产生动态波动效果 float r = sin(u_time + length(st - mouseNorm) * 10.0); float g = cos(u_time + length(st - mouseNorm) * 15.0); float b = sin(u_time * 0.5 + length(st - mouseNorm) * 20.0); vec3 color = vec3(r, g, b); gl_FragColor = vec4(color, 1.0); }