Unityでつくるデジタルサイネージ

7,018 views

Published on

  • Be the first to comment

Unityでつくるデジタルサイネージ

  1. 1. Unityでつくるデジタルサイネージ 株式会社ABEJA 饒平名秀成
  2. 2. Agenda • 自己紹介 • ABEJA / フキダシステムについて • 過去事例紹介 • Unity技術Tips • おまけ
  3. 3. 自己紹介 株式会社ABEJA クリエイティブ本部 所属 饒平名秀成 電磁界解析, ソーシャルゲーム, 3Dスポーツゲーム, 負荷試験システム, WebAPI, デジタルサイネージ などなど これまでの開発歴 開発環境 Fortran, PHP, C#, C++, Python, Ruby, Flash ... おもにデジタルサイネージやメディアアート案件を担当
  4. 4. ABEJAとは 顔認証 × 動体検出 2013.6 移動体付随情報表示装置株式会社(通称フ キダシステム)と合併 画像処理 デジタルサイネージ 研究開発が主体の会社です。 技術顧問に旧帝大教授
  5. 5. フキダシステムとは 移動体付随情報表示装置 特定エリアを通行する歩行者を検出し、その歩行者に対して漫画のフキダ シのような広告を投影するシステム。 特許取得済み(特許第3784796号) Adobe AIR による実装 2013, 3 よりUnity版の開発に着手
  6. 6. 過去事例紹介 フキダシステム 東京おもちゃショー 2011 KODA KUMI LIVE TOUR 2009 ∼TRICK∼ ジョージアの日記∼ゆーうつでキラキラな毎日∼ ティザープロモーション
  7. 7. 過去事例紹介 ウゴキダシステム
  8. 8. 過去事例紹介 カオダシステム
  9. 9. Unity技術Tips フキダシステムの場合 http://www.youtube.com/watch?v=gqholKganK0
  10. 10. Unity技術Tips フキダシステムの場合 概要 歩行者を検出し、その歩行者を 追いかけるように広告を表示す る。 定期的にCMなどの動画を再生す る。
  11. 11. Unity技術Tips フキダシステムの場合 人物検出 UnityとOpenNIを利用する。 センサーにはXtion Pro Liveを利用
  12. 12. Unity技術Tips フキダシステムの場合 OpenNIライブラリ ZigfuというKinectSDKやOpenNI を操作するためのライブラリを 利用。 Unity3D,HTML5,Flashに対応して いる。 SampleScenesの中に入っている シーンを見ればだいたいの使い方 はわかる。
  13. 13. Unity技術Tips フキダシステムの場合 使い方の流れ Zigfuを利用してトラッキングし た人物データをGameObjectの Transform情報に関連付ける。 フキダシをNGUIのUITextureとし て生成する。 トラッキングデータを関連付け ているGameObjectとの位置情報 を、UITextureを持つ GameObjectにミラーリングす る。 という感じのシンプル設計
  14. 14. Unity技術Tips フキダシステムの場合 コンテンツデータ 静止画と動画データの2パター ンで制作。 それぞれPNGとSWFで納品。 アニメーションを流し終えた ら、静止画に切り替え。
  15. 15. Unity技術Tips フキダシステムの場合 起こった問題とその対処法 ・センサーが脚立などの、人間 に近いサイズ感とシルエットの 物体を誤認識する。 → 一定フレーム数の間動きが 一切見られなかったオブジェク トは削除。 ・センサーカメラの角度によ って、腰を首と認識するなど の誤認識が発生。 → 傾きを極力水平に保つこ とで対処。
  16. 16. Unity技術Tips フキダシステムの場合 起こった問題とその対処法 ・SWFクラッシュ問題 しかし、Mac機で長時間起動していると、SWFを 読み込みに行くタイミングでクラッシュする問題 が発生。 SWFは当初Scaleformを利用して再生していた。
  17. 17. Unity技術Tips フキダシステムの場合 起こった問題とその対処法 ・SWFクラッシュ問題 なのでWindows機に入れ替えたところ、SWFが ntdll.dll エラーでクラッシュ。 OpenGLでの描画が出来ないかったらしい。 サポートしているOpenGLのバージョンが合わない?(2.x系) また、DirectXではRenderTextureを利用した動画 の再生が出来ないらしいことも判明。
  18. 18. Unity技術Tips フキダシステムの場合 起こった問題とその対処法 ・SWFクラッシュ問題 加えて言うと、、、 Scaleformでは再生し終えた動画を消す際の処理 (消す動画の検索)がやたらと重たい。 動画再生直後に処理落ちする。
  19. 19. Unity技術Tips フキダシステムの場合 起こった問題とその対処法 ・SWFクラッシュ問題 仕方がないので、以下の対応をした。 SWFからPNGの連番ファイルを生成し、それを パラパラ漫画の要領で切り替えるクラスを作成。
  20. 20. Unity技術Tips フキダシステムの場合 起こった問題とその対処法 ・SWFクラッシュ問題 ちなみに、 LWFなど、他のソリューションを使う手もあった が、納品データをそれに合わせて調整する必要が あったため断念。 判明したのが、実施直前であったこと、SWFデ ータの制作チームが社外の人間だったこともあ り、断念。
  21. 21. Unity技術Tips ARの場合
  22. 22. Unity技術Tips ARの場合 概要 企業へのデモ用にいくつか実 装。 商品パッケージを認識するとそ の商品に関連したコンテンツを 表示。
  23. 23. Unity技術Tips ARの場合 画像認識 ※実現技術公開NGにより削除
  24. 24. Unity技術Tips ARの場合 画像認識 流れとしては、以下のとおり 認識させる画像デ ータを決める。 画像の特徴点を解 析し、登録する。 実装したアプリでスキ ャンする。
  25. 25. Unity技術Tips ARの場合 とあるデモで、認識した画像に フキダシを載せるというものを 組んでいました。 (ここではペットボトルを使っていますがw)
  26. 26. Unity技術Tips 画像合成の場合
  27. 27. Unity技術Tips 概要 こちらも企業へのデモ用にいく つか実装。 背景画像に対して、人物検出を し、切り抜いた画像を合成す る。 画像合成の場合
  28. 28. Unity技術Tips 実装方法 画像合成の場合 パターン① 撮影時の背景を覚えこんで、人物や物体な ど、背景画像と違う色が入ってきた際の差分 を求める。(いわゆるクロマキー合成) http://www.seventhland.com/html/page6.html より MovieTextureを用いて、カメラから入ってきた情報を取 得し、起動時に読み込ませておいた背景画像との差分を 取って合成する。
  29. 29. Unity技術Tips 実装方法 画像合成の場合 パターン② 赤外線センサーで取得したイメージと、人物 ラベル情報を照らし合わせ、ラベルが取得で きた座標のピクセルを切り抜く。 × こちらはZigfuを用いて OpenNIで実装。
  30. 30. Unity技術Tips メリット 画像合成の場合 パターン① 背景差分がきちんと取れる環 境であれば、思い通りの正確 なかたちで切り抜くことが出 来る。 パターン② 色ではなく赤外線で取得する ので、精度が背景情報に左右 されない。 適切に人物だけ切り抜ける。 (その代わり、人物が持って いる物体などは認識しない※) 人物以外の切り抜きも可能。 ※ラベルではなく深度情報のみで判定すれば 回避は出来る。
  31. 31. Unity技術Tips デメリット 画像合成の場合 パターン① 背景画像と同じ色の服を着て いるとその部分が切り抜けな い、など精度が環境に左右さ れやすい。 パターン② 色情報を取得するセンサー と、深度情報を取得するセン サーが物理的に離れているた め、キャリブレーションが大 変。 蛍光灯のちらつきや、人物の 影の映り込み、ガラスなどか らの反射など、精度に影響が 出る条件が多数。 深度情報を取得するセンサー の解像度が低い。
  32. 32. Unity技術Tips 結果 画像合成の場合 今回はパターン②を採用。 こんな感じになります。 年内に某案件で利用予定。 諸々調整中…
  33. 33. Unity技術Tips 起こった問題とその対処法 ・Zigfu解像度問題 160*120と320*240の解像度しか利用できない。 OpenNI自体は1280*1024の解像度までサポート している。 でもなぜかZigImageViewerなどのComponent上 では640*480の解像度もメニューに出てくる。 画像合成の場合
  34. 34. Unity技術Tips 起こった問題とその対処法 ・Zigfu解像度問題 原因としては以下のふたつ。 → OpenNIのコンフィグがデフォルト (SampleConfig.xml)のままになっていること → ZigResolutionクラスの設定で3種類の解像度 しか定義されていないこと 画像合成の場合 ここ!!
  35. 35. Unity技術Tips 起こった問題とその対処法 ・Zigfu解像度問題 対応① OpenNIのコンフィグファイルの設定を変更す る。 各ノードのMapOutputModeのパラメータを変更する。 <MapOutputMode xRes="1280" yRes="1024" FPS="30"/> とかして、設定する。 画像合成の場合
  36. 36. Unity技術Tips 起こった問題とその対処法 ・Zigfu解像度問題 対応② ビューワー系のクラスを改造する。ないしは自前 で実装する(←今回はこちらの対応をした)。 ZigImageViewerあたりを参考に実装。 画像合成の場合 ZigResolutionクラスで定義されていない解像度も 使えるようにするため。
  37. 37. Unity技術Tips 起こった問題とその対処法 ・Zigfu解像度問題 この対応でOpenNIがサポートしている最大の解 像度で利用できる。 ちなみにサポートされている解像度 Image: 1280×1024 640×480 320×240 Depth: 640×480 320×240 画像合成の場合
  38. 38. Unity技術Tips 起こった問題とその対処法 ・Zigfu解像度問題 注意点 取得する解像度を上げるとかなりCPU時間を消費する。 処理が重たいのか、すべて最大値にするとクラッシュする現象が起きた。 Imageを1280*1024、Depthを320*240で利用してみたが、開発機の MacBookProでfpsが15程度しか出なかったので、このあたりは実現した いコンテンツとの兼ね合いで調整。 画像合成の場合
  39. 39. Unity技術Tips 起こった問題とその対処法 ・Zigfu解像度問題 注意点 エディタで確認する際、コンフィグファイルを設置するのはAsset下で もResources下でもなく、Projectフォルダのトップ。(ここがわからな くて苦労した) Xtionで利用した場合、FrameRateが30から変更できない。変更すると エラーになった。 画像合成の場合
  40. 40. Unity技術Tips 起こった問題とその対処法 ・MovieTexture合成時の問題 アルファ画像が上手く切り抜けず黒塗りになって しまう問題。 画像合成の場合 MovieTextureはアルファチャンネルをサポートしていないらしい。なので、 MovieTextureから取得した画像に対してアルファ値が入った処理を加えたい 場合は、以下のようにしてColorを作りなおす。 OutputPixels[outputIndex] = new Color32(InputPixels[srcIndex].r, InputPixels[srcIndex].g, InputPixels[srcIndex].b, alpha);
  41. 41. おまけ • デジタルサイネージをやる際の注意点 • 耐久テストはきっちりやること • 一見問題はなくても、メモリリークなどで長時間稼働させた際にクラッ シュするなどの問題があったりする • 設置する環境が清潔かどうかの確認 • 設置したPCの内部に、会場内のホコリなどの粉塵が詰まって、熱暴走 し壊れることがある • システムが不安定だが、バグらしいバグも見つからず、途方にくれてい らホコリが原因だった…
  42. 42. おまけ • サイネージシステムの制作現場はこんな感じで作業をしています。
  43. 43. おまけ • サイネージシステムの制作現場はこんな感じで作業をしています。
  44. 44. おまけ • サイネージシステムの制作現場はこんな感じで作業をしています。
  45. 45. おまけ • ただ今、日テレ24時間テレビのキャンペーンイベントで、新宿駅地下通路にて フキダシステムを実施しております。(今週いっぱいまでです) • 本会場からすぐ近くなのでご興味のある方はぜひ御覧ください。
  46. 46. 以上 • ご静聴ありがとうございました!

×