回顧

在前面視頻錄制篇尾(http://www.itdecent.cn/p/4f63b2436401)中有提到視頻錄制+人臉識(shí)別+貼紙的想法，而上一篇(http://www.itdecent.cn/p/6d2d4f00b43c)中也使用opengl實(shí)現(xiàn)了多種特效，在這些技術(shù)與理論基礎(chǔ)上能否實(shí)現(xiàn)市面上常見的動(dòng)態(tài)貼紙效果呢？

效果圖

先來個(gè)效果圖，這個(gè)是抓取QQ的資源包來做的：

視頻動(dòng)態(tài)貼紙?zhí)匦?gif

分析

素材解析

剛開始看到QQ的這個(gè)拍攝特效時(shí)，覺得很有意思，又正好之前就想著研究一下動(dòng)態(tài)貼紙的做法，于是在sd卡中找到QQ的文件目錄.../tencent/MobileQQ/capture_ptv_template/ptv_template_usable/video_qiuhongbaowu3_iOS/,里面有bgm、hongbao兩個(gè)目錄和params.json文件，bgm中是背景音樂mp3文件，hongbao中是80張素材圖片，params.json是規(guī)則配置文件。

至此大體能知道，其實(shí)視頻動(dòng)效是由一系列圖片連續(xù)顯示的效果。查看params.json，里面包含類型定義、顯示時(shí)間間隔、素材列表及顯示順序，同時(shí)每個(gè)素材信息還包括鏤空中心點(diǎn)、鏤空區(qū)域大小、旋轉(zhuǎn)角度等信息。顯然這個(gè)鏤空區(qū)域是用來填充人臉的，這樣人臉圖像放在底層，貼紙?jiān)谏蠈樱枰岀U空區(qū)域與人臉重合，以便看起來就像是人臉在貼紙上的效果。

原理與關(guān)鍵點(diǎn)分析

解析素材后可以看出，根據(jù)配置文件，對(duì)素材列表根據(jù)順序及時(shí)間間隔，不斷替換顯示出來，其實(shí)視頻也是這個(gè)原理?，F(xiàn)在有個(gè)問題：怎么讓素材圖片隔段時(shí)間替換一張，不斷顯示出來呢？

前面文章中的視頻錄制，就是需要設(shè)置幀率，也就是說每隔一段時(shí)間都會(huì)刷新畫面，如果我們?cè)O(shè)置filter，那么每個(gè)filter的draw就會(huì)在刷新時(shí)被調(diào)用。所以我們寫一個(gè)filter，解析配置文件得到文件列表及其他信息，這樣在draw函數(shù)中，每次根據(jù)時(shí)間來判斷當(dāng)前應(yīng)該畫哪一張圖：

...
if (this.loopStartTime == -1L) {
    this.loopStartTime = System.currentTimeMillis();
}
int currentIndex = (int) ((System.currentTimeMillis() - this.loopStartTime) / this.mSticker.frameDuration);
if (currentIndex >= this.mSticker.frameCount) {
    if (!this.mSticker.looping) {
        this.loopStartTime = -1L;
        this.lastIndex = -1;
        return;
    }
    currentIndex = 0;//新一輪中從第一張開始顯示，并重新計(jì)時(shí)
    this.loopStartTime = System.currentTimeMillis();
}
if (currentIndex < 0) {
    currentIndex = 0;
}
StaticImage image = mSticker.images.get(currentIndex);
if (this.lastIndex != currentIndex) {
    mTexture.load(image.path);//加載圖片
}
...

對(duì)于渲染圖片，在之前的demo中已經(jīng)有現(xiàn)成源碼可以使用，那如何把頭像繪制到貼紙的鏤空位置呢？

頭像摳圖

人臉識(shí)別可以借助第三方的sdk，face++、商湯等收費(fèi)的，識(shí)別效果比較好，主要是識(shí)別到的關(guān)鍵點(diǎn)比較多，或者訊飛的免費(fèi)，基本能夠滿足。
根據(jù)識(shí)別結(jié)果的頭像區(qū)域，再計(jì)算貼紙鏤空區(qū)域位置與大小，使用glsl做渲染位置計(jì)算：

precision highp float;
varying highp vec2 vCamTextureCoord;
uniform sampler2D uCamTexture;
uniform vec4 srcRect;//頭像在源畫面(畫布)中的位置
uniform vec4 dstRect;//頭像在新畫布中的位置

void main(){
    lowp vec4 c1 = texture2D(uCamTexture, vCamTextureCoord);

    //注意這個(gè)y坐標(biāo)的計(jì)算，因?yàn)槠聊蛔鴺?biāo)第的Y軸方向與紋理的Y軸方向是相反的
    lowp vec2 vCamTextureCoord2 = vec2(vCamTextureCoord.x,1.0 - vCamTextureCoord.y);
    vec2 point = vCamTextureCoord2;

    if(point.x>dstRect.r && point.x<dstRect.b && point.y>dstRect.g && point.y<dstRect.a)
    {
        //這個(gè)需要根據(jù)縮放比例來計(jì)算真實(shí)位置
        vec2 imagexy = vec2(
            (srcRect.b - srcRect.r) * (point.x - dstRect.r) / (dstRect.b - dstRect.r) + srcRect.r,
            1.0 - ((srcRect.a - srcRect.g) * (point.y - dstRect.g) / (dstRect.a - dstRect.g) + srcRect.g)
        );
        c1 = texture2D(uCamTexture, imagexy);
    }

    gl_FragColor = c1;
}

至此，我們可以這樣理解這個(gè)過程：
原始畫面 -> 摳頭像 -> 畫貼紙
即兩次渲染，得到合成的畫面，再加上時(shí)間間隔及不同貼紙的顯示，就得到上術(shù)的效果。
由于我們?cè)趽割^像后是繪制到當(dāng)前貼紙的鏤空位置，這樣無論頭像在原始畫面的什么位置，只要能識(shí)別出來，都不會(huì)影響摳圖操作及最終效果。

總結(jié)

現(xiàn)在來看，動(dòng)態(tài)貼紙從原理上其實(shí)也是很簡單的，而且組合方式很多，所以才能看到很多APP上有那么多的貼紙模版，當(dāng)然有些是有加入肢體識(shí)別的，比如QQ，這方便鵝廠坐的很好。
其實(shí)也要“感謝”那些第三方SDK的收費(fèi)，還有XXX的UOK，促使我們自己來研究這些。

吐槽一下，對(duì)于那些本來沒有基礎(chǔ)、不想花錢，而還想要達(dá)到別人的精致效果的，那就只能呵呵了。

本文相關(guān)的代碼暫時(shí)不會(huì)更新到DEMO中，其實(shí)思想比較重要。