ARマーカー作成とARでの画像表示 - Elsaの技術日記(徒然なるままに)

さて、今回はAR技術についてです。
ポケモンGoやドラクエウォークなど、ARを使ってキャラクターを現実世界に表示させるアプリがありますが、
ARってどうやって作ればいいんだろう？？🤔と思い、調べてみました。

ARマーカー作成と表示にあたりPythonでOpenCVを用いたいと思います。
Pythonのバージョンは"3.7.4"を用います。

新品価格
￥2,178から
(2020/10/10 12:51時点)

■環境構築
■ARマーカー作成
■ARマーカー読み取り
■最後に
■参考

■環境構築

OpenCVにてARマーカーの作成や読み込みを行うにあたり、
"aruco"ライブラリが用意されているとのこと！！
早速、

import cv2
aruco = cv2.aruco
~~~

を実行してみたところ、

AttributeError: module 'cv2.cv2' has no attribute 'aruco'

といったエラーが発生！！

どうやら、opencv-pythonと"opencv-contrib-python"が必要なようです！！
opencv-contrib-python入れてないや😅

ということで、

pip install opencv-contrib-python

を実行！！
インストール成功！！👍

こちらを実現したところ問題なく通った！！

import cv2
aruco = cv2.aruco
~~~

■ARマーカー作成

マーカー作成のソースコードはこちら。
ちょっと欲張って10枚のマーカー作成させ、
それらを5×5に配置して1枚の画像として出力させてみました。
※もちろんそれぞれ単体のマーカー生成も行っております。

import cv2.aruco
import numpy as np

aruco = cv2.aruco
dictionary = aruco.getPredefinedDictionary(aruco.DICT_4X4_50)
SIZE = 150
ImgList1 = []
ImgList2 = []
WiteList = []
def arGenerator():
    img_white = np.ones((SIZE,SIZE, 3),np.uint8)*255
    for i in range(1,6):
        fileName = "ar_" + str(i) + ".png"
        generator = aruco.drawMarker(dictionary, i, SIZE)
        cv2.imwrite(fileName, generator)
        ImgList1.append(cv2.imread(fileName))
        ImgList1.append(img_white)
        WiteList.append(img_white)
        WiteList.append(img_white)
        convImg1 = cv2.hconcat(ImgList1)
        convWhite = cv2.hconcat(WiteList)
    for i in range(6,11):
        fileName = "ar_" + str(i) + ".png"
        generator = aruco.drawMarker(dictionary, i, SIZE)
        cv2.imwrite(fileName, generator)
        ImgList2.append(cv2.imread(fileName))
        ImgList2.append(img_white)
        convImg2 = cv2.hconcat(ImgList2)
    TestList = [convImg1, convWhite, convImg2]
    convImg3 = cv2.vconcat(TestList)
    cv2.imshow('ArMarker1',convImg3)
    cv2.imwrite("Result.jpg", convImg3)
    cv2.waitKey(0)

arGenerator()

こちらでARマーカーの形状や形式？？を定義。

dictionary = aruco.getPredefinedDictionary(aruco.DICT_4X4_50)

そして、実際にARマーカーを生成している箇所はこちら。

generator = aruco.drawMarker(dictionary, i, SIZE)

後はimwriteでpng画像にした後にそれらの情報をリスト化して5×5に置き換えているのみなので割愛しますが、

cv2.hconcat()

が渡されたリスト情報を元に1枚ずつ横に画像を並べ、

cv2.vconcat()

が縦に画像を並べます。

生成されるARマーカーはこんな感じになります。
f:id:Elsammit:20201010121255j:plain

■ARマーカー読み取り

ARマーカーを読み取り、ARマーカー上に画像を表示するコードはこちら。

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import cv2

aruco = cv2.aruco #arucoライブラリ
dictionary = aruco.getPredefinedDictionary(aruco.DICT_4X4_50)

img1 = cv2.imread("makewani.png")
img2 = cv2.imread("hamstar.png")
img3 = cv2.imread("mogura.png")

def ConvImg(corners, i, img, convimg):
    x=int(corners[i][0][0][0])
    y=int(corners[i][0][0][1])
    w=int(corners[i][0][2][0]) - int(corners[i][0][0][0])
    h=int(corners[i][0][2][1]) - int(corners[i][0][0][1])
    if w > 0 and h > 0:
        convimg = cv2.resize(convimg,(w,h))
        img[y:y+h,x:x+w] = convimg
    return img

def arReader():
    cap = cv2.VideoCapture(0) #ビデオキャプチャの開始
    while True:
        ret, frame = cap.read() #ビデオキャプチャから画像を取得

        Height, Width = frame.shape[:2] #sizeを取得
        img = cv2.resize(frame,(int(Width),int(Height)))

        corners, ids, rejectedImgPoints = aruco.detectMarkers(img, dictionary) #マーカを検出
        aruco.drawDetectedMarkers(img, corners, ids, (0,255,0)) #検出したマーカに描画する

        try:
            if corners != []:
                for i in range(len(ids)):
                    if ids[i] == 10:
                        img = ConvImg(corners, i, img, img1)

                    if ids[i] == 5:
                        img = ConvImg(corners, i, img, img2)
                    if ids[i] == 3:
                        img = ConvImg(corners, i, img, img3)

            cv2.imshow('drawDetectedMarkers', img) #マーカが描画された画像を表示

            cv2.waitKey(1) #キーボード入力の受付
        except:
            print("error")

    cap.release() #ビデオキャプチャのメモリ解放
    cv2.destroyAllWindows() #すべてのウィンドウを閉じる


arReader()

処理としては大きく分けて、
　・ARマーカー読み取り
　・読み取ったARマーカー上に画像を表示
の2つです。

まず、ARマーカー読み取り
まずはいつもの。

ret, frame = cap.read() #ビデオキャプチャから画像を取得

Height, Width = frame.shape[:2] #sizeを取得
img = cv2.resize(frame,(int(Width),int(Height)))

カメラからキャプチャ画像を取得。

そして取得したキャプチャ画像に対して、

corners, ids, rejectedImgPoints = aruco.detectMarkers(img, dictionary) #マーカを検出

によりARマーカを読み取り。
返り値ですが、
・corners：マーカーの4角の座標情報
・ids：登録されているid値
となります。
デバッグも兼ねて、

aruco.drawDetectedMarkers(img, corners, ids, (0,255,0)) #検出したマーカに描画する

を入れております。
こちらは、読み取ったARマーカーの領域やid値をキャプチャ画像に重ね合わせる処理を行っております。

次にARマーカー上に画像重ね合わせです。

def ConvImg(corners, i, img, convimg):
    x=int(corners[i][0][0][0])
    y=int(corners[i][0][0][1])
    w=int(corners[i][0][2][0]) - int(corners[i][0][0][0])
    h=int(corners[i][0][2][1]) - int(corners[i][0][0][1])
    if w > 0 and h > 0:
        convimg = cv2.resize(convimg,(w,h))
        img[y:y+h,x:x+w] = convimg
    return img

にて重ね合わせ処理を実行しております。

cornersですが、4次元配列で情報が保存されております。
1次元目にARマーカーの各角x座標、y座標が格納。
2次元目にARマーカーの各角番号が格納されています。
角番号の割り振りですが、時計回りに0～3で格納されております。
そして、4次元目に読み取ったマーカー番号が格納されています。

と言っても文字だけだとわかりにくいので図で表すとこんな感じです。
f:id:Elsammit:20201010123602p:plain