基于cocos2d-lua的shader入门玩转

我这里讲的shader是什么呢，通俗讲就是是获得图片的像素和操作图片的像素
比如我的原本颜色是这样的：

wo.png

void main()
{
    vec4 mycolor =  v_fragmentColor*texture2D(CC_Texture0, v_texCoord);
    //我的颜色.rgb就是这张图片的每个像素点的值，我的颜色.a就是这张图的透明度
    gl_FragColor =  mycolor;
}

那么cocos2d把我自己变成灰色是怎样呢？在ccShader_UI_Gray.frag文件下它是这么写的

void main()
{
    vec4 mycolor =  v_fragmentColor*texture2D(CC_Texture0, v_texCoord);
    //我的颜色向量点乘vec3(0.21,0.71,0.07),还我本来的透明度值
    float gray = dot(mycolor.rgb, vec3(0.2126, 0.7152, 0.0722));
    gl_FragColor =  vec4(gray);
    gl_FragColor.a = mycolor.a;
}   

效果是这样的

wo2.png

好吧这是在模拟器上截的图，放了个背景就当衬托，Shader能干的事太多了，接下来我要引发图战了

wo3.png

这张是显示包围盒，平时碰撞检测的时候虽然心里有一个概念，但是还是不如这种直接把透明度<0.1的颜色设为0.5看的直接

    vec4 mycolor =  v_fragmentColor*texture2D(CC_Texture0, v_texCoord);
    if (mycolor.a < 0.1 )
    {
        mycolor = vec4(0.5);
    }
    gl_FragColor = mycolor;

wo4.png

vec4 mycolor =  v_fragmentColor*texture2D(CC_Texture0, v_texCoord);
    float average = mycolor.r + mycolor.g + mycolor.b;
    if (average < 1.4)
    {
        gl_FragColor = mycolor; 
    }
    else 
    {
        gl_FragColor = vec4(0.);
    }

把我这张图片的rgb值相加，分值低于1.4的正常显示，高于的部分.rgb和透明度.a设为0.0，则出现上面的效果，怎么样像不像做了一个面具
我们换张图片来操作吧，换张美女图片

02.png

做demo或者示例就改拿网上看到的漂亮图片来操作嘛，这样就算随意修修改改也是一张美女图片

换个美女图片标题肯定要响亮些

03.jpg

我做了什么，我只是把美女的轮廓用浮雕凹显出来而已，好的现在开始进入Shader的基本介绍篇：

#ifdef GL_ES
precision mediump float;
#endif
uniform float PosX;
uniform float PosY;
uniform float waterwid;
uniform float deepwid;
//PosX是我传入的触控点X位置，PosY是触控点Y位置  
uniform sampler2D CC_Texture0;
varying vec2 v_texCoord;
varying vec4 v_fragmentColor;
void main() {
    vec2 onePixel = vec2(waterwid/ 48.0, deepwid/ 32.0);
    vec4 color;
    color.rgb = vec3(0.5);
    color -= texture2D(CC_Texture0, v_texCoord - onePixel) * PosX;
    color += texture2D(CC_Texture0, v_texCoord + onePixel) * PosY;
    color.rgb = vec3((color.r + color.g + color.b) / 3.0);
    gl_FragColor = vec4(color.rgb, 1.);
}

这里的PosX和PosY是我从外部传进来的触控X和Y的点，当然值是被我换算成01，这样的值不管在什么分辨率情况下能保证我们写的代码是通用的，waterwid和deepwid就是下面的两个滑动条了滑动范围也是在01之间，创造shader的Program代码lua:

function M.Shader_Normal_Init(vs,fs)
    local program = GlUtils:createProgram(vs