提示
教程例子都可以到下面网址进行运行，不需要另外安装软件环境：
官方提供在线编写shader工具：https://thebookofshaders.com/edit.php
glslsandbox网站：http://glslsandbox.com/
shadertoy网站：https://www.shadertoy.com/
平移
vec2 translate = vec2(cos(u_time),sin(u_time));
vec2 st2 = st+translate*0.05;
整体点位置同时偏移一定量
旋转
将二维向量绕 vec2(0.0) 点旋转。
mat2 rotate2d(float _angle){
return mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle));
}
根据以往我们画形状的方式，这并不是我们想要的。我们的十字是画在画布中心的，对应于点 vec2(0.5) 。所以，再旋转坐标空间之前，我们需要先把图形移到中心点，坐标 vec2(0.0) ，再旋转坐标空间，最后在移动回原点。
所以绕(m,n)点旋转
st -= vec2(m,n);
st = rotate2d( sin(u_time)*PI ) * st;
st += vec2(0.5);
+vec2(0.5) 是为了让图形回到平面中心
缩放
mat2 scale(vec2 _scale){
return mat2(_scale.x,0.0,
0.0,_scale.y);
}
所以以(m,n)点缩放
st -= vec2(m,n);
st = scale( vec2(sin(u_time)+1.0) ) * st;
st += vec2(0.5);
YUV 颜色
mat3 yuv2rgb = mat3(1.0, 0.0, 1.13983,
1.0, -0.39465, -0.58060,
1.0, 2.03211, 0.0);
mat3 rgb2yuv = mat3(0.2126, 0.7152, 0.0722,
-0.09991, -0.33609, 0.43600,
0.615, -0.5586, -0.05639);
void main(){
vec2 st = gl_FragCoord.xy/u_resolution;
vec3 color = vec3(0.0);
// UV values goes from -1 to 1
// So we need to remap st (0.0 to 1.0)
st -= 0.5; // becomes -0.5 to 0.5
st *= 2.0; // becomes -1.0 to 1.0
// we pass st as the y & z values of
// a three dimensional vector to be
// properly multiply by a 3x3 matrix
color = yuv2rgb * vec3(.5, st.x, st.y);
gl_FragColor = vec4(color,1.0);
}
- 定义了一个yuv坐标量，并转化为rgb色域
-
yuv色域是这个样子的 rgb2yuv * vec3(.5, st.x, st.y);