模糊效果在游戲中經(jīng)常會(huì)用到，有的為了突出前景會(huì)把背景給模糊化，有的是因?yàn)橐恍┘寄苄枰：ЧＤ：莝hader中較為簡(jiǎn)單的一種應(yīng)用。cocos2dx 3.x給的demo中，就有sprite的模糊的效果。

先說(shuō)下這個(gè)模糊算法的大致思路，我們?cè)谄沃髦锌梢缘玫疆?dāng)前像素點(diǎn)的顏色值，要想讓這個(gè)顏色變得模糊，就要讓它與它周?chē)南袼攸c(diǎn)的顏色稍微接近一點(diǎn)，那么我們就需要拿到這個(gè)像素點(diǎn)周?chē)南袼攸c(diǎn)的顏色值，我們把這些個(gè)像素點(diǎn)的值加起來(lái)取平均值，就得到了一個(gè)區(qū)域內(nèi)的平均顏色。

如果直接使用這個(gè)顏色的話，最終的效果會(huì)變得很模糊，如果我們只是想稍微模糊一點(diǎn)的話，就要讓這個(gè)平均值更接近于當(dāng)前像素點(diǎn)原本的顏色，為此，我們?nèi)【档臅r(shí)候?qū)γ總€(gè)像素點(diǎn)增加了一個(gè)權(quán)重的定義，當(dāng)前像素點(diǎn)的權(quán)重最高，依次向周?chē)鷾p弱，使得最后得到的均值的顏色更接近于當(dāng)前像素點(diǎn)原始的顏色。

看代碼：

#ifdef GL_ES

precision mediump float;

#endif

varying vec4 v_fragmentColor;

varying vec2 v_texCoord;

uniform vec2 resolution;//模糊對(duì)象的實(shí)際分辨率

uniform float blurRadius;//半徑

uniform float sampleNum;//間隔的段數(shù)

vec4 blur(vec2);

void main(void)

{

vec4 col = blur(v_texCoord); //* v_fragmentColor.rgb;

gl_FragColor = vec4(col) * v_fragmentColor;

}

vec4 blur(vec2 p)

{

if (blurRadius > 0.0 && sampleNum > 1.0)

{

vec4 col = vec4(0);

vec2 unit = 1.0 / resolution.xy;//單位坐標(biāo)

float r = blurRadius;

float sampleStep = r / sampleNum;

float count = 0.0;

//遍歷一個(gè)矩形，當(dāng)前的坐標(biāo)為中心點(diǎn)，遍歷矩形中每個(gè)像素點(diǎn)的顏色

for(float x = -r; x < r; x += sampleStep)

{

for(float y = -r; y < r; y += sampleStep)

{

float weight = (r - abs(x)) * (r - abs(y));//權(quán)重，p點(diǎn)的權(quán)重最高，向四周依次減少

col += texture2D(CC_Texture0, p + vec2(x * unit.x, y * unit.y)) * weight;

count += weight;

}

}

//得到實(shí)際模糊顏色的值

return col / count;

}

return texture2D(CC_Texture0, p);

}

精度限定符和varying變量等的一些基礎(chǔ)的知識(shí)在前面的博客中遇到的已經(jīng)說(shuō)過(guò)。

uniform變量是頂點(diǎn)著色器和片段著色器共享使用的變量，uniform的值不能被改變。

uniform變量是由宿主程序設(shè)置的，代碼如下：

void EffectBlur::setTarget(EffectSprite *sprite)

{

Size size = sprite->getTexture()->getContentSizeInPixels();

_glprogramstate->setUniformVec2("resolution", size);

#if (CC_TARGET_PLATFORM != CC_PLATFORM_WINRT)

_glprogramstate->setUniformFloat("blurRadius", _blurRadius);

_glprogramstate->setUniformFloat("sampleNum", _blurSampleNum);

#endif

}

這里宿主程序設(shè)置了resolution，blurRadius和sampleNum三個(gè)uniform變量。渲染的時(shí)候，頂點(diǎn)著色器和片段著色器都可以用到這三個(gè)變量的值。

resolution是當(dāng)前渲染node的實(shí)際分辨率。

blurRadius是像素點(diǎn)模糊處理的參考矩形的半徑

sampleNum選擇像素點(diǎn)的間隔的數(shù)量，相鄰像素點(diǎn)的間距等于blurRadius / sampleNum

blur函數(shù)就是計(jì)算該像素點(diǎn)的最終顏色，參數(shù)p是當(dāng)前像素點(diǎn)的坐標(biāo)，我們以p點(diǎn)為中點(diǎn)以2r為邊長(zhǎng)得到一個(gè)矩形，這個(gè)矩形中每隔sampleStep長(zhǎng)度的像素點(diǎn)是當(dāng)前像素點(diǎn)的顏色參考像素。每個(gè)像素點(diǎn)會(huì)乘以一個(gè)weight權(quán)重，這個(gè)weight越靠近p點(diǎn)值越高，目的是為了讓最終的值更接近于p點(diǎn)的像素顏色，然后各個(gè)像素點(diǎn)乘以權(quán)重后的顏色加起來(lái)，得到col，把各個(gè)權(quán)重也加起來(lái)得到count。最終的顏色值就是col/count。

效果圖如下：

模糊前：

模糊后：

總結(jié)

以上是生活随笔為你收集整理的cocos中如何让背景模糊_Cocos2d-x shader学习2： 模糊(Blur)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。