賦初值與該變量
#ifdef GL_ES
precision mediump float;
#endif
//這里PosX,PosY為鼠標(biāo)的坐標(biāo) waterwid和deep為從外部傳進(jìn)來的兩個進(jìn)度條值（0
~1）
uniform float PosX;
uniform float PosY;
uniform float waterwid;
uniform float deepwid;
//CC_Texture0為默認(rèn)操作shader的自身紋理，后兩個值頂點和顏色
uniform sampler2D CC_Texture0;
varying vec2 v_texCoord;
varying vec4 v_fragmentColor;
//所以這就是一個基本的模板，外部傳入的可變值，返回自身的紋理
void main() {
mycolor = texture2D(CC_Texture0,v_texCoord);
gl_FragColor = mycolor ;
}
把方形圖片變成圓的
根據(jù)圓形公式cos(θ)2+sin(θ)2=1
無標(biāo)題.png
算出把一張長方形圖片，以中心為圓心，沿著y軸縮成一個圓州叠，每個像素點y的應(yīng)縮小值為
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
讓圖可以滑動
顯示的部分根據(jù)鼠標(biāo)的x軸來控制咧栗，超出左邊就移動到最右邊補(bǔ)上，右邊同理
float where = v_texCoord.x-PosX;
if (where < 0. || where > 1.)
{
where = mod(where,1.);
}
因此完整的方形圖片轉(zhuǎn)成圓形圖片并具有跑馬燈的效果如下
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
到此為止就算結(jié)束了
001.png
Creater BBus.YouChangwei
我叫雷轟-支付寶changwei821@126.com
