Shader 之方图转圆图跑马灯

赋初值与该变量

#ifdef GL_ES
precision mediump float;
#endif
//这里PosX,PosY为鼠标的坐标  waterwid和deep为从外部传进来的两个进度条值（0
~1）
uniform float PosX;
uniform float PosY;
uniform float waterwid;
uniform float deepwid;
//CC_Texture0为默认操作shader的自身纹理，后两个值顶点和颜色
uniform sampler2D CC_Texture0;
varying vec2 v_texCoord;
varying vec4 v_fragmentColor;
//所以这就是一个基本的模板，外部传入的可变值，返回自身的纹理
void main() {
    mycolor = texture2D(CC_Texture0,v_texCoord);
    gl_FragColor = mycolor ;
}

把方形图片变成圆的

根据圆形公式cos(θ)^2+sin(θ)2=1

无标题.png

算出把一张长方形图片，以中心为圆心，沿着y轴缩成一个圆，每个像素点y的应缩小值为

float scale = sqrt(1.-pow(1./0.5*abs(v_texCoord.x-0.5),2.));

完整的把方形图片缩小成圆形main方法如下

void main() {
    float MyPos = PosX/2.;
    float scale = sqrt(1.-pow(1./MyPos*abs(v_texCoord.x-MyPos),2.));
    vec4 myColor = texture2D(CC_Texture0, vec2(v_texCoord.x,1./scale*(v_texCoord.y-(1.-scale)*0.5 ))  );
    if ( abs(v_texCoord.y-0.5) < scale/2.   )
    {
        gl_FragColor = myColor;
    }
}

让我们对比一下原图和效果图
原图：

WKYX6(IK8{3@9MNP@23_$~3.jpg

按像素点，以x为方向，长方形中心为圆心缩成圆形效果图

DIX{{}J`D(AMC5WHEYQYPKE.jpg

让图可以滑动

显示的部分根据鼠标的x轴来控制，超出左边就移动到最右边补上，右边同理

float where = v_texCoord.x-PosX;
    if (where < 0. || where > 1.)
    {
        where = mod(where,1.);
    }

因此完整的方形图片转成圆形图片并具有跑马灯的效果如下

void main() {
    float MyPos = waterwid;//0.5;//PosX/2.;
    float scale = sqrt(1.-pow(1./MyPos*abs(v_texCoord.x-MyPos),2.));
    float where = v_texCoord.x-PosX;
    if (where < 0. || where > 1.)
    {
        where = mod(where,1.);
    }

    float WY = 1./scale*(v_texCoord.y-(1.-scale)*0.5 );
    vec4 myColor = texture2D(CC_Texture0, vec2(where,WY) );
    if ( abs(v_texCoord.y-0.5) < scale/2.   )
    {
        gl_FragColor = myColor;
    }
}

jdfw.gif

到此为止就算结束了

001.png

Creater BBus.YouChangwei
我叫雷轰-支付宝 [email protected]