纯shader实现简单的仿真翻页效果

遇到个需求，需要做出来一个仿真翻页的效果，在网上找了N多资料，大部分是用网格加shader的方法实现的翻页效果，因为我这个项目是个维护项目，又因为一些C++的接口没有绑定到lua，所以在lua那一级就不能用这种方法来实现翻页。

偶尔在网上搜到一篇文章讲解用简单方法实现的简单的翻页效果，网址如下：

https://gitbook.cn/books/5f3bd55ab74e2f16f57ea9e6/index.html

详细原理看这个文章就行，本文只简单介绍shader相关的。

顶点着色器跟一般的一样

attribute vec4 a_position;
attribute vec2 a_texCoord;
varying  vec2 v_texCoord;

void main() {
v_texCoord = a_texCoord;
gl_Position = CC_PMatrix * a_position; 
}

主要代码在片段着色器中，简单原理是这样的，首先呢先确定角落点的运动轨迹，再在每个 时间点算出来折线AB两端A和B的位置，如果当前纹理坐标是在△ACB中则取下一张纹理的相应点的像素值，如果当前纹理坐标是在△ADB中则取下一张纹理的相应点的像素值,否则则从当前纹理中取像素值，注意一个问题，取ADB的纹理颜色值需要转换一下坐标系，等一下讲。我这边是用的一个贝塞尔曲线获取的点，控制因子是传进来的time(0~1)，看下图。