Transcript
Page 1: Unity × graphics × effects

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

Page 2: Unity × graphics × effects

自己紹介

杉野裕則/チームラボhttps://twitter.com/sugi_cho

美大卒 × 社会人2年目 × Unityエンジニア

入社して、3ヶ月くらいはFlashで、映像とか、コントの背景とか作ってた。

Unityを知って、PVがかっこ良くて、使いたいです!って言ったらOKが出て、Unityを使った案件を担当するようになった。

Page 3: Unity × graphics × effects

チームラボについて

テクノロジーとクリエイティブを使って、いろんなものを作ってる会社。ウルトラテクノロジスト集団

Webサイト、デジタルショーウィンドウ、アート作品、映像、など。

http://www.team-lab.com/http://www.team-lab.net/

Page 4: Unity × graphics × effects

Unityは、ゲームエンジン

Unityは、ゲームエンジンで、3Dのオブジェクトを置いて、3Dゲームとか、2Dゲームまで結構簡単に作れる!

すごい!

でも、チームラボではゲーム開発の案件はほとんど無い。チームラボではUnityをどう使ってるのか...?

Page 5: Unity × graphics × effects

チームラボでは..

Unityを、

3次元教科書アート作品ファッションショーの演出デジタルショーウィンドウTVCMの制作

などに、使ってます。いまのとこ

Page 6: Unity × graphics × effects

チームラボでのUnityを使った案件

● teamLabBodyhttp://www.team-lab.net/portfolio/teamlab-body_jp.html

● 世界はこんなにもやさしく、うつくしいhttp://www.team-lab.net/portfolio/loving/whatloving.html

● SHANGHAI RUNWAY 2012 SPRING / SUMMERhttp://www.team-lab.net/menu/other/earthfashionshow12ss.html

● Play with Onitsuka Tiger by teamLabhttp://www.team-lab.net/menu/other/playwithonitsuka.htmlhttp://www.team-lab.net/menu/other/playwithonitsukany.html

Page 7: Unity × graphics × effects

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

書家の紫舟さんとチームラボがコラボレーションして、つくった、アート作品。

紫舟+チームラボ, 2011, インタラクティブアニメーションインスタレーション, 書: 紫舟, 音楽: 高橋英明

Page 8: Unity × graphics × effects

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

Page 9: Unity × graphics × effects

どうやって作ってるのか?

センサリングPC(oF)と映像用PC(Unity)、Webカメラ、プロジェクターを使用。

プロジェクターの光でできた人の影を検出して、映像を影に反応させる。

Page 10: Unity × graphics × effects

Unity × OSC (Open Sound Control)

センサリングPCで画像処理により検出した影の位置情報を、OSCで映像PCに送り、その情報をUnityで使用し、インタラクティブに映像を生成、制御している。

renderer.bounds から、スクリーン空間上での書オブジェクトのRectを計算しRectと影が接触しているか判定。

UnityでOSCを使う方法-強火で進め

http://d.hatena.ne.jp/nakamura001/20110807/1312739099

Page 11: Unity × graphics × effects

UnityをAfterEffectsのように使う

レイヤーを重ねて合成したり、オブジェクトを意図した位置にカメラのレンダーイメージ配置して画面を作る。

エフェクトによって、重なり順を設定。あるエフェクトは書の下に表示されないといけない、とか、あるエフェクトは必ず一番上のレイヤーに表示されないといけないとか。

camera.depthを設定し、複数カメラを使用。

Page 12: Unity × graphics × effects

複数カメラでパノラマイメージ

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

Page 13: Unity × graphics × effects

Unityで、Processingのように使う

C#とJavaは、ほとんどいっしょ!

→Javaのコードをそのまま使える

ProcessingのライブラリはJavaで書かれてる

→使える!

Processingの流体シミュレーションライブラリを使用した。

Page 14: Unity × graphics × effects

MSAFluid(流体シミュレーション)

Processingライブラリ版をUnityで使用http://www.memo.tv/msafluid/

Page 15: Unity × graphics × effects

GameObjectを溶かす

Cameraでオブジェクトを撮る ↓RenderTextureをTexture2Dに書き込む ↓Texture2Dに対して流体シミュレーション ↓オブジェクトが溶けている用に見える

参考:Convert a RenderTexture to a Texture2Dhttp://answers.unity3d.com/questions/9969/convert-a-rendertexture-to-a-texture2d.html

Page 16: Unity × graphics × effects

プロジェクターエッジブレンディング

紫舟+チームラボ世界はこんなにもやさしく、うつくしい@ミヅマアートギャラリーhttp://www.team-lab.net/portfolio-exhibition/loving-exhibition/mizuma_what.html

壁2面、プロジェクター4台出力

→プロジェクター間のエッジブレンディングが必要になってくる

Page 17: Unity × graphics × effects

プロジェクターエッジブレンディング

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

Page 18: Unity × graphics × effects

プロジェクターエッジブレンディング

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

Page 19: Unity × graphics × effects

プロジェクターエッジブレンディング

Shader+ImageEffectで実装。

参考:Edge blending using commodity projectorshttp://paulbourke.net/texture_colour/edgeblend/

参考のサイトに書いてある式通りにShaderを作ったら、なんとなく、上手くいった。

→エッジブレンディング専用ソフトを使うとソフト代だけで10万以上費用がかかる!

Page 20: Unity × graphics × effects

使用ハードウェア(展示用)

ASUSの6出力できるグラフィックカードを使用http://www.asus.com/Graphics_Cards/AMD_Series/HD7970DC2T3GD5/

PCは6つのディスプレイを1つのディスプレイとして認識する(Eyefinity6)ので、Unityで作ったアプリを全画面実行し、複数プロジェクターで作品投影をしている。

CPUもi7の、できるだけ速いマシンを使用。

→結構無茶な処理もできる。

Page 21: Unity × graphics × effects

Unityを使って良かったとこ

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

Page 22: Unity × graphics × effects

Unityのイマイチなところ

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

Page 23: Unity × graphics × effects

Unityでゲーム以外のプロダクトを作って

良かったこと。(ゲーム作ったこと無いけど

展示とかで、いろんなところいけたコト

シンガポール、フランス、上海、ニューヨーク、オーサカ

Page 24: Unity × graphics × effects

以上です

ありがとうございました!


Recommended