競走馬のパドック画像の検索

「競走馬のパドック画像から距離適性をディープラーニングで予測する」の記事で競走馬のパドック画像をせっかく収集したので パドック画像を検索できるアプリケーションを作ってみました。

こちらです。 (｀・ω´・)✧

https://padock-photo-search.herokuapp.com/

シンプルな検索フォームに名前を入れてSearchボタンをクリック!

このように検索ワードにマッチしたパドック画像が表示されます。

並べて眺めることで成長が感じられるかもしれません。いや、感じてください。。

今回のアプリケーションはRails5.1で作りました。話題の新機能、Webpacker + React は使わずお預け状態。。勉強を兼ねて書き直してみたいと思います。(◍•ᴗ•◍)

github.com

UdacityのSirajのCoding challengesのコードの在り処をまとめた

UdacityのDeep learning基礎講座のSirajのCoding challenges 、更なるスキルアップを図るにはうってつけと思いつつも受講中はスルーしてました。。 (￣ー￣；

修了できたのを機にこれからやろうと思い、とりあえずソースコードの在り処をまとめてみました。

github.com

$ git clone --recursive git@github.com:tanakatsu/udacity-dlnd-siraj-coding-challenges-collection.git

でコードをまとめてダウンロードできます。（約1.3Gあります)

あとは、やるだけです (๑•̀д•́๑)

と、言い訳ができないように追い込んでいきます。。

目次はこちら（↓）です。"Runner up" = 準優勝ってことを初めて知りました。

Week1 How to Make a Prediction [video]

• Coding challenge: https://github.com/llSourcell/linear_regression_demo
• Winning code: https://github.com/ludobouan/linear-regression-sklearn
• Runner up code: https://github.com/amanullahtariq/MLAlgorithm/tree/eca367287f7874e08a790ce0b0c21567e0b38a22/Challenge/LinearRegression

Week2 How to Make a Neural Network [video]

• Coding challenge: https://github.com/llSourcell/Make_a_neural_network
• Winning code: https://github.com/ludobouan/pure-numpy-feedfowardNN
• Runner up code: https://github.com/jiexunsee/Neural-Network-with-Python

Week3 How to Do Sentiment Analysis [video]

• Coding challenge: https://github.com/llSourcell/How_to_do_Sentiment_Analysis
• Winning code: https://github.com/jovianlin/siraj-intro-to-DL-03/blob/master/Siraj%2003%20Challenge.ipynb
• Runner up code: https://github.com/erilyth/DeepLearning-Challenges/tree/master/Sentiment_Analysis

Week4 How to Do Mathematics Easily [video]

• Coding challenge: https://github.com/llSourcell/how_to_do_math_for_deep_learning
• Winning code: https://github.com/alkaya/earthquake-cotw
• Runner up code: https://github.com/sibyjackgrove/Earthquake_predict/blob/master/earthquake_predict_for_GitHub.ipynb

Week5 How to Make Data Amazing [video]

• Coding challenge: https://github.com/llSourcell/How_to_Make_Data_Amazing
• Winning code: https://github.com/alkaya/TFmyValentine-cotw
• Runner up code: https://github.com/mdalai/Deep-Learning-projects/tree/master/wk5-speed-dating

Week6 How to Make an Image Classifier [video]

• Coding challenge: https://github.com/llSourcell/how_to_make_an_image_classifier
• Winning code: https://github.com/erilyth/DeepLearning-Challenges/tree/master/Image_Classifier
• Runner up code: https://github.com/jiexunsee/Simple-Inception-Transfer-Learning

Week7 How to Predict Stock Prices Easily [video]

• Coding challenge: https://github.com/llSourcell/How-to-Predict-Stock-Prices-Easily-Demo
• Winning code: https://github.com/etai83/lstm_stock_prediction （コードが削除されている。。）
• Runner up code: https://github.com/AndysDeepAbstractions/How-to-Predict-Stock-Prices-Easily-Demo/blob/master/stockdemo.ipynb

Week8 How to Generate Art [video]

• Coding challenge: https://github.com/llSourcell/How-to-Generate-Art-Demo
• Winning code: https://github.com/erilyth/DeepLearning-Challenges/tree/master/Art_Generation
• Runner up code: https://github.com/michalpelka/How-to-Generate-Art-Demo/blob/master/demo.ipynb

Week9 How to Generate Music [video]

• Coding challenge: https://github.com/llSourcell/How-to-Generate-Music-Demo
• Winning code: https://github.com/jiexunsee/rudimentary-ai-composer

Week10 How to Make a Text Summarizer [video]

• Coding challenge: https://github.com/llSourcell/How_to_make_a_text_summarizer
• Winning code: https://github.com/rtlee9/recipe-summarization
• Runner up code: https://github.com/scollins83/teal_deer

Week11 How to Make a Language Translator [video]

• Coding challenge: https://github.com/llSourcell/How_to_make_a_language_translator
• Winning code: https://github.com/Nemzy/language-translation/blob/master/neural_machine_translation.ipynb
• Runner up code: https://github.com/erilyth/DeepLearning-Challenges/tree/master/Language_Translation

Week12 How to Make a Chatbot [video]

• Coding challenge: https://github.com/llSourcell/How_to_make_a_chatbot
• Winning code: https://github.com/xkortex/Siraj_Chatbot_Challenge
• Runner up code: https://github.com/erilyth/DeepLearning-Challenges/tree/master/Text_Based_Chatbot

Week13 How to Win Slot Machines [video]

• Coding challenge: https://github.com/llSourcell/how_to_win_slot_machines
• Winning code: https://github.com/xkortex/how_to_win_slot_machines/blob/master/WallStBandits.ipynb
• Runner up code: https://github.com/esha-sg/Intro-DeepLearning-Siraj-Week13

Week14 How to Generate Images [video]

• Coding challenge: https://github.com/llSourcell/how_to_generate_images
• Winning code: https://github.com/Nemzy/video_generator
• Runner up code: https://github.com/niazangels/vae-pokedex

Week15 How to Generate Video [video]

• Coding challenge: https://github.com/llSourcell/how_to_generate_video
• Winning code: https://github.com/llSourcell/how_to_generate_video/pull/2 （Coding challengeのコードへのプルリク。マージ済み）

Week16 How to Convert Text to Images [video]

• Coding challenge: https://github.com/llSourcell/how_to_convert_text_to_images

Week17 How to Learn from Little Data [video]

• Coding challenge: https://github.com/llSourcell/How-to-Learn-from-Little-Data

Udacity Deep Learning Nanodegree Foundation を修了してみての感想

1月末から始まり約4ヶ月にわたったUdacity Deep Learning Nanodegree Foundation、無事に修了できました。 :-)

ブログ用に講座のトップページをキャプチャしてみたんですが599ドル ?!

Oh My God、200ドルも値段上がってるよー　((( ；ﾟДﾟ)))

費用対効果についてはあとで触れますが599ドルだったら多分受講してなかった（正確に書くと、受講させてもらえなかった）と思います。。

他の方の記事

国内の他の受講者の方が早くも記事を書いていますね。参考になると思います。 講座の内容はこれらのほうが断然詳しく書かれているのでこれらをご参照ください。 今回も他人のふんどしで相撲を取るスタイルです。。(;￣ー￣川

• Udacity Deep Learning Nanodegreeの紹介 - Qiita
• Udacityのディープラーニング基礎コース(Deep Learning Foundation)を終えた感想 - Qiita
• Udacity で Deep Learning Nanodegree Foundation を受講してる | Futurismo

私の感想

少し辛口なところもありますが率直な感想。 (｀・ω・´)

SirajのYouTube動画

• イントロ
  • 凝った動画で「AIでこんなことできるのね」と、イントロとして面白い
  • 5-10分で短いので集中して見れる
  • 本編はTensorFlowオンリーだけどここではKerasがよく使われる。。
• Live session
  • 約1時間のLive coding。時間の都合でスキップしたりエラーを解消できずに放置して結局コピペだったりグダグダ。集中力を保って最後まで見るのは難しい
• Coding Challenge も取り組めればスキル向上しそう。でもこの講座を受けるレベルの人にはそんな余裕はないかも。。

このYouTube講座は公開されていてUdacityの受講者じゃなくても見れます。 www.youtube.com

修了できたのでCoding Challengeもトライしてみようかなぁ

本編の学習コンテンツ

• 技術解説
  • アニメーションも使った動画解説は英語の解説記事を読むより敷居が低く効率的なのは確か
  • でも、結局は咀嚼できるまで何度も読み返すプロセスがないと “理解できた気がする” で終わってしまいそう
• 練習課題
  • プロジェクト課題と違ってミニテスト形式じゃないので最後までコーディングしてみたもののうまく動かずどこで詰まっているか分からないというパターンに苦しむ人は多いかも
  • MatのSolution解説の適当さ感が気になる。「とりあえず説明したから」的な。そう思うのは私だけだろうか…

これもGithubでJupyter Notebookのコンテンツは公開されています。

github.com

通常の練習課題にもテストコード入れて欲しいなと思います。Solutionに手が伸びてしまう人は多いと思う。。

提出課題（プロジェクト）

• 各所でテストコードがあり、step by stepで確認しつつ進められたのは良かった
• 参考となる直前の練習課題と同じようにやっていたらハマる箇所が何箇所かあってちょっといじわる
• レビューは「ok」「Hyperparameterのチューニングの余地あり」「もっとpythonらしいコードの書き方がある」ぐらいしか返ってこなかった。。

練習課題と同じようにやっていたらハマる所はもう少しヒント（「ここは練習課題と違うからしっかり考えてみてね」的な注意書き）があってもいいかなと思います。レビューは気に入らなかったら何回でも出せるみたいです。

運営

• いつの間にか過去のweekのコンテンツが増えていたりする
• GithubのコンテンツもWeeklyのコンテンツ公開に合わせたアップデート以外にもバグ修正含めてちょこちょこ更新されている
• でも、運営側から通知が何もないので基本的に気づかない…

これ、絶対に改善してほしいです。><

ユーザーフォーラム

• 同じ質問があふれている。。
• たまには自分にとって役に立つ情報もあるが全部目を通すのは辛い…

同じ質問がたくさん出るというのはみんな同じ箇所でスタックしているということで学習コンテンツの改善の余地があると思います。既出の質問かどうかちゃんとチェックするのは大変なので同じ質問が出るのは致し方ないところですね。。

その他（TensorFlow）

• 前半は tf.Variableを使ってWeightやbiasを明示的に実装するが後半は基本的に高レベルAPI（tf.contrib.layersやtf.layers）が使われる
• FullConnectedの実装が tf.contrib.layers.fully_connected になって、それがいつの間にか tf.layers.dense になったりで混乱する
• TFLearnを1回だけ使う。謎。TFLearn を使うぐらいなら Keras を使ってほしい

特に説明がなかった気がするけど基本的には高レベルAPIを使っていけばいいのでしょうか。それにしてもTensorFlowはAPIの変化が激しすぎます。。 ┌┤´д`├┐

まとめ

• Deep Learningのメインストリームの各種技術のつかみを一通りおさえられる。でも、身に付くというのはまた別の話。。
• 勉強にはなる。お金をかけてかつ〆切りもあるので怠けず続けられる
• 費用対効果は疑問。。

高いクオリティの無料の講座もある中、学習コンテンツの現状クオリティを考えると399ドル（当時）はやっぱり高いんじゃないかなー。599ドルになるとなおさら感あります。

受講生のみアクセスできる教材、フォーラムやレビュー（提出課題のフィードバック）に値段相応の価値を感じなかったので高い意志力を持って怠けずに続けられる人は無料公開されているSirajのYouTubeビデオやGithubのJupyter Notebookでも十分なのかなと思いました。。

無料の講座

• Machine Learning | Coursera
• CS231n Convolutional Neural Networks for Visual Recognition
• Stanford University: Tensorflow for Deep Learning Research
• Practical Deep Learning For Coders—18 hours of lessons for free

「人工知能に関する断創録」のブログで紹介されていて知ったfast.aiの講座（Practical Deep Learning For Coders）をやってみようと思ってます

競走馬のパドック画像から距離適性をディープラーニングで予測する

まだまだ改善したいですが競馬の祭典ダービー当日ということでいったん現状をまとめてみます。

やりたいこと

短距離馬と長距離馬は馬体の特徴が違うと言われています。 それをAIで判別できるようにしたい! というのが今回の試みです。

パッと見た瞬間に、胴が短いな、詰まっているなと思ったら、短距離馬の胴体である。反対に、胴が長く、窮屈なところがないなと感じたら、長距離馬の胴体である。 （ガラスの競馬場: 集中連載：「馬を見る天才になる！」第４回 より）

果たして、ウマくいくのか〜?! o(´Д｀*)o

短距離馬	長距離馬

（写真は競馬道のPHOTOパドックのサイトから）

学習データの生成

1. パドック画像の収集

入力となるパドック画像は競馬道のサイトからクローラで収集してきます。

2017年1/23時点で のべ頭数 8707頭、ユニーク頭数としては 2528頭分の画像を収集できました。

sanshonoki.hatenablog.com

2. ラベル（距離適性）の収集

次に画像に対してラベル（距離適性）をつけていきます。

Netkeibaの各馬のページの適性レビューのデータを使って距離適性のグラフから数値(0.0-1.0) として取得します。

sanshonoki.hatenablog.com

学習

いよいよ学習です。

CNN で 回帰（Regression）学習します。

• input: パドック画像 （32 x 32）
• target: 距離適性の値 (1.0 - 10.0)： 0.0-1.0 を10倍にスケール
• モデル
• 学習最適化アルゴリズム: Adam
• データセット
  • test: 2016年のGIレース8レース分
  • validation: テストを除く2016年のデータ
  • train: 2016年以外のデータ

いろいろやって現状の最善の学習結果は以下です。 validationエラーが全然下がってきません…。 (´Д｀。)

どちらとも言えないのであれば、平均的な馬体の馬なのであろう。必ずしも、体型のみで短距離・長距離を見分けられるわけではなく、どっちつかずの体型の馬の方が圧倒的に多いのが実際である。 （ガラスの競馬場: 集中連載：「馬を見る天才になる！」第４回 より）

とのことなので仕方ないのでしょうか..

やったこと

• 学習データを増やす
  • flip画像の生成
  • コントラストを少しずつ変えた画像の生成
• 初期化アルゴリズム で He のアルゴリズム を使う
• 平均画像（mean.npy）を作成して入力を正規化する

あと、最初はターゲットを0.0-1.0としていましたが性能がよくなかったです。誤差関数が MSE（mean squared error) ということで二乗することにより誤差がより小さく出るので誤差逆伝搬が効果的に働いてなかったのだと思います。

いろいろとお膳立てされていて試行錯誤を必要としないチュートリアルと違ってホント苦しんでいます・・その分勉強になってますが。 validationエラーはあまり下がりませんでしたが素人が予測するよりかはマシな印象はあります。

予測結果の例

以下は2016年のGIレースから6頭分の予測結果です。 みなさんの目による予測はいかがでしょうか。。？ (´・с_・｀)

画像	DL予測	正解
	0.254587	こちら
	0.336478	こちら
	0.472271	こちら
	0.513455	こちら
	0.603956	こちら
	0.705816	こちら

0.0に近いほど短距離、1.0に近いほど長距離です

改善のために…

果たしてこれでうまくいくのかは分かりませんが改善として今思いつくこと

• Preprocess処理（特にハンドエンジニアリング）をがんばる
  • 馬体部分だけを抽出した画像で学習するとか..
• 入力画像サイズを大きくして（64x64 etc..）転移学習をやってみる

引き続きやっていこうと思います。

デモサイト

Heroku上で試せるようにしました。 興味ある方は遊んでみてください。。

https://padock-photo-classify.herokuapp.com/

また今回使ったコードは以下にあります。

（学習） github.com

（Webアプリ） github.com

参考記事

性能改善のために参考になった記事です。 ブログ記事にも書いたAndrew Ng先生のNIPS2016での講義ももちろん参考になりました。(●´Д｀●)

• Inside of Deep Learning （ディープラーニングの性能改善手法 一覧） - Qiita
• 正則化から転移学習まで。tensorflowソースコードで見る性能改善手法 まとめ - Qiita
• Deep learning実装の基礎と実践

Nuts and Bolts of Applying Deep Learning

CS231の講義の関連動画を辿ってAndrew Ng先生がNIPS2016で行った講演「Nuts and Bolts of Applying Deep Learning」を見つけました。これがすごく面白い内容だったので超主観的にポイントをまとめてみます。

講演のビデオやスライド、Web上で見つけたブログは以下にあります。

• ビデオ
  • https://www.youtube.com/watch?v=F1ka6a13S9I www.youtube.com
• スライド
  • https://media.nips.cc/Conferences/2016/Slides/6203-Slides.pdf
• Blog
  • http://jaejunyoo.blogspot.com/2017/03/nips-2016-tutorial-summary-nuts-and-bolts-of-building-AI-AndrewNg.html
  • https://kevinzakka.github.io/2016/09/26/applying-deep-learning/
  • http://www.computervisionblog.com/2016/12/nuts-and-bolts-of-building-deep.html

スライドと1番目のBlog記事がよくまとまっているのでそれを読めば十分な気はします。が、自分の勉強としてまとめていきます。。

Major Deep Learning Trends [2:50]

• データが少ないときは ハンドエンジニアリングで性能の差がつく
• ビッグデータ時代は データ量で性能が決まる

To hit the top margin, you need a huge amount of data and a large NN model.

定式化: データ量 x 大きなモデル = 性能

End-to-end Deep learning [13:57]

• End-to-endアプローチは 莫大なデータがある場合においてうまくいく
• 例えば、自動運転では精度を満たすだけのデータが足りずまだ難しい
• そういうケースではハンドエンジニアリングは依然として重要である

End-to-end works only when you have enough (x,y) data to learn function of needed level of complexity.

データ量万歳＼(^o^)／です。

Bias-Variance tradeoff [27:04]

• どんな状況であれ やるべきことは Bigger model と More data
• Bias と Variance を同時に改善できる（トレードオフの関係にならなくなる）
• New model architectureの検討はハードル高いし大抵の問題はそこまで必要ない

基本的なワークフロー

Data synthesis （Data augmentation）[31:46]

• データ合成はデータ量を増やせて性能改善にとても有効（More data）
  • ex. ノイズのない音声にノイズをのせるetc..
• とはいえ、あくまでも人工的なデータなので学習にあまり効かない場合もある

Mismatched train/test (new bias/variance) [38:53]

学習用データの環境とアプリケーションの環境が異なるケースが増えてきている

• これまではそれぞれ別のモデルを使っていた
• ディープラーニングでは1つのモデルでok
• でも、devデータセットとtestデータセットは必ず同じ環境のデータから作ること

学習環境とアプリケーション環境のデータセットの違いも考慮したワークフロー

Human-level performance [51:26]

• 人間の認識精度をリファレンスとすべき

• リファレンスと学習結果の差を見て 何にフォーカスするか判断できる

  human-levelエラーとtrainエラーの差が大	trainエラーとdevエラーの差が大
  Biasにフォーカス	Varianceにフォーカス

What can AI/DL do ? [1:06:33]

AIアプリケーションとして有望なもの

• 人間が1秒以内でできるタスク
• 繰り返しシーケンスの次の結果の予測
  • ex. ユーザーが次の広告をクリックするかどうか

Personal advice (building ML career) [1:10:32]

• 論文をたくさん読んで結果を再現する
• Dirty work（データ収集、前処理、パラメータチューニング、デバッグ、データベースの最適化 etc…）をしよう

Dirty workは進捗がなかなか実感できないので勇気づけられます。「No magic」ということなので愚直にやりましょうということですね。。

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

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

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

ダウンロードした画像は アスペクト比 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 をするとブラウザ上で動作確認できます。

   

エミュレーターで確認

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

1. iOS

    $ cordova emulate ios 
   

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

   

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

2. Android

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

    $ cordova emulate android
   

   

   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上でビルド、実行します。

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

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

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

実機で確認（続）

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

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