上文Android OpenGL ES(三)-平面圖形的最后，我們通過(guò)渲染紋理，終于將我們的2D圖片渲染到了OpenGL中曲饱。這章，我們?cè)俳釉賲栔樵拢瑸槲覀兊募y理添加單獨(dú)的濾鏡效果
上一章加載圖片的過(guò)程扩淀，在這里就不做贅述。
黑白效果
基礎(chǔ)分析
之前我們通過(guò)YUV數(shù)據(jù)格式的處理知道啤挎，只要保留Y的數(shù)據(jù)驻谆，就是灰度的圖片。但是OpenGL中處理的是RGB格式的數(shù)據(jù)庆聘，我們要如何去取得灰度圖呢胜臊？
我們可以通過(guò)公式，計(jì)算出新的RGB值伙判，就是灰度的圖片了象对。
浮點(diǎn)算法：Gray=R0.3+G0.59+B*0.11
代碼實(shí)現(xiàn)
我們的目標(biāo)已經(jīng)確定。下面我們需要將片段著色器上的每個(gè)像素的RGB值宴抚，通過(guò)上面的公式計(jì)算勒魔，裝換成我們的灰度值。
更新著色器代碼
根據(jù)上面的思路菇曲，我們需要去改片元著色器冠绢。texture_fragment_shader.glsl
precision mediump float;
//在片元著色器這里添加這個(gè) sampler2D 表示我們要添加2D貼圖
uniform sampler2D u_TextureUnit;
//定義一個(gè)u_ChangeColor,因?yàn)轭伾淖兞渴荝GB,所以使用vec3
uniform vec3 u_ChangeColor;
varying vec2 v_TextureCoordinates;
void main(){
//得到2d color
vec4 nColor=texture2D(u_TextureUnit,v_TextureCoordinates);
//黑白圖片
float c= nColor.r*u_ChangeColor.r+nColor.g*u_ChangeColor.g+nColor.b*u_ChangeColor.b;
gl_FragColor = vec4(c,c,c,nColor.a);
}
對(duì)比之前的，需要是有如下的修改點(diǎn)：
- 在GLSL中常潮，顏色是用包含四個(gè)浮點(diǎn)的向量vec4表示弟胀，四個(gè)浮點(diǎn)分別表示RGBA四個(gè)通道，取值范圍為0.0-1.0。
- 我們添加了一個(gè)uniform的屬性
u_ChangeColor,這樣我們可以傳遞我們自己的系數(shù)給OpenGL - 著色器中取樣的其實(shí)是小單元的RGB色值(圖片每個(gè)像素的色彩值)孵户，我們可以通過(guò)計(jì)算操作,色彩值進(jìn)行調(diào)整萧朝，得到我們想要的想過(guò)，最后傳遞給
gl_FragColor就就可以完成對(duì)圖片的色彩處理了延届。
更新代碼
按照之前的想法剪勿，我們需要將我們的公式中的系數(shù)傳遞進(jìn)入贸诚，就可以完成我們的操作了方庭。基于之前的認(rèn)識(shí)酱固，我們知道傳遞我們的屬性uniform給OpenGL的都是通過(guò)創(chuàng)建數(shù)組械念，綁定屬性，這一套流程运悲。
//0 創(chuàng)建數(shù)組
//黑白圖片的公式：RGB 按照 0.2989 R龄减，0.5870 G 和 0.1140 B 的比例構(gòu)成像素灰度值。
float[] grayFilterColorData = {0.299f, 0.587f, 0.114f};
//1 .得到屬性的location
uChangeColor = GLES20.glGetUniformLocation(mProgramObjectId, U_CHANGE_COLOR);
//2. 將數(shù)組傳入
GLES20.glUniform3fv(uChangeColor, 1, grayFilterColorData, 0);
結(jié)果
冷暖色調(diào)的處理
與上面的黑白色的處理相似班眯，冷色調(diào)的處理就是單一增加藍(lán)色通道的值希停，暖色調(diào)的處理可以增加紅綠通道的值。
著色器代碼更新
precision mediump float;
//在片元著色器這里添加這個(gè) sampler2D 表示我們要添加2D貼圖
uniform sampler2D u_TextureUnit;
//定義一個(gè)u_ChangeColor,因?yàn)轭伾淖兞渴荝GB,所以使用vec3
uniform vec3 u_ChangeColor;
varying vec2 v_TextureCoordinates;
//modifyColor.將color限制在rgb
void modifyColor(vec4 color){
color.r=max(min(color.r,1.0),0.0);
color.g=max(min(color.g,1.0),0.0);
color.b=max(min(color.b,1.0),0.0);
color.a=max(min(color.a,1.0),0.0);
}
void main(){
//得到2d color
vec4 nColor=texture2D(u_TextureUnit,v_TextureCoordinates);
//簡(jiǎn)單色彩處理署隘，冷暖色調(diào)宠能、增加亮度、降低亮度等
vec4 deltaColor=nColor+vec4(u_ChangeColor,0.0);
modifyColor(deltaColor);
gl_FragColor=deltaColor;
}
不管是冷色還是暖色磁餐。每個(gè)像素的顏色都和我們傳入的色值相加违崇，產(chǎn)生偏置之后的顏色。同時(shí)還要確保顏色的值合法诊霹。如果超過(guò)最大羞延，或者小于最小，就用極限值表示脾还。
更新代碼
還是之前的套路伴箩。
//0.添加數(shù)組
//暖色的顏色。是加強(qiáng)R/G來(lái)完成鄙漏。這里注意的是顏色值在[0,1]之間
float[] warmFilterColorData = {0.1f, 0.1f, 0.0f};
//冷色系的調(diào)整嗤谚。簡(jiǎn)單的就是增加B的分量
float[] coolFilterColorData = {0.0f, 0.0f, 0.1f};
//1. 和上面一樣，得到屬性的位置
uChangeColor = GLES20.glGetUniformLocation(mProgramObjectId, U_CHANGE_COLOR);
//2.傳遞值
//暖色調(diào)
GLES20.glUniform3fv(uChangeColor, 1, warmFilterColorData, 0);
//或者泥张。冷色調(diào)
GLES20.glUniform3fv(uChangeColor, 1, coolFilterColorData, 0);
結(jié)果
暖色調(diào)
紅黃通道增加的結(jié)果
冷色調(diào)
藍(lán)色通道增加的結(jié)果
圖片模糊處理
圖片模糊處理相對(duì)上面的色調(diào)處理稍微復(fù)雜一點(diǎn)呵恢，通常圖片模糊處理是采集周邊多個(gè)點(diǎn)，
然后利用這些點(diǎn)的色彩和這個(gè)點(diǎn)自身的色彩進(jìn)行計(jì)算媚创，得到一個(gè)新的色彩值作為目標(biāo)色彩渗钉。
模糊處理有很多算法，類(lèi)似高斯模糊、徑向模糊等等鳄橘。
高斯模糊
最常用的還是高斯模糊声离。先看一下高斯模糊的原理。
將正態(tài)分布（又名"高斯分布"）用于圖像處理瘫怜。
本質(zhì)上术徊，它是一種數(shù)據(jù)平滑技術(shù)（data smoothing），適用于多個(gè)場(chǎng)合鲸湃，圖像處理恰好提供了一個(gè)直觀的應(yīng)用實(shí)例赠涮。
原理
使用正態(tài)分布作為權(quán)重分配模式，對(duì)周?chē)袼厝∑骄档姆绞桨堤簦褪歉咚鼓：?/p>
在圖形上笋除，正態(tài)分布是一種鐘形曲線(xiàn)，越接近中心炸裆，取值越大垃它，越遠(yuǎn)離中心，取值越小烹看。
計(jì)算平均值的時(shí)候国拇，我們只需要將"中心點(diǎn)"作為原點(diǎn)，其他點(diǎn)按照其在正態(tài)曲線(xiàn)上的位置惯殊，分配權(quán)重酱吝，就可以得到一個(gè)加權(quán)平均值。
二維的正態(tài)分布
上面的正態(tài)分布是一維的靠胜，圖像都是二維的掉瞳，所以我們需要二維的正態(tài)分布。
計(jì)算公式
二維高斯函數(shù)：
有了這個(gè)函數(shù) 浪漠，就可以計(jì)算每個(gè)點(diǎn)的權(quán)重了陕习。
權(quán)重矩陣的計(jì)算結(jié)果
為了計(jì)算權(quán)重矩陣，需要設(shè)定σ的值址愿。假定σ=1.5该镣，則模糊半徑為1的權(quán)重矩陣，權(quán)重之和等于1响谓，得到最終的權(quán)重矩陣损合。
計(jì)算高斯模糊
對(duì)所有點(diǎn)重復(fù)這個(gè)過(guò)程，就得到了高斯模糊后的圖像娘纷。如果原圖是彩色圖片嫁审，可以對(duì)RGB三個(gè)通道分別做高斯模糊。
如果一個(gè)點(diǎn)處于邊界赖晶，周邊沒(méi)有足夠的點(diǎn)律适，怎么辦辐烂？
一個(gè)變通方法，就是把已有的點(diǎn)拷貝到另一面的對(duì)應(yīng)位置捂贿，模擬出完整的矩陣纠修。
代碼實(shí)現(xiàn)
- 更新著色器。
precision mediump float;
//在片元著色器這里添加這個(gè) sampler2D 表示我們要添加2D貼圖
uniform sampler2D u_TextureUnit;
varying vec2 v_TextureCoordinates;
void main(){
vec4 color = vec4(0.0);
int coreSize=3;
int halfSize=coreSize/2;
float texelOffset = 0.01;
//創(chuàng)建我們計(jì)算好的卷積核
float kernel[9];
kernel[6] = 1.0; kernel[7] = 2.0; kernel[8] = 1.0;
kernel[3] = 2.0; kernel[4] = 4.0; kernel[5] = 2.0;
kernel[0] = 1.0; kernel[1] = 2.0; kernel[2] = 1.0;
int index = 0;
//每一塊都進(jìn)行圖像卷積厂僧。
for(int y=0;y<coreSize;y++)
{
for(int x = 0;x<coreSize;x++)
{
vec4 currentColor = texture2D(u_TextureUnit,v_TextureCoordinates+vec2(float((-1+x))*texelOffset,float((-1+y))*texelOffset));
color += currentColor*kernel[index];
index++;
}
}
//歸一處理
color/=16.0;
gl_FragColor=color;
}
上面著色器扣草。我們是計(jì)算好了卷積核，直接在shader內(nèi)寫(xiě)死應(yīng)用的颜屠。
結(jié)果
總結(jié)
這一小節(jié)的內(nèi)容耗時(shí)比較長(zhǎng)辰妙。其實(shí)就是利用OpenGL的shader對(duì)圖像進(jìn)行簡(jiǎn)單的濾鏡處理。
從這節(jié)我們學(xué)習(xí)到
- 圖像的顏色的簡(jiǎn)單處理
- 圖像的高斯模糊汽纤。圖像卷積上岗。圖像濾波等簡(jiǎn)單的處理
下一章，會(huì)回到Android的內(nèi)容蕴坪。將OpenGl和Camera結(jié)合在一起。通過(guò)OpenGl來(lái)顯示一個(gè)預(yù)覽的畫(huà)面敬锐。
參考
系列文章地址
Android OpenGL ES(一)-開(kāi)始描繪一個(gè)平面三角形
Android OpenGL ES(二)-正交投影
Android OpenGL ES(三)-平面圖形
Android OpenGL ES(四)-為平面圖添加濾鏡
Android OpenGL ES(五)-結(jié)合相機(jī)進(jìn)行預(yù)覽/錄制及添加濾鏡
Android OpenGL ES(六) - 將輸入源換成視頻
Android OpenGL ES(七) - 生成抖音照片電影
