Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Unity × Graphics × Effects"世界はこんなにもやさしく、うつくしい"のウラガワ
自己紹介杉野裕則/チームラボhttps://twitter.com/sugi_cho美大卒 × 社会人2年目 × Unityエンジニア入社して、3ヶ月くらいはFlashで、映像とか、コントの背景とか作ってた。Unityを知って、PVがかっこ良く...
チームラボについてテクノロジーとクリエイティブを使って、いろんなものを作ってる会社。ウルトラテクノロジスト集団Webサイト、デジタルショーウィンドウ、アート作品、映像、など。http://www.team-lab.com/http://www....
Unityは、ゲームエンジンUnityは、ゲームエンジンで、3Dのオブジェクトを置いて、3Dゲームとか、2Dゲームまで結構簡単に作れる!すごい!でも、チームラボではゲーム開発の案件はほとんど無い。チームラボではUnityをどう使ってるのか...?
チームラボでは..Unityを、3次元教科書アート作品ファッションショーの演出デジタルショーウィンドウTVCMの制作などに、使ってます。いまのとこ
チームラボでのUnityを使った案件● teamLabBody  http://www.team-lab.net/portfolio/teamlab-body_jp.html● 世界はこんなにもやさしく、うつくしい  http://www.te...
世界はこんなにもやさしく、うつくしい書家の紫舟さんとチームラボがコラボレーションして、つくった、アート作品。紫舟+チームラボ,2011, インタラクティブアニメーションインスタレーション, 書: 紫舟,音楽: 高橋英明
世界はこんなにもやさしく、うつくしい
どうやって作ってるのか?センサリングPC(oF)と映像用PC(Unity)、Webカメラ、プロジェクターを使用。プロジェクターの光でできた人の影を検出して、映像を影に反応させる。
Unity × OSC (Open Sound Control)センサリングPCで画像処理により検出した影の位置情報を、OSCで映像PCに送り、その情報をUnityで使用し、インタラクティブに映像を生成、制御している。renderer.boun...
UnityをAfterEffectsのように使うレイヤーを重ねて合成したり、オブジェクトを意図した位置にカメラのレンダーイメージ配置して画面を作る。エフェクトによって、重なり順を設定。あるエフェクトは書の下に表示されないといけない、とか、あるエ...
複数カメラでパノラマイメージ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 Rende...
プロジェクターエッジブレンディング紫舟+チームラボ世界はこんなにもやさしく、うつくしい@ミヅマアートギャラリーhttp://www.team-lab.net/portfolio-exhibition/loving-exhibition/mizu...
プロジェクターエッジブレンディングプロジェクタ間のブレンディングが必要
プロジェクターエッジブレンディングプロジェクターが重なる部分のイメージをダブらせ、良い感じにアルファをかける必要がある。(Linerでかけるだけではダメ)
プロジェクターエッジブレンディングShader+ImageEffectで実装。参考:Edge blending using commodity projectorshttp://paulbourke.net/texture_colour/edg...
使用ハードウェア(展示用)ASUSの6出力できるグラフィックカードを使用http://www.asus.com/Graphics_Cards/AMD_Series/HD7970DC2T3GD5/PCは6つのディスプレイを1つのディスプレイとして...
Unityを使って良かったとこ●   3Dオブジェクトを簡単に使える●   物理演算が簡単に使える●   動画も使える●   結構、拡張性があってなんでも出来る●   大きい解像度(6400*900とか)でも動く
Unityのイマイチなところ動画のシークができない動画に合わせてアニメーションを付けたい時に、動画のシークができないので、うまくSyncさせるのがタイヘン。動画のフレーム数を見て、何フレーム目にどうなる。みたいな感じでアニメーションを付ける必要...
Unityでゲーム以外のプロダクトを作って良かったこと。(ゲーム作ったこと無いけど展示とかで、いろんなところいけたコトシンガポール、フランス、上海、ニューヨーク、オーサカ
以上ですありがとうございました!
Upcoming SlideShare
Loading in …5
×

Unity × graphics × effects

チームラボでのUnityを使った案件と、アート作品「世界はこんなにもやさしく、うつくしい」をどんなふうに作ってるか。
開発者向けスライド

  • Be the first to comment

Unity × graphics × effects

  1. 1. Unity × Graphics × Effects"世界はこんなにもやさしく、うつくしい"のウラガワ
  2. 2. 自己紹介杉野裕則/チームラボhttps://twitter.com/sugi_cho美大卒 × 社会人2年目 × Unityエンジニア入社して、3ヶ月くらいはFlashで、映像とか、コントの背景とか作ってた。Unityを知って、PVがかっこ良くて、使いたいです!って言ったらOKが出て、Unityを使った案件を担当するようになった。
  3. 3. チームラボについてテクノロジーとクリエイティブを使って、いろんなものを作ってる会社。ウルトラテクノロジスト集団Webサイト、デジタルショーウィンドウ、アート作品、映像、など。http://www.team-lab.com/http://www.team-lab.net/
  4. 4. Unityは、ゲームエンジンUnityは、ゲームエンジンで、3Dのオブジェクトを置いて、3Dゲームとか、2Dゲームまで結構簡単に作れる!すごい!でも、チームラボではゲーム開発の案件はほとんど無い。チームラボではUnityをどう使ってるのか...?
  5. 5. チームラボでは..Unityを、3次元教科書アート作品ファッションショーの演出デジタルショーウィンドウTVCMの制作などに、使ってます。いまのとこ
  6. 6. チームラボでの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
  7. 7. 世界はこんなにもやさしく、うつくしい書家の紫舟さんとチームラボがコラボレーションして、つくった、アート作品。紫舟+チームラボ,2011, インタラクティブアニメーションインスタレーション, 書: 紫舟,音楽: 高橋英明
  8. 8. 世界はこんなにもやさしく、うつくしい
  9. 9. どうやって作ってるのか?センサリングPC(oF)と映像用PC(Unity)、Webカメラ、プロジェクターを使用。プロジェクターの光でできた人の影を検出して、映像を影に反応させる。
  10. 10. Unity × OSC (Open Sound Control)センサリングPCで画像処理により検出した影の位置情報を、OSCで映像PCに送り、その情報をUnityで使用し、インタラクティブに映像を生成、制御している。renderer.bounds から、スクリーン空間上での書オブジェクトのRectを計算しRectと影が接触しているか判定。UnityでOSCを使う方法-強火で進めhttp://d.hatena.ne.jp/nakamura001/20110807/1312739099
  11. 11. UnityをAfterEffectsのように使うレイヤーを重ねて合成したり、オブジェクトを意図した位置にカメラのレンダーイメージ配置して画面を作る。エフェクトによって、重なり順を設定。あるエフェクトは書の下に表示されないといけない、とか、あるエフェクトは必ず一番上のレイヤーに表示されないといけないとか。camera.depthを設定し、複数カメラを使用。
  12. 12. 複数カメラでパノラマイメージCameraComponent数、約30個。パノラマに撮影できるように並べて、横長のイメージを作成※赤い四角1つづつが、各カメラのレンダーイメージ
  13. 13. Unityで、Processingのように使うC#とJavaは、ほとんどいっしょ!→Javaのコードをそのまま使えるProcessingのライブラリはJavaで書かれてる→使える!Processingの流体シミュレーションライブラリを使用した。
  14. 14. MSAFluid(流体シミュレーション)Processingライブラリ版をUnityで使用http://www.memo.tv/msafluid/
  15. 15. GameObjectを溶かすCameraでオブジェクトを撮る ↓RenderTextureをTexture2Dに書き込む ↓Texture2Dに対して流体シミュレーション ↓オブジェクトが溶けている用に見える参考:Convert a RenderTexture to a Texture2Dhttp://answers.unity3d.com/questions/9969/convert-a-rendertexture-to-a-texture2d.html
  16. 16. プロジェクターエッジブレンディング紫舟+チームラボ世界はこんなにもやさしく、うつくしい@ミヅマアートギャラリーhttp://www.team-lab.net/portfolio-exhibition/loving-exhibition/mizuma_what.html壁2面、プロジェクター4台出力→プロジェクター間のエッジブレンディングが必要になってくる
  17. 17. プロジェクターエッジブレンディングプロジェクタ間のブレンディングが必要
  18. 18. プロジェクターエッジブレンディングプロジェクターが重なる部分のイメージをダブらせ、良い感じにアルファをかける必要がある。(Linerでかけるだけではダメ)
  19. 19. プロジェクターエッジブレンディングShader+ImageEffectで実装。参考:Edge blending using commodity projectorshttp://paulbourke.net/texture_colour/edgeblend/参考のサイトに書いてある式通りにShaderを作ったら、なんとなく、上手くいった。→エッジブレンディング専用ソフトを使うとソフト代だけで10万以上費用がかかる!
  20. 20. 使用ハードウェア(展示用)ASUSの6出力できるグラフィックカードを使用http://www.asus.com/Graphics_Cards/AMD_Series/HD7970DC2T3GD5/PCは6つのディスプレイを1つのディスプレイとして認識する(Eyefinity6)ので、Unityで作ったアプリを全画面実行し、複数プロジェクターで作品投影をしている。CPUもi7の、できるだけ速いマシンを使用。→結構無茶な処理もできる。
  21. 21. Unityを使って良かったとこ● 3Dオブジェクトを簡単に使える● 物理演算が簡単に使える● 動画も使える● 結構、拡張性があってなんでも出来る● 大きい解像度(6400*900とか)でも動く
  22. 22. Unityのイマイチなところ動画のシークができない動画に合わせてアニメーションを付けたい時に、動画のシークができないので、うまくSyncさせるのがタイヘン。動画のフレーム数を見て、何フレーム目にどうなる。みたいな感じでアニメーションを付ける必要があるから。GPU上に動画を載せてから再生するから?仕方ないのかな??MovieTextureの逆再生とか、再生スピード変えたりもできない。
  23. 23. Unityでゲーム以外のプロダクトを作って良かったこと。(ゲーム作ったこと無いけど展示とかで、いろんなところいけたコトシンガポール、フランス、上海、ニューヨーク、オーサカ
  24. 24. 以上ですありがとうございました!

    Be the first to comment

    Login to see the comments

  • Collonville

    Nov. 20, 2015
  • takaakiitami

    Mar. 5, 2016
  • ReiKatayama

    Apr. 21, 2016
  • koichirofurusho

    Aug. 21, 2016
  • IceCandy03

    Nov. 6, 2016
  • YukinoriMurosaki

    Dec. 27, 2016
  • comoc

    Jan. 6, 2017
  • HiromasaTomari

    Jan. 14, 2017
  • YukiAbe1

    Jan. 18, 2017
  • kuniakikawashima

    Apr. 1, 2017
  • but8

    Apr. 21, 2017
  • takashisaiga

    May. 2, 2017
  • FumikaEto

    Jun. 24, 2017
  • IsobeKota

    Aug. 5, 2017
  • YukiAbe5

    Jan. 26, 2018
  • YosukeFujii

    Apr. 15, 2018
  • yn3104ao

    Aug. 22, 2018
  • sakiohno

    Dec. 4, 2019
  • ToshihiroMasumura

    Jan. 31, 2020
  • rrRamses

    Dec. 23, 2020

チームラボでのUnityを使った案件と、アート作品「世界はこんなにもやさしく、うつくしい」をどんなふうに作ってるか。 開発者向けスライド

Views

Total views

29,558

On Slideshare

0

From embeds

0

Number of embeds

8,411

Actions

Downloads

134

Shares

0

Comments

0

Likes

84

×