読者です 読者をやめる 読者になる 読者になる

catalinaの備忘録

ソフトウェアやハードウェアの備忘録。後で逆引きできるように。

DirectXのHLSLシェーダーをデバッグする

DirectXデバッグが捗る便利な機能があるのを知りました。かたりぃなです。

その名も「VisualStudio Graphics Analyzer」。

VisualとGraphicって似たような意味だと思ってしまう私は英語が苦手です。

環境

公式ドキュメント https://msdn.microsoft.com/ja-jp/library/hh873197.aspx

DirectXグラフィクスデバッガでできること

DirectXグラフィクスデバッガを使って次のことができました

これはデバッグが捗りますね。

DirectXグラフィックスデバッガを起動する

VisualStudio2015communityでは次の手順で起動できました

画面上部のメニューから、デバッグ->グラフィックス->グラフィックスデバッグの開始の順に選択。

メニューから操作はこんな感じです。 f:id:Catalina1344:20170526214208p:plain

キーボードショートカットは手元の環境ではAlt+F5でした。(古いVisualStudioのキーバインドにしているので、ほかの環境だと違うかもしれません。)

無事起動すると、上記スクリーンショットでメニューの後ろに見えているタブが開きます。

Graphics Analyzerを起動する

新しく開いたタブの画面下部のカメラアイコン「フレームのキャプチャ」をクリックすると、フレームがキャプチャできます。 キャプチャしたフレーム画像をダブルクリックすると、以下のような画面が起動します。

f:id:Catalina1344:20170526214523p:plain

DirectXに慣れてる人であれば、あとはもう直観で使えそうな見た目ですね。

レンダリングの命令が期待通りに呼び出されていることを確認する

まず画面左の「イベント一覧」ペインは名前のまんまですが、わかりやすくいうと 「C++から呼び出した関数のうち、GPUに設定が行われたもの」と考えておけばよさそうです。 DrawIndexedInstancedとかUpdateSubresourceとか並んでいますね。 まずはここで期待した命令が順序通りに呼び出されているか確認できます。 たとえば、

  • テクスチャの更新(UpdateSubresource)の呼び出しを確認
  • 行列の設定(UpdateSubresource)の呼び出しを確認
  • レンダリング処理(DrawIndexedInstanced)の呼び出しを確認

などがあります。 スクリーンショットの時点でジオメトリ情報がおかしそうという推測はできるので、さらに詳細を見るために次のステップに進みます

レンダリングパイプラインを確認する

先の画面でDrawIndexedInstancedの関数をクリック選択すると、レンダリングパイプラインが表示されます。 どうやら、このレンダリング命令で実行されたパイプラインのようです。

f:id:Catalina1344:20170526214245p:plain

パイプラインの各シェーダーオブジェクトをクリックすると、入出力パラメータが表示されます。 実行されなかったパイプラインステージは「ステージが実行されませんでした。(理由)」と表示されるのでわかりやすいです。 パイプラインステージの実行をデバッガで追いたいときは、右矢印ボタンを押すとデバッガが起動します。 デバッガはVisualStudioでC++デバッグするのと同じように操作できました。

レンダリングに関連するオブジェクトを確認する

GPUに転送したデータが期待したものかどうか確認したいことって多々あります。 頂点バッファ、インデックスバッファ、テクスチャ…。 Graphic Analyzerではこれも確認できました。 先ほど開いたパイプラインステージの表示で、左に「オブジェクトテーブル」があります。これに切り替えると、こんな画面になりました。

f:id:Catalina1344:20170526214551p:plain

GPU側へ設定したものが一通り載ってますね。便利。

ここまでの手順で、入力アセンブラの段階で頂点データがおかしそうというのが見えているので、頂点バッファとインデックスバッファを確認してみたいところです。

とりあえずBlendStateとか今は関係ないので、バッファだけ表示させます。

f:id:Catalina1344:20170526214800p:plain

これでバッファだけ表示されます。C++からみた変数名では引けないのでC++側から識別する情報を見ます。 C++のデバッガで確認してサイズを照らし合わせて、どっちのバッファが何を表しているかを確認しました。

この図でサイズの大きいほうが頂点バッファ、小さいほうはインデックスバッファのようです。

頂点バッファの中身を確認する

頂点バッファの中身も見れます。

先の手順で表示されたオブジェクトテーブルの中から、見たいバッファをダブルクリックするとバイナリで表示してくれます。

この頂点バッファビューはデフォルトでは16bit幅区切りの16進数表示です。 インデックスバッファは整数値だからこれでいいでしょうけれども、今見たいのは頂点バッファなので浮動小数点数です。 浮動小数点数を16進数でさらっと読めるほど私は訓練されていないので、もうちょっと見やすくします。 「形式」のところに型を指定するっぽいのでfloat3と入力してみました。

f:id:Catalina1344:20170526215159p:plain

すごく読みやすくなりました。 型がわからないときはドロップダウンにプリセットがあるので、適当に選択してそれっぽい型を選べばよさそうです。

感想

デバッガを使って確認すると作業早く進むのでいいですね。

今回悩んでいたバグの原因は頂点バッファの入力が正しくGPUに渡っていないようです。

今やっているのは複数個のモデルを表示するところなので、そのあたりの関連が怪しいですね。

ありがとうMicrosoftデバッグが捗ります。

HoloLensからHTTPでChainerの画像分類器を叩く

HTTP接続までは簡単にできたので、一気にHoloLensとの連携までやってみました。かたりぃなです。

色々ためした結果

HTTPサーバまでできた時点で「あとはもう簡単だろう」と思っていたら、想像以上に手こずりました。

一言で結論だけ書くと「英語カードだけで学習したDeepLearningの分類機では日本語カードを分類できなかった」です。 ちょっと工夫が必要そうですね。

少しだけ詳細

HoloLensのカメラ映像からカード部分を抽出し、Chainerの分類器に入力する直前でファイルに保存するとこんなやつでした。 テストに使ったのは適当に箱から引っ張り出してきたカードです。

f:id:Catalina1344:20170507004424p:plain

誤って分類したラベルのカードイラストはこんな感じです。

f:id:Catalina1344:20170507004728p:plain

うん、なんか似てる気がする。(似てない)

DeepLearningの識別器はまだまだ改善の余地ありですね。

ただそれでも連休中に「私がやりたいこと」のうち「今まで一度もやったことないもの」の技術要素は詰め込み終わったので、あとは時間が空いたときにチマチマと進められると思います。

以下、やってみたことの詳細です。(長文です)

PythonでHTTPサーバを立ち上げる

今回はシンプルなHTTPサーバとしてbottleを使うことにしました。

現時点では小難しいことをするつもりはないので、こういう単純な仕組みで充分です。 bottleは非常にシンプルにできていてREST-APIを軽く作って試すだけなら数時間でできました。

bottleをインストールする

pipで一発です。ファイルは一個だけなのでわざわざインストールしなくてもいい気はします。

pip install bottle

bottleを使ってリクエストを処理するサーバを書く

from bottle import route, run
from bottle import get, post, put, request

@route('/hello')
def hello():
    return "Hello World!"

def main():
    run(host='localhost', port=8080, debug=True, reloader=True)

if __name__ == '__main__':
    main()

これでブラウザでlocalhostの8080番ポートの/helloにアクセスするとHelloWorldが表示されます。

HoloLensからアクセスするとき(localhost以外からアクセスする)はrunのhost=のパラメータを"0.0.0.0"とかにしておくとよさげです。

立ち上がらない

うちのマシンだと、なぜかlocalhost:8080をlistenできませんでした。 どこかで見覚えのある番号だなーと思って調べてみると、Jenkins氏が使っていました。 上記pythonのコード中のポート番号を変えて対応しました。

あと、アンチウイルス系のソフトに付随するファイアウォール系のソフトが動いているとリモートからアクセスできないなんてことがあるので、必要に応じて設定を変えておきます。

PUTメソッドを実装する

すごく簡単でした。以下の行を書き加えるだけです

@put('/resource')
def put_resource():
    # リクエストのボディをとる
    data = request.body.read()
    return ("ok, %d" % len(data) )

これが"localhost:8080/resource"に対するPUTのハンドラになります。 識別結果を"ok,ファイルサイズ"の形でとりあえず返して目視確認します。

今回は画像データをPUTしたいので、power shellから適当な画像ファイルを投げ込んでみます。まずは学習に使ったデータファイルを投げます。

Windows上からPowershellでファイルをPUTするには、-Method PUTと-InFileオプションで指定します。

> Invoke-RestMethod -Uri "http://localhost:8081/resource" -Method PUT -InFile 1
85\185_1.png
ok, 89197

すんなりいきました。 このままchainerの分類器をくっつけてみることにします。

PUTで受けたpngファイルをdecodeして画像分類器にかける

前回のエントリ(http://catalina1344.hatenablog.jp/entry/2017/05/04/171318)でやったことをくっつけます。

import training         # 自前の学習器
import chainer.serializers
import chainer.functions as F
import argparse
import numpy as np
from PIL import Image

# HTTPアクセス用
from bottle import route, run
from bottle import get, post, put, request
from io import BytesIO

@put('/resource')
def put_resource():
    # リクエストのボディをとる
    data = request.body.read()

    # リクエストのボディに記述されている画像データをデコードする
    output = BytesIO(data)
    image = Image.open( output )

    # NNへ入力可能な形式に変換する
    pixels = np.asarray(image).astype(np.float32)
    pixels = pixels.transpose(2, 0, 1)
    pixels = pixels.reshape((1,) + pixels.shape)

    # 学習済みモデルを利用する準備
    model = training.MLP()
    chainer.serializers.load_npz('result/best-model.npz', model)

    # 識別
    y = model(pixels)
    prediction = F.softmax(y)
    m = np.argmax(prediction.data)
    return ("ok,%d" % m)

ポイントはhttp-PUTで取得したボディのデコードです。 PUTのbodyに載っているデータは先のPowerShellのアクセス方法ではPNGエンコードされたフォーマットです。 なので、オンメモリ上のPNGファイルイメージをデコードする必要があります。

オンメモリ上のPNGファイルイメージはそのままではPIL.Image.openに渡すことができません。 オンメモリ上のバイト列をio表現にしてあげてからImage.openに渡す必要があるみたいです。

io表現はPython3からはio.BytesIOを使うようで、これはio.StringIO(文字列)と違ってエンコード・デコードが行われない生のバイト列を表現するものです。

fromarrayとか使えないか試しましたが、これはデコードされたピクセルデータのバイト列を渡すためのものでした。

で、つまるところio.BytesIOで表現されたバイト列をPIL.Image.openに渡せばデコードしてくれるというわけですね。

あとは前回やったようにchainerのNNの入力形式に合わせてあげて、NNに突っ込んで結果を取り出すだけです。

結果は"ok,分類ラベル"の形で返されます。

HoloLensからPUTする

まずHoloLensからPUTするための画像を作る必要があります。 カメラ映像をそのまま送るのは負荷的に優しくないので、必要部分だけ切り取ります。

そのままコードに落としこむ(重すぎて使えない)

ダメでした。色変換とパースペクティブ変換が重すぎます。 映像中から一枚のMTGのカードを抽出するのに1~2秒かかります。

まず色変換で盛大に詰まったので、やったことだけをメモします。

  • NV12=YUV420Pだと思っていたけど、チョット違うらしい
  • OpenCVのMatで異なる大きさを持つ次元の取り扱いがわからない

まずNV12はMS曰く、4:2:0-Planer形式だそうです。 https://msdn.microsoft.com/ja-jp/library/windows/desktop/dd391027(v=vs.85).aspx

以前やったARの方法ではモノクロ画さえあればよかったので、画像の先頭アドレスからwidth*heightバイトをunsigned charとして取り扱っていましたが、chainerに渡すにはu,vチャネルも適切に処理する必要があります。

で、マニュアルにはPlaner形式とあるので次のように推測していました。

  • Yプレーンの後にUプレーンが来る
  • UとVはYプレーンのサイズと比較してwidth,heigntがそれぞれ1/2
  • Uプレーンの後にVプレーンが来る

こう思って適当にコード書いて変換かけてみましたが、色味がおかしい。 で、辿り着いたのがこのマニュアル。 https://msdn.microsoft.com/ja-jp/library/windows/desktop/dd206750(v=vs.85).aspx#nv12

NV12ってYだけPlaneになっていてUVはPackedらしいです。こんなの初めて見ました。 上記ページにあるYV12かIMC2,4あたりを想定していただけにショックです。しかもlittle-endianとか書いてますね。

適当にバイト列を取り扱ってOpenCVのcvtColorに与えればいいかなと思っていましたが、これでは取り扱いに困ります。(PlanerとPackedの組み合わせで表現された画像をMatでどうやって表現すればいいのか。。。)

というわけで、書きなぐったコードは重すぎるので捨てました(動作確認はとれたので理論が正しいことは確認できた)。

YプレーンとUVプレーンに分けて処理する

cv::Matでplanerとpackedを混ぜて扱う方法がわからないので、分けて処理します。

pSourceBufferが画像データの先頭アドレスだとして、次のように2つのcv::Matで表すことができます。uvはpackedなのでchが2です。

  auto y_plane = cv::Mat(cv::Size(w, h), CV_8UC1, pSourceBuffer);
  auto uv_planes = cv::Mat(cv::Size(w/2, h/2), CV_8UC2, pSourceBuffer + w*h);

カード画像が含まれている矩形だけ処理する

HoloLens自身のCPUはそれほど贅沢なもの載ってないので、計算量を減らすことにします。 まずモノクロ画でカード検出はできているので、カードが含まれている矩形範囲を抽出します。

auto gen_boundingbox_with_card = [](cv::Mat& base, std::vector<cv::Point>& regon, std::vector<cv::Point>& offset_regon) -> cv::Mat{
    auto rect = cv::boundingRect(regon);   // カードを含む最小の矩形(傾いていない)を求める

    // カードの検出点をバウンディングボックスの左上隅を原点(0,0)とする相対座標に変換する
    offset_regon.clear();
    offset_regon.reserve(regon.size());
    for (auto &p : regon) {
        cv::Point pos(p.x - rect.x, p.y - rect.y);
        offset_regon.push_back(pos);
    }
    return cv::Mat(base, rect);
};

これで以降の処理はカメラ映像の一部に対してのみ行うことになるので、負荷は一気に下がります。

全てのカラーチャネル個別にパースペクティブ変換する

前回の記事でやったChainerで学習したモデルは、アフィン変換・パースペクティブ変換などを含まない画像から学習されたモデルです。

そういった不変性に対するロバスト性は持っていないことは想定されるので、HoloLens上であらかじめパースペクティブ変換してしまいます。

上記のバウンディングボックス計算で得られたROI中のカードの四隅の位置と、変換後のカードの画像(NNに入力するもの)をもとにパースペクティブ変換行列を作ります。 そのパースペクティブ変換行列を使って、カメラで撮影された画像を平面に投影した画像をつくります。

 std::vector<cv::Point> relative_card_regon;
    cv::Mat card_regon_y = gen_boundingbox_with_card(cv_preview_image, card_regon, relative_card_regon);
    std::vector<cv::Point2f>    src_regon;
    for (auto p : relative_card_regon) {
        src_regon.push_back(
            cv::Point2f(static_cast<float>(p.x), static_cast<float>(p.y))
        );
    }

    // 右上から時計回りに定義
    std::vector<cv::Point2f> target = {
        cv::Point2f(224, 0),
        cv::Point2f(224, 312),
        cv::Point2f(0, 312),
        cv::Point2f(0, 0)
    };

    cv::Mat perspective_mat = cv::getPerspectiveTransform(src_regon, target);

    auto croped_size = cv::Size(224, 312); // uvチャネルがYUV420(1byteで4pixel表現する)に起因する制約(=w,hは偶数であること)
    cv::warpPerspective(card_mat, src_mat, perspective_mat, croped_size);

これでカメラから撮影された画像中からカード領域を抽出し平面投影したものを生成できました。

この記事の先頭に貼ってある映像、こんな感じの画像が抽出できます。(ただし、この段階では画像のように下半分が見切れたものではなくカード全体の画像になります)

f:id:Catalina1344:20170507004424p:plain

カラーチャネルを合成する

自前で書くのもう面倒(さっきのカラー変換で力尽きた)なので、少々CPU負荷が高くても力技でいきます。

カラーチャネルの合成をOpenCVの関数でやるためには、すべてのプレーンが同じ幅、高さを持っている必要があります。 UVチャネルは幅、高さそれぞれ1/2なのでresizeで引き延ばしてしまいます。補間でノイズが載りそうですが今は無視します。

  cv::Mat fullscale_uvmat;
  cv::resize(uv_mat, fullscale_uvmat, cv::Size(224, 312), 0, 0, cv::INTER_LINEAR );

Y,U,Vのチャネルをマージしたいのですが、NV12カラーフォーマットではcv::mergeは使えません。 cv::mergeはcv::mixChannelsという関数の特別な条件が成立したときに使えるものなので、mixChannelsでチャネルのマージ方法を細かく指定します。

 // Y, U, V 全てのチャンネルをmixする
    cv::Mat yuv_mat = cv::Mat(cv::Size(224,312), CV_8UC3);
    // cv::mergeはシングルチャネル同士のmergeなので使えない。ここではmixChannelsを使う
    cv::Mat merge_src[] = { y_mat, fullscale_uvmat };
    int from_to[] = { 0,0, 1,1, 2,2};
    cv::mixChannels(merge_src, 2, &yuv_mat, 1, from_to, 3);

これでy_mat(Y-Plane)とfullscale_uvmat(UV-PackedPlane)の各チャネルを合成できました。

cropしてNNに入力できる形に合わせる

NNは223x223の画像の入力を期待しているので、ここまでにできたイメージ(224x312)から切り取ります。

 // NNへ入力可能なサイズにcropする
    cv::Mat put_img(223, 223, rgb_mat.type(), rgb_mat.data, rgb_mat.step);

多少カクつきますが、とりあえず動きました。

オンメモリ上でpngエンコードする

HTTP経由で送る前に、送るデータに意味付けをする必要があります。先のHTTPサーバはpngのファイルイメージを期待しているので、それに合わせます。

HoloLens上のオンメモリの画像イメージからpngファイルイメージをオンメモリ上に生成します。 OpenCVの関数でいうimencodeです。

 std::vector<unsigned char>  file_image;
    cv::imencode(".png", put_img, file_image);
    g_file_image = std::make_shared< std::vector<unsigned char> >(file_image);

これでとりあえずfile_imageにpng形式のファイルイメージが格納できます。先頭3Byteが'png'になっていることが確認できます。

HTTP-PUTする

MS公式がUWPでhttpを取り扱うためのサンプルコードを出してくれているので、これを参考にします。 https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/HttpClient

まだcreate_task.thenに慣れませんが、とりあえずこれで先に立ち上げたWebサーバにpng画像を投げて、識別できるようになりました。

 const unsigned int contentLength = file_image.size();
    create_task(GenerateSampleStreamAsync(contentLength, g_file_image)).then(
        [=](IRandomAccessStream^ stream)
    {
        Windows::Web::Http::HttpStreamContent^ streamContent = ref new Windows::Web::Http::HttpStreamContent(stream);

        auto uri = ref new Windows::Foundation::Uri(L"http://192.168.0.14:8080/resource");
        Windows::Web::Http::HttpRequestMessage^ request = ref new Windows::Web::Http::HttpRequestMessage(Windows::Web::Http::HttpMethod::Put, uri);
        request->Content = streamContent;

        auto filter = ref new Windows::Web::Http::Filters::HttpBaseProtocolFilter();
        filter->CacheControl->ReadBehavior = Windows::Web::Http::Filters::HttpCacheReadBehavior::MostRecent;
        auto client = ref new Windows::Web::Http::HttpClient(filter);
        auto headers = client->DefaultRequestHeaders;
        return create_task(client->SendRequestAsync(request));

    }, task_continuation_context::use_current()).then([=](task<Windows::Web::Http::HttpResponseMessage^> previousTask)
    {
    }, task_continuation_context::use_current());

感想と今後の展望

これで私がやりたいことの土台は整いました。

あとは識別率をあげるとか、演出をどうするとか仕組みを整えていくことになりそうです。

次は3Dレンダリングに挑戦していきたいと思います。

それでは今回はこれにて。

ChainerでMTGのカードを分類する(識別フェーズ)

黄金週間なので趣味プログラミングに没頭です。かたりぃなです。

MTGのカードの種類を識別するPythonモジュールを作っていきたいと思います。

今回でPython側でchainerを使う部分はひとまず完成です。

環境

ソフトウェア

  • Windows10 Pro
  • VisualStudio 2015 community(C++用)
  • VisualStudio Code(Python用)
  • Python 3.5
  • Chainer 1.20.0.1

ハードウェア

Chainerで学習させる

前回Chainerをいじったとき、識別率が60%くらいで頭打ちになってしまいました。

http://catalina1344.hatenablog.jp/entry/2017/04/09/222330

せめてもう少しまともに識別できるようにしたいので、まずはここから。

AlexNetを真似してみる

alexnetを真似して、前回の学習モデルを少し改造してみました。 畳み込み+MaxPoolingの層が3層、線形結合が3層です。 最後の層の出力274が1-of-k符号化されたラベルそれぞれの確率です。 dropoutや正規化は今は入れていません。

class TEST_NN(chainer.Chain):
    def __init__(self):
        super(MLP, self).__init__(
            conv1 = F.Convolution2D(3, 96, 11, stride=4 ),
            conv2 = F.Convolution2D(None, 256, 5, stride=2 ),
            conv3 = F.Convolution2D(None, 384, 3, stride=1 ),
            l0=L.Linear(None, 1000),
            l1=L.Linear(None, 500),
            l2=L.Linear(None, 274),
        )

    def __call__(self, x):
        h = F.relu(self.conv1(x))
        h = F.max_pooling_2d(h, ksize=5, stride=2)

        h = F.relu(self.conv2(h))
        h = F.max_pooling_2d(h, ksize=3, stride=3)

        h = F.relu(self.conv3(h))
        h = F.max_pooling_2d(h, ksize=3, stride=3)

        h = self.l0(h)
        h = self.l1(h)
        h = self.l2(h)
        return h

学習用のデータを学習モデルに合わせる

MTGのカード画像は長方形なのですが、CNNの実装では正方形の画像を前提としていることが多いです。長方形画像を分類するNNを実装する方法がわからず仕舞いなので、入力画像自体を正方形にcropすることにしました。

前回作ったデータ水増し用のプログラムにcrop機能を追加します。OpenCV便利ですね。

void crop_transform(cv::Mat& src_img, cv::Mat& dst_img, int w, int h)
{
    auto type = src_img.type();
    auto step = src_img.step;
    cv::Mat img(w, h, type, src_img.data);
    dst_img = img.clone();
}

これでwとhに同じ値を与えれば正方形にcropできます。w=h=223としました。 こうして切り取ってノイズを付与して水増しすると次のようになります。

f:id:Catalina1344:20170504164419p:plain

よさげですね。 ちなみに、カードのテキスト部分にも分類するための情報は含まれていますが、イラストのほうが情報量が多いのでイラスト側を残すことにしました。

「わかったぞ!わかったぞ!わかっ・・・」みたいにフレーバーテキストだけで判別できるものもありますが、今は置いときます。

ちなみにMTGのカードって、ある時期からプレインズウォーカーだけカード名に頭がめり込んでいるような気がします。(最初気づいたのは「世界を目覚めさせるものニッサ」のとき)昔はカード名の部分は見切れてた気がするのですが。。。

学習結果を保存する

chainerのexamplesが出力するスナップショットは識別フェーズでは使わない情報がついています。(optimiser, updaterなど) 識別フェーズで必要なのは学習済みのモデルのデータ(重み係数とかバイアス項とか)なので、モデルだけ保存するコードを追加します。

    nn = TEST_NN()
    model = L.Classifier(nn)
    # 略

    # Run the training
    trainer.run()

    # モデルを保存する
    chainer.serializers.save_npz( os.path.join(args.out, "mymodel.npz"), nn)

Classifierの返すモデルでは損失関数を付与したモデルになってしまうので、その前でインスタンス化したネットワークをとっておき、学習終了時にこれをserializerで保存します。 これで生成されたモデルのnpzファイルは10MByteくらいになりました。

このエントリを書き終わってから気づきましたが、識別フェーズでもsoftmaxを通すので、別にClassifireしたモデル保存してもいいのかもしれません。後で考える。

学習の経過はこんなグラフになりました。

前回は60%前後の正答率で打ち止めだったので、この数字だけ見ると改善はしているようです。

過学習気味(学習用の水増しデータが似たようなものが多いから?)かもしれませんが、今の私には判断つかないので次に進みます。 f:id:Catalina1344:20170504164807p:plain f:id:Catalina1344:20170504164814p:plain

実行にかかる時間は、ミニバッチサイズ100として20epoch回すのに30分程度です。 SSDの容量が厳しくなってきたのでHDD上に画像データを置いて実験しましたがお話になりませんでした。。

学習済みモデルをPythonで読み込んで使う

コマンドラインから実行する実験コードを書きました。

-iオプションで与えた画像ファイルを読み込んで、それをNNに入力してから結果を観測するだけのものです。

import training         # 自前の学習器
import chainer.serializers
import chainer.functions as F
import argparse
import numpy as np
from PIL import Image

def main():
    parser = argparse.ArgumentParser(description='TEST_NN')
    parser.add_argument('--inputimage', '-i', action='store', default=100,
                        help='image file name')
    args = parser.parse_args()
    filename = args.inputimage
    print("{}".format(filename) )

    # 学習済みモデルを利用する準備
    model = training.TEST_NN()
    chainer.serializers.load_npz("result\mymodel.npz", model)

    # テスト用画像を読み込む
    image = Image.open(filename)

    # Chainerのモデルに入力できるように、データの順序を合わせてNumpy形式の4次元テンソルにする
    pixels = np.asarray(image).astype(np.float32)
    pixels = pixels.transpose(2, 0, 1)
    pixels = pixels.reshape((1,) + pixels.shape)

    # 識別
    y = model(pixels)
    prediction = F.softmax(y)
    m = np.argmax(prediction.data)
    print("result={}".format(m) )

if __name__ == '__main__':
    main()

学習に使ったデータとかを適当に突っ込んでみます。

> python .\detect.py -i "dataset/185/185_48.png"
dataset/185/185_48.png
result=185
> python .\detect.py -i "dataset/121/121_3.png"
output/121/121_3.png
result=121

とりあえず分類はできているようです。

ピクセル列を4次元テンソルに変換している部分はchainerのdatasetあたりのコードから引っ張ってきたもので、理屈はまだよくわかっていません。(特に最初の次元は何を表しているものなのか。。。)

感想

これでMTGのカードのうち「カラデシュ」は分類できるようになりました。

コマンドラインから叩くだけでは感動は少なめですが、ARアプリのための土台ができつつあります。

「274種類のイラストを分類して任意のモデルを表示できる」という部分だけを誇大解釈すればVuforiaを超えたかもしれません。(超えてない)

今後の課題

  • 分類ラベルを増やすとどうなるか
  • 実際の映像からの分類でどれくらいの精度が出るか

などがあると思います。 前者は学習時間がかかるので、夜間とかに実行しておくなど時間を有効活用して研究したいと思います。

MTGはカード種類が多いですが、所詮は人工物なので階層的な分類が効果的なのかもしれないと思っています。(エキスパンションを識別してから、特定エキスパンション内で分類するなど)

後者はHoloLensと連携できるようにしてから改善していく予定です。 実際にモノを動かしながらやったほうが楽しいですし。

次の予定

これでカードイラストからカードを分類する仕組みをPython上で実現できました。 次はいよいよHoloLensとの連携部分です。 データの収集と分析といえばfluentdですが、HoloLens上に載せるには少々敷居が高そうです。

HoloLensからChainerを走らせているPCへHTTP/PUTして、HoloLens側は分類結果を受け取るのがいいかなと思っています。

それでは今回はこれくらいで。

HololensでARをやってみる

HololensでARをやってみる

HoloLensでARをやってみました。かたりぃなです。 まだ完成には遠いので間違いなど含まれているかもしれません。

参考にさせていただいたサイト http://littlewing.hatenablog.com/entry/2016/09/25/172541 座標系のことが丁寧に邦訳されていました。原文を読む前にざっと読んでおくと作業が捗ります。

やったこと・実験環境リスト

やったことは単純です。

  • 適当な前処理と検出処理をして、MTGのカードを認識する
  • 3次元姿勢推定
  • 検出対象物上に文字列を書いた板ポリゴンをレンダリング

実験環境やライブラリは次のとおりです

とりあえずARっぽいことができるようになったので手順を整理します。

カメラキャリブレーション

まずキャリブレーション自体は不要です。 不要というと語弊がありますが、正確にいうとHoloLensのAPIでカメラパラメータをとれるので、そのパラメータがそのまま使えます。

カメラ内部パラメータを取り出す

UWPのMediaCaptureで映像フレームを受け取ると、Windows::Media::Capture::Frames::VideoMediaFrameクラスの形になるので、このCameraIntrinsicsプロパティを拾います。

公式ドキュメントはこちら

https://docs.microsoft.com/en-us/uwp/api/Windows.Media.Capture.Frames.VideoMediaFrame

ここで得られたパラメータをOpenCVの3次元姿勢推定関数に渡すために、cv::Matを作ります。 DirectXと行列の定義が少々異なるので、要注意です。

ちなみにOpenCVのカメラ内部パラメータの行列の定義はこうなっています。

http://docs.opencv.org/2.4/modules/calib3d/doc/camera_calibration_and_3d_reconstruction.html

カメラ内部パラメータをOpenCVで扱える行列にする

姿勢推定にはおなじみのOpenCVを使います。 というわけでVideoMediaFrameからカメラパラメータを抽出して行列を作るコードです。 flとかppとかをデバッガでみるとそれらしい値が入っているのが分かります。

     auto camin = videoMediaFrame->CameraIntrinsics;
        auto fl = camin->FocalLength;       // 焦点距離
        auto pp = camin->PrincipalPoint;    // 主点
        double inst_raw[] =
        { fl.x, 0, pp.x,
            0, fl.y, pp.y,
            0, 0, 1 };
        cv::Mat inst(3, 3, CV_64F, inst_raw); // カメラ内部パラメータ

三次元姿勢推定を行う

カメラ内部パラメータは取得できました。あとは3次元の姿勢推定のために次の2つがあればOKです。

  • 平面に投影された画像上で検出されたオブジェクトのピクセル単位の座標
  • ピクセル座標と結びついている実世界空間上での検出対象物の座標

歪み補正パラメータはいったん無視しておきます。まず動かしたいので。 とりあえずカードの四隅が検出できるものとして、それが実世界でどうなるかの座標を定義します。 MTGのカードのサイズは6.3x8.8cmなので、メートル単位に直して設定しておきます。 つまりwidth=0.063, height=0.088です。 どうしてメートル単位でいくかというと、HoloLensの座標系がメートル単位なので、合わせておいたほうが色々と都合が良いです。

 // 6.3cm x 8.8cm
    std::vector<cv::Point2f> base_points;
    const float left = -m_width * 0.5f;    // 0.5はカードの中央を原点としたいので。
    const float right = m_width * 0.5f;
    const float top = m_height * 0.5f;
    const float bottom = -m_height * 0.5f;
    base_points.push_back(cv::Point3f(right, top, 0) );        // 右上
    base_points.push_back(cv::Point3f(right, bottom, 0) ); // 右下
    base_points.push_back(cv::Point3f(left, bottom, 0));   // 左下
    base_points.push_back(cv::Point3f(left, top, 0));  // 左上

これで検出したカードの実世界での座標が定義できました。 次に画像中からカードの四隅の座標を検出します。 今回試した簡易的な方法ではまだまだ誤検出が多いので、ソースコード掲載しません。

ここまでに得られた情報をもとにsolvePnPに問題を解いてもらいます。 cam_distは空っぽです。

std::vector<cv::Point2f> detect_points = {};//画像処理によって得られたオブジェクトの位置(ピクセル座標)
cv::Mat tvec, rvec, cam_dist;
cv::solvePnP(base_points, detect_points, cam_inst, cam_dist, rvec, tvec);

これでrvec,tvecが得られました。 しかし、このrvec,tvecともにp(0,0,0)からp(0,0,1)を向いているカメラ座標系でのお話です。 HoloLensではワールド空間に対し、装着者の頭の位置を加味する必要があるので、少々加工します。その前に……。

姿勢推定結果を行列ではなくベクトルで扱いたい

cv::Mat形式で姿勢推定結果が出ました(tvec,rvec)。しかしOpenCV2.4のcv::Matをそのまま扱うのはちょっと面倒です。

行列のままでもいいのですが、これは必ず3x1の行列になるので、各要素へのアクセスは常にcol=0です。つまりrow=1がx, row=2がy, row=3がzを表すベクトルです。 ただのベクトルとして扱いやすいようにベクトル型にします。

cv::Vec3d t,r;
tvec.copyTo(t);     // 得られたtvec,rvecともに=3x1行列なので
rvec.copyTo(r);     // 単純なコピーでよい

これでベクトルになりました。 Hololens(UWP)のAPIに受け渡しやすいようにfloat3型のほうがよかったかもしれませんね。

HoloLensの空間上に姿勢推定結果を使ってレンダリングする

とりあえず適当にやってみます。 ここまでに得られた平行移動ベクトルと回転ベクトル(tとr)はいずれも装着者の頭の位置からの相対座標です。 レンダリングは基本的にワールド空間で行いたいので、ワールド空間座標を求めるためのHoloLens装着者の頭の位置、姿勢を表す行列を作ります

装着者の頭の位置から座標系を表す行列を求める

やってることはそのまんまです。

  1. 装着者の頭の姿勢(headRight, headUp, headBack)を3次元空間の基底とする
  2. レンダリング対象のオブジェクトの位置を頭の位置からの相対座標で設定する
  3. ワールド空間上でのカメラの位置と姿勢+オブジェクトの位置を表現する行列を作る
     // HoloLensのpointerposeをもとに座標系を求める。SolvePnPで得られている結果は、この座標系からの相対座標。
        float3 const headPosition = pointerPose->Head->Position;
        float3 const headForward = pointerPose->Head->ForwardDirection;
        float3 const headBack = -headForward;
        float3 const headUp = pointerPose->Head->UpDirection;
        float3 const headRight = cross(headForward, headUp);

        // 装着者の頭の位置を原点としてレンダリング対象の位置を求める
        m_targetPosition = headPosition + (headRight * trans[0]) + (headUp * -trans[1]) + (headBack * -trans[2]);
        m_normal = normalize(-m_position);

        // 時間軸方向の線形補間
        float3 const prevPosition = m_position;
        m_position = lerp(m_position, m_targetPosition, lerpDeltaTime);

        // 行列をつくる
        camera = make_float4x4_world(m_position, -m_normal, headUp);

VisualStudioが吐き出した元々のスケルトンからの改造なのですが、m_targetPositionを求めるためにベクトルにベクトルを掛けていて謎でした。 「内積でも外積でもない、なんだこれ?」と悩んでいましたが、よく考えると、平行移動行列とベクトルの積を展開したものです。

なので、m_targetPositionがワールド座標系における検出対象オブジェクトの位置になります。 (ワールド空間上の座標=ワールド空間上のカメラ座標 * カメラからの相対座標で表現されたオブジェクトの座標)

cameraにはこの平行移動成分とカメラの姿勢が含まれた行列が入ります。

オブジェクトのローカル座標系での回転量を設定

回転ベクトルをロドリゲスの回転公式から求めてもいいのですが、OpenCVDirectXでは座標系の変換が面倒なので、DirectXの世界で行列を作りました。 手順としては

  1. 回転ベクトルの大きさを求め、回転量とする
  2. 回転ベクトルを正規化。これで回転の軸として使える
  3. make_float4x4_from_axis_angleで、回転軸と回転量をもとにした行列を作る

です。ちょっと回りくどいのでそのうち直したいところです。

        // OpenCVとDirectXの行列の変換とか面倒なので、DirectX(UWP)のAPIで行列を作る
        auto r = float3{ rot[0], rot[1], -rot[2] };
        float strong = length(r);
        float3 axis = normalize(r);
        float4x4 local_rot = make_float4x4_from_axis_angle(axis, strong);

最後に回転行列を求めて順序を間違えないようにかけてあげればOKです。 この行列はそのままVirtexShaderが使うモデル行列になります。

     m_modelConstantBufferData.model = local_rot * camera;

できた!でも、、、

とりあえず板ポリゴンは出ました。しかしまだ面白味のある3Dモデルがレンダリングできていません。。。 座標書いた板ポリゴンだけじゃ味気ないです。そもそも座標ズレている気がしますし。

あと細かいところですが、座標変換が直観的にわかりにくいコードになってしまいました。 モデルの位置と姿勢は本来はモデル座標系のお話なので、カメラには含めるべきではない気がします。 (とはいえ、SolvePnPではカメラが原点からZ軸方向を向いているという前提での姿勢推定なので、この記述でもいいのかもしれない?)

感想と今後の展望

やっと「実機がないとできないこと」をやり始められたので一安心です。 カードの検出と姿勢推定もとりあえずはできたので、次は安定化のために検出したカードの上にアンカー置いてみたいところです。 またカードの種別を識別したいのでDeepLearningのモデルを使ってのカードの画像分類もやっていきたいですね。 やりたいこと山盛りです。

それでは今回はこれくらいで。

MTGのカード画像を分類する学習器をつくる

どうしてイラストから分類?

まず、わざわざDeepLearningフレームワークを使ってイラスト分類する理由です。

最初は安直に「カードに名称書いてあるやん。これ文字認識(OCR)にかければいいでしょ」と思って文字認識API叩いてみました。 結果は惨憺たるもので、とても実用に耐えられるものではありませんでした。 工夫すればなんとかなる気はしますが、仮に英語だけに対応して精度をあげても、同じような苦労を日本語でもやることを考えるとコストかかりすぎです。

というわけで、DeepLearningでモデルを作って機械に分類する方法を作ってもらうことにしました。

MTGの学習用データをつくる

前回のエントリ http://catalina1344.hatenablog.jp/entry/2017/03/30/221959 で、MTGのカードイラストを手に入れることはできました。 これを水増しします。

水増しの方針は色々考えられますが、基本は元画像に対して何かの変化(ノイズ)を加えることです。 実例をもとにノイズの要因を考えてみると、次のようなものがあります。

  • 撮影環境の輝度変化
  • カード表面からの反射光
  • カメラ映像からカード部分を抽出する際のパースペクティブ変換での補間で発生するノイズ

これらを一度に全部やろうとすると収集がつかなくなるので、今回はパースペクティブ変換における「拡大縮小」に関するノイズを加えることにします。

1つの教師データをもとに特定のノイズのみを想定して学習データを水増しさせた場合、そのノイズ以外の外的要因に対するロバスト性がないモデルになることが予想されますが、今はそれは置いておきます。

とりあえずノイズを載せる

統計学的にノイズを載せるなら正規分布をもとにうんたらとかありますが、とりあえず今回は簡単な方法でいきます。 まず乱数が必要なので作ります。 C++の乱数って便利になってたんですね。

 // 乱数を生成する
    std::random_device  rnd;
    std::vector<std::uint_least32_t> v(10);
    std::generate(v.begin(), v.end(), std::ref(rnd) );
    std::mt19937    engine(std::seed_seq(v.begin(), v.end() ) );
    std::uniform_real_distribution<double>   dist(-noise_strong, noise_strong);

これでdistを使って乱数を得られます。

一般的にデジタル画像は縮小してから拡大するとぼやける(というかブロックノイズ)が乗るので、これを利用します。 以下のコードはopenCVを使って画像を縮小してから元のサイズに戻す処理です。縮小のサイズを変えることでノイズの載り方が変わるので、この縮小後のサイズに乱数で求めたオフセットをはかせます。(-noise_strong ~noise_strong) 一定量以上縮小しないとノイズとはならないので、baseには0.4とか0.3みたいな適当な値を入れておきます。

 double noise_factor = base + dist(engine);

    // 縮小して元のサイズに戻すだけ
    auto size = cv::Size((int)(src_img.cols*noise_factor), (int)(src_img.rows*noise_factor) );
    cv::resize(src_img, tmp, size);
    auto base_size = cv::Size(src_img.cols, src_img.rows);
    cv::resize(tmp, dst_img, base_size);

この方法で画像を水増しするとこうなりました。

f:id:Catalina1344:20170409205035p:plain

元画像のURLはこちら。

http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=417574&type=card

以前にAndroidタブレットでカード部分を抽出してパースペクティブ変換して取り出したものは2とか5みたいなぼやけた感じだった気がします。 Androidタブレットはもう稼働させてないので、すぐに比較できないのが残念です。

あとWebAPIからとってきた画像はどうもサーバー側で生成しているもののようで、実際のカードの画像ではない気がしています。 たとえば上記カードであればフレーバーテキストが枠とかみ合っていなくて違和感があります。

これは今後の課題ということで。 (うまくいけばイラストだけで分類できる可能性もありますし。)

Chainerで画像データを読み込む(datasetsを使う)

これで学習用データが準備できたので、DeepLearningに突っ込んでいろいろ試していきます。

Chainerにはユーザーが準備した学習データ(データセット)を読み込むための方法が提供されています。

今回は画像の分類なのでchainer.datasets.LabeledImageDatasetを使います。名前のまんまですね。 これは第一引数にファイルパスとラベルのタプルのリスト、第二引数に画像を参照するルートディレクトリを与えて使います。 たとえば

labeldImage[
  ("image_path_A-0", 0),
  ("image_path_A-1", 0),
  ("image_path_B-0", 1),
  ("image_path_B-1", 1)
]

こんな感じのデータです。 画像ファイルを置くディレクトリ構成を工夫してあげればラベルと画像の関連付けが簡単になるので幸せになれます。 ちなみに外部の適当なファイルに上記のようなデータの羅列を書いておいて読み込ませる使い方もできるらしい。

Chainerで画像データセットを学習用とテスト用に分割する

よくあるDeepLearningの学習フェーズでは、データセットを学習用データとテスト用データに分割して使います。 先人がせっかくいろいろと理論を考えてくれてるので、それを利用します。 先ほどの手順で得られたデータセットをchainerに分割してもらいます。

train, test = chainer.datasets.split_dataset_random(dataset, div_num)

これでtrainに学習用データ、testにテスト用データがそれぞれ格納されます。 他にも交差検証用の分割とかいろいろありましたが、まずは何か動くものが欲しいのでランダム分割を使いました。

とりあえず学習を試す

CNNの前に、まずは単純なmnistのサンプルについてるNNの構成を使えばいいじゃないと思って試しました。

残念ながらMemoryErrorになります。

どうしてMemoryError?

学習の前に重み係数を初期化しているあたりでMemoryErrorでお亡くなりになります。 どれくらいのメモリ容量を確保しようとしているのか見てみると、43G要素くらいでした。無理ですよね。

どうしてLinearなNNでそんな膨大なメモリ容量が必要なのか?

よく考えると、LinearなNNに大きな画像を入れようとしているからこそ起きる問題でした。 まず画像サイズについて。幅223,高さ311で3chなので約208KByteです。(水増し時点でαチャンネル削除したRGB形式なので3ch)。 これを32bit浮動小数点型として扱ったとしてもたかだか4倍です。 (以降、Byte型とかfloat型とか考えるの面倒なので"要素数"で統一します)

次にNNの形についてです。 mnistサンプルにあるNNはこんな形をしています。

class MLP(chainer.Chain):

    def __init__(self, n_units, n_out):
        super(MLP, self).__init__(
            # the size of the inputs to each layer will be inferred
            l1=L.Linear(None, n_units),
            l2=L.Linear(None, n_units),
            l3=L.Linear(None, n_out),
        )

    def __call__(self, x):
        h1 = F.relu(self.l1(x))
        h2 = F.relu(self.l2(h1))
        return self.l3(h2)

こうやって使いました。 274は分類ラベルの数です。(今回使っているカラデシュというセットには274種類のカードがある)

unitnum = 223*311*3
model = L.Classifier(MLP(unitnum, 274))

問題の箇所はl1,l2で、全結合層で、入力層と同じ数のユニットをもちます。 この層の重み係数を保持するために必要なデータの要素数は、「1つのユニットにつき208K個」です。 つまり、この重み係数の領域を確保するために必要なメモリサイズは208Kの二乗(=43.288G)の容量が必要になってしまいます。 今時のマシンはメモリが潤沢とはいえ、これでは無理ですね。

畳み込みNNにする

メモリ容量という側面から畳み込みNNが必要とされた一つの要因が見えた気がします。 単純に全結合していてはお話にならないということですね。

というわけで、おとなしく畳み込みニューラルネットワークを使ってみることにします。 まずは動くかどうかの実験です。畳み込み+MaxPoolingが2層、1層の識別層です。

class MLP(chainer.Chain):

    def __init__(self, n_units, n_out):
        super(MLP, self).__init__(
            l3=L.Linear(None, n_out),  # n_units -> n_out
            conv1 = F.Convolution2D(3, 3, 7, stride=3 ),
            conv2 = F.Convolution2D(3, 1, 7, stride=3 ),
        )

    def __call__(self, x):
        h = F.relu(self.conv1(x))
        h = F.max_pooling_2d(h, ksize=2, stride=2)

        h = F.relu(self.conv2(h))
        h = F.max_pooling_2d(h, ksize=3, stride=3)

        y  = self.l3(h)
        return y

initの引数n_unitsを使わなくなりましたが、これで呼び出し元は変更なしで大丈夫です。

できた!

しばらく動作させて学習の進捗を見るとこんなグラフになりました。

f:id:Catalina1344:20170409205737p:plain f:id:Catalina1344:20170409205824p:plain

1epochあたり10秒くらいで、だいたい3時間くらい動かしました。

学習は遅いですが順調に進んでいるような気がします。 このあたりの高速化はDropOutを入れるとかいろいろあるので、追々試してみます。

感想と今後の展望

画像からMTGのカードを分類するための土台(を作るための準備)ができました。 学習には時間がかかるので色々とバッググラウンドで走らせて実験しつつHoloLensアプリ側の実装を進めたいと思います。

HoloLensからどうやってこの学習モデルを使うかは検討中です。 現状想定しているのは

  • OpenCV3以降のdnnモジュールを使ってHoloLens上で動作させる
  • PC上で動作させ、webAPIを作ってHTTP経由で叩く

この2つあたりです。

HoloLensの性能を見る限り、なんとなく後者が妥当な気がしています。

そもそもUWP用のOpenCVビルドは古いバージョンなのでdnn入っていませんし。

それでは今回はこれにて。

MTGの公式APIを叩いてみる

カードゲームのイラストを自動判別しようと試行錯誤しています。かたりぃなです。 今回はMagicTheGatheringのカードの自動判別の前に、データ集めに挑戦します。

どうやってデータを集めるか?

DeepLearningとか機械学習だの前に、まず学習させるデータが必要です。 学習用のデータは実際にカメラで撮影したもののほうが程よくノイズが乗って学習にはよさそうな気がしますが、そのためにはそういうデータを収集するアプリが必要です。

学習済みモデルをアプリで利用したいのに、学習するためのアプリを作る必要があって、鶏が先か卵が先かみたいな不毛な話になってしまいます。

仕方ないので試しに手作業で実際のカードをスキャナで取りんでみましたが、一枚あたり一分くらいです。一つのシリーズに200から300種類のカードがあるので、とりあえずは300分ですね。

こんなの手作業でやる気は起きません。そもそもすべてのカード揃ってるわけないですし、人力でカードの束からサーチしたりと手間かかりすぎます。

クローラーを書く?

少し試しましたが、面倒すぎます。スクレイピングした結果のデータを目視確認してラベル付けする必要もありますし、そんなの手作業でやっていてはお話になりません。

目視確認の代わりにDeepLearningでモデルを作ってそれを使えば……と思いましたが、またしても鶏と卵になってしまいます。

公式APIがあった

発売元から公式のAPIが提供されていました。こいつを使えばなんとかなりそうです。 https://docs.magicthegathering.io/

試しにREST-APIを叩いてみる

よくあるWebAPIの使い方と同じです。

カードに関するクエリであればHTTPRequestとして示されている

https://api.magicthegathering.io/v1/cards

のURLをベースとし、?の後ろにクエリを付けてあげればOKです。

名前検索するならname=“検索したいカード名"とか。

たとえば"nissa"を含むカード一覧を取得する例はこうなります。 https://api.magicthegathering.io/v1/cards?name=nissa ブラウザで開くとJSON文字列が並びます。

画像をとってくる

↑の結果得られたJSONには「名前に"nissa"を含むカード」がリストアップされています。このcards配列から適当な"imageUrl"要素を抽出すると、こんなURLがとれます。

http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=190411&type=card

ここにアクセスすると、確かにそれらしいイラストが取得できました。

Windows上から叩きたい

Linuxならcurlwgetですが、windows上で自動化するにはPowerShellから叩きたいところです。

というわけでInvoke-RestMethodというのを使えば一発でした。

先ほどのimageUrlの指す画像を保存するにはPowershellから

> Invoke-RestMethod -Uri "http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=190411&type=card" -OutFile test.jpg

できました。 これで理論上はMTG公式APIが提供している全てのカードの絵柄は、自動で収集できるということになります。

Pythonで自動化する

よくよく考えたらPowerShell書かなくても公式が出してる各プログラミング言語の実装を使えば済みますね。

公式のsdkPython版を落としてきて、適当に叩いていきます。 叩き方がわかればあとはスクリプト書いてぐるぐるまわせばいいので。

その1, 準備

まずはローカルでテストしやすいように全カードの情報をとります。 10分くらいかかるので待ちましょう。

import mtgsdk
cards = Card.all()

毎回待つの嫌なので、ローカルファイルに保存します

import pickle
base_file = open('cardlist.bin', 'wb')
pickle.dump(cards, base_file)
close(base_file)

80MBくらいのファイルになりました。

このデータを読み込むときは

import pickle
base_file = open('cardlist.bin', 'rb')
cards = pickle.load(base_file)

で読めます。webからのダウンロードは時間かかりますが、これなら数秒で終わります。

その2, 中身を確認

上記で取得してきたデータの中身を見てみます。

len(cards)
>>> 32768
dir(cards[0])
>>> 長いので省略。アトリビュートが表示される
cards[0].name
>>> 'Air Elemental'
cards[0].image_url
>>> 'http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=94&type=card'

要素が32768ていうのが何かの上限に引っかかってそうな値(216 signed?)で嫌な感じですが、URLも取れてるので先に進みます。

これでカード名をもとにローカルに保存するファイル名が生成できそうです。(この例だと"Air Elemental.jpg"とか。)

その3, Pythonからイメージをダウンロード

urllibというライブラリを叩くだけでした。

import urllib
card = cards[0] # 実験しやすいように先頭のカードの情報をとっておく
image_request = urllib.request.urlopen(card.image_url)
image_data = image_request.read()

これでimage_dataにダウンロードしたイメージのバイナリが格納されます。 あとはfileにwriteしてあげればOKです。

その4, スクリプトでカードイメージを全部ダウンロードする

先の全カードのダウンロードでは嫌な数字が見えているので、特定のエキスパンションだけダウンロードします。

いきなり数万枚もの画像分類モデルを作るよりは、少しずつ積み重ねていったほうが色々と見えそうというのもあります。

というわけで「カラデシュ」という弾の(略称=kld)カードをすべてダウンロードします。

from mtgsdk import Card
from mtgsdk import Set
import urllib

ktk_cards = Card.where(set='kld').all()   # ここで与えるパラメータset=にはエキスパンションの略称。

print("card num = {}", len(ktk_cards) )
for card in ktk_cards:
    image_url_request = urllib.request.urlopen(card.image_url)
    image_data = image_url_request.read()
    out_file_name = card.name +".jpg"
    print("{}".format(out_file_name) )
    out_file = open(out_file_name, "wb")
    out_file.write(image_data)
    out_file.close()

できました! ただし、同じカード名のものが重複してしまうとうまく保存できません。 土地カード(forestとかswampとか)は同一カード名で複数の絵柄があります。これは今後の課題ということで。

同様にしてset=のところを'ktk'とかにすれば「タルキール覇王譚」が取れます。

感想と今後の展望

実際にカードの属性見て気づいたのですが、カードを分類するための情報ってカード名だけじゃないんですよね。 学習モデルに突っ込むことを考えると、カード名は人間がつけた分類ラベルであって、そのラベルに「人間が見て意味を解釈できる文字列」が関連付けられているだけのことです。

次のステップでは今回の画像セットを水増しして、学習モデルに入力していきたいと思います。 HoloLens側のアプリも作っていきたいですね。

それでは今回はこれくらいで。

Hololensでビルボードを表示する

アプリをごりごり作るよりも前にデバッグ情報などを実機で見やすくする仕組みをつくりました。かたりぃなです。

結論

従来手法のビルボードはHoloLensではそのまま使うのは少し難ありです。HoloLensが提供している機能を使ってビルボードレンダリングするのが良い。

ビルボードって?

この用語が本当に正しいのかどうか疑問ではありますが、概要だけ。 一言で言うなら「常にカメラのほうを向くポリゴン」です。

どういうところで使うの?

3Dのゲームを遊んだことがある人なら一度は見かけたことがあると思います。 「常にカメラのほうを向いていなければいけない」ポリゴンというのは多々あって、例えば次のようなものが考えられます。

  • MMORPGなどでのキャラクタ名、ダメージ数字の表示、メニュー、ツールバーなど
  • FPSの照準アイコン
  • ポイントスプライト(パーティクル)

これらは一枚の板ポリゴンにテクスチャを張って、そのポリゴンが必ずカメラのほうを向くように設定することで実現できます。

どうやって実現するの?

カメラのほうを向くポリゴンを作る方法は、まず最も単純な方法としてはカメラ座標系でX,Y平面にポリゴンを書くだけで実現できると思います。 先の例でのメニューやツールバーなどはこれで解決ですが、応用してパーティクルを使った演出をする場合にちょっと不便で汎用性に欠けます。

というのもパーティクルはワールド空間上の特定の位置に配置されるオブジェクト(火の粉だったり、煙だったりのエフェクト)であるので、ワールド座標系で指定したいものです。

こうして考えると、カメラ座標系で直接ポリゴンを描くのではなく、ワールド座標系で座標を指定したうえでポリゴンが常にカメラのほうを向くようにしたいです。

3Dゲームなんか向けのサイトを見てみると、カメラの回転行列からの逆行列をオブジェクトの行列の回転行列成分にセットするという方法が一般的のようです。 というわけで、HoloLensのカメラ行列からビルボードを作れないか試してみます。

HoloLensのレンダリングパイプライン

カメラ行列からの逆行列を求めてそれを使うというアプローチですが、HoloLensで同様の手法を使うことはできなさそうです。 3Dモデルをレンダリングするとき、のカメラ行列の設定ですが、VisualStudioが生成するスケルトンではこうなっていました。

// DX::CameraResources::UpdateViewProjectionBuffer関数
    DX::ViewProjectionConstantBuffer viewProjectionConstantBufferData;
    bool viewTransformAcquired = viewTransformContainer != nullptr;
    if (viewTransformAcquired)
    {
        // Otherwise, the set of view transforms can be retrieved.
        HolographicStereoTransform viewCoordinateSystemTransform = viewTransformContainer->Value;

        viewProjectionConstantBufferData.viewProjection[0] = viewCoordinateSystemTransform.Left * cameraProjectionTransform.Left;
        viewProjectionConstantBufferData.viewProjection[1] = viewCoordinateSystemTransform.Right * cameraProjectionTransform.Right;
    }
// 以降、viewProjectionConstantBufferDataをUpdateSubresourceでVertexShaderのconstant bufferに転送する

constant bufferを参照するHLSLシェーダはこうなっています。

cbuffer ViewProjectionConstantBuffer : register(b1)
{
    float4x4 viewProjection[2];
};
// 略
VertexShaderOutput main(VertexShaderInput input){
    // 略
    // Correct for perspective and project the vertex position onto the screen.
    pos = mul(pos, viewProjection[idx]);
    output.pos = (min16float4)pos;

何やってるのかの前にAR/VRの基本的な話です。

HMDを使って3Dレンダリングするとき、左右のレンズに少しだけ異なる映像を出すことで立体感を出すという手法があります。(=ステレオグラム) 人間の目が少し離れた位置についていて~と話が長くなりそうなので、ここでは「そういう手法がある」程度にとどめておきます。

HoloLensも同じ理屈で、左右のレンズに同じものをレンダリングしているわけではなく、左レンズ用と右レンズ用の映像をレンダリングします。 HolographicStereoTransformというクラスが左レンズと右レンズそれぞれの透視投影変換とビュー行列をもっているので、これを引っ張ってくるわけですね。

それぞれのレンズ用にレンダリングするためにDrawIndexedInstancedを使って左レンズ用インスタンスと右レンズ用インスタンスレンダリングします。 テンプレートプロジェクトではシェーダーの入力パラメータにinstIdというのがいますが、これがインスタンスのIDというわけですね。

HolographicStereoTransform struct - UWP app developer | Microsoft Docs

なので、従来手法の「カメラの回転要素の逆行列を3Dモデルの回転行列に使う」というアプローチをそのまま流用しようとしても、モデルの回転行列を左右レンズそれぞれに生成する必要があって、それはあんまりです。

HoloLensの座標系で考える

そもそもHoloLensではスクリーン中央に常にカーソルがレンダリングされています。 このカーソルは視線の先の空間マッピングされたオブジェクト上に出るのですが、これと同じことができればいいわけです。

公式マニュアルに座標系のことが書いてありました。

Locatable camera

これを真似していけば良さそうです。というかできました。

バイスの相対座標と絶対座標

絶対座標と相対座標というと誤解しそうですが、概念として

  • 絶対座標:空間マッピングしたワールド空間上の座標を表す
  • 相対座標:デバイスそのものからの座標を表す

と解釈できます。 HoloLensのプロモーションなどで空間上に何かのオブジェクトを配置しているケースでは上記の絶対座標を用います。 相対座標はドラゴンボールスカウター名探偵コナンの探偵メガネのように装着者からみた座標系として考えられます。

バイス相対座標を取得する

まず、VisualStudioのHoloLensテンプレートプロジェクトでは、座標系として絶対座標(ワールド座標系)を使っています。 Windows::Perception::Spatial::SpatialStationaryFrameOfReferenceがそれです。

上記リンク先の記事を読みつつ、相対座標系に置き換えます。 Windows::Perception::Spatial::SpatialLocatorAttachedFrameOfReferenceがデバイスからの相対座標を扱うための参照です。

型を置き換えてもこのままではインタフェースが違うのでうまくいきません。 SpatialLocatorAttachedFrameOfReferenceでSpatialCoordinateSystem^を拾うには

GetStationaryCoordinateSystemAtTimestamp(prediction->Timestamp);

とします。

HoloLensの姿勢を取得する

これでHoloLensの相対座標系で色々できるようになりました。 姿勢(視線の向き)などは

SpatialPointerPose^ pointerPose = SpatialPointerPose::TryGetAtTimestamp(currentCoordinateSystem, prediction->Timestamp);

で拾えます。

公式マニュアルはこちら。

SpatialPointerPose class - UWP app developer | Microsoft Docs

pointerPoseからは次のようにして頭の位置、向きなどが拾えるようです。

pointerPose->Head->Position
pointerPose->Head->ForwardDirection
// etc.

あとはマニュアルどおりやればビルボードが出ました。

手っ取り早く解決したい(サンプルコードを持ってくる)

手っ取り早くサンプルコードをコピペして済ませる方法もありました。

https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/HolographicFaceTracking

HoloLens実機ない人のために動作概要の解説

  • HoloLensのカメラで実世界のカメラ映像を取得(media capture)
  • Microsoftの顔認識APIに映像を入力
  • 顔として認識できる領域があれば、そこを切り取ってDirectXテクスチャを作る
  • 切り取った顔領域をビルボードとして画面中央より少し左よりの位置にレンダリング
  • 顔領域と思われる領域の空間の少し上部に3Dモデルをレンダリング
  • 文字列をテクスチャとして生成する(direct2d)
  • 顔が認識できないもしくはカメラがない(エミュレータ)の場合は前述の文字列を書き込んだテクスチャをビルボードレンダリング

です。 顔検出は置いといて、エミュレータで動かしても「no avalilavle camera」のビルボードは出るので、必要箇所を抜粋すれば良いかと。 試しに該当する機能を持ってきてみると、期待通りビルボードが表示できました。

ちょっと詰まったポイントがあったので2点ほど。

以下、サンプルコード引用時のトラブルシューティングです。

サンプルコード引用したシェーダーのコンパイルに失敗する

GeometryShaderを新たに作ってVisualStudioでコンパイルすると、こんなエラーが出ます。

warning X3554: unknown attribute maxvertexcount, or attribute invalid for this statement
error X3514: 'main': input parameter 'input' cannot have a geometry specifier

これはVisualStudioプロジェクトに後から追加したhlslファイルはコンパイラの設定が不足していることによるものです。 maxvertexcountはgeometryShaderでのみ使えるアトリビュートなので、コンパイラに「これはgeometryShaderですよ」と教えてあげる必要があります。

新しいhlslファイルをソシューションに組み込んだ直後の設定はこうなっています。 この図ではシェーダーの種類が指定されていません。何シェーダを作るつもりなんでしょうね。 f:id:Catalina1344:20170319123008p:plain

例えばGeometryShaderならこういう形で指定します。pixelShaderやVertexShaderも同様。 シェーダーレベルは環境に合わせて適切なものを選択します。 f:id:Catalina1344:20170319123011p:plain

サンプルコード引用したが何も表示されない

VisualStudio2015の生成するHoloLens用Direct3Dのテンプレートと、上記サンプルコードでは、行列の型が違っています。

テンプレートではDirectX::XMFLOAT4X4を行列の型として使っていますが、サンプルコードではWindows::Foundation::Numerics::float4x4です。 全体で統一が取れていればいいので、どちらかに合わせてしまいましょう。

たぶん内部構造が少し違うのかなと推測していますが、追うの面倒なので「やっぱ型は合わせたほうがいいよね」程度で。

文字列をテクスチャとして生成できているか謎

そもそも基本的な機能が動いていないとお話になりませんよね。 例えばテクスチャがすべて黒だった(=何も表示されていないように見えていただけ)なんて悲しい思いはしたくないものです。

テクスチャが生成されていない/テクスチャの参照が失敗しているかもと不安な場合は、pixelshaderでテクスチャサンプラを使わずに単色出力を試すと幸せになれます。

たとえば

//   return min16float4(rgbChannel.Sample(defaultSampler, input.texCoord));
    return float4(1.f, 1.f, 1.f, 1.f);  // RGBA . Aは0に近いほど透明. 1は不透過

で、白色単色のビルボードが出るので、最初はこうしておけば問題切り分けに役立ちます。

感想と今後の展望

とりあえずビルボードレンダリングできるようになりました。 HoloLensの座標系も少し詳しくなりました。

あとはARやるための仕組みをごりごりと書いていきたいところですが、 もう少しコード整理して、いつでもデバッグ用に組み込める形にしてから次のステップに移りたいと思います。

それでは今回はこれにて。