美文网首页shader
Shader 之方图转圆图跑马灯

Shader 之方图转圆图跑马灯

作者: babybus_break | 来源:发表于2016-06-21 11:31 被阅读323次

赋初值与该变量

#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

相关文章

  • Shader 之方图转圆图跑马灯

    赋初值与该变量 把方形图片变成圆的 根据圆形公式cos(θ)2+sin(θ)2=1 算出把一张长方形图片,以中心为...

  • 方图圆图

    方图代表宇宙的空间,圆图代表宇宙的时间。任何的空间都自成一个太极,可划分六十四个部分,就行成了方图和圆图。 方图结...

  • Android 基础 UI 之 TextView

    一、显示富文本 效果图image 布局文件 逻辑代码 二、跑马灯效果 1. 横向跑马灯 效果图: 单个实现跑马灯:...

  • Kevin Learn Android:TextView

    一、显示富文本 效果图01.png 布局文件 逻辑代码 二、跑马灯效果 1. 横向跑马灯 效果图: 单个实现跑马灯...

  • 易学常识②———三爷侃易经(21)

    一、方圆图 1.方图 2.圆图 先看圆图上面顶端左边的第一个卦是囗乾卦,再看最下面右边第一个卦是坤卦,在这乾、坤之...

  • 用Tableau画环形图系列(二)画同心圆

    第一讲我们讲了画圆的基本原理,只简单划了一个圆,这是不够的,像跑马灯图的基础都是同心圆,那么同心圆怎么画呢? 复习...

  • 8、简读南怀瑾《易经杂说》:六十四卦的方圆图

    方圆图 圆图是管宇宙的时间,代表宇宙的运行法则,也代表太阳系统时间运行的法则或原理。 圆图中的方图管空间,代表方位...

  • 《易经》基本知识:方圆图

    上面这个图,圆图是管宇宙的时间,代表宇宙的运行法则,亦可说代表太阳系统时间运行的法则或原理,圆图中的方图管空间,代...

  • textview - 跑马灯

    textview 的跑马灯不用说了吧,大家肯定都知道这是个啥,但是呢我还是放个图吧: 实现单个跑马灯 跑马灯的核心...

  • Shader实例跳动心脏

    用Shader来绘制一个跳动的心脏。效果图 代码如下: Shader"Custom/Heart"{ SubShad...

网友评论

    本文标题:Shader 之方图转圆图跑马灯

    本文链接:https://www.haomeiwen.com/subject/xxcgdttx.html