(原) 快速学习一下Shader:《The Book of Shaders》

原创文章,请后转载,并注明出处。

当前阅读位置 https://thebookofshaders.com/05/?lan=ch

我使用了 glslViewer 来查看代码的效果。而 glslCanvas 这个Web版的测试没有成功。

这里也有本书的示例代码下载

GLSL 代表 openGL Shading Language,openGL 着色语言

来个HelloWorld

#ifdef GL_ES              // 检查 GL_ES 是否被定义,这个通常用在移动端或浏览器的编译中
precision mediump float;  // 设定所有的浮点值都是中等精度 precision lowp float; precision highp float;
#endif

uniform float u_time;

void main() {
	gl_FragColor = vec4(1.0,0.0,1.0,1.0);    // gl_FragColor用于呈现的颜色
}

uniform (统一值)

例如:

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

一个动态变化颜色的示例

#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);
}

gl_FragCoord存储了活动线程正在处理的像素或屏幕碎片的坐标(象godot的UV)

step() 第一个参数是极限或阈值,第二个是我们想要检测或通过的值。对任何小于阈值的值,返回 0.0,大于阈值,则返回 1.0。

smoothstep(a, b, x) 以用来生成0到1的平滑过渡值,它也叫平滑阶梯函数

x < a < b 或 x > a > b 返回0

x < b < a 或 x > b > a 返回1

根据x在域 [a, b] (或者[b, a])中的位置, 返回某个在 [0, 1] 内的值

mix(x, y, a): x, y的线性混叠, x(1-a) + y*a