1. Unityでつくるデジタルサイネージ
株式会社ABEJA
饒平名秀成

2. Agenda
• 自己紹介
• ABEJA / フキダシステムについて
• 過去事例紹介
• Unity技術Tips
• おまけ

3. 自己紹介
株式会社ABEJA
クリエイティブ本部 所属
饒平名秀成
電磁界解析, ソーシャルゲーム, 3Dスポーツゲーム,
負荷試験システム, WebAPI, デジタルサイネージ
などなど
これまでの開発歴
開発環境
Fortran, PHP, C#, C++,
Python, Ruby, Flash ...
おもにデジタルサイネージやメディアアート案件を担当

4. ABEJAとは
顔認証 × 動体検出
2013.6 移動体付随情報表示装置株式会社（通称フ
キダシステム）と合併
画像処理
デジタルサイネージ
研究開発が主体の会社です。
技術顧問に旧帝大教授

5. フキダシステムとは
移動体付随情報表示装置
特定エリアを通行する歩行者を検出し、その歩行者に対して漫画のフキダ
シのような広告を投影するシステム。
特許取得済み（特許第3784796号）
Adobe AIR による実装
2013, 3 よりUnity版の開発に着手

6. 過去事例紹介
フキダシステム
東京おもちゃショー 2011
KODA KUMI LIVE TOUR
2009 ∼TRICK∼
ジョージアの日記∼ゆーうつでキラキラな毎日∼
ティザープロモーション

7. 過去事例紹介
ウゴキダシステム

8. 過去事例紹介
カオダシステム

9. Unity技術Tips
フキダシステムの場合
http://www.youtube.com/watch?v=gqholKganK0

10. Unity技術Tips
フキダシステムの場合
概要
歩行者を検出し、その歩行者を
追いかけるように広告を表示す
る。
定期的にCMなどの動画を再生す
る。

11. Unity技術Tips
フキダシステムの場合
人物検出
UnityとOpenNIを利用する。
センサーにはXtion Pro Liveを利用

12. Unity技術Tips
フキダシステムの場合
OpenNIライブラリ
ZigfuというKinectSDKやOpenNI
を操作するためのライブラリを
利用。
Unity3D,HTML5,Flashに対応して
いる。
SampleScenesの中に入っている
シーンを見ればだいたいの使い方
はわかる。

13. Unity技術Tips
フキダシステムの場合
使い方の流れ
Zigfuを利用してトラッキングし
た人物データをGameObjectの
Transform情報に関連付ける。
フキダシをNGUIのUITextureとし
て生成する。
トラッキングデータを関連付け
ているGameObjectとの位置情報
を、UITextureを持つ
GameObjectにミラーリングす
る。
という感じのシンプル設計

14. Unity技術Tips
フキダシステムの場合
コンテンツデータ
静止画と動画データの２パター
ンで制作。
それぞれPNGとSWFで納品。
アニメーションを流し終えた
ら、静止画に切り替え。

15. Unity技術Tips
フキダシステムの場合
起こった問題とその対処法
・センサーが脚立などの、人間
に近いサイズ感とシルエットの
物体を誤認識する。
→ 一定フレーム数の間動きが
一切見られなかったオブジェク
トは削除。
・センサーカメラの角度によ
って、腰を首と認識するなど
の誤認識が発生。
→ 傾きを極力水平に保つこ
とで対処。

16. Unity技術Tips
フキダシステムの場合
起こった問題とその対処法
・SWFクラッシュ問題
しかし、Mac機で長時間起動していると、SWFを
読み込みに行くタイミングでクラッシュする問題
が発生。
SWFは当初Scaleformを利用して再生していた。

17. Unity技術Tips
フキダシステムの場合
起こった問題とその対処法
・SWFクラッシュ問題
なのでWindows機に入れ替えたところ、SWFが
ntdll.dll エラーでクラッシュ。
OpenGLでの描画が出来ないかったらしい。
サポートしているOpenGLのバージョンが合わない？(2.x系)
また、DirectXではRenderTextureを利用した動画
の再生が出来ないらしいことも判明。

18. Unity技術Tips
フキダシステムの場合
起こった問題とその対処法
・SWFクラッシュ問題
加えて言うと、、、
Scaleformでは再生し終えた動画を消す際の処理
(消す動画の検索)がやたらと重たい。
動画再生直後に処理落ちする。

19. Unity技術Tips
フキダシステムの場合
起こった問題とその対処法
・SWFクラッシュ問題
仕方がないので、以下の対応をした。
SWFからPNGの連番ファイルを生成し、それを
パラパラ漫画の要領で切り替えるクラスを作成。

20. Unity技術Tips
フキダシステムの場合
起こった問題とその対処法
・SWFクラッシュ問題
ちなみに、
LWFなど、他のソリューションを使う手もあった
が、納品データをそれに合わせて調整する必要が
あったため断念。
判明したのが、実施直前であったこと、SWFデ
ータの制作チームが社外の人間だったこともあ
り、断念。

21. Unity技術Tips
ARの場合

22. Unity技術Tips
ARの場合
概要
企業へのデモ用にいくつか実
装。
商品パッケージを認識するとそ
の商品に関連したコンテンツを
表示。

23. Unity技術Tips
ARの場合
画像認識
※実現技術公開NGにより削除

24. Unity技術Tips
ARの場合
画像認識
流れとしては、以下のとおり
認識させる画像デ
ータを決める。
画像の特徴点を解
析し、登録する。
実装したアプリでスキ
ャンする。

25. Unity技術Tips
ARの場合
とあるデモで、認識した画像に
フキダシを載せるというものを
組んでいました。
（ここではペットボトルを使っていますがｗ）

26. Unity技術Tips
画像合成の場合

27. Unity技術Tips
概要
こちらも企業へのデモ用にいく
つか実装。
背景画像に対して、人物検出を
し、切り抜いた画像を合成す
る。
画像合成の場合

28. Unity技術Tips
実装方法
画像合成の場合
パターン①
撮影時の背景を覚えこんで、人物や物体な
ど、背景画像と違う色が入ってきた際の差分
を求める。（いわゆるクロマキー合成） http://www.seventhland.com/html/page6.html より
MovieTextureを用いて、カメラから入ってきた情報を取
得し、起動時に読み込ませておいた背景画像との差分を
取って合成する。

29. Unity技術Tips
実装方法
画像合成の場合
パターン②
赤外線センサーで取得したイメージと、人物
ラベル情報を照らし合わせ、ラベルが取得で
きた座標のピクセルを切り抜く。
× こちらはZigfuを用いて
OpenNIで実装。

30. Unity技術Tips
メリット
画像合成の場合
パターン①
背景差分がきちんと取れる環
境であれば、思い通りの正確
なかたちで切り抜くことが出
来る。
パターン②
色ではなく赤外線で取得する
ので、精度が背景情報に左右
されない。
適切に人物だけ切り抜ける。
（その代わり、人物が持って
いる物体などは認識しない※）
人物以外の切り抜きも可能。
※ラベルではなく深度情報のみで判定すれば
回避は出来る。

31. Unity技術Tips
デメリット
画像合成の場合
パターン①
背景画像と同じ色の服を着て
いるとその部分が切り抜けな
い、など精度が環境に左右さ
れやすい。
パターン②
色情報を取得するセンサー
と、深度情報を取得するセン
サーが物理的に離れているた
め、キャリブレーションが大
変。
蛍光灯のちらつきや、人物の
影の映り込み、ガラスなどか
らの反射など、精度に影響が
出る条件が多数。
深度情報を取得するセンサー
の解像度が低い。

32. Unity技術Tips
結果
画像合成の場合
今回はパターン②を採用。
こんな感じになります。
年内に某案件で利用予定。
諸々調整中…

33. Unity技術Tips
起こった問題とその対処法
・Zigfu解像度問題
160*120と320*240の解像度しか利用できない。
OpenNI自体は1280*1024の解像度までサポート
している。
でもなぜかZigImageViewerなどのComponent上
では640*480の解像度もメニューに出てくる。
画像合成の場合

34. Unity技術Tips
起こった問題とその対処法
・Zigfu解像度問題
原因としては以下のふたつ。
→ OpenNIのコンフィグがデフォルト
(SampleConfig.xml)のままになっていること
→ ZigResolutionクラスの設定で３種類の解像度
しか定義されていないこと
画像合成の場合
ここ!!

35. Unity技術Tips
起こった問題とその対処法
・Zigfu解像度問題
対応①
OpenNIのコンフィグファイルの設定を変更す
る。
各ノードのMapOutputModeのパラメータを変更する。
<MapOutputMode xRes="1280" yRes="1024" FPS="30"/>
とかして、設定する。
画像合成の場合

36. Unity技術Tips
起こった問題とその対処法
・Zigfu解像度問題
対応②
ビューワー系のクラスを改造する。ないしは自前
で実装する(←今回はこちらの対応をした)。
ZigImageViewerあたりを参考に実装。
画像合成の場合
ZigResolutionクラスで定義されていない解像度も
使えるようにするため。

37. Unity技術Tips
起こった問題とその対処法
・Zigfu解像度問題
この対応でOpenNIがサポートしている最大の解
像度で利用できる。
ちなみにサポートされている解像度
Image:
1280×1024
640×480
320×240
Depth:
640×480
320×240
画像合成の場合

38. Unity技術Tips
起こった問題とその対処法
・Zigfu解像度問題
注意点
取得する解像度を上げるとかなりCPU時間を消費する。
処理が重たいのか、すべて最大値にするとクラッシュする現象が起きた。
Imageを1280*1024、Depthを320*240で利用してみたが、開発機の
MacBookProでfpsが15程度しか出なかったので、このあたりは実現した
いコンテンツとの兼ね合いで調整。
画像合成の場合

39. Unity技術Tips
起こった問題とその対処法
・Zigfu解像度問題
注意点
エディタで確認する際、コンフィグファイルを設置するのはAsset下で
もResources下でもなく、Projectフォルダのトップ。（ここがわからな
くて苦労した）
Xtionで利用した場合、FrameRateが30から変更できない。変更すると
エラーになった。
画像合成の場合

40. Unity技術Tips
起こった問題とその対処法
・MovieTexture合成時の問題
アルファ画像が上手く切り抜けず黒塗りになって
しまう問題。
画像合成の場合
MovieTextureはアルファチャンネルをサポートしていないらしい。なので、
MovieTextureから取得した画像に対してアルファ値が入った処理を加えたい
場合は、以下のようにしてColorを作りなおす。
OutputPixels[outputIndex] = new Color32(InputPixels[srcIndex].r, InputPixels[srcIndex].g, InputPixels[srcIndex].b, alpha);

41. おまけ
• デジタルサイネージをやる際の注意点
• 耐久テストはきっちりやること
• 一見問題はなくても、メモリリークなどで長時間稼働させた際にクラッ
シュするなどの問題があったりする
• 設置する環境が清潔かどうかの確認
• 設置したPCの内部に、会場内のホコリなどの粉塵が詰まって、熱暴走
し壊れることがある
• システムが不安定だが、バグらしいバグも見つからず、途方にくれてい
らホコリが原因だった…

42. おまけ
• サイネージシステムの制作現場はこんな感じで作業をしています。

43. おまけ
• サイネージシステムの制作現場はこんな感じで作業をしています。

44. おまけ
• サイネージシステムの制作現場はこんな感じで作業をしています。

45. おまけ
• ただ今、日テレ24時間テレビのキャンペーンイベントで、新宿駅地下通路にて
フキダシステムを実施しております。（今週いっぱいまでです）
• 本会場からすぐ近くなのでご興味のある方はぜひ御覧ください。

46. 以上
• ご静聴ありがとうございました！