Android OpenGL ES(四)-為平面圖添加濾鏡

上文Android OpenGL ES(三)-平面圖形的最后，我們通過渲染紋理，終于將我們的2D圖片渲染到了OpenGL中。這章，我們?cè)俳釉賲?，為我們的紋理添加單獨(dú)的濾鏡效果

上一章加載圖片的過程，在這里就不做贅述。

黑白效果

基礎(chǔ)分析

之前我們通過YUV數(shù)據(jù)格式的處理知道，只要保留Y的數(shù)據(jù)，就是灰度的圖片。但是OpenGL中處理的是RGB格式的數(shù)據(jù)，我們要如何去取得灰度圖呢？
我們可以通過公式，計(jì)算出新的RGB值，就是灰度的圖片了。

浮點(diǎn)算法：Gray=R0.3+G0.59+B*0.11

代碼實(shí)現(xiàn)

我們的目標(biāo)已經(jīng)確定。下面我們需要將片段著色器上的每個(gè)像素的RGB值，通過上面的公式計(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è)像素的色彩值)，我們可以通過計(jì)算操作,色彩值進(jìn)行調(diào)整，得到我們想要的想過，最后傳遞給gl_FragColor就就可以完成對(duì)圖片的色彩處理了。

更新代碼

按照之前的想法，我們需要將我們的公式中的系數(shù)傳遞進(jìn)入，就可以完成我們的操作了?；谥暗恼J(rèn)識(shí)，我們知道傳遞我們的屬性uniform給OpenGL的都是通過創(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é)果

灰度圖.png

冷暖色調(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í)還要確保顏色的值合法。如果超過最大，或者小于最小，就用極限值表示。

更新代碼

還是之前的套路。

  //0.添加數(shù)組
  //暖色的顏色。是加強(qiáng)R/G來完成。這里注意的是顏色值在[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)濾鏡結(jié)果.png

冷色調(diào)

藍(lán)色通道增加的結(jié)果


冷色調(diào)濾鏡.png

圖片模糊處理

圖片模糊處理相對(duì)上面的色調(diào)處理稍微復(fù)雜一點(diǎn)，通常圖片模糊處理是采集周邊多個(gè)點(diǎn)，
然后利用這些點(diǎn)的色彩和這個(gè)點(diǎn)自身的色彩進(jìn)行計(jì)算，得到一個(gè)新的色彩值作為目標(biāo)色彩。
模糊處理有很多算法，類似高斯模糊、徑向模糊等等。

高斯模糊

最常用的還是高斯模糊。先看一下高斯模糊的原理。

將正態(tài)分布（又名"高斯分布"）用于圖像處理。
本質(zhì)上，它是一種數(shù)據(jù)平滑技術(shù)（data smoothing），適用于多個(gè)場(chǎng)合，圖像處理恰好提供了一個(gè)直觀的應(yīng)用實(shí)例。

原理

使用正態(tài)分布作為權(quán)重分配模式，對(duì)周圍像素取平均值的方式，就是高斯模糊。

一維正態(tài)分布圖

在圖形上，正態(tài)分布是一種鐘形曲線，越接近中心，取值越大，越遠(yuǎn)離中心，取值越小。
計(jì)算平均值的時(shí)候，我們只需要將"中心點(diǎn)"作為原點(diǎn)，其他點(diǎn)按照其在正態(tài)曲線上的位置，分配權(quán)重，就可以得到一個(gè)加權(quán)平均值。

二維的正態(tài)分布

上面的正態(tài)分布是一維的，圖像都是二維的，所以我們需要二維的正態(tài)分布。

二維正態(tài)分布
計(jì)算公式

二維高斯函數(shù)：

二維高斯函數(shù).png

有了這個(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)重矩陣。

權(quán)重和為1的結(jié)果.png
計(jì)算高斯模糊

對(duì)所有點(diǎn)重復(fù)這個(gè)過程，就得到了高斯模糊后的圖像。如果原圖是彩色圖片，可以對(duì)RGB三個(gè)通道分別做高斯模糊。
如果一個(gè)點(diǎn)處于邊界，周邊沒有足夠的點(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)寫死應(yīng)用的。

結(jié)果
高斯模糊lena.png

總結(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é)合在一起。通過OpenGl來顯示一個(gè)預(yù)覽的畫面。

參考

系列文章地址
Android OpenGL ES(一)-開始描繪一個(gè)平面三角形
Android OpenGL ES(二)-正交投影
Android OpenGL ES(三)-平面圖形
Android OpenGL ES(四)-為平面圖添加濾鏡
Android OpenGL ES(五)-結(jié)合相機(jī)進(jìn)行預(yù)覽/錄制及添加濾鏡
Android OpenGL ES(六) - 將輸入源換成視頻
Android OpenGL ES(七) - 生成抖音照片電影

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容