提示
教程例子都可以到下面網(wǎng)址進(jìn)行運(yùn)行昆著，不需要另外安裝軟件環(huán)境：
官方提供在線編寫shader工具：https://thebookofshaders.com/edit.php
glslsandbox網(wǎng)站：http://glslsandbox.com/
shadertoy網(wǎng)站：https://www.shadertoy.com/
平移
vec2 translate = vec2(cos(u_time),sin(u_time));
vec2 st2 = st+translate*0.05;
整體點(diǎn)位置同時(shí)偏移一定量
旋轉(zhuǎn)
將二維向量繞 vec2(0.0) 點(diǎn)旋轉(zhuǎn)跑筝。
mat2 rotate2d(float _angle){
return mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle));
}
根據(jù)以往我們畫形狀的方式已骇，這并不是我們想要的。我們的十字是畫在畫布中心的孤荣，對應(yīng)于點(diǎn) vec2(0.5) 隅居。所以，再旋轉(zhuǎn)坐標(biāo)空間之前瞎惫，我們需要先把圖形移到中心點(diǎn)溜腐，坐標(biāo) vec2(0.0) ，再旋轉(zhuǎn)坐標(biāo)空間瓜喇，最后在移動(dòng)回原點(diǎn)挺益。
所以繞(m,n)點(diǎn)旋轉(zhuǎ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)點(diǎ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);
}
- 定義了一個(gè)yuv坐標(biāo)量，并轉(zhuǎn)化為rgb色域
-
yuv色域是這個(gè)樣子的 rgb2yuv * vec3(.5, st.x, st.y);
