一、簡介
MediaPipe應用教學終於來到單元(三)啦！若您是從單元(一)一路看過來的人，應該對於虛擬環境操作與開啟Python程式不那麼陌生。若是您還沒看過前兩個單元，建議先去補看再來進行這個單元，前兩個單元會教您建置虛擬環境與開啟第一個Python程式，從單元(三)開始我們將不再著重於這些基礎細節，而是著重在於功能如何實現。
MediaPipe Face Mesh是一種能將人臉劃分成許多區域的算法，可在臉上標註468個3D標註點。主要使用機器學習(Machine Learning)來運算3D表面的幾何形狀，無需使用深度相機，只要簡單的WebCam即可實現。
二、基礎程式碼下載與執行
1. 首先透過下列連結，進到程式碼所在的頁面。
2. 接著複製網頁上的程式碼至自己的程式編輯器。
3. 透過程式編輯器替程式碼命名並存檔。
4. 啟動虛擬環境並開啟剛剛儲存的Python程式，即可看到結果。
人臉總共被標註了468個座標點，可以看到我們的人臉輪廓被圈起來，被重點標註的還有眉毛的上下緣、眼睛的輪廓、與嘴唇的形狀。試著轉轉頭、動動眉毛、說點話，可以看到標註的線條隨著我們動作而跟著改變。
三、程式碼簡閱
剛剛執行的人臉標註與繪製功能都是透過程式碼所實現的，讓我們簡單的來看一下，程式碼做了些什麼吧！
1. 匯入檔案
首先匯入我們需要的功能，影像處理套件「cv2(OpenCV)」與我們的主角「mediapipe」，並在程式碼裡將它簡稱為「mp」。
接著取出「mediapipe」功能百寶袋「solutions」裡面的「繪圖/標註方法」與「人臉標註網格方法」。並將這些方法賦予新的名稱備用。
2. 設定標註顏色與設定攝影機
因為標註的點很多，將標註點與標註線的顏色分開會比較好觀察，所以我們使用繪圖/標註方法「mp_drawing」底下的「DrawingSpec」方法來設定顏色，「drawing_spec1」是用來設定標註點的顏色、圈線寬度與標註點的半徑，預設是2像素點，我們不希望這麼大。
「drawing_spec2」是用來設定標註線的顏色，為了使勾線清楚，這邊的線寬採用預設值。
最後透過程式設定攝影機。
3. 啟動標註網格功能並開啟攝影機
啟動功能時順便設定「min_detection_confidence=0.5」，這是設定檢測人臉時的準確程度，只要符合程度達到50%即算人臉。「min_tracking_confidence=0.5」則是設定抓到的影像符合人臉程度，這會影響算法是否重新啟動人臉檢測功能，只要符合程度達到50%即忽略人臉檢測功能。
一切設定完成後會開啟攝影機，並檢測是否開啟成功。
4. 轉換影像並開始檢測
因為檢測算法輸入影像的顏色格式順序需要RGB，而透過OpenCV讀取的影像顏色順序為BGR，所以需要透過程式做轉換，才能將轉換後的影像丟到檢測算法裡取得結果。
5. 將檢測結果標註於影像上
透過「mp_drawing.draw_landmarks」，我們能將結果標註在影像上，填入要標註的影像、每個結果點、標註方法。依照對應的是繪製標註點還是標註線，填入一開始設定的顏色「drawing_spec1」與「drawing_spec2」。
6. 顯示影像與設定關閉條件
透過「cv2.imshow」將標註好的影像顯示出來，並設定按下鍵盤上的「ESC」按鍵就釋放攝影機與關閉視窗。
7. 小結
您會發現整個流程與上一個單元的一樣，沒錯！影像處理流程其實都是一樣的，第一步載入會用到的功能，接著重複取得影像＞檢測＞標註檢測結果＞顯示。過程中也可以依照檢測的結果，加入一些我們想要實現的功能。
四、人臉網格點座標
在MediaPipe專案裡面，可以找到人臉網格標註的圖片，如下圖所示：
圖片大小為4096 x 4096，局部放大後，可以觀察到圖片上針對每個點有標上編號，這個編號為每個標註點的名稱，我們可以透過在程式中輸入編號，抓取圖片上對應的位子座標，進而做一些控制或是加上圖片的功能。
五、進階應用
我們已經成功的使用了Face Mesh的功能，接著該是加入一些想法的時候了，透過剛剛網格點的說明，我們可以從檢測的影像中取得我們想要的點座標。也就是說，我們可以輕易取得眼睛的座標、嘴巴的座標、鼻子的座標……等。
何不加上一些圖案到自己的臉上呢？我們可以準備一些圖案，並將它貼在指定的位子，就像AR的效果。
接下來我們將透過程式改變我們眼睛的造型，準備一張自己喜歡的眼球圖案，或是自己畫一個，請讓圓邊貼齊圖片邊緣，減少多餘背景，如下圖所示：
六、進階程式碼下載與執行
1. 首先透過下列連結，進到程式碼所在的頁面。
2. 接著一樣複製網頁上的程式碼至自己的程式編輯器。
3. 透過程式編輯器替程式碼命名並存檔。
4. 使用虛擬環境開啟Python程式後，程式運作正常的情況下～您左邊的眼睛應該會跟小編的一樣，如下圖所示：
若是要換上自己的圖片，可將圖片與程式碼放在同一個路徑下，並於程式中更改為您圖片的檔名，位子如下圖所示：
七、進階程式碼檢閱
到底是怎麼把圖案貼到眼睛上的呢？除了知道座標之外，還需要注意什麼呢？讓小編來跟您解釋解釋，因為刪除了一些沒有必要顯示的項目，所以從頭開始講解。
1. 匯入檔案
進階程式多匯入了與數學運算相關的套件，分別是「numpy」、「statistics」與「math」。
2. 匯入功能並建立左眼編號清單
取出「mediapipe」功能百寶袋「solutions」裡面的「繪圖/標註方法」與「人臉標註網格方法」。並將這些方法賦予新的名稱備用。
依照MediaPipe提供的「人臉網格標註圖」查找左眼周圍的點編號，並建立清單。
3. 設定連接攝影機與讀取眼睛圖片
若是要換上自己的圖片，可將圖片與程式碼放在同一個路徑下，並於程式中更改為您圖片的檔名。
4. 啟動標註網格功能並開啟攝影機
與基礎程式一樣，啟動檢測網格功能並設定各檢測率，一切設定完成後會開啟攝影機，並檢測是否開啟成功。
5. 轉換影像並開始檢測
除了透過程式做BGR到RGB的轉換，並將轉換後的影像丟到檢測算法裡取得結果之外，為了後續運算，我們也必須取得圖片的長、寬。
6. 取得影像中左眼的高度與每個點座標
透過「for迴圈」將我們設定好的左眼各點清單「eye_list」，與檢測後的影像資料對照，找出對應座標(x, y)並存入「eye_point」備用。
在抓取各點的過程中，特別針對編號153、159兩個點的座標透過運算求出距離，作為我們眼睛的大小並存放在「eye_size」。
7. 取得左眼中心座標並將圖片轉換適合眼睛大小後貼上
將取得的各點座標清單「eye_point」透過「statistics」計算出眼睛中心座標，並依照「eye_size」將自訂的眼睛圖片轉換成符合的大小。
透過下圖中程式的第61行至68行，這一系列的圖形裁切與轉換，可得到圖片無縫合在影像上的效果。
8. 顯示影像與設定關閉條件
最後透過「cv2.imshow」將合成好的影像顯示出來，並設定按下鍵盤上的「ESC」按鍵就釋放攝影機與關閉視窗。
八、結語
這一個單元教大家使用MediaPipe Face Mesh的功能，也學習如何將抓取的圖片合成到某個座標上。文章中示範的是眼睛，當然您也可以發揮創意，繪製一個可愛的雪寶胡蘿蔔鼻子、豬鼻子，將它放在鼻子的座標上，或是幫自己設計一個帽子或妖精耳朵。就由您自己發揮創意啦，我們下個單元見！
