shader 脚本里面图片纹理需要旋转时,步骤如下:
1、把坐标中心移到屏幕中间,
2、把xy坐标校正成比例一致
3、图片旋转
4、把xy坐标返回成原比例
3、再把坐标平移到原位置
假如说没有xy比例校正容易出现图片旋转后拉伸情况,shader toy 的代码如下
vec2 rotate2D(vec2 _st, float _angle, float aspt){
_st -= 0.5;
_st.x = _st.x * aspt;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st.x = _st.x / aspt;
_st += 0.5;
return _st;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// set up our coordinate system
float aspectRatio = iResolution.x / iResolution.y;
vec2 uv = (fragCoord.xy / iResolution.xy) ;
uv = rotate2D(uv, sin(iTime * 0.1) * 2. * PI, aspectRatio);
vec3 color = texture(iChannel0, uv).xyz *
step(0., uv.x) * step(0., uv.y) * step(0., 1. - uv.x) * step(0., 1. - uv.y);
fragColor = vec4(color ,1.0);
}
效果如下图