四年沒(méi)寫(xiě)過(guò)作文了有點(diǎn)小激動(dòng)呢

我這里講的shader是什么呢盖溺，通俗講就是是獲得圖片的像素和操作圖片的像素
比如我的原本顏色是這樣的：

wo.png

void main()
{
    vec4 mycolor =  v_fragmentColor*texture2D(CC_Texture0, v_texCoord);
    //我的顏色.rgb就是這張圖片的每個(gè)像素點(diǎn)的值筒繁，我的顏色.a就是這張圖的透明度
    gl_FragColor =  mycolor;
}

那么cocos2d把我自己變成灰色是怎樣呢？在ccShader_UI_Gray.frag文件下它是這么寫(xiě)的

void main()
{
    vec4 mycolor =  v_fragmentColor*texture2D(CC_Texture0, v_texCoord);
    //我的顏色向量點(diǎn)乘vec3(0.21,0.71,0.07),還我本來(lái)的透明度值
    float gray = dot(mycolor.rgb, vec3(0.2126, 0.7152, 0.0722));
    gl_FragColor =  vec4(gray);
    gl_FragColor.a = mycolor.a;
}   

效果是這樣的

wo2.png

好吧這是在模擬器上截的圖兔魂，放了個(gè)背景就當(dāng)襯托，Shader能干的事太多了，接下來(lái)我要引發(fā)圖戰(zhàn)了

wo3.png

    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設(shè)為0.0，則出現(xiàn)上面的效果嘹裂，怎么樣像不像做了一個(gè)面具
我們換張圖片來(lái)操作吧妄壶，換張美女圖片

02.png

做demo或者示例就改拿網(wǎng)上看到的漂亮圖片來(lái)操作嘛，這樣就算隨意修修改改也是一張美女圖片

換個(gè)美女圖片標(biāo)題肯定要響亮些

03.jpg

我做了什么寄狼，我只是把美女的輪廓用浮雕凹顯出來(lái)而已丁寄，好的現(xiàn)在開(kāi)始進(jìn)入Shader的基本介紹篇：

#ifdef GL_ES
precision mediump float;
#endif
uniform float PosX;
uniform float PosY;
uniform float waterwid;
uniform float deepwid;
//PosX是我傳入的觸控點(diǎn)X位置，PosY是觸控點(diǎn)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是我從外部傳進(jìn)來(lái)的觸控X和Y的點(diǎn)泊愧，當(dāng)然值是被我換算成0_{1伊磺，這樣的值不管在什么分辨率情況下能保證我們寫(xiě)的代碼是通用的，waterwid和deepwid就是下面的兩個(gè)滑動(dòng)條了滑動(dòng)范圍也是在0}1之間删咱，創(chuàng)造shader的Program代碼lua:

function M.Shader_Normal_Init(vs,fs)
    local program = GlUtils:createProgram(vs,fs)
    //頂點(diǎn)著色器和片段著色器
    GlUtils:programRetain(program)
    GlUtils:programAddAttribute(program, kCCAttributeNamePosition, kCCVertexAttrib_Position)
    GlUtils:programAddAttribute(program, kCCAttributeNameTexCoord, kCCVertexAttrib_TexCoords)
    GlUtils:programAddAttribute(program, kCCAttributeNameColor, kCCVertexAttrib_Color)
    //傳入我這張圖片的位置.紋理.顏色信息給gl這個(gè)進(jìn)程
    GlUtils:programLink(program)
    //實(shí)時(shí)更新
    GlUtils:programUpdateUniforms(program)
    GlUtils:programUse(program)
    GlUtils:checkErrorDebug()
    return program
end
-- 創(chuàng)造浮雕
function M.CreateRelief(node)
    local program = M.Shader_Normal_Init("bingxue/normal.vs", "bingxue/bins.fs")
    -- 默認(rèn)水坑在中心點(diǎn)屑埋，即Posx=0.5,Posy=0.5
    local amountLocx = GlUtils:programGetUniformLocationForName(program, "PosX")
    GlUtils:programSetUniformLocationWith1f(program, amountLocx, 480.0/960.0)
    local amountLocy = GlUtils:programGetUniformLocationForName(program, "PosY")
    GlUtils:programSetUniformLocationWith1f(program, amountLocy, 320.0/640.0)
    node:setShaderProgram(program)
end

這時(shí)候我話鋒一轉(zhuǎn)開(kāi)始介紹起了shader最基本的一些參數(shù)

Shader常常自帶的一些函數(shù)

shader在初始化的時(shí)候必然有如下幾個(gè)默認(rèn)值的引入
"uniform mat4 CC_PMatrix;\n"
"uniform mat4 CC_MVMatrix;\n"
"uniform mat4 CC_MVPMatrix;\n"
"uniform vec4 CC_Time;\n"
"uniform vec4 CC_SinTime;\n"
"uniform vec4 CC_CosTime;\n"
"uniform vec4 CC_Random01;\n"
"uniform sampler2D CC_Texture0;\n"
"uniform sampler2D CC_Texture1;\n"
"uniform sampler2D CC_Texture2;\n"
"uniform sampler2D CC_Texture3;\n"

-- 其中CC_PMatrix表示傳入的是所用圖片的原始紋理，即你縮放2倍后的圖在shader里也是按照原圖紋理來(lái)操作的痰滋，并且坐標(biāo)原點(diǎn)在左下角
-- CC_MVPMatrix是我常用的摘能，我們變換后是什么樣傳入就是什么樣，坐標(biāo)也是傳入時(shí)候的值
-- CC_Time.x是每一幀刷新自增0.01 .y是每幀自增0.1 框架默認(rèn)是定時(shí)刷新敲街，所以大部分情況下有這就沒(méi)必要在創(chuàng)建shader還在外面開(kāi)定時(shí)器
我常用的頂點(diǎn)著色器通常寫(xiě)法是這樣的
-- CC_Texture0就是默認(rèn)操作這個(gè)Shader的Program的紋理徊哑，簡(jiǎn)單說(shuō)就是這張圖上每個(gè)像素點(diǎn)

#ifdef GL_ES                                        
    precision mediump float;
    varying mediump vec2 v_texCoord;
#else
    varying vec2 v_texCoord;
#endif
attribute vec2 a_texCoord;
attribute vec4 a_color;
attribute vec4 a_position;
varying vec4 v_fragmentColor; 
void main()
{
    gl_Position = CC_MVPMatrix * a_position;  
    //gl_Position = CC_PMatrix * a_position; 
    v_fragmentColor = a_color;                                                
    v_texCoord = a_texCoord;       
}

這里的a_texCoord就是上面lua傳入的默認(rèn)的這張圖片的紋理啦，a_color這張圖片基本顏色a_position頂點(diǎn)信息聪富，這里為什么還有個(gè)v_fragmentColor呢莺丑？這個(gè)是做什么用的
舉個(gè)栗子：假如我在lua設(shè)置
我這張圖片:setColor(紅色)
這時(shí)候我這張圖片應(yīng)該是先被設(shè)置為紅色圖片再將紋理顏色值傳入shader端，但是如果我們不用v_fragmentColor，在片段著色器：

gl_FragColor = texture2D(CC_Texture0, v_texCoord);

你就會(huì)發(fā)現(xiàn)顯示的是這張圖片該是什么顏色就是什么顏色梢莽，只有

gl_FragColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);

這張圖片顯示的才是我們變成紅色后的圖片萧豆，所以我經(jīng)常把“v_fragmentColor*”寫(xiě)在最后 。
我再貼一幅圖：人物發(fā)光效果

wo5.png

這張圖的術(shù)是什么呢昏名？其實(shí)就是拿這張圖往旁邊移動(dòng)一下繞自己的中心點(diǎn)繞一圈涮雷，外圍的紅色部分就是這偏移出去的部分，由于繞自己中心轉(zhuǎn)的時(shí)候中間的不透明值會(huì)越加越高轻局，而外圍的部分alpha值肯定比較低洪鸭，這樣把兩者區(qū)分開(kāi)來(lái)，并且讓偏移量隨時(shí)間周期運(yùn)動(dòng)看起來(lái)就像人物在發(fā)光仑扑，這次貼上完整的片段著色器代碼

#ifdef GL_ES
precision mediump float;
#endif
 
//所需常量
uniform sampler2D CC_Texture0;
varying vec2 v_texCoord;
varying vec4 v_fragmentColor;


#define outlineSize 10.*sin(2.*CC_Time.y)
// 描邊寬度览爵，直接以像素為單位會(huì)有分辨率不同大小不同的問(wèn)題，所以就用比例吧
#define outlineColor vec3(abs(sin(outlineSize/10.)),0.,0.) // 描邊顏色
#define textureSize vec2(215.0,299.0) // 紋理大姓蛞（寬和高）蜓竹，為了計(jì)算周圍各點(diǎn)的紋理坐標(biāo)，必須傳入它储藐，因?yàn)榧y理坐標(biāo)范圍是0~1

// 判斷在這個(gè)角度上距離為outlineSize那一點(diǎn)是不是透明
int getIsStrokeWithAngel(float angel)
{
    int stroke = 0;
    float rad = angel * 0.01745329252; // 這個(gè)浮點(diǎn)數(shù)是 pi / 180俱济，角度轉(zhuǎn)弧度
    float a = texture2D(CC_Texture0, vec2(v_texCoord.x + outlineSize * cos(rad) / textureSize.x, v_texCoord.y + outlineSize * sin(rad) / textureSize.y)).a; 
    // 我把a(bǔ)lpha值大于0.5都視為不透明，小于0.5都視為透明
    if (a >= 0.01)
    {
        stroke = 1;
    }
    return stroke;
}
void main() {
    // 我的顏色
    vec4 myC = texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y)); 
    if (myC.a >= 0.5) // 不透明钙勃，不管蛛碌，直接返回
    {
        gl_FragColor =  v_fragmentColor*myC;
        return;
    }
    int strokeCount = 0;
    strokeCount += getIsStrokeWithAngel(0.0);
    strokeCount += getIsStrokeWithAngel(30.0);
    strokeCount += getIsStrokeWithAngel(60.0);
    strokeCount += getIsStrokeWithAngel(90.0);
    strokeCount += getIsStrokeWithAngel(120.0);
    strokeCount += getIsStrokeWithAngel(150.0);
    strokeCount += getIsStrokeWithAngel(180.0);
    strokeCount += getIsStrokeWithAngel(210.0);
    strokeCount += getIsStrokeWithAngel(240.0);
    strokeCount += getIsStrokeWithAngel(270.0);
    strokeCount += getIsStrokeWithAngel(300.0);
    strokeCount += getIsStrokeWithAngel(330.0);
    float dis = pow( pow(abs(v_texCoord.x-0.5),2.) + pow(abs(v_texCoord.y-0.5),2.) , 4.);
    // 四周圍至少有一個(gè)點(diǎn)是不透明的，這個(gè)點(diǎn)要設(shè)成描邊顏色
    if (strokeCount > 0) 
    {
        myC.rgb = outlineColor;
        myC.a = 1.0*dis;
    }

    gl_FragColor = v_fragmentColor * myC;
}

現(xiàn)在再回過(guò)頭來(lái)看看上面的浮雕辖源，其實(shí)它的術(shù)就是：
1.布置一張灰色半透明畫(huà)布 2.畫(huà)布-圖片往左移動(dòng)onePixel
3.畫(huà)布+圖片往右移動(dòng)onePixel 4.畫(huà)布顏色值平均化
至于所謂Posx和Posy的作用就是控制+-的強(qiáng)度了蔚携，這兩個(gè)值我交給屏幕的觸控來(lái)調(diào)整，這樣能輕易的看到調(diào)整所帶來(lái)的改變

水坑

04.jpg

還是這個(gè)熟悉的漂亮妹子圖片同木，所以說(shuō)漂亮又皮膚好的人圖片再如何扭曲還是漂亮案∩摇！有點(diǎn)跑題了
看到上面代碼的同學(xué)可能會(huì)問(wèn)deepwid和waterwid是什么彤路，這就不得不提我早時(shí)候做的一個(gè)模板了秕硝，一個(gè)水坑，對(duì)-當(dāng)時(shí)假設(shè)的需求是上面有一輛車洲尊，這輛車經(jīng)過(guò)的時(shí)候原地肯定會(huì)下陷一個(gè)坑再回來(lái)嘛远豺，那么問(wèn)題就來(lái)了，下陷是從哪里下陷坞嘀，下陷的深度是多少躯护，下陷最深處的寬是多少，于是我就帶著這三個(gè)問(wèn)題寫(xiě)了這個(gè)水坑

const float pi = 3.141592653589793;
//從哪里下陷
float midpoint = PosX;
//水寬范圍
//float waterwid = keng;
//水最深處寬帶
//float wid = 0.5;
float CountScale(float left,float right)
{
    //水深
    float depth = PosY;
    //防止怪異現(xiàn)象
    if (depth > 1.)
    {
        depth = 1.;
    }
    else if (depth < 0.)
    {
        depth = 0.;
    }
    //像素Y值縮放
    float scale = 1.-depth;
    float length = right - left;
    float mysca = pi/length;
    //向下彎曲的坐標(biāo)值定在0.-1.之間
    float pos = (v_texCoord.x - left)/length;
    if (pos < (1.-deepwid)/2. )
    {
        pos = 1./(1.-deepwid)*(pos);
        scale = (1.-depth) + depth *(0.5001-0.5*(sin(-pi/2.+pos*2.*pi)) );
    }
    else if( pos > (1.+deepwid)/2.)
    {
        pos = 1./(1.-deepwid)*(pos-deepwid);
        scale = (1.-depth)+ (depth)*(.5001-.5*( sin(-pi/2.+(pos)*2.*pi) ) );
    }
    return scale;
}

void main() {
    float scale = 1.;
    float left  = midpoint - waterwid/2.;
    float right = midpoint + waterwid/2.;
    if (v_texCoord.x > left && v_texCoord.x < right )
    {
        scale = CountScale(left,right);
    }
    vec4 mycolor = vec4(0.0);
    if (1.-v_texCoord.y < scale )
    {
        mycolor = texture2D(CC_Texture0, vec2(v_texCoord.x,1./scale*(v_texCoord.y-1.+scale))  );
    }
    gl_FragColor = mycolor ;
}

水坑的術(shù)是什么：根據(jù)觸控的中心點(diǎn)縮小那部分的Y紋理值waterwid就是水寬丽涩，也就是這個(gè)水坑最上面的寬度值在0~1之間棺滞，deepwid那就是水坑下面的寬度了
最后附上寫(xiě)Shader的時(shí)候常用的一些函數(shù)和一些不錯(cuò)的網(wǎng)址

-- 部分好的網(wǎng)站  -- cocos官網(wǎng)
http://store.cocos.com/stuff/category/12/score_count.html
-- 一些大師的分享地
http://www.effecthub.com/#userconsent#
-- 純shader紋理
http://glslsandbox.com/#userconsent#
-- 游戲素材下載
http://www.6m5m.com/index.php#userconsent#
-- 博客裁蚁，框架一些效果的來(lái)源
http://www.cnblogs.com/hcbin/archive/2012/08/03/2621267.html
-- 特效視頻
http://i.youku.com/u/UNjE2NDAyODc2?qq-pf-to=pcqq.c2c
-- 一些基本效果，框架從這里下載過(guò)
http://www.oschina.net/code/snippet_1159242_38156
-- shader常用語(yǔ)法
abs                         計(jì)算輸入值的絕對(duì)值继准。
acos                        返回輸入值反余弦值枉证。
all                           測(cè)試非0值。
any                         測(cè)試輸入值中的任何非零值移必。
asin                         返回輸入值的反正弦值室谚。
atan                        返回輸入值的反正切值。
atan2                       返回y/x的反正切值崔泵。
ceil                         返回大于或等于輸入值的最小整數(shù)秒赤。
clamp                      把輸入值限制在[min, max]范圍內(nèi)。
clip                         如果輸入向量中的任何元素小于0憎瘸，則丟棄當(dāng)前像素入篮。
cos                         返回輸入值的余弦。
cosh                       返回輸入值的雙曲余弦含思。
cross                      返回兩個(gè)3D向量的叉積崎弃。
ddx                         返回關(guān)于屏幕坐標(biāo)x軸的偏導(dǎo)數(shù)甘晤。
ddy                         返回關(guān)于屏幕坐標(biāo)y軸的偏導(dǎo)數(shù)含潘。
degrees                   弧度到角度的轉(zhuǎn)換
determinant              返回輸入矩陣的值。
distance                   返回兩個(gè)輸入點(diǎn)間的距離线婚。
dot                          返回兩個(gè)向量的點(diǎn)積遏弱。
exp                         返回以e為底數(shù)，輸入值為指數(shù)的指數(shù)函數(shù)值塞弊。
exp2                       返回以2為底數(shù)漱逸，輸入值為指數(shù)的指數(shù)函數(shù)值。
faceforward             檢測(cè)多邊形是否位于正面游沿。
floor                       返回小于等于x的最大整數(shù)饰抒。
fmod                       返回a / b的浮點(diǎn)余數(shù)。
frac                        返回輸入值的小數(shù)部分诀黍。
frexp                       返回輸入值的尾數(shù)和指數(shù)
fwidth                     返回 abs ( ddx (x) + abs ( ddy(x))袋坑。
isfinite                     如果輸入值為有限值則返回true，否則返回false眯勾。
isinf                        如何輸入值為無(wú)限的則返回true枣宫。
isnan                       如果輸入值為NAN或QNAN則返回true。
ldexp                       frexp的逆運(yùn)算吃环，返回 x * 2 ^ exp也颤。
len / lenth                返回輸入向量的長(zhǎng)度。
lerp                         對(duì)輸入值進(jìn)行插值計(jì)算郁轻。
lit                            返回光照向量（環(huán)境光翅娶，漫反射光，鏡面高光，1）竭沫。
log                          返回以e為底的對(duì)數(shù)厂庇。
log10                      返回以10為底的對(duì)數(shù)。
log2                        返回以2為底的對(duì)數(shù)输吏。
max                        返回兩個(gè)輸入值中較大的一個(gè)权旷。
min                         返回兩個(gè)輸入值中較小的一個(gè)。
modf                       把輸入值分解為整數(shù)和小數(shù)部分贯溅。
mul                         返回輸入矩陣相乘的積拄氯。
normalize                 返回規(guī)范化的向量，定義為 x / length(x)它浅。
pow                        返回輸入值的指定次冪译柏。
radians                    角度到弧度的轉(zhuǎn)換。
reflect                     返回入射光線i對(duì)表面法線n的反射光線姐霍。
refract                     返回在入射光線i鄙麦，表面法線n，折射率為eta下的折射光線v镊折。
round                      返回最接近于輸入值的整數(shù)胯府。
rsqrt                       返回輸入值平方根的倒數(shù)。
saturate                   把輸入值限制到[0, 1]之間恨胚。
sign                        計(jì)算輸入值的符號(hào)骂因。
sin                          計(jì)算輸入值的正弦值。
sincos                     返回輸入值的正弦和余弦值赃泡。
sinh                        返回x的雙曲正弦寒波。
smoothstep              返回一個(gè)在輸入值之間平穩(wěn)變化的插值。
sqrt                         返回輸入值的平方根升熊。
step                        返回（x >= a）? 1 : 0俄烁。
tan                          返回輸入值的正切值。
fanh                        返回輸入值的雙曲線切線级野。
transpose                 返回輸入矩陣的轉(zhuǎn)置页屠。
tex1D*                    1D紋理查詢。
tex2D*                    2D紋理查詢勺阐。
tex3D*                    3D紋理查詢卷中。
texCUBE*                立方紋理查詢。
-- 運(yùn)用中添加
fract(x): 取小數(shù)部分

自此我的第一篇博客就寫(xiě)完了渊抽，最后來(lái)一個(gè)正常的結(jié)尾

001.png