【Unite 2018 Tokyo】裸眼で拡張現実！！プロジェクションマッピングとAIで世界最先端研究を丸見えに
1.5K Views
May 09, 18
スライド概要
尾崎 竜二（だるまジャパン合同会社）
北川 正義（だるまジャパン合同会社）
宇治原 徹（名古屋大学 未来材料・システム研究所）
リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。
関連スライド
各ページのテキスト
2018/5/9 裸眼で拡張現実！！ プロジェクションマッピングとAIで 世界最先端研究を丸見えに 尾﨑竜二 だるまジャパン合同会社 / 代表社員CEO 北川正義 だるまジャパン合同会社 / 業務執行社員 宇治原徹 名古屋大学 未来材料システム研究所 / 教授
発表者紹介
だるまジャパン合同会社 代表社員 CEO だるまジャパン合同会社 業務執行社員 尾﨑 竜二 北川 正義 名古屋大学 未来材料・システム研究所 教授 宇治原 徹
本日の内容
１．だるまジャパン合同会社の紹介 ２．名古屋大学 宇治原ラボの研究について（名大 宇治原教授） ３．裸眼ARとは ４.演出とグラフィック実装 ５．ログデータの取得 ６. 機械学習スクリプト（Python）との連携 ７．まとめ
だるまジャパンの紹介
だるまジャパン合同会社 • 岐阜県大垣市 http://drmjpn.jp/ ソフトピアジャパン内で活動 • プロジェクションマッピング技術を用いた研究開発 • プロジェクションマッピング技術を身近なところで実用的に使う • エンタメコンテンツ開発が得意
らくがきチュウキョ〜くん • 中京テレビの子供むけイベント ・明るいところでも使える小型PMボックスを作成 ・3Dプリントした立体キャラクターに映像を投影 ・子供の落書きどおりにキャラクターが変身 ・さわると、星・ハートが飛び出るギミックあり ※PM = プロジェクションマッピング
らくがきチュウキョ〜くん • 中京テレビの子供むけイベント ・明るいところでも使える小型PMボックスを作成 ・3Dプリントした立体キャラクターに映像を投影 ・子供の落書きどおりにキャラクターが変身 ・さわると、星・ハートが飛び出るギミックあり ※PM = プロジェクションマッピング
聞き酒君 • NTTドコモ AIエージェント基盤を 利用したコンテンツ ・小型PMボックスを使用し、紙コップにPM ・音声対話でお酒 or ソフトドリンクを注ぐ ※PM = プロジェクションマッピング NTTドコモAIエージェント基盤 https://dev.smt.docomo.ne.jp/?p=common_page&p_name=sebastien_teaser
リアルタイム結晶成長可視化 システム • 名古屋大学 未来材料・システム研究所 宇治原研究室 SiC結晶を生成する実験装置にPM 実験装置の内部をリアルタイムに可視化 本日ご紹介
世界初のトランジスター（コンピュータの卵） The Novel Prize in Physics 1956 http://www.shmj.or.jp Shockley Brattain Bardeen http://www.nobelprize.org/ 高品質で高純度なゲルマニウム結晶の開発が 実現のカギだった
世界初の青色発光ダイオード The Novel Prize in Physics 2014 Photo by Mike Deal AKASAKI AMANO NAKAMURA http://www.nobelprize.org/ 高品質な窒化ガリウム結晶の開発が 実現のカギだった
SiC パワーデバイス 省エネ技術の キーテクノロジー シリコンカーバイド (SiC)
SiCパワーデバイスによる省エネ効果 8 〜 30 over Only in Japan
シミュレーションによる予測 1条件あたり 約5時間 機械学習による予測 1条件あたり 約0.03秒 超高速化を実現
最先端科学に職人技を
裸眼ARを実現するための プロジェクションマッピング
裸眼ARとは • プロジェクションマッピングを応用してARと同等の見え方を裸眼で実現 • 錯視を用いた表現 • 現実空間との調和 • 自然な体験設計
錯視を用いた表現 - 動く -
錯視を用いた表現 - 歩く -
錯視を用いた表現 - 透ける - この表現を応用
立体物での錯視演出 A 3 • 投影面の中でできる表現しかできない • 投影面や形状に合わせた演出を考える • 投影面の距離の差によって大きく歪みが出る • プロジェクターと体験者の見る位置の差による歪み • 歪みが目立たないような演出を行う 1 さまざまな制約がある中で 要望に合った演出を考えなければならない B 2
演出とグラフィック実装
実装手順 企画 テスト投影 コンセプト 演出 モデリング マテリアル ライティング ポストエフェク ト 投影調整
テスト投影
実装手順 企画 テスト投影 コンセプト 演出 モデリング マテリアル ライティング ポストエフェク ト 投影調整
宇治原教授からの要望 • 各所に取り付けられたセンサーのログデータから直感的にビジュアライズ • 重要な手作業であるシードタッチ（結晶軸を溶液につける作業）を可視化 • 装置の気持ちが感じ取れるようにしたい • 実験中に新たな発見ができるようにしたい 実験が楽しくなるように！！！！ カッコ良くしてほしい！！！！！
ボツ案
企画 -決定稿- ログデータと連動して中身を透視するフォトリアルな表現
実装手順 企画 テスト投影 コンセプト 演出 モデリング マテリアル ライティング ポストエフェク ト 投影調整
モデリング • 現物と写真を元にモデリング • パーツ全てを正確にはモデリングしていない（見た目を重視） • 中心部（結晶を作る部分）は断面 • 中心部パーツのスケールの比率は図面に合わせる
マテリアル • 実物と写真を元に作成 • ほぼ全てのパーツをSubstance Designerで作成 • Unity内で調整可能なようにプロパティを設定 リアルさより調整できることを優先
ライティング - 温度変化 問題点 Referenceするものがない 高温になると材料が色変化と共に自己発光する これを元に絵作り
ライティング - カラー・キー - 常温 1500℃ 1800℃
ライティング & リフレクション - 実装 • 室内環境のHDRIを使用 • スポットライトを使用 • 温度変化は中心部にポイントライトを配置し自己発光を擬似的に再現 • リフレクション用に現実にある柵を配置（レンダリングはしない） • リフレクションプローブ • ポストプロセスのScreen Space Reflection
Lighting Only
Reflection Probe
Screen Space Reflection
Reflection Probe + Screen Space Reflection
ポストエフェクト • Post Processing Stackを使用
Antialiasing
Ambient Occlusion
Depth Of Field
Color Grading
Bloom
Metallic数値によるライトの影響 Metallic 1.0 Metallic 0.8
実装手順 企画 テスト投影 コンセプト 演出 モデリング マテリアル ライティング ポストエフェク ト 投影調整
投影用カバー
機材設置 プロジェクタは上部 視線は下から見上げる 形に合うように映像を歪ませて投 影する
投影調整 - 形状 -
投影調整 - 位置 • 現物と投影映像の位置関係が一致するように調整 • モデルの比率は合わせてあるので数式である程度の位置を出す • 投影用に形状を変形させているので位置が合わない 現物の位置を見ながらモデルを微調整
投影調整 - グラフィック • ディスプレイのグラフィックがそのまま投影されるわけではない • プロジェクタの明るさ等の個体差 • 周りの環境 • 投影面の素材や色 投影しながらグラフィックを微調整
問題点 溶液の温度や流速の分布が 小さくて見えない ズーム機能
ズーム機能 - 演出 - 顕微鏡で覗くような演出 形状的に難しい 覗くという行為と機械的なギミックを合わせたもの 虫眼鏡とカメラのレンズを合わせたような形状
ズーム機能 - 演出 斜め上からIN 中心部を拡大 ズーム状態でフォーカス 切り替え背景ぼかす
ズーム機能 - 実装 ズームオブジェクトの子オブジェクト にカメラを配置 レンダーテクスチャで表示 Cinemachineで位置が変わっても 常に中央を映すように設定 ポストエフェクトのDoFでフォーカ スを切り替えて背景をぼかす 音声で操作 Windows.Speechの KeywordRecognizerを使用
ログデータの取得
Modbus RTU • PLC（programmable logic controller）と通信するプロトコル • RS-422AをUSBに変換してPCと接続 ログ ・温度 ・位置 ・回転 etc… 実験装置 PLC Windows PC
Modbus RTU 出典: https://program-plc.blogspot.jp/2015/11/modbus-serial-communication-between-plc.html
RS-422A PC RS-232Cよりも伝送速度が速く 伝送距離が長いがコネクタが 規定されていないため配線が大変 PLC PLC側 USBに変換するアダプタ
実験装置 連動して移動・回転 送られてくる ログデータ PCの画面
機械学習スクリプト（Python）との連携
Pythonスクリプト ー 温度分布（名古屋大学で作成） ・機械学習によりログデータに対応した溶液の温度分布を回帰し、画像を生成する ・温度 ・位置 ・回転 etc… 実験装置のログ Python Image 機械学習 温度分布画像 Matplotlibで画像化 溶液部分の半分
Pythonスクリプト ー 流速分布（名古屋大学で作成） ・機械学習によりログデータに対応した溶液の流速分布を回帰し、画像を生成する ・温度 ・位置 ・回転 etc… 実験装置のログ Python 機械学習 溶液部分の半分 Image 流速分布画像 Matplotlibで画像化 流れの向きと大きさをベクトルで表現
UnityとPythonをどうやって連携させるか？ • Websocket通信
Websocket通信 • Unity側は「websocket-sharp」を使用しサーバに • Python側は「AutobahnPython」を使用しクライアントに http://autobahn.readthedocs.io/en/latest/ 安定した通信 接続が途切れても再接続する
Websocket通信でUnityとPythonスクリプトを連携 Websocketサーバ (websocket-sharp) ・温度 ・位置 ・回転 etc… ログ Websocketクライアン (AutobahnPython) ト Python Unity 完了通知 機械学習
温度分布の表示
Websocket通信でUnityとPythonスクリプトを連携 Websocketサーバ ・温度 ・位置 ・回転 etc… ログ Websocketクライアン Python Unity 完了通知 機械学習 テクスチャとして貼り付ける Image
テクスチャの貼り付け テクスチャとして貼り付ける Pythonスクリプトで生成した温度分布画像 テクスチャとして貼り付け可能な状態に整形
結果表示 Pythonアプリケーション （温度分布） Unityアプリケーション
実際の動作画面
流速分布の表示
流速分布を同様に表示 テクスチャとして貼り付ける Pythonスクリプトで生成した流速分布画像
流速分布を同様に表示 拡大してもダメ 何も見えない・・・
改善が必要
問題点 • 温度分布 Matplotlibの仕様に依存するので表現に柔軟性がない 将来的にMatplotlibを使えない状況になるかもしれない • 流速分布 Matplotlibで生成したベクトルの視認性が悪い Matplotlibの使用をやめ、Pythonの出力をCSVファイルに UnityにCSVを読み込み、数値データから温度分布・流速分布 を表現する
Pythonスクリプトの出力をCSVに Websocketサーバ ・温度 ・位置 ・回転 etc… ログ Websocketクライアン Python Unity 完了通知 機械学習 テクスチャとして貼り付ける Image
Pythonスクリプトの出力をCSVに Websocketサーバ ・温度 ・位置 ・回転 etc… ログ Websocketクライアン Python Unity 完了通知 機械学習 Unity側で加工 CSV
温度分布の表示 • Gradientクラスにカラーマップを作成し、CSVの数値に対応する色を決定 それぞれの座標にその色を指定してテクスチャを生成 拡大 CSV 温度 1800 1810 1850 カラーマップ 1860 （MatplotlibのJetカラーマップと同等） ： 温度分布テクスチャ 1830
流速分布の表示 • FlowMapシェーダーの利用 http://graphicsrunner.blogspot.jp/2010/08/water-using-flow-maps.html
FlowMap • 流体の方向と速度を格納したテクスチャ • R成分にU軸方向の値、G成分にV軸方向の値 R=0 G=255 R=0 G=128 R=0 G=0 R=128 G=255 R=128 G=128 R=128 G=0 R=255 G=255 R=255 G=128 R=255 G=0 V(Y) U(X) 変位 FlowMap テクスチャ
FlowMapシェーダー float3 flowDir = tex2D(_FlowMap, IN.texcoord) * 2.0f - 1.0f; flowDir *= _FlowSpeed; float phase0 = frac(_Time.y * 0.5f + 0.5f); float phase1 = frac(_Time.y * 0.5f + 1.0f); half3 tex0 = tex2D(_MainTex, IN.texcoord + flowDir.xy * phase0); half3 tex1 = tex2D(_MainTex, IN.texcoord + flowDir.xy * phase1); float flowLerp = abs((0.5f - phase0) / 0.5f); half3 finalColor = lerp(tex0, tex1, flowLerp); 出典: http://advances.realtimerendering.com/s2010/index.html
FlowMapシェーダー ✖ UVチェッカー FlowMap テクスチャ 流れを表現
CSVの数値からFlowMapテクスチャを生成 x CSV y 0.2 0.3 -0.1 0.4 0 0 0.3 -0.8 ： 0.5 0.2 FlowMap テクスチャ V(Y) U(X) 変位
流速表示テスト用アプリケーション テスト用Unityアプリケーション シェーダー
結果表示 Pythonアプリケーション （温度分布） Unityアプリケーション Pythonアプリケーション （流速分布）
最終動作構成
Websocket通信でUnityとPythonスクリプトを連携 Websocketクライアン Websocketサーバ ログ Python 完了通知 Unity ログ CSV 温度分布 Python CSV 流速分布
実際の動作画面
他に試したこと
Pythonコードの保護（難読化） • Cythonによるコンパイル • Pythonスクリプトの中身が見られないようになる • Cに変換するので処理速度が向上
TensorFlowSharpを使用 • Unity上で温度分布や流速分布をプレディクトする • 学習モデルはPythonで作成 • Unityだけで完結する • スレッド処理が必要(async～await)
Websocket通信を使うメリット • 機械学習部分（名古屋大学担当） と Unityアプリ（だるまジャパン担当） を分離して研究開発できる • 今後、機械学習スクリプト（Websocketクライアント）が増えても対応可能
まとめ
最先端研究にUnityを用いた事例を提示した エンタメから次世代材料開発まで は様々な分野で活用できる！
リアルタイム結晶成長可視化システム 参考URL ・名古屋大学 公式プレスリリース http://www.nagoya-u.ac.jp/about-nu/public-relations/researchinfo/upload_images/20170929_imass_1.pdf ・朝日新聞デジタル 掲載記事 https://www.asahi.com/articles/photo/AS20171201000874.html
Thank you! ご静聴ありがとうございました！