怎麼實現女神想要的大眼瘦臉效果?程式設計師追女神有一招事半功倍!

yilian發表於2020-03-19
怎麼實現女神想要的大眼瘦臉效果?程式設計師追女神有一招事半功倍!

俗話說,亞洲四大邪術,中國的PS術佔大片江山,既不要傷筋動骨,也不要出錢出力,只需要一個軟體,輕鬆搞定!

程式設計師追女神,實現女神想要的要的大眼瘦臉效果,那不是給自己增加了機會!

想要滿足自己女神要求的程式設計師們,我們往下看:

實現瘦臉大眼效果,其本質上都是對影像中某些區域的畫素按照我們設定的規則進行移動,而 OpenGL 的片段著色器天然適合處理畫素(紋素)層面的操作。。

OpenGL 實現大眼效果

怎麼實現女神想要的大眼瘦臉效果?程式設計師追女神有一招事半功倍!

為了更好的展示大眼效果,動圖中形變引數設定較大,所以看起來比較誇張。

OpenGL 實現大眼效果,可以參照放大鏡的實現原理,即將紋理上一塊區域取樣後對映到一塊相對較大的區域。

本文所實現的大眼效果進行了簡化,是在以人眼為中心的圓形區域內進行放大,距離圓心越遠,放大的強度越大。

怎麼實現女神想要的大眼瘦臉效果?程式設計師追女神有一招事半功倍!

如上圖所示,圓內部為發生形變(放大)的區域,紅點為不發生形變時的取樣點(原始紋理座標),綠點為發生形變時對應的取樣點(紋理座標發生偏移)。

實現眼睛放大效果的著色器指令碼(程式碼中指定了圖片人眼中心座標和人眼半徑):

  #version 300 es
  precision highp float;
  layout(location = 0) out vec4 outColor;
  uniform sampler2D s_TextureMap;
  in vec2 v_texCoord;
  uniform highp vec2 u_LeftEyeCenterPos;// 左眼中心點
  uniform highp vec2 u_RightEyeCenterPos;// 右眼中心點
  uniform highp float u_ScaleRatio;//放大係數
  uniform highp float u_Radius;// 影響半徑
  uniform vec2 u_ImgSize;//圖片解析度
  vec2 warpEyes(vec2 centerPos, vec2 curPos, float radius, float scaleRatio)
  {
      vec2 result = curPos;
      vec2 imgCurPos = curPos * u_ImgSize;      float d = distance(imgCurPos, centerPos);      if (d < radius)
      {          float gamma = 1.0 - scaleRatio * pow(smoothstep(0.0, 1.0, d / radius) - 1.0, 2.0);
          result = centerPos + gamma * (imgCurPos - centerPos);
          result = result / u_ImgSize;
      }      return result;
  }  void main()
  {
      vec2 newTexCoord = warpEyes(u_LeftEyeCenterPos, v_texCoord, u_Radius, u_ScaleRatio);
      newTexCoord = warpEyes(u_RightEyeCenterPos, newTexCoord, u_Radius, u_ScaleRatio);
      outColor = texture(s_TextureMap, newTexCoord);
  }

OpenGL 實現瘦臉效果

怎麼實現女神想要的大眼瘦臉效果?程式設計師追女神有一招事半功倍!

瘦臉效果的實現,是將指定區域內的畫素按照一定的規則進行整體偏移,從而形成一種對臉部擠壓的效果。

怎麼實現女神想要的大眼瘦臉效果?程式設計師追女神有一招事半功倍!

如上圖所示,BC表示偏移方向和偏移程度的向量,將圓內的所有畫素按照向量BC的方向進行一定程度的偏移,畫素偏移的強度,和畫素與圓心的距離相關,越靠近圓心強度越大。

怎麼實現女神想要的大眼瘦臉效果?程式設計師追女神有一招事半功倍!

為了簡化計算流程,只做原理性展示,我們選取 了3 個人臉部位的關鍵點(如上圖,左右太陽穴和下巴),再由關鍵點計算出來控制點(太陽穴和下巴的連線的中心點),控制點組成上述的 BC 向量。當然你若想快速驗證瘦臉效果,可以直接手動指定。

瘦臉效果的著色器指令碼:

  #version 300 es
  precision highp float;
  layout(location = 0) out vec4 outColor;
  in vec2 v_texCoord;
  uniform sampler2D s_TextureMap;
  uniform vec2 u_texSize;//影像解析度
  uniform vec4 u_preCtrlPoints;//pre控制點
  uniform vec4 u_curCtrlPoints;//cur控制點
  uniform float u_reshapeRadius;//影響半徑
  uniform float u_reshapeRatio;//強度
  vec2 face_slender_1(vec2 prePoint, vec2 curPoint, vec2 texCoord, float radius, vec2 texSize)
  {
      vec2 pos = texCoord;
      vec2 newSrc = prePoint * texSize;
      vec2 newDst = curPoint * texSize;
      vec2 newTex = texCoord * texSize;      float newRadius = radius;      float r = distance(newSrc, newTex);      if (r < newRadius)
      {          float alpha = 1.0 -  r / newRadius;
          vec2 displacementVec = (newDst - newSrc) * pow(alpha, 2.0) * 0.002 * u_reshapeRatio;
          pos = (newTex - displacementVec) / texSize;
      }      return pos;
  }  void main() {
      vec2 leftPreCtrl = u_preCtrlPoints.xy;
      vec2 rightPreCtrl = u_preCtrlPoints.zw;
      vec2 leftCurCtrl = u_curCtrlPoints.xy;
      vec2 rightCurCtrl = u_curCtrlPoints.zw;
      vec2 newTexCoord = face_slender_1(leftPreCtrl, leftCurCtrl, v_texCoord, u_reshapeRadius, u_texSize);
      newTexCoord = face_slender_1(rightPreCtrl, rightCurCtrl, newTexCoord, u_reshapeRadius, u_texSize);
      outColor = texture(s_TextureMap, newTexCoord);
  }

最後

附上我的Android核心技術學習大綱,獲取更多內容來我的GitHub一起玩耍:

怎麼實現女神想要的大眼瘦臉效果?程式設計師追女神有一招事半功倍!


最近不是面試季嘛,再給大家一個福利: 【2017-2019位元組跳動面試真題解析&簡歷製作PDF模板】

針對位元組跳動的面試題整理的,進行了分類,循序漸進,由基礎到深入,由易到簡。

將內容整理成了五個章節、計算機基礎面試題、資料結構和演算法面試題、Java面試題、Android面試題、其他擴充套件面試題、非技術面試題總共五個章節354頁。

怎麼實現女神想要的大眼瘦臉效果?程式設計師追女神有一招事半功倍!

每個問題都附上1個標準參考答案,都是反覆摸索消化(真心花了很多時間),覺得寫的比較好的文章作為答案。

來節省大家自己去搜尋的時間,把時間用在正確的東西上。。

還整理了全套簡歷製作、春招困惑、HR面試等問題解析參考建議,都是福利分享給大家。

怎麼實現女神想要的大眼瘦臉效果?程式設計師追女神有一招事半功倍!
【2017-2019位元組跳動面試真題解析&簡歷製作PDF模板】領取可以關注我,看個人介紹哦~


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69952849/viewspace-2681513/,如需轉載,請註明出處,否則將追究法律責任。

相關文章