作者：位元組流動
來源：
https://blog.csdn.net/Kennethdroid/article/details/105208054 舊文中我們利用 OpenGL 給小姐姐實作了 瘦身、大長腿效果 以及 瘦臉大眼效果，小姐姐苦笑道：我頭都被你氣大了，怎麼辦？
怎麼辦？對于一個直男癌晚期的碼農來說，這都不是事兒。
大頭小頭效果
舊文中我們知道，利用
OpenGL 紋理映射（紋理貼圖）的基本原理，可以很輕易的實作對圖像指定的區域進行拉伸和縮放。
典型的紋理映射着色器。
//頂點着色器
#version 300 es
layout(location = 0) in vec4 a_position;
layout(location = 1) in vec2 a_texCoord;
uniform mat4 u_MVPMatrix;
out vec2 v_texCoord;
void main()
{
gl_Position = u_MVPMatrix * a_position;
v_texCoord = a_texCoord;
}
//片段着色器
#version 300 es
precision highp float;
layout(location = 0) out vec4 outColor;
in vec2 v_texCoord;
uniform sampler2D s_TextureMap;
void main() {
outColor = texture(s_TextureMap, v_texCoord);
} 舊文中，紋理映射都是發生在規則的矩形區域，如瘦身大長腿效果，而本文的大頭小頭效果實際上是對不規則的臉部區域進行縮放。
這時就不能按照規則的矩形來劃分網格，原因有兩個：（1）因為我們隻想形變發生在頭部區域，而規則的矩形網格會導緻圖像背景發生畸變；（2）通過規則的矩形網格難以控制對頭部（不規則）區域的形變程度。
為了防止背景發生嚴重的畸變，我們設計如上圖所示輻射狀的網格結構。對頭部區域進行形變就需要知道頭部區域的關鍵點，頭部區域的關鍵點可以通過 AI 算法來獲得。
這裡為了展示友善，将頭部區域的關鍵點簡化為 9 個，其中 8 個點位于頭部邊緣，一個點位于頭部中心位置。
直線
x=1
、
y=1
和紋理坐标軸連成了一個矩形，每個頭部邊緣的關鍵點和頭部中心點确定一條直線，該直線會與矩形的邊存在交點，我們用這些交點和頭部關鍵點來建構這個呈輻射狀的網格。
如上圖所示，每個頭部邊緣關鍵點和頭部中心點确定一條直線，這條直線可以用二進制一次方程來表示，它與上述矩形邊的交點，可以通過求解二進制一次方程得出。
通過關鍵點計算出交點的函數如下（inputPoint 表示頭部邊緣關鍵點，centerPoint 表示頭部中心點，DotProduct 函數表示計算兩個向量的點積）：
vec2 BigHeadSample::CalculateIntersection(vec2 inputPoint, vec2 centerPoint) {
vec2 outputPoint;
if(inputPoint.x == centerPoint.x) //直線與 y 軸平行
{
vec2 pointA(inputPoint.x, 0);
vec2 pointB(inputPoint.x, 1);
float dA = distance(inputPoint, pointA);
float dB = distance(inputPoint, pointB);
outputPoint = dA > dB ? pointB : pointA;
return outputPoint;
}
if(inputPoint.y == centerPoint.y) //直線與 x 軸平行
{
vec2 pointA(0, inputPoint.y);
vec2 pointB(1, inputPoint.y);
float dA = distance(inputPoint, pointA);
float dB = distance(inputPoint, pointB);
outputPoint = dA > dB ? pointB : pointA;
return outputPoint;
}
// y = a*x + c
float a=0, c=0;
a = (inputPoint.y - centerPoint.y) / (inputPoint.x - centerPoint.x);
c = inputPoint.y - a * inputPoint.x;
//x=0, x=1, y=0, y=1 四條線交點
//x=0
vec2 point_0(0, c);
float d0 = DotProduct((centerPoint - inputPoint),(centerPoint - point_0));
if(c >= 0 && c <= 1 && d0 > 0)
outputPoint = point_0;
//x=1
vec2 point_1(1, a + c);
float d1 = DotProduct((centerPoint - inputPoint),(centerPoint - point_1));
if((a + c) >= 0 && (a + c) <= 1 && d1 > 0)
outputPoint = point_1;
//y=0
vec2 point_2(-c / a, 0);
float d2 = DotProduct((centerPoint - inputPoint),(centerPoint - point_2));
if((-c / a) >= 0 && (-c / a) <= 1 && d2 > 0)
outputPoint = point_2;
//y=1
vec2 point_3((1-c) / a, 1);
float d3 = DotProduct((centerPoint - inputPoint),(centerPoint - point_3));
if(((1-c) / a) >= 0 && ((1-c) / a) <= 1 && d3 > 0)
outputPoint = point_3;
return outputPoint;
} 在紋理坐标系上建構好輻射狀的網格之後，需要進行坐标系變換，即将紋理坐标系轉換為渲染坐标系（螢幕坐标系），得到紋理坐标所對應的頂點坐标。
紋理将坐标系轉換為渲染坐标系（螢幕坐标系）的對應關系
（x,y）->(2*x-1, 1-2*y) 另外，控制頭部變大和變小實際上是，通過控制頭部邊緣關鍵點對應頂點坐标的相對位置來實作的，當頭部邊緣關鍵點對應的頂點坐标靠近頭部中心點時，頭部變小，遠離頭部中心點時，反之變大。
如上圖所示，頭部邊緣關鍵點對應的頂點坐标靠近頭部中心點，在計算上可以通過點與向量相加來實作。點與向量相加的幾何意義是點按照向量的方向移動一定的距離，該向量可以通過頭部中心點坐标減去邊緣關鍵點坐标得出。
移動邊緣關鍵點的函數。
//input 為邊緣關鍵點，centerPoint 為頭部中心點，level 控制移動的距離
vec2 BigHeadSample::WarpKeyPoint(vec2 input, vec2 centerPoint, float level) {
vec2 output;
vec2 direct_vec = centerPoint - input;
output = input + level * direct_vec * 0.3f;
return output;
} 更新移動後的關鍵點坐标，繪制圖像。
//設定視口
glViewport(0, 0, screenW, screenH);
m_FrameIndex ++;
//變換矩陣
UpdateMVPMatrix(m_MVPMatrix, m_AngleX, m_AngleY, (float)screenW / screenH);
//強度
float ratio = (m_FrameIndex % 100) * 1.0f / 100;
ratio = (m_FrameIndex / 100) % 2 == 1 ? (1 - ratio) : ratio;
//計算新的網格
CalculateMesh(ratio - 0.5f);
//更新頂點數組
glBindBuffer(GL_ARRAY_BUFFER, m_VboIds[0]);
glBufferSubData(GL_ARRAY_BUFFER, 0, sizeof(m_Vertices), m_Vertices);
//繪制圖像
glUseProgram (m_ProgramObj);
glBindVertexArray(m_VaoId);
glUniformMatrix4fv(m_MVPMatLoc, 1, GL_FALSE, &m_MVPMatrix[0][0]);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, m_TextureId);
glUniform1i(m_SamplerLoc, 0);
glDrawArrays(GL_TRIANGLES, 0, TRIANGLE_COUNT * 3); 頭部晃動效果
那麼如何實作頭部晃動的效果呢？答案還是控制頭部關鍵點的位置。簡而言之就是，控制頭部所有關鍵點統一按照某一圓的軌迹進行移動，我們這裡指的頭部關鍵點是在螢幕坐标系中紋理坐标所對應的點。
實作關鍵點按照某一圓的軌迹進行移動的函數（input 為頭部關鍵點，rotaryAngle 為轉動角度）。
vec2 RotaryHeadSample::RotaryKeyPoint(vec2 input, float rotaryAngle) {
return input + vec2(cos(rotaryAngle), sin(rotaryAngle)) * 0.02f; // 0.02f 表示圓的半徑
} //設定視口
glViewport(0, 0, screenW, screenH);
m_FrameIndex ++;
//變換矩陣
UpdateMVPMatrix(m_MVPMatrix, m_AngleX, m_AngleY, (float)screenW / screenH);
float ratio = (m_FrameIndex % 100) * 1.0f / 100;
//計算新的網格
CalculateMesh(static_cast<float>(ratio * 2 * MATH_PI));
//更新頂點數組
glBindBuffer(GL_ARRAY_BUFFER, m_VboIds[0]);
glBufferSubData(GL_ARRAY_BUFFER, 0, sizeof(m_Vertices), m_Vertices);
//繪制圖像
glUseProgram (m_ProgramObj);
glBindVertexArray(m_VaoId);
glUniformMatrix4fv(m_MVPMatLoc, 1, GL_FALSE, &m_MVPMatrix[0][0]);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, m_TextureId);
glUniform1i(m_SamplerLoc, 0);
glDrawArrays(GL_TRIANGLES, 0, TRIANGLE_COUNT * 3); 實作代碼
關注微信公衆号: 位元組流動，背景回複: OpenGL教程，即可擷取相關實作代碼。
「視訊雲技術」你最值得關注的音視訊技術公衆号，每周推送來自阿裡雲一線的實踐技術文章，在這裡與音視訊領域一流工程師交流切磋。