AIバーチャルメイク：Canvasとブレンディングによる自然な質感の再現

1. 歯を汚さない「デュアル・パス」マスキング

単に唇の領域を塗りつぶすだけでは、口が開いている際に「歯や口内」にまで色が乗ってしまい、非常に不自然な仕上がりになります。この問題を解決するため、本ツールでは外側の輪郭（Outer Lip）と内側の輪郭（Inner Lip）の2つのパスを個別に取得し、Canvasのdestination-out（くり抜き）処理を適用しています。

さらに、マスクの境界線にわずかなblur（ぼかし）を加えることで、デジタル的な硬さを取り除き、肌とリップカラーを自然に馴染ませています。

// デュアル・パスによるマスキングのコンセプト
const mCtx = maskCanvas.getContext('2d');

// 1. 外側の唇の輪郭を塗りつぶす
mCtx.filter = `blur(${SMOOTHING_VALUE}px)`; // 独自のチューニング値
drawLipPath(mCtx, OUTER_LIP_LANDMARKS);
mCtx.fill();

// 2. 内側の輪郭（歯や口内の部分）をくり抜く
mCtx.globalCompositeOperation = 'destination-out';
mCtx.filter = `blur(${INNER_SMOOTHING_VALUE}px)`; // 独自のチューニング値
drawLipPath(mCtx, INNER_LIP_LANDMARKS);
mCtx.fill();

2. 物理ベースのグロス・ハイライトとテクスチャ保持

ベタ塗りの色は唇の「しわ」や「ツヤ」といった立体的な情報を消し去ってしまいます。本ツールでは、グロス（濡れ感）を再現するために、唇の幅に連動した「動的な扁平楕円ハイライト」を計算・生成しています。

最も重要な工夫は、リップカラーを乗せた後に、元の画像のテクスチャ（唇のしわ）をoverlay（オーバーレイ）およびhard-light（ハードライト）モードで再合成している点です。これにより、色を変えながらも唇本来のリアルな質感を維持することができます。

// 質感再現のコア・ブレンディング処理（イメージ）
cCtx.save();
cCtx.clip(); // 唇の領域でクリッピング

// 元画像のテクスチャ（しわ）をオーバーレイで重ねる
cCtx.globalCompositeOperation = 'overlay';
cCtx.globalAlpha = // 質感調整パラメータに基づく計算値
cCtx.drawImage(originalImg, 0, 0);

// ハードライトでさらにコントラストと光沢を強調
cCtx.globalCompositeOperation = 'hard-light';
cCtx.globalAlpha = // 質感調整パラメータに基づく計算値
cCtx.drawImage(originalImg, 0, 0);

cCtx.restore();

3. WASMによる完全ローカルAI処理

顔写真は極めてセンシティブな個人情報です。本ツールは、MediaPipeのAIモデルをWebAssembly (WASM) 技術を用いてブラウザ上で直接実行する構成をとっています。画像データをサーバーに一切送信することなく、クライアントサイドのGPUを活用して高速な推論を行うことで、プライバシーの保護と低遅延なUIを両立させました。

Developer's Note

開発において最も苦労したのは、グロスの「テラテラ感」の調整でした。単に白を乗せるだけでは安っぽいCGのようになってしまいます。そこで、実際のメイクの手法を参考に、唇の中央に光を集めつつ、唇の形状（法線）をシミュレートしてハイライトを横長に潰すなどの計算を行っています。

また、Canvasの描画負荷を抑えるため、オフスクリーンCanvasを活用して中間生成物をキャッシュするなど、モバイル端末でもカクつかずに調整できるようパフォーマンスにもこだわりました。ぜひ、お気に入りの色を見つけてみてください。