ストリートビューのパノラマ画像をダウンロードする

React VRで使うパノラマ画像のサンプルとしてストリートビューの画像を使いたいなーと思ってネットで探したら extract-stretviewというツールを発見しました。

これがなかなか良かったので紹介します。(^○^)

www.npmjs.com

インストール

$ npm install extract-streetview -g

使い方の例

基本的に

$ extract-streetview 緯度 経度 -o 出力ファイル

です。

例えば、渋谷のスクランブル交差点 の緯度経度は

  • 緯度（latitude）: 35.6595126
  • 経度（longitude）: 139.7005696

なので

$ extract-streetview 35.6595126,139.7005696 -f jpg -q 100 -z 2 -s outdoor -o panorama.jpg

でダウンロードできます。

f:id:sanshonoki:20170512213334j:plain

ダウンロードした画像は アスペクト比 2:1 の Equirectangular形式になっていて そのまま各種VRアプリケーションの入力画像として使えるはずです。

ちなみに、 -zオプション は画像サイズとなっており目安は以下のようになります。

-z 画像サイズ ファイルサイズ
0 416 x 208 54 KB
1 832 x 416 165 KB
2 1664 x 832 568 KB
3 3328 x 1664 1.9 MB
4 6656 x 3328 5.6 MB

This tool is experimental とありますが パノラマ、VRを身近にする便利なツールだと思います。(*´ー`)

Cordovaで React VR をスマホアプリにしてみる

先日React VRがリリースされました。

以前VR系のベンチャー会社で働いていたので VRと聞くとつい触ってみたくなります。 (￣ー￣)

以下の記事を参考に、Cordovaを使って React VR で作った Webアプリ を スマホアプリ化 してみました。

qiita.com

インストール

  1. cordovaのインストール

     $ npm install -g cordova

  2. React VRのインストール

     $ npm install -g react-vr-cli
プロジェクトの作成

  1. cordovaプロジェクトの作成

    $ cordova create path/to/your/dir com.example.hello.reactvr HelloCordovaReactVr

    createのパラメータは corodva create ディレクトリ 識別子 アプリ名 です。

    識別子でハイフンやアンダースコアを使うとハマるので要注意です。(AppIDとしてiOSではアンダースコア、Androidではハイフンを使えないため)

  2. iOSやAndroidのプラットフォームを追加

     $ cordova platform add ios --save
 $ cordova platform add android --save

  3. React VRのプロジェクトを作成

    corodvaプロジェクトのルートディレクトリでReact VRのプロジェクトを作成します。

     $ react-vr init react_vr

    initのパラメータは react-vr init アプリ名です。

アプリのビルドとコードの修正

  1. React VRアプリのコード (js) の修正

    パノラマのテクスチャ画像をデフォルトから変更したいときは static_assetsディレクトリにEquirectangularのパノラマ画像を配置して index.vr.js を以下のように修正します。

    <View>
   <Pano source={asset('tsujido-house-pano.jpg')}
     style={{
       transform: [
         {rotateY : 0}
       ] }}
   />
  ....
 </View>

  2. React VRアプリをビルド

     $ cd react_vr
 $ npm run bundle

  3. React VRアプリのコード (html) の修正

    vr/index.html をエディタで編集します

    1. index.htmlにcordova.jsを追加

      <body>
      .....
     <script type="text/javascript" src="cordova.js"></script>
</body>

    2. ビルドした js を使うようにパスを修正

      2箇所修正します。.jsをつけないとNGのようです

      client.bundle.js <script src="./build/client.bundle.js?platform=vr"></script>

      index.bundle.js './build/index.bundle.js?platform=vr&dev=true'

    3. static_assets が index.html があるディレクトリから見えるようにする

       ln -s ../static_assets .

    4. assetsRootのパラメータを追加

       ReactVR.init(
     // When you're ready to deploy your app, update this line to point to
     // your compiled index.bundle.js
     './build/index.bundle.js?platform=vr&dev=true',
     // Attach it to the body tag
     document.body,
     { assetRoot: 'static_assets' }  // 追加
   );

  4. cordovaのwwwディレクトリがReact VRのコンテンツを参照するようにする

    cordovaプロジェクトのルートディレクトリに移動して

    $ mv www www.orig
$ ln -s react_vr/vr www

  5. cordovaアプリをビルド

     $ cordova build [ios/android]

    この状態で $ cordova serve ios をするとブラウザ上で動作確認できます。

    f:id:sanshonoki:20170506174311g:plain

エミュレーターで確認

続いてエミュレーターで動作確認します

  1. iOS

     $ cordova emulate ios

    必要に応じて --target=iPhone-6sのようにターゲット端末をオプションで指定します。

    f:id:sanshonoki:20170506152558p:plain:w250

    おお、出ました！ ただし、シミュレーターではジャイロが使えないため真下向きのままから動きません… (´Д｀。)

  2. Android

    Android は 最初にエミュレーターを起動してから コマンドを打ってください

     $ cordova emulate android

    f:id:sanshonoki:20170506152630p:plain:w250

    orz.. AndroidのエミュレーターはWebGLをサポートしてないようです..

実機で確認

手持ちのiPad mini でやってみます。

そのまま、$ cordova run ios すると

 `Code Sign error: No code signing identities found: No valid signing identities (i.e. certificate and private key pair) were found.`

のエラーが出るので Xcodeのプロジェクトを開きます

$ open platforms/ios/HelloCorodvaReactVr.xcodeproj

Fix issueしてXcode上でビルド、実行します。 f:id:sanshonoki:20170511151122j:plain:w300

アプリは起動したもののテクスチャが表示されません..。(ﾉﾟοﾟ)ﾉ
iPad miniが古いせいでしょうか…

Androidは手持ちのNexus5がいつの間にやら（Android6.0にアップデートしてから?）USBデバッグ接続できなくなっていて実機で確認できませんでした..

iOS、Androidとも最新の実機では動いてくれると信じています。。

実機で確認（続）

iPad mini の OS を10.3 に アップデートしたら見れるようになりました! ヾ(´▽｀)ﾉ f:id:sanshonoki:20170507095044g:plain

アップデート前は動いてなかったThree.jsのサンプルがOSアップデート後に動くようになったのでそれでWebGL対応を判定できそうです。 https://threejs.org/examples/#webgl_animation_cloth

パッケージをアップデートしたらNVIDIAが認識されなくなった...

事件発生!

Ubuntuマシンで毎回パッケージアップデートのダイアログが出てウザいので何気なくパッケージアップデートを実行しました。

そして翌日、いつものように学習プログラムを走らせる

と、 あれ、GPUのエラー ?!?!

$ nvidia-smi してみる。

NVIDIA-SMI has failed because it couldn’t communicate with the NVIDIA driver. Make sure that the latest NVIDIA driver is installed and running.

マジか Σ（￣ロ￣ lll)

あぁ、やっちまった..。要らんことしなかったら良かった・・ 　o(；△；)o

解決。。

ドライバを再度インストールしたら直りました。。

wget http://us.download.nvidia.com/XFree86/Linux-x86_64/367.57/NVIDIA-Linux-x86_64-367.57.run
chmod a+x NVIDIA-Linux-x86_64-367.57.run
sudo service lightdm stop
sudo bash ./NVIDIA-Linux-x86_64-367.44.run --no-opengl-files

ふ〜焦ったよ..　ε-(´∀｀*)

気をつけよう。

ディープラーニング学習メモ #5 CNN

Karpathy先生のCS231nの講義スライドも使いつつ覚えておきたいポイントをまとめてみます。

畳み込み（Convolution）のイメージ図

f:id:sanshonoki:20170410064711p:plain:w500

ポイント

  • 入力のdepthとフィルタのdepthは同じ。フィルタを適用して1つの値を出力
  • フィルタをスライドさせながら適用して 1枚の アクティベーションマップを 出力
  • N枚のフィルタから N枚のアクティベーションマップを 出力
畳み込みの演算

F = フィルタサイズ

np.sum(X[x:x+F, y:y+F, :] * W) + b
  • フィルタサイズで切り取った X に W を elementwise掛け算 して
  • 演算結果をすべて足し込んでさらに bias を足す


別の書き方をすると

np.dot(X[x:x+F, y:y+F, :].flatten(), W.flatten()) + b

とも書ける。

ネットワーク全体のイメージ図

INPUT -> [[CONV -> RELU]*N -> POOL?]*M -> [FC -> RELU]*K -> FC
  • N: 0 ~ 3程度
  • M: 0 ~
  • K: 0 ~ 3程度

f:id:sanshonoki:20170408074722j:plain

CONV層 + RELU層 と POOL層を重ねて 高次元の特徴を 複数抽出し、全結合(FC)レイヤで 各特徴の重みを学習する というイメージです。

覚えておきたい計算式

  1. アクティベーションマップのサイズ

    ( W − F + 2P ) / S +1

    TensorFlowの padding=‘same'は P=ceil(F/2)、padding='valid'はP=0です。正確な定義はこちらです。

  2. パラメータ数

    ( F * F * 入力フィルタ数 + 1) * 出力フィルタ数

    +1 は bias項になります。

  3. 必要なメモリサイズ

    ( W * H * フィルタ数 ) * 4 (=float32) バイト

    バッチサイズはGPUのメモリサイズに依存します。（GPUのメモリ上にのる限りは大きくしたほうがよい）

    VGGNetの場合だと

    • 画像1枚あたり 93 M （backwardもいれると x 2) となるようです。。

なぜディープにするのがよいのか？

7x7フィルタを1回適用した場合と3x3フィルタを3回適用した場合を比較してみます。

イメージ パラメータ数
7x7フィルタを1回 f:id:sanshonoki:20170408062235p:plain:w150 (7 * 7 * 3 + 1) * 3 = 444
3x3フィルタを3回 f:id:sanshonoki:20170408062304p:plain:w320 (3 * 3 * 3 + 1) * 3 * 3 = 252

出力アクティベーションマップのサイズは 26 x 26 で同じですが3層に積み重ねるほうがより大きな表現力があり（非線形処理を3回適用するので）、またパラメータ数も少なくなり学習効率がよくなります。

一方でメモリサイズはより必要になってくるのでトレードオフの関係にはなります。 GPUのスペックが向上することでよりディープに学習することが可能になったと言えるでしょう。

どんどんディープになっていくトレンドですが ILCVRC'15の勝者の ResNet は なんと.. 152層 です。 w|;ﾟﾛﾟ|w

f:id:sanshonoki:20170408071259j:plain

なぜCNNは成功しているのか？

次のような理解で大体あっていると思う。。

画像認識に適したアーキテクチャ
  • 畳み込み: 何層も畳み込むことで高次元の抽象的な特徴を抽出できる
  • プーリング: 位置のずれにロバストになる
以下の2つの大きな課題があったが解決された
  • 過学習 (Overfitting)
  • 勾配消失問題 (Vanishing gradient problem)
解決の要因
  • 手法の進化
    • ReLU: 深いネットワークでも勾配が逆伝搬できるようになった
    • Dropout: 擬似的にアンサンブル学習することで汎化性能が上がり過学習を抑制できるようになった
  • ハードウェアの進化（特にGPU）
    • 大量のデータ、大量のパラメータを処理できるようになった

勾配降下法（gradient descent）の実装サンプル

1次元データでCNNのgradient descentをNumpyで実装してみました。 スクラッチで実装すると少し自信がつく気がします。。 (o・ω・o)

github.com

今回は以上です。次は RNN の記事を書いてみようと思います。

学習データ数と認識精度の関係

パドック画像から競走馬の距離適性を推測する学習をしてみたけど性能が全然よくない…! 　

ヒィィ (ﾉﾟρﾟ)ﾉ

う〜ん、やっぱりデータのサンプル数が少なすぎるのかな・・

ということでchainerのCIFAR-10のサンプルコードを使って学習データ数と認識精度の関係をちょっと調べてみました。

実験条件
  • epoch数: 100
  • 学習データ数: 1000, 3000, 5000, 10000, 50000
結果

f:id:sanshonoki:20170407214433p:plain

やっぱり、機械学習の世界では 数は性能なり なんですね。。

CUDAを7.5から8.0にアップグレード

Udacityのディープラーニング講座の中で使うTensorFlowのバージョンが1.0となっていてCUDA7.5だと動かない… (>_<)

ということで自宅PCのCUDAを7.5から8.0にアップグレードしました。

今まで自分にとって開発環境のアップグレードは鬼門で 今まで動いていたものがいろいろ動かなくなって

ああ、やらんかったらよかった…

ということが多々あったのですが今回はあまりにもスムーズでうれしかったのでメモを残します。(´ー｀)

CUDA8.0のインストール

  1. NVIDIAのダウンロードサイトからCUDAをダウンロードしてきます。

    自分のPCにあったものを選択します。Ubuntu14.04用は https://developer.nvidia.com/compute/cuda/8.0/Prod2/local_installers/cuda_8.0.61_375.26_linux-run

  2. ダウンロードしたスクリプトを実行
chmod a+x cuda_8.0.61_375.26_linux-run
sudo service lightdm stop # Stop X-Server
sudo bash ./cuda_8.0.61_375.26_linux.run --silent --no-opengl-libs --toolkit

1分ぐらい待つと何のメッセージ出力がなく終了します。

えっ？( ´・д・)

と思うぐらい拍子抜けです。

続いて以下のコマンドでCUDAがインストールされていることを確認します。

nvidia-smi # check GPU is available
nvcc -V # cuda version should be 8.0

cuDNN(v5.1)のインストール

続いてcuDNNをインストール。こちらもNVIDIAのサイトからダウンロードしてきます。 cuDNNはNVIDIAのユーザー登録が必要です。

ユーザー登録面倒な方はこちらからダウンロードしてください http://momonoki.blob.core.windows.net/data/cudnn/cudnn-8.0-linux-x64-v5.1.tgz

tar xvfz cudnn-8.0-linux-x64-v5.1.tgz
cat /usr/local/cuda/version.txt # /usr/local/cudaがcuda-8.0へのリンクになっていることを確認
sudo cp cuda/include/cudnn.h /usr/local/cuda/include
sudo cp cuda/lib64/* /usr/local/cuda/lib64

chainerやTensorFlowの再インストール

そのままだとCUDAのバージョン不一致で動かないので一度アンインストールしてからインストールします。

# reinstall chainer
pip uninstall chainer
pip install chainer

# reinstall TensorFlow
pip uninstall tensorflow
pip install tensorflow-gpu

再インストールしたらMNISTのサンプル等でGPUありで動くかを確認します。

以上です。

これで AWSのGPUインスタンス（何かびびってしまう。。）を使わずに自宅PCで課題を進められます。 (*´Д`)

ディープラーニング学習メモ #4 誤差の逆伝搬

今日は誤差逆伝搬法（Backpropagation）について書いてみます。

Karpathy先生のCS231nの講義が秀逸すぎるのでそれを見れば十分です! (◍•ᴗ•◍)

これではあんまりなので特に覚えておきたいポイントをまとめてみようと思います。。

global勾配にlocal勾配を掛けて次のノードにエラーの誤差を伝搬させる

f:id:sanshonoki:20170321043543j:plain:w450

微分の連鎖律（チェインルール）です。

基本的な演算での伝搬を覚えよう

Add演算はそのまま誤差を伝搬させる

f:id:sanshonoki:20170322041057j:plain:w450

Mul演算は互いの値をクロスに掛けて誤差を伝搬させる

f:id:sanshonoki:20170322041124j:plain:w450

Max演算は値が大きい方へのみ誤差を伝搬させる

f:id:sanshonoki:20170322041153j:plain:w450

分岐ノードは誤差を加算する

f:id:sanshonoki:20170322050746j:plain:w450

RNNのhiddenノードも出力層からの誤差と次のRNNセルからの誤差が加算されます。（hは次のRNNセルへの入力でもあるため）

f:id:sanshonoki:20170322050844j:plain:w450

ベクトルの場合も同じ

computational graph network layer graph
f:id:sanshonoki:20170323051220j:plain:w400 f:id:sanshonoki:20170323051243j:plain:w200

入力がベクトルの場合も同じです。ただ、行列(W)の次元を考慮する必要があります。 掛け算するために転置（T）をしたり、掛ける順番を考慮しないと怒られます..。

ポイント
  • あるノードでの順方向（X）と逆方向（dX）の次元は同じ（当たり前だけど）
  • 出力されるべき次元に合わせて転置や掛ける順番を考える （紙に書けというアドバイスをよく見かける。地道に慣れろということ）
  • この例では W は (outsize, insize) になっているが実際のフレームワークでは W は基本的に (insize, outsize) という次元になる。バッチ単位で処理するため

個人的には computational グラフで考えると誤差の伝搬が計算しやすいです。

バッチ単位で考えたとき

f:id:sanshonoki:20170323051256j:plain:w300

このようにバッチ単位でまとめて行列計算したいときは W は (insize, outsize) となります。 また、WX ではなく D = XW と掛け算します。

今回はここまでです。 マウスで文字を書くのつらい.. (ﾉﾟοﾟ)ﾉ