Unity × Graphics × Effects
"世界はこんなにもやさしく、うつくしい"のウラガワ

自己紹介
杉野裕則/チームラボ
https://twitter.com/sugi_cho
美大卒 × 社会人2年目 × Unityエンジニア
入社して、3ヶ月くらいはFlashで、映像とか、コントの背景とか
作ってた。
Unityを知って、PVがかっこ良くて、使いたいです！って言った
らOKが出て、Unityを使った案件を担当するようになった。

チームラボについて
テクノロジーとクリエイティブを使って、
いろんなものを作ってる会社。
ウルトラテクノロジスト集団
Webサイト、デジタルショーウィンドウ、アート作品、
映像、など。
http://www.team-lab.com/
http://www.team-lab.net/

Unityは、ゲームエンジン
Unityは、ゲームエンジンで、3Dのオブジェクトを置
いて、3Dゲームとか、2Dゲームまで結構簡単に作
れる！
すごい！
でも、チームラボではゲーム開発の案件はほとんど
無い。
チームラボではUnityをどう使ってるのか...？

チームラボでは..
Unityを、
3次元教科書
アート作品
ファッションショーの演出
デジタルショーウィンドウ
TVCMの制作
などに、使ってます。いまのとこ

チームラボでのUnityを使った案件
● teamLabBody
http://www.team-lab.net/portfolio/teamlab-body_jp.html
● 世界はこんなにもやさしく、うつくしい
http://www.team-lab.net/portfolio/loving/whatloving.html
● SHANGHAI RUNWAY 2012 SPRING / SUMMER
http://www.team-lab.net/menu/other/earthfashionshow12ss.html
● Play with Onitsuka Tiger by teamLab
http://www.team-lab.net/menu/other/playwithonitsuka.html
http://www.team-lab.net/menu/other/playwithonitsukany.html

世界はこんなにもやさしく、うつくしい
書家の紫舟さんとチームラボがコラボレーションし
て、つくった、アート作品。
紫舟+チームラボ,
2011, インタラクティブ
アニメーションインスタ
レーション, 書: 紫舟,
音楽: 高橋英明

世界はこんなにもやさしく、うつくしい

どうやって作ってるのか？
センサリングPC(oF)と映
像用PC(Unity)、Webカメ
ラ、プロジェクターを使
用。
プロジェクターの光でで
きた人の影を検出して、
映像を影に反応させる。

Unity × OSC (Open Sound Control)
センサリングPCで画像処理により検出した影の位
置情報を、OSCで映像PCに送り、その情報をUnity
で使用し、インタラクティブに映像を生成、制御して
いる。
renderer.bounds から、スクリーン空間上での書オ
ブジェクトのRectを計算しRectと影が接触している
か判定。
UnityでOSCを使う方法-強火で進め
http://d.hatena.ne.jp/nakamura001/20110807/1312739099

UnityをAfterEffectsのように使う
レイヤーを重ねて合成したり、オブジェクトを意図し
た位置にカメラのレンダーイメージ配置して画面を
作る。
エフェクトによって、重なり順を設定。
あるエフェクトは書の下に表示されないといけな
い、とか、あるエフェクトは必ず一番上のレイヤーに
表示されないといけないとか。
camera.depthを設定し、複数カメラを使用。

複数カメラでパノラマイメージ
CameraComponent数、約30個。パノラマに撮影で
きるように並べて、横長のイメージを作成
※赤い四角1つづつが、各カメラのレンダーイメージ

Unityで、Processingのように使う
C#とJavaは、ほとんどいっしょ！
→Javaのコードをそのまま使える
ProcessingのライブラリはJavaで書かれてる
→使える！
Processingの流体シミュレーションライブラリを使用
した。

MSAFluid（流体シミュレーション）
Processingライブラリ版をUnityで使用
http://www.memo.tv/msafluid/

GameObjectを溶かす
Cameraでオブジェクトを撮る
↓
RenderTextureをTexture2Dに書き込む
↓
Texture2Dに対して流体シミュレーション
↓
オブジェクトが溶けている用に見える
参考：Convert a RenderTexture to a Texture2D
http://answers.unity3d.com/questions/9969/convert-a-rendertexture-to-a-
texture2d.html

プロジェクターエッジブレンディング
紫舟+チームラボ
世界はこんなにもやさしく、うつくしい
＠ミヅマアートギャラリー
http://www.team-lab.net/portfolio-exhibition/loving-
exhibition/mizuma_what.html
壁2面、プロジェクター4台出力
→プロジェクター間のエッジブレンディングが必要
になってくる

プロジェクターエッジブレンディング
プロジェクタ間のブレンディングが必要

プロジェクターエッジブレンディング
プロジェクターが重なる部分のイメージをダブらせ、
良い感じにアルファをかける必要がある。(Linerで
かけるだけではダメ)

プロジェクターエッジブレンディング
Shader+ImageEffectで実装。
参考：Edge blending using commodity projectors
http://paulbourke.net/texture_colour/edgeblend/
参考のサイトに書いてある式通りにShaderを作った
ら、なんとなく、上手くいった。
→エッジブレンディング専用ソフトを使うとソフト代だ
けで10万以上費用がかかる！

使用ハードウェア（展示用）
ASUSの6出力できるグラフィックカードを使用
http://www.asus.com/Graphics_Cards/AMD_Series/HD7970DC2T3GD5/
PCは6つのディスプレイを1つのディスプレイとして
認識する(Eyefinity6)ので、Unityで作ったアプリを
全画面実行し、複数プロジェクターで作品投影をし
ている。
CPUもi7の、できるだけ速いマシンを使用。
→結構無茶な処理もできる。

Unityを使って良かったとこ
● 3Dオブジェクトを簡単に使える
● 物理演算が簡単に使える
● 動画も使える
● 結構、拡張性があってなんでも出来る
● 大きい解像度(6400*900とか)でも動く

Unityのイマイチなところ
動画のシークができない
動画に合わせてアニメーションを付けたい時に、動
画のシークができないので、うまくSyncさせるのがタ
イヘン。
動画のフレーム数を見て、何フレーム目にどうな
る。みたいな感じでアニメーションを付ける必要が
あるから。
GPU上に動画を載せてから再生するから？仕方な
いのかな？？MovieTextureの逆再生とか、再生ス
ピード変えたりもできない。

Unityでゲーム以外のプロダクトを作って
良かったこと。（ゲーム作ったこと無いけど
展示とかで、いろんなところいけたコト
シンガポール、フランス、上海、ニューヨーク、オーサカ

以上です
ありがとうございました！