射影変換して矩形抽出するお話(仮) - CCCMKホールディングス TECH LABの Tech Blog

こんにちは！データベースマーケティング研究所の萩原です。

みんなでワイワイビリヤード中、狙いたい玉が隠れて困ってしまうことよくありますよね？上手く当てたいけどどこに撞いていいかわからない、こんな時に狙う場所を教えてくれるアプリがあったらなあ。

画像を加工して玉の配置を取得しよう！

どんなAIも玉の配置も見ずに最適解を出すのは難しいです。しかし一般のビリヤード場で真上から撮影することは難しいので、うまいこと画像を処理する必要があります。

そこで今回は斜めから撮影した写真を真上から撮影した風な画像に変換するアプリ・デバイスを作りたいと思います。

Jetson Nano

ちっちゃいけどGPUも積んでるすごいやつ。今回はこいつでビリヤード場で簡単に撮影→変換ができるようにしてみたいです。

~~しかしこいつが使われることはなかった・・・~~

モダン AI のパワーを数百万のデバイスへ - NVIDIA Jetson Nano

実装したいもの(理想)

すぎゃーんさん(twitter:@sugyan)が矩形変換のアプリを作っていました。斜めから撮影された将棋盤を真上から撮影した風に変換しています。

OpenCVでの実装のようです。とてもサクサクしていて素敵ですね。

完成形のイメージには非常に近いです。

memo.sugyan.com

実装したもの(現実)

開発

TypeScript (3.5.3)
html5

せっかくなのでこの機会にTypeScriptに入門したいと思ったので、一般的な四角形から矩形への射影変換をTypeScriptで実装することにしました。愚直に書いたのでGPUを使えず3FPSくらいが限度になりそうかなーと思いつつ実装。式はこの辺りを参考にしました。

http://kondolab.org/archive/2010/research/cadcgtext/ChapE/ChapE02.html

ソースコードの全文はGithubに置いてあります。以下は変換後座標が変換前の座標のどこに対応するかを返す関数の実装です。本実装では矩形側のcanvasに1ピクセルごとに以下の関数を呼び出して元画像のピクセルをコピーしています。

function createProjection(
    tl: Point, //左上の座標
    tr: Point, //右上
    bl: Point, //左下
    br: Point, //右下
): (x: Point) => Point {
    // 射影変換の係数を求める
    const x2 = tr.x - tl.x;
    const y2 = tr.y - tl.y;
    const x3 = br.x - tl.x;
    const y3 = br.y - tl.y;
    const x4 = bl.x - tl.x;
    const y4 = bl.y - tl.y;

    const delta123 = x2 * y3 - x3 * y2;
    const delta124 = x2 * y4 - x4 * y2;
    const delta134 = x3 * y4 - x4 * y3;
    const delta1234 = delta123 + delta134;
    const delta234 = delta1234 - delta124;

    const a1 = delta134 * x2;
    const b1 = delta123 * x4;
    const a2 = delta134 * y2;
    const b2 = delta123 * y4;
    const a0 = delta134 - delta234;
    const b0 = delta123 - delta234;
    const c0 = delta234;
    return (p: Point) => new Point(
        (a1 * p.x + b1 * p.y) / (a0 * p.x + b0 * p.y + c0) + tl.x,
        (a2 * p.x + b2 * p.y) / (a0 * p.x + b0 * p.y + c0) + tl.y
    );
}