SlideShare a Scribd company logo
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でゲーム以外のプロダクトを作って
良かったこと。(ゲーム作ったこと無いけど

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

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

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

More Related Content

PDF
Unity恐くないよ!!
PDF
「宴」実装時に得られたUnityプログラムノウハウ
PPTX
Unity用ビジュアルノベルツール「宴3」開発帰還報告書
PDF
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
PDF
「もののけ大戦“陣”」製作事例
PDF
第1回 【初心者向け】Unity+Oculus Riftで次世代の3Dゲームを作って感じるワークショップ
PDF
学生がUnityで2 dゲームを作るとこうなる
PDF
【第2回】VR道場 Unity × Oculus Touch ~VRで手を動かしてみよう~
Unity恐くないよ!!
「宴」実装時に得られたUnityプログラムノウハウ
Unity用ビジュアルノベルツール「宴3」開発帰還報告書
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
「もののけ大戦“陣”」製作事例
第1回 【初心者向け】Unity+Oculus Riftで次世代の3Dゲームを作って感じるワークショップ
学生がUnityで2 dゲームを作るとこうなる
【第2回】VR道場 Unity × Oculus Touch ~VRで手を動かしてみよう~

What's hot (20)

PDF
ゲームエンジン導入セミナー【UDK編】
PDF
【Unity道場 建築スペシャル】はじめてのUnity
PDF
Unityでパフォーマンスの良いUIを作る為のTips
PDF
ビジュアルスクリプティングシステムBoltを使ってみよう 1回目
PDF
UnityとOculus Riftでフルダイブなゲームを作ってみた話
PDF
Unity講習会(初級)
PDF
VR道場 Unity × Oculus Touch ~VRで手を動かしてみよう~
PDF
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?
PPTX
福島GameJam2013 参加者向け事前セミナー【UDK編】
PDF
Unityの開発環境が生み出す可能性
PDF
Unityティーチャートレーニングデイ -認定プログラマー編-
PDF
ユニティちゃんだけじゃない! オープンソースとUnityの未来
PDF
UnityのMultiplayサービスの得意な事
PDF
「宴」まとめ(2016年7月23UniBoookLT大会)
PDF
Unityティーチャートレーニングデイ -認定3Dアーティスト編-
PDF
Unityティーチャートレーニングデイ -認定アソシエイト編-
PPTX
息抜きにUnityであそぼう(3D Game Kit Liteの話)
PDF
【初心者向け】Unity StartUp講座
PPTX
【Unityの集い in大阪】LT:Unity認定試験(プログラマ)を受験しました
PDF
インディーゲーム開発の現状と未来 2021
ゲームエンジン導入セミナー【UDK編】
【Unity道場 建築スペシャル】はじめてのUnity
Unityでパフォーマンスの良いUIを作る為のTips
ビジュアルスクリプティングシステムBoltを使ってみよう 1回目
UnityとOculus Riftでフルダイブなゲームを作ってみた話
Unity講習会(初級)
VR道場 Unity × Oculus Touch ~VRで手を動かしてみよう~
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?
福島GameJam2013 参加者向け事前セミナー【UDK編】
Unityの開発環境が生み出す可能性
Unityティーチャートレーニングデイ -認定プログラマー編-
ユニティちゃんだけじゃない! オープンソースとUnityの未来
UnityのMultiplayサービスの得意な事
「宴」まとめ(2016年7月23UniBoookLT大会)
Unityティーチャートレーニングデイ -認定3Dアーティスト編-
Unityティーチャートレーニングデイ -認定アソシエイト編-
息抜きにUnityであそぼう(3D Game Kit Liteの話)
【初心者向け】Unity StartUp講座
【Unityの集い in大阪】LT:Unity認定試験(プログラマ)を受験しました
インディーゲーム開発の現状と未来 2021
Ad

Similar to Unity × graphics × effects (20)

PDF
Unityを使うと、どんな事が出来るのか?
PDF
波に乗ってUnity3Dを使ってみているんだが (Ameba x Pixiv 合同勉強会LT)
PDF
Let’s study unity
PDF
徹底比較Unreal engine4&unity5
PDF
【Unity道場スペシャル 2018京都】今日からはじめる。ユニティちゃんトゥーンシェーダー2.0〜Unity道場カラー黒帯スペシャル〜
PDF
Unityでアプリを作るには
PPTX
Unity講座
PDF
Unity2015_No2~Terrain~
PDF
Unityでホログラフィックunityちゃんを呼び出す方法
PDF
Webプログラマの為のUnity入門
PDF
Unite2017 tokyo toonshadermaniax
PDF
UnityLecture @Kyushu University
PDF
Unity講座資料1
PPTX
When i thought of using ci / cd in unity development
PPTX
PhotonCloudで一ヶ月ゲーム作った話
PPTX
Unityハンズオン〜3Dの世界を歩こう〜
PDF
Unityではじめるオープンワールド入門 アーティスト編
PDF
【Unite Tokyo 2018】ユニティちゃんトゥーンシェーダー2.0使いこなしスペシャル ~こだわりの活用法を紹介します!~
PPTX
若輩エンジニアから見たUniRxを利用したゲーム開発
PDF
Unity2015_No3~Shooting~
Unityを使うと、どんな事が出来るのか?
波に乗ってUnity3Dを使ってみているんだが (Ameba x Pixiv 合同勉強会LT)
Let’s study unity
徹底比較Unreal engine4&unity5
【Unity道場スペシャル 2018京都】今日からはじめる。ユニティちゃんトゥーンシェーダー2.0〜Unity道場カラー黒帯スペシャル〜
Unityでアプリを作るには
Unity講座
Unity2015_No2~Terrain~
Unityでホログラフィックunityちゃんを呼び出す方法
Webプログラマの為のUnity入門
Unite2017 tokyo toonshadermaniax
UnityLecture @Kyushu University
Unity講座資料1
When i thought of using ci / cd in unity development
PhotonCloudで一ヶ月ゲーム作った話
Unityハンズオン〜3Dの世界を歩こう〜
Unityではじめるオープンワールド入門 アーティスト編
【Unite Tokyo 2018】ユニティちゃんトゥーンシェーダー2.0使いこなしスペシャル ~こだわりの活用法を紹介します!~
若輩エンジニアから見たUniRxを利用したゲーム開発
Unity2015_No3~Shooting~
Ad

Unity × graphics × effects