簡單來說，流光效果就是在貼圖上利用glowmap在原貼圖上的移動做動態的發亮效果，來讓貼圖看起來有光亮在移動。為了讓貼圖上的亮斑的排布看起來更加貼近自然，我們利用柏林噪聲來生成glowmap。事實上，二維或者三維的柏林噪聲在圖形學上有很多的應用，它可以用來描述很多自然的數學規律，使程式模擬出來的效果看起來更加像是自然生成的。比如牆上的斑點，起伏的海面的高度，熔岩中火焰的亮暗等等。柏林噪聲需要振幅和頻率兩個引數，利用噪聲函式生成需要的資料。這裡不展開論述，網上有很多相關資料。

為了可以直接利用資料，提高程式效率，我們不使用噪聲函式來計算，而是利用預先生成好的一組噪聲資料：

unsigned char perm[256] = {151,160,137,91,90,15,
	131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,
	190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,
	88,237,149,56,87,174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,
	77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,
	102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,89,18,169,200,196,
	135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,
	5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,
	223,183,170,213,119,248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,
	129,22,39,253,19,98,108,110,79,113,224,232,178,185,112,104,218,246,97,228,
	251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,14,239,107,
	49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,
	138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180};
 

這個陣列就是一個二維的柏林噪聲資料，可以直接拿這個資料來生成一張glowmap的灰度圖~可以先渲染出這個噪聲灰度圖：

CCTexture2D *noise = new CCTexture2D();
	noise->initWithData(perm, kCCTexture2DPixelFormat_A8, 16, 16, CCSizeMake(16, 16));
	test->setTexture(noise);
	rect.setRect(0, 0, noise->getContentSize().width, noise->getContentSize().height);
    test->setTextureRect(rect);
 

圖中的深色部分就是原貼圖中發亮的區域了~同理，如果是用來模擬海面的話，深色的地方凸起，淺色的地方凹陷，就可以模擬出高低不平的海面了，其他用途亦同理~按照我們之前使圖片發亮的混合方式，把灰度圖和原圖相加，額外處理原圖透明畫素依然透明，這時原圖就按照灰度圖上的斑點分佈發亮了~

我們既然做的是動態的流光效果，那麼靜止的發亮顯然是不夠的~為了能讓這些亮斑動起來，我們使用UV動畫。shader中在讀取texture資料的時候，使用的是texture的UV座標，即圖片左上角為(0, 0)，右下角為(1, 1)。所以只需要在讀取texture資料的時候，把對應的座標做變化即可~為了控制貼圖按時間移動，用cocos新增的一個uniform變數CC_Time進行控制，簡單修改fragment shader程式碼即可實現：

uniform sampler2D CC_Texture0;
uniform sampler2D u_Texture1;
uniform vec2 u_BlurDis;

varying vec4 v_Color;
varying vec2 v_TexCoord;

void main()
{
    vec4 originColor = texture2D(CC_Texture0, v_TexCoord);
	float per = fract(CC_Time.y * 0.3);
	float x = v_TexCoord.x + per;
	if (x > 1 ) { x = x - 1; }
	float y = v_TexCoord.y + per;
	if (y > 1 ) { y = y - 1; }
	vec4 glowColor = texture2D(u_Texture1, vec2(x, y));
	
	originColor.r = (originColor.r + glowColor.a) * originColor.a;
	originColor.g = (originColor.g + glowColor.a) * originColor.a;
	originColor.b = (originColor.b + glowColor.a) * originColor.a;
	gl_FragColor = originColor;
}

為了可以在shader中讀取噪聲貼圖，在C++程式碼中傳入該貼圖資料：

。。。
_uniforms[kUniformSampler1] = glGetUniformLocation(program->getProgram(), UniformSampler1);
。。。
glUniform1i(_uniforms[kUniformSampler1], 1);
。。。
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, _texture1->getName());

程式碼中，fract函式是shader內建的函式，用於取小數點後面的部分。因為UV座標區間為0~1，所以恰好利用時間的小數點後來做UV移動的動畫效果~因為UV座標的從水平和豎直方向上都有等量的增加，所以流光的移動也以45度方向進行。最終效如下：