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

卜若

于 2019-09-22 21:15:45 发布

阅读量373

点赞数

CC 4.0 BY-SA版权

分类专栏： webgl 文章标签： webgl

本文链接：https://blog.csdn.net/qq_37080133/article/details/101172828

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(g