四年沒寫過作文了有點(diǎn)小激動呢

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

wo.png

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

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

void main()
{
    vec4 mycolor =  v_fragmentColor*texture2D(CC_Texture0, v_texCoord);
    //我的顏色向量點(diǎn)乘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

好吧這是在模擬器上截的圖，放了個背景就當(dāng)襯托，Shader能干的事太多了，接下來我要引發(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)上面的效果，怎么樣像不像做了一個面具
我們換張圖片來操作吧，換張美女圖片

02.png

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

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

03.jpg

我做了什么，我只是把美女的輪廓用浮雕凹顯出來而已，好的現(xiàn)在開始進(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)來的觸控X和Y的點(diǎn)，當(dāng)然值是被我換算成0_{1，這樣的值不管在什么分辨率情況下能保證我們寫的代碼是通用的，waterwid和deepwid就是下面的兩個滑動條了滑動范圍也是在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這個進(jìn)程
    GlUtils:programLink(program)
    //實(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

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

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

shader在初始化的時候必然有如下幾個默認(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里也是按照原圖紋理來操作的，并且坐標(biāo)原點(diǎn)在左下角
-- CC_MVPMatrix是我常用的，我們變換后是什么樣傳入就是什么樣，坐標(biāo)也是傳入時候的值
-- CC_Time.x是每一幀刷新自增0.01 .y是每幀自增0.1 框架默認(rèn)是定時刷新，所以大部分情況下有這就沒必要在創(chuàng)建shader還在外面開定時器
我常用的頂點(diǎn)著色器通常寫法是這樣的
-- CC_Texture0就是默認(rèn)操作這個Shader的Program的紋理，簡單說就是這張圖上每個像素點(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)信息，這里為什么還有個v_fragmentColor呢？這個是做什么用的
舉個栗子：假如我在lua設(shè)置
我這張圖片:setColor(紅色)
這時候我這張圖片應(yīng)該是先被設(shè)置為紅色圖片再將紋理顏色值傳入shader端，但是如果我們不用v_fragmentColor，在片段著色器：

gl_FragColor = texture2D(CC_Texture0, v_texCoord);

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

gl_FragColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);

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

wo5.png

這張圖的術(shù)是什么呢？其實(shí)就是拿這張圖往旁邊移動一下繞自己的中心點(diǎn)繞一圈，外圍的紅色部分就是這偏移出去的部分，由于繞自己中心轉(zhuǎn)的時候中間的不透明值會越加越高，而外圍的部分alpha值肯定比較低，這樣把兩者區(qū)分開來，并且讓偏移量隨時間周期運(yùn)動看起來就像人物在發(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)
// 描邊寬度，直接以像素為單位會有分辨率不同大小不同的問題，所以就用比例吧
#define outlineColor vec3(abs(sin(outlineSize/10.)),0.,0.) // 描邊顏色
#define textureSize vec2(215.0,299.0) // 紋理大?。▽捄透撸瑸榱擞嬎阒車鼽c(diǎn)的紋理坐標(biāo)，必須傳入它，因為紋理坐標(biāo)范圍是0~1

// 判斷在這個角度上距離為outlineSize那一點(diǎn)是不是透明
int getIsStrokeWithAngel(float angel)
{
    int stroke = 0;
    float rad = angel * 0.01745329252; // 這個浮點(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.);
    // 四周圍至少有一個點(diǎn)是不透明的，這個點(diǎn)要設(shè)成描邊顏色
    if (strokeCount > 0) 
    {
        myC.rgb = outlineColor;
        myC.a = 1.0*dis;
    }

    gl_FragColor = v_fragmentColor * myC;
}

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

水坑

04.jpg

還是這個熟悉的漂亮妹子圖片，所以說漂亮又皮膚好的人圖片再如何扭曲還是漂亮?。∮悬c(diǎn)跑題了
看到上面代碼的同學(xué)可能會問deepwid和waterwid是什么，這就不得不提我早時候做的一個模板了，一個水坑，對-當(dāng)時假設(shè)的需求是上面有一輛車，這輛車經(jīng)過的時候原地肯定會下陷一個坑再回來嘛，那么問題就來了，下陷是從哪里下陷，下陷的深度是多少，下陷最深處的寬是多少，于是我就帶著這三個問題寫了這個水坑

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就是水寬，也就是這個水坑最上面的寬度值在0~1之間，deepwid那就是水坑下面的寬度了
最后附上寫Shader的時候常用的一些函數(shù)和一些不錯的網(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#
-- 博客，框架一些效果的來源
http://www.cnblogs.com/hcbin/archive/2012/08/03/2621267.html
-- 特效視頻
http://i.youku.com/u/UNjE2NDAyODc2?qq-pf-to=pcqq.c2c
-- 一些基本效果，框架從這里下載過
http://www.oschina.net/code/snippet_1159242_38156
-- shader常用語法
abs                         計算輸入值的絕對值。
acos                        返回輸入值反余弦值。
all                           測試非0值。
any                         測試輸入值中的任何非零值。
asin                         返回輸入值的反正弦值。
atan                        返回輸入值的反正切值。
atan2                       返回y/x的反正切值。
ceil                         返回大于或等于輸入值的最小整數(shù)。
clamp                      把輸入值限制在[min, max]范圍內(nèi)。
clip                         如果輸入向量中的任何元素小于0，則丟棄當(dāng)前像素。
cos                         返回輸入值的余弦。
cosh                       返回輸入值的雙曲余弦。
cross                      返回兩個3D向量的叉積。
ddx                         返回關(guān)于屏幕坐標(biāo)x軸的偏導(dǎo)數(shù)。
ddy                         返回關(guān)于屏幕坐標(biāo)y軸的偏導(dǎo)數(shù)。
degrees                   弧度到角度的轉(zhuǎn)換
determinant              返回輸入矩陣的值。
distance                   返回兩個輸入點(diǎn)間的距離。
dot                          返回兩個向量的點(diǎn)積。
exp                         返回以e為底數(shù)，輸入值為指數(shù)的指數(shù)函數(shù)值。
exp2                       返回以2為底數(shù)，輸入值為指數(shù)的指數(shù)函數(shù)值。
faceforward             檢測多邊形是否位于正面。
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                        如何輸入值為無限的則返回true。
isnan                       如果輸入值為NAN或QNAN則返回true。
ldexp                       frexp的逆運(yùn)算，返回 x * 2 ^ exp。
len / lenth                返回輸入向量的長度。
lerp                         對輸入值進(jìn)行插值計算。
lit                            返回光照向量（環(huán)境光，漫反射光，鏡面高光，1）。
log                          返回以e為底的對數(shù)。
log10                      返回以10為底的對數(shù)。
log2                        返回以2為底的對數(shù)。
max                        返回兩個輸入值中較大的一個。
min                         返回兩個輸入值中較小的一個。
modf                       把輸入值分解為整數(shù)和小數(shù)部分。
mul                         返回輸入矩陣相乘的積。
normalize                 返回規(guī)范化的向量，定義為 x / length(x)。
pow                        返回輸入值的指定次冪。
radians                    角度到弧度的轉(zhuǎn)換。
reflect                     返回入射光線i對表面法線n的反射光線。
refract                     返回在入射光線i，表面法線n，折射率為eta下的折射光線v。
round                      返回最接近于輸入值的整數(shù)。
rsqrt                       返回輸入值平方根的倒數(shù)。
saturate                   把輸入值限制到[0, 1]之間。
sign                        計算輸入值的符號。
sin                          計算輸入值的正弦值。
sincos                     返回輸入值的正弦和余弦值。
sinh                        返回x的雙曲正弦。
smoothstep              返回一個在輸入值之間平穩(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ù)部分

自此我的第一篇博客就寫完了，最后來一個正常的結(jié)尾

001.png