卜若的代码笔记-webgl系列-第二十二章：glsl的应用(二)>利用shader让图像旋转

1 在上一章中，我们发现了一个奇怪的bug，我们的图像居然是反的！！卧槽？？这怎么能忍？主要原因是我没有分配正确的uv，这其实并不重要，我只需要然fragShader里面的uv坐标旋转一下就行啦~

 

旋转公式：

              float s = sin(coe)*(v_TexCoord.x-0.5)+cos(coe)*(v_TexCoord.y-0.5);
              float t = -cos(coe)*(v_TexCoord.x-0.5) + sin(coe)*(v_TexCoord.y-0.5);

              vec2 vtep = vec2(s+0.5,t+0.5);

然后...直接上Shader了，基础的都在前面，要好好学习呀....

   <script id="fragment_shader" type="x-shader/x-fragment">


             uniform sampler2D u_Sampler;
             varying vec2 v_TexCoord;

             uniform float coe;


             vec4 tp = vec4(1.0,1.0,1.0,1.0);

             void main() {

              float s = sin(coe)*(v_TexCoord.x-0.5)+cos(coe)*(v_TexCoord.y-0.5);
              float t = -cos(coe)*(v_TexCoord.x-0.5) + sin(coe)*(v_TexCoord.y-0.5);

               vec2 vtep = vec2(s+0.5,t+0.5);

              gl_FragColor = texture2D(u_Sampler, vtep);
             // if(gl_FragColor == tp){
             // gl_FragColor = vec4(1.0,1.0,1.0,0.0);
             // }
//
//
             }

    </script>
    <script id="vertexShader" type="x-shader/x-vertex">

          uniform float vt;
          uniform mat4 u_MvpMatrix;
          varying vec2 v_TexCoord;
          void main() {

           vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );


           v_TexCoord = mvPosition.xy*0.2;

          // v_TexCoord = vec2(cos(3.14159/4.0)*v_TexCoord.x+sin(3.14159/4.0)*v_TexCoord.y,-sin(3.14159/4.0)*v_TexCoord.x + cos(3.14159/4.0)*v_TexCoord.y);


           gl_Position = projectionMatrix * mvPosition;


         }

    </script>

旋转之后的效果：

果断雪乃=。=