赋初值与该变量
#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
我叫雷轰-支付宝changwei821@126.com
