Algorithm & UI/UX
AIが描く478の頂点。
3Dデスマスク生成の舞台裏
MediaPipeの顔ランドマークを画像上の座標へ変換し、点を結ぶ線と発光効果をCanvasに描きます。顔の立体モデルをファイル出力するのではなく、写真にメッシュ風の線を重ねた静止画像を作るツールです。
このツールの入力から出力まで
現行コードの確認日：
- 入力
- 人物写真を選び、メッシュの色・線幅・背景の濃さを指定します。
- 処理
- FaceLandmarkerの点を顔の接続情報に沿って結び、写真の上へ線として描きます。
- 出力
- 長辺1500px以下に縮小した画像へ線を重ね、JPEG品質0.95で保存します。
まず確認する点：点にzがあっても、保存物は2Dの画像です。3Dモデルファイルの書き出しや人物の立体形状の正確な測定とは異なります。
仕上がりの例
顔に光るメッシュを重ねた例です。
サンプルにはAIで生成した架空の人物画像を使用しています。
掲載画像はサイトにある既存の公開作例です。保存済みの資料ではAIで作成した架空の人物・手の画像を使用しています。今回の確認日が、この作例を実行した日を表すわけではありません。
保存済み検証記録の条件を見る
資料の種類は「ツールの出力画像を保存した記録」です。公開作例と保存済み記録で素材や色などが異なる場合があるため、下の数値は保存済み検証記録の条件として読んでください。
- 記録の入力画像
- 1788×2400px (JPEG)
- 記録の出力画像
- 1117×1500px (JPEG)
| 画面の項目 | 記録の値 | 現行コードの初期値・範囲 |
|---|---|---|
| 色 | #22d3ee | 初期値 #22d3ee |
| 線の太さ | 1 | 初期値 1 ／ 範囲 1〜10 |
| 元画像の表示度 (0で完全ブラック) | 100 | 初期値 100 ／ 範囲 0〜100 |
記録では「この画像で保存へ進む」から完成表示へ進んでいます。初期値と記録値を比べてから、効果を1項目ずつ変えると作用を確認しやすくなります。
資料ファイルの作成日は実行日として扱っていません。個別端末の処理速度や、ほかの写真に対する検出・加工の精度を測定した資料でもありません。
実装の確認箇所：src/pages/ai/face-lan/3d-mask/index.astro。以下のコード抜粋と出力条件は、この本番実装に基づいて説明します。
仕組みを読み進めるときは、MediaPipeの顔ランドマーク（顔の点を使う描画と変形）、Canvas APIと画像処理（画像寸法、drawImage、画素と透明度の扱い）が参考になります。
1. MediaPipeによる478点の顔ランドマーク推論
本ツールの核心は、Googleの機械学習ライブラリであるMediaPipe Face Landmarkerの採用にあります。顔のランドマーク座標とMediaPipeの接続定義を使い、目や鼻、口を含む顔上の線を描きます。このツールでの描画には各点のx・y座標を使い、奥行きのz座標は使いません。
特筆すべきは、この処理がすべてWebAssembly (WASM)を通じてクライアントのブラウザ内で完結している点です。サーバーに画像を送信しないため、選択した写真は端末内で解析します。初回のモデル読込と推論には待ち時間があり、端末のGPU対応状況によっては初期化に失敗します。
ランドマークと接続定義から線のパスを作る例です。pointsは推論結果、connectionsはstart・endを持つ接続配列、w・hはCanvas寸法です。
function meshPath(points, connections, w, h) {
const path = new Path2D();
for (const connection of connections) {
const a = points[connection.start], b = points[connection.end];
path.moveTo(a.x * w, a.y * h);
path.lineTo(b.x * w, b.y * h);
}
return path;
}2. 「多層Canvas描画」によるサイバーネオン演出
単に線を描くだけでは、サイバーパンク特有の「発光感（グロウ効果）」は生まれません。本ツールではHTML5 CanvasのglobalCompositeOperationを活用し、3段階のレイヤー描画を1枚のキャンバス上で行っています。
- ベース層： 背景を完全にブラックアウト、または元画像を透過。
- 発光層：
shadowBlurを効かせた線をscreenモードで合成し、周囲に光が漏れる演出。 - 芯レイヤー： 最前面にシャープな線を描画し、ポリゴンの構造を際立たせる。
これにより、処理負荷を抑えつつ、映画のインターフェースのような質感をリアルタイムで生成しています。
出力の仕様と確認する点
AIの検出設定は最大10人です。背景スライダーを下げると元の写真が黒い下地へなじみ、0では写真が見えなくなります。線の太さと色を変えられますが、発光の強さは固定です。
長辺1500px以下に縮小した画像へ線を重ね、JPEG品質0.95で保存します。OBJ・STLなどの3Dデータや、透明背景PNGは出力しません。
顔が見つからない場合はメッシュを描けません。横顔、遮蔽物、小さい顔では推定位置がずれることがあり、描かれた線は骨格や皮膚の正確な計測結果を示すものではありません。