回顧
在前面視頻錄制篇尾(http://www.reibang.com/p/4f63b2436401)中有提到視頻錄制+人臉識(shí)別+貼紙的想法，而上一篇(http://www.reibang.com/p/6d2d4f00b43c)中也使用opengl實(shí)現(xiàn)了多種特效炕倘，在這些技術(shù)與理論基礎(chǔ)上能否實(shí)現(xiàn)市面上常見的動(dòng)態(tài)貼紙效果呢钧大？
效果圖
先來個(gè)效果圖，這個(gè)是抓取QQ的資源包來做的：
分析
素材解析
剛開始看到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è)原理∥ò溃現(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í)也是很簡(jiǎn)單的藏斩，而且組合方式很多，所以才能看到很多APP上有那么多的貼紙模版却盘，當(dāng)然有些是有加入肢體識(shí)別的狰域，比如QQ媳拴，這方便鵝廠坐的很好。
其實(shí)也要“感謝”那些第三方SDK的收費(fèi)兆览，還有XXX的UOK屈溉，促使我們自己來研究這些。
吐槽一下抬探，對(duì)于那些本來沒有基礎(chǔ)子巾、不想花錢，而還想要達(dá)到別人的精致效果的小压，那就只能呵呵了线梗。
本文相關(guān)的代碼暫時(shí)不會(huì)更新到DEMO中，其實(shí)思想比較重要怠益。
