日积月累Shader - 03 认识uniform

提示

教程例子都可以到下面网址进行运行，不需要另外安装软件环境：
官方提供在线编写shader工具：https://thebookofshaders.com/edit.php
glslsandbox网站：http://glslsandbox.com/
shadertoy网站：https://www.shadertoy.com/

本文提到的关键字

关键字	描述
uniform	统一变量，来自cpu的变量值
resolution	分辨率
mouse	鼠标点
time	当前时间
sin	正弦函数，范围区间-1～1
abs	绝对值

uniform

现在我们知道了 GPU 如何处理并行线程，每个线程负责给完整图像的一部分配置颜色。尽管每个线程和其他线程之间不能有数据交换，但我们能从 CPU 给每个线程输入数据。因为显卡的架构，所有线程的输入值必须统一（uniform），而且必须设为只读。也就是说，每条线程接收相同的数据，并且是不可改变的数据。
这些输入值叫做 uniform （统一值），它们的数据类型通常为：float, vec2, vec3, vec4, mat2, mat3, mat4, sampler2D 和 samplerCube。uniform 值需要数值类型前后一致。且在 shader 的开头，在设定精度之后，就对其进行定义。

uniform下每个像素所获得的变量值相同，这些值在流程中不可以被更改

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 resolution; // 画布尺寸（宽，高）
uniform vec2 mouse;      // 鼠标位置（在屏幕上哪个像素）
uniform float time;     // 时间（加载后的秒数）

你可以把 uniforms 想象成连通 GPU 和 CPU 的许多小的桥梁。虽然这些 uniforms 的名字千奇百怪，但是在这一系列的例子中我一直有用到：u_time （时间）, u_resolution （画布尺寸）和 u_mouse （鼠标位置）。按业界传统应在 uniform 值的名字前加 u_ ，这样一看即知是 uniform。

试试看: 随着时间变化的色块
http://glslsandbox.com/e#55142.1

#ifdef GL_ES
precision mediump float;
#endif

uniform float time;
void main() {
    gl_FragColor = vec4(abs(sin(time)),1.0,abs(sin(time)),1.0);
}

gl_FragCoord

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

试试看：http://glslsandbox.com/e#55144.0

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 resolution;
uniform vec2 mouse;
uniform float time;

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

鼠标的位置，颜色跟着变幻

总结：

• 你明白 (0.0,0.0) 坐标在画布上的哪里吗？
• 那 (1.0,0.0), (0.0,1.0), (0.5,0.5) 和 (1.0,1.0) 呢？
• 你知道如何用未规范化（normalized）的 mouse 吗？你可以用它来移动颜色吗？
• 你可以用 time 和 mouse 来改变颜色的图案吗？不妨琢磨一些有趣的途径。

http://glslsandbox.com 提供了在线编程GLSL语言的功能，和文章https://thebookofshaders.com 的输入变量有出入，文章中u_mouse, u_time, u_resolution, 在 glslsandbox.com 下使用mouse, time, resolution。
同时，glslsandbox.com 的 mouse 本身就是0～1区间的值，不需要thebookofshaders.com这里还要和u_resolution进行操作处理