Shader之旅6:二维画面的UV旋转

书写本文的初衷是为了自我反省记录。如有表达不当,请批评指正

首先放上在shadertoy上的效果,右图是未旋转的时候的样子,左图是旋转45°之后,第三个图是因为纵横比不一样,导致了错切

void mainImage(out vec4 fragcolor,in vec2 fragCoord){
     vec2 uv = fragCoord.xy / iResolution.xy;
    
    //float rot = radians(45.0);
    float rot = radians(0.0);
    //这里最好还是使用第二种方式,主要是防止纵横比不一致导致错切的情况
    //vec2(iResolution.x,iResolution.x)/ iResolution.xy 改为
    //vec2(iResolution.x,iResolution.y)/ iResolution.xy 后会错切
    // vec2 aspectratio = iChannelResolution[0].xy/ iResolution.xy;
     vec2 aspectratio = vec2(iResolution.x,iResolution.x)/ iResolution.xy;
    uv-=.5;
    uv.xy /= aspectratio;
    mat2 m = mat2(cos(rot), -sin(rot), sin(rot), cos(rot));
   	uv  = m * uv;
    uv.xy *= aspectratio;
    uv+=.5;
    
   
    fragcolor=texture(iChannel0,uv);
}


Shader之旅6:二维画面的UV旋转_第1张图片

以上是二维旋转的矩阵,shader中就是构造了这样的一个矩阵,所以原理很简单

你可能感兴趣的:(Shader之旅)