提示

教程例子都可以到下面网址进行运行，不需要另外安装软件环境：
官方提供在线编写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);