AIすっぴん隠し：パーツを保護する精密マスキングと螺旋状ブラーの極意

1. 目・鼻・口を避ける「コンテキスト・マスキング」

美肌加工において最も重要なのは「加工しない場所」を決めることです。本ツールでは、MediaPipeのFace Landmarkerから得られる詳細なメッシュ座標を利用し、肌領域のマスクを作成しています。

顔全体の輪郭を描画した後、Canvasのdestination-out（くり抜き）モードを使用して、目、口、そして「鼻の穴」といったコントラストの強いパーツをマスクから除外しています。これにより、肌は滑らかになりつつも、表情の印象を左右するパーツはくっきりと保たれるのです。

// マスク生成のロジック概要
maskCtx.fillStyle = 'black';
// 1. 顔全体の輪郭を描画
maskCtx.beginPath();
// 独自のランドマーク座標配列を使用して輪郭を繋ぐ
drawPath(maskCtx, landmarks, OVAL_INDICES);
maskCtx.fill();

// 2. 目・口・鼻の穴を「くり抜く」
maskCtx.globalCompositeOperation = 'destination-out';
HOLE_REGIONS.forEach(hole => {
    maskCtx.beginPath();
    drawPath(maskCtx, landmarks, hole);
    maskCtx.fill();
});

2. 黄金角を用いた「スパイラル・サンプリング・ブラー」

一般的なガウスぼかしやCSSフィルタではなく、あえてCanvas上での「重ね描き」によるブラーを採用しています。黄金角（約137.5度）に基づいた螺旋状に画像をオフセットさせながら複数回描画することで、単なるボケとは異なる、柔らかく均一な「美肌フィルター」特有の質感を生成しています。

また、高解像度のままこの処理を行うと負荷が高いため、内部的に20%程度のサイズに縮小したサブCanvasを利用して計算を行う「ダウンサンプリング・ハック」を組み合わせ、モバイル端末でのリアルタイム性を確保しています。

// 螺旋状サンプリングによる独自のブラー処理
const iterations = // 独自のサンプリング回数;
const maxRadius = // 強度に応じた計算値;

blurCtx.globalAlpha = 1.0 / (iterations * // 独自の減衰係数);
for (let i = 0; i < iterations; i++) {
    const angle = i * // 黄金角に基づく定数;
    const r = Math.sqrt(i / iterations) * maxRadius;
    
    // 螺旋位置にオフセットして描画
    const offX = Math.cos(angle) * r;
    const offY = Math.sin(angle) * r;
    
    blurCtx.drawImage(smallCanvas, offX, offY, w, h);
}

Developer's Note

「加工しているのに、加工していないように見える」という境界線を目指しました。こだわったのは、鼻の穴や小鼻のキワをあえてマスクから外す調整です。ここをぼかしてしまうと、顔の立体感が失われて「のっぺり」してしまいます。

また、プライバシーへの配慮として、MediaPipeのWASMモデルを完全にローカルで実行させています。ユーザーの自撮り写真を1バイトも外部に送信しないという制約の中で、いかにGPU負荷を抑えて滑らかなUIを実現するかが、エンジニアとしての最大の挑戦でした。