【Unite Tokyo 2018】チームラボ × Unity ～Unityで制作するデジタルアートの世界～

2018/5/8 チームラボ × Unity Unityで制作するデジタルアートの世界 中村将達・松田勇磨 ・仲田将之 チームラボ株式会社 / インタラクティブチーム

中村 将達 松田 勇磨 チームラボ株式会社 / インタラクティブチーム / プログラマー 仲田 将之

チームラボとは • 従業員約500人 • インスタレーション・サイネージ・Web・スマートフォンアプリなど、デジタル分野における 幅広いコンテンツ制作やソリューションの提供を行う。プログラマ、エンジニア、CGアニ メーター、数学者、建築家など、様々な分野の専門家で構成されている。 • SI事業と並び、アート作品の制作も行っている。

デジタルアート

“ 現代アートは、どう見たらいいのか ということ自体を問う闘いそのものだ 高橋龍太郎. 現代美術コレクター ”

アートとは - 西洋美術史 古典的美の 基準 ギリシア美術 「肉体美！」 初期キリスト教美術 「心の 美しさが大事！」 19世紀までの 美の 基準 ルネサ ンス美術 「ギリシア美術最高！」 ゴシック美術 教会や王の 権力 「神に近づきたい！」 W i k i pe di a W i k i pe di a バロック美術 「神の 演出過剰！」 W i k i pe di a 新古典主義 「やっぱ ギリシア美術！」 W i k i pe di a 画像「鑑賞のための西洋美術史入門」より

アートとは - 西洋美術史 後期印象派 「色は感情！」 抽象芸術 「色と形は絵の 素粒子！」 ダダイズム 「 既成概念はカッコ 悪い！」 アクショ ンペインティング 「描いた行為(軌跡)が カッコ いい！」 ポップアート 「サ ブカルかっこいい！」 W i k i pe di a W i k i pe di a W i k i pe di a W i k i pe di a F l i ck r

アートとは -­ 楽焼 • • • • 茶道の起源は中国の禅宗 輸入された茶道は12世紀に広まるが、美も中国が基準 千利休が「地味で不細工な茶碗がカッコいい！」とか言いはじめた 美の基準が変わった 黒楽茶碗（重要文化財） （16世紀に日本で製造） 青磁輪花茶碗（重要文化財） （12-13世紀に中国で製造） 油滴天目（国宝） （12-13世紀に中国で製造）

アートとは • 美に関する、基準や概念（コンセプト）に関する争い • 「蝶」と「蛾」の違いは、生物学的な違いではなく、見た目の違い • 誰かが「美しいのが蝶で、汚いのが蛾」という概念を広めた • フランスやドイツでは、「蝶」と「蛾」をひとくくりにする単語がある 飲茶. 史上最強の哲学入門

デジタルアート メディアが新しい • デジタル技術を使ったアート • キャンバスをデジタル化しただけ • 本 → Kindle • 画用紙→ペンタブレット • メディアアートは「メディアの新しさ」が 重要 • 現代アートは「コンセプトの新しさ」が重 要 • チームラボはデジタルで現代アートを 作りたい メディアアート デジタルアート teamLa b 概念が 古い 概念が 新しい 伝統的アート 現代アート メディアが古い

チームラボのコンセプト • 西洋美術は「透視図法」を前提とし て、正面から見るように作られてい る • 絵画に正対する視点 （主観） が ある • それ以外の視点は存在せず、 「他人の視点 （客観）」となる

チームラボのコンセプト - 超主観空間 • 一方で、日本の絵巻物や Google Map などは視点移動（スクロール）できる • スクロールすることで視点(主観)を移動できるアートは一種の空間になっている • チームラボではそれを「超主観空間」と呼んでいる 熈代勝覧 (絵巻物)

チームラボのコンセプト – ボーダレス • 「超主観空間」を拡張したコンセプト • 超主観空間によって「主観」と「客観」の境界と、 • インタラクティブ性によって「作品」と「鑑賞者」の境界はあ いまいにできた • だが、個々の作品は、互いに隔たれていた • ボーダーレスは「作品」と「作品」の境界も取り除いてしまお う、というコンセプト

日本美術のコンセプト - なぞらえ “もともとある作品をリスペクトしながら、自分たち の作品を作るということを、日本では非常に高い文 化力の持ち主だと評価するのである。こうした美学 をまとめて「なぞらえ 」としてお きたい。（高橋龍太 郎. 現代美術コレクター）” 俵屋宗達 風神雷神図屛風 鈴木其一 風神雷神図襖 会田誠 美しい旗 http://blo g .livedo o r.jp/a _delp /a rchives/2015-03 -2 1.html

• http://blog.livedoor.jp/a_delp

チームラボ作品のなぞらえ 鈴木其一 板野サーカス Wikipedia 花と人 Gold 葛飾北斎 超時空要塞マクロス 追われるカラス Wikipedia Black Waves

チームラボ × Unity

チームラボ × Unity • インタラクティブなアート作品の制作にはUnityを用いている • Unityでのコンテンツプログラミングを専門的に行う部署 : インタラクティブチーム

開発について

開発について • 作品ごとにプロジェクター、ディスプレイ、立体LEDディスプレイなど出力先の媒体が異 なり、それぞれに特有のテクニックが存在する

プロジェクター

プロジェクター • 複数のプロジェクターから出ている映像を、投影面に沿って投影したり、綺麗に繋げる必 要がある • ワーピング • エッジブレンディング • マスキング （映像を湾曲させて平行でない面にも絵的に正しく映す） （重なった映像を滑らかに繋げる） （映像の一部にマスクをかける）

Unity上でのマッピング • Unityから出力される映像を直接プロジェクターに送るケースのため、 Unity上にマッピ ング機能を実装している

ワーピング 出典 : A. Grundhöfer, D. Iwai (2018) “Recent Advances in Projection Mapping Algorithms” Figure 1 https://www.disneyresearch.com/publication/recent-advances-in-projection-mapping- algorithms/

• https://www.disneyresearch.com/publication/recent-advances-in-projection-mapping-algorithms/

ワーピング

エッジブレンディング 出典 : A. Grundhöfer, D. Iwai (2018) “Recent Advances in Projection Mapping Algorithms” Figure 1 https://www.disneyresearch.com/publication/recent-advances-in-projection-mapping- algorithms/

• https://www.disneyresearch.com/publication/recent-advances-in-projection-mapping-algorithms/

エッジブレンディング

別ツールでのマッピング • Unity以外でもマッピングを汎用的に用いるために、oF実装でマッピングツールを開発し ている • マッピングのためのリッチなGUIを搭載し、複雑な投影面にも対応 • UnityからSpoutというプロトコルで映像をツールに転送し、ツール側は受け取った映像 に対してマッピング機能を施すことで連携している • http://spout.zeal.co/

ディスプレイ

ディスプレイ • 複数ディスプレイにまたがって一つのwindowを全体に表示して、作品を見せる • フルスクリーン実行ではなく、コマンドラインで-popupwindowオプションをつけて実行 している（フルスクリーン実行だと1画面にしか出ないため） • ポストエフェクトでディスプレイのベゼルを消す

立体LEDディスプレイ

立体LEDディスプレイ • 立体的に配置されたLEDに映像を表示することができる媒体 • Unity上でシミュレーションした様々なエフェクトや図形を、立体のままLEDに映している

Unity上でプレビューするモード 立体LEDディスプレイに映像を表示するモード ディスプレイ上の1pixelが空間に配置された実際のLED1つの色に対応しており、 Unity上でシミュレーションした3Dエフェクトを2次元映像に変換するエンジンをUnity上に実装している

表現のためのGPU活用

表現のためのGPU活用 • 近年は体験価値の追求から作品規模が巨大になり、広い空間を一つの作品として成り立 たせつつ、物量のある表現を維持するために様々なテクニックが必要とされている • 物量のある表現でもリアルタイム性を維持するため、GPUを活用してエフェクトを開発し ている

大量のモデルアニメーション

大量のモデルアニメーション • 標準のスキンアニメーションだと、アニメーションモデルを大量に出しつつパフォーマン スを維持するのが難しい • Vertex Texture Fetchというテクニックを用いて、頂点シェーダでモデルをアニメーショ ンさせることでパフォーマンスを維持しつつ大量のアニメーションモデルを出すことを実 現しています

頂点位置を格納したテクスチャ 法線を格納したテクスチャ

ParticleやTrail表現

ParticleやTrail表現 • ParticleやTrailを用いた表現も、Unity標準のものでは物量を補えなかったり、ほしい表 現が得られない場合が多々ある • Compute Shaderなど、GPGPUのテクニックを用いて自作ParticleSystemや TrailRendererを実装し、エフェクト開発を行っている

流体表現

流体表現 • 格子法や粒子法での流体シミュレーションを用い、水の流れを表現する • エンドユーザー向けなゲームと違い、展示に使用するPCは作品ごとにワンオフのハイス ペックPCなので、流体表現のような負荷の高い表現もドンドン使っていける

そのほかの表現 • ほかにも砂や群れ、炎など、作品ごとに必要なモチーフを表現するためのテクニックを調 査しながら開発している

イメージエフェクト

イメージエフェクト • 目指すビジュアルのために、イメージエフェクトを細かくかけて調整する • 作品ごとに求めるビジュアルが異なるため、様々なイメージエフェクトを開発し、組み合 わせている

イメージエフェクトの例 「花と人」

色味調整、イメージエフェクトをかける前の状態

花の色味を調整した状態

背景色を調整した状態

背景のライティングを調整した状態（ノイズによる明るさのムラ）

グローをかけた状態

グローの色味を調整した状態

花の明るさとグローを調整した状態

グローした映像とグローがかかっていない映像との合成

葉っぱの色にノイズによる色ムラをかけた状態

背景の金箔テクスチャの凸凹を花にも適用した状態（完成）

複数PCでの同期

16K以上の高解像度で作品を出力する • 巨大な空間を扱う場合、16K以上の高解像度で作品を映すことが求められることがある • 1PCからだとそのような高解像度で作品を出力することが難しいため、複数PCを利用す る • 複数PCから映像を映す場合でも、全体で一つの作品として成立するように、映像が途切 れずに滑らかに繋がっているように見せる必要がある→同期の出番

複数PCでの同期 • UNET • アニメーションモデルの全ボーンの同期 • エフェクトは乱数シードと開始時間を共有することで、絵的に繋がるように見せる

センサー連携

センサー連携 • センサープログラミングは別チームが担当（画像処理・機械学習チーム） • カメラやレーザーセンサーを用いて、人の位置や壁に触れている部分などを推測 • openFrameworkでのアプリ開発が多い • OSC（OpenSound Control）プロトコルでのやり取り （例）/point 1, 0.25, 0.7 : (x, y) = (0.25, 0.7)の位置にIDが1の人がいる OSC

サウンド連携

スピーカー配置の例（白い四角記号がスピーカー）

サウンド連携 • Unityからサウンドを鳴らすこともあるが、多チャンネル作品の場合、Max/MSPとの連携 を行い、サウンドを鳴らす • OSCでのやり取り （例）/se 5 0.6 0.2 : (x, y) = (0.6, 0.2)の位置にあるスピーカーからIDが5のSE音源を鳴ら す OSC

現場調整

現場調整 • 現場に入り、実際にプロジェクターなどから作品を映すと、PCディスプレイ上の見た目と 全然違う印象になる • 色味やオブジェクトのサイズ感など、現場で実際に見ながら調整を行う必要がある • 実行時にGUIを出しながらパラメータ調整を行い、ビジュアルのブラッシュアップを行う （調整したデータはJSONなどで保持し、ランタイムで読み込みと保存）

プロジェクターから出ている映像にGUIでパラメータを表示し、調整している様子

まとめ • デジタルアート作品に求められるビジュアル表現のために、Unityを活用している • プロジェクターの映像調整や他ツールとの連携など、空間作品を制作するにはゲーム開 発とは違ったテクニックが求められる場面が多々ある

展示のお知らせ

teamLab Borderless

チームラボはUnityエンジニアを 大募集しています！ h t t p s : / /w ww .t ea m -l a b .c om / r ec r ui t/ c a re er /i nt er a c tiv e

• https://www.team-lab.com/recruit/career/interactive