AIが描く478の頂点。
3Dデスマスク生成の舞台裏

1. MediaPipeによる478点の高精度ランドマーク推論

本ツールの核心は、Googleの機械学習ライブラリであるMediaPipe Face Landmarkerの採用にあります。従来の顔認識よりも遥かに多い**478点の頂点座標**を推論することで、目の隈取りや鼻のライン、唇の厚みまでを精緻なポリゴンメッシュとして再現しています。

特筆すべきは、この処理がすべて**WebAssembly (WASM)**を通じてクライアントのブラウザ内で完結している点です。サーバーに画像を送信しないため、プライバシー保護と超低遅延なレスポンスを両立させています。

// AIエンジンの初期化（一部抽象化）
async function initFaceMeshAI() {
    const vision = await FilesetResolver.forVisionTasks("INTERNAL_WASM_PATH");
    faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
        baseOptions: {
            modelAssetPath: "FACE_LANDMARKER_MODEL",
            delegate: "GPU" // GPUアクセラレーションを使用
        },
        runningMode: "IMAGE",
        numFaces: // 同時検知可能な最大人数
    });
}

// 座標の推論実行
const results = faceLandmarker.detect(originalImgObj);

2. 「多層Canvas描画」によるサイバーネオン演出

単に線を描くだけでは、サイバーパンク特有の「発光感（グロウ効果）」は生まれません。本ツールではHTML5 CanvasのglobalCompositeOperationを活用し、**3段階のレイヤー描画**を1枚のキャンバス上で行っています。

• ベース層： 背景を完全にブラックアウト、または元画像を透過。
• 発光層： shadowBlurを効かせた線をscreenモードで合成し、周囲に光が漏れる演出。
• 芯レイヤー： 最前面にシャープな線を描画し、ポリゴンの構造を際立たせる。

これにより、処理負荷を抑えつつ、映画のインターフェースのような質感をリアルタイムで生成しています。

function renderCyberMesh(ctx, landmarks, connections) {
    const facePath = new Path2D();
    // 478点の座標をテッセレーションルールに基づき結線
    connections.forEach(conn => {
        // ここで頂点間のパスを生成する計算処理
    });

    // --- レイヤー1: 発光エフェクト ---
    ctx.save();
    ctx.globalCompositeOperation = 'screen';
    ctx.shadowBlur = // 独自のチューニング値
    ctx.strokeStyle = currentColor;
    ctx.stroke(facePath);
    ctx.restore();

    // --- レイヤー2: 芯の描画 ---
    ctx.globalCompositeOperation = 'source-over';
    ctx.lineWidth = // スライダーから取得した太さ
    ctx.stroke(facePath);
}

Developer's Note

このツールを開発する上で最も苦労したのは、**「プライバシーの確保」と「表現力の最大化」の両立**でした。顔という極めてデリケートな情報を扱うため、開発当初から「画像データは1ピクセルも外に出さない」という制約を自らに課しました。

その結果、重いAIモデルをブラウザでいかにスムーズに動かすか、Canvasでの描画負荷をどう削るかといった技術的ハードルが生まれましたが、WASMの最適化やリサイズ処理の導入により、スマホでも軽快に動作する体験を実現できました。SNSのアイコン作成からデジタルアートの素材作りまで、安心してクリエイティブを楽しんでいただければ幸いです。