MON第12回:UnityとTouchDesigner、それぞれの特徴ツイートツイート今回は、コンテンツ開発におけるUnityとTouchDesigner、それぞれの特徴と必要な知識について考えます。Komura(CGWORLD)コードベースのUnityこんにちは、高田です。2019に参加してきました。大変な盛況ぶりにUnityの勢いを改めて感じる一方、最近制作ではTouchDesignerを使うことが増えてきました。Unityよりもさらに簡単にコンテンツを組み上げることができる場合があるからです。新たにUnityの勉強をしている社員などの様子を見ていてどっちの方が効率良いのだろう?と思うところもあり、今回はUnityとTouchDesignerに関してちょっと考えてみたいと思います。コンテンツのプランナーの方たちに会うと、Unityを勉強したいという話を良く聞きます。若い方はたいていそうおっしゃるので、Unityは展示コンテンツの作成ツールとして定番になってきているのだと思います。Photoshopやillustratorが当たり前に使えるように、プランナーでもUnityをある程度使えるととても便利でしょう。TouchDesignerを知っている方はもう少し減りますが、それでもかなり認知度は上がってきている印象です。私はかなり長い間プログラムを使ってCM、映画、組み込み、データビジュアライゼーションなどのグラフィックス関連の仕事を行なってきたので、プログラムに関しての知識はある程度もっています。私の立場からすると、Unityはかなり開発が楽な環境です。Unityを導入する前にはFlash、openFrameworks、Cinder、Ogre3Dなどを使っていました。Flashはコンテンツを簡単に作れましたがメモリリークに悩まされることが多く、ハードウェアなどのローレベルの制御が難しいと思っていました。後にPapervision3Dなどで3Dレンダリングができるようにもなりましたが、これは速度的に不満のあるものでした。creativeapplications.netをみるとopenFrameworksを使っている人が多い印象です。openFrameworksはコンテンツ開発に必要な様々なライブラリが用意されていることやProcessingに似た単純なコードで開発を始められることで、プログラムに慣れている人にはとても使いやすいライブラリと言えます。Cinderもコンセプトは同じなのですが、C++のライブラリのため少し敷居が高いかもしれません。私はよく使っていましたが使っている人は少なそうです。Ogre3Dは高機能なゲームエンジンで、ゲーム開発に必要な機能はほぼ揃っています。フル3Dのコンテンツのいくつかはこれで作っていました。当たり前ですが、これらのライブラリを使って開発するときは、コードを書いて実行してみるまでは画像が出ません。視点変更やパラメータの変更など全てコードを書かないとやってくれないのです。Unityができるまではそれが当たり前だと思っていましたし、開発にも時間がかかり現在のような複雑なコンテンツを短時間に作ることは無理だと思っていました。Unityはエディタ上で常にシーンが表示されています。パラメータの変更もすぐにできます。3Dは座標を間違えるとカメラに映らないこともありますし、回転軸もライブラリによってまちまちで、データをライブラリに渡して画面に表示させるまで苦労していたのですが、Unityで最終結果が常に表示され、さらにゲーム実行中に値を簡単に変更できるのは素晴らしいと感じました。UnityはC#を使って高度な開発を行なっていくこともできます。C#を書かないとUnityをまともに使うことはできないとも言えます。アセットストアでアセットを用意してインスペクタ上で設定を行うだけでも多くのことができます。限界はすぐにやってきます。Unityでの開発をまともに行うためはかなり初期段階でプログラムを書かなければならないのです。以下は有名なFizzBuzz問題です。WikipediaにあるコードをC#で書き直しました。3の倍数の時「Fizz」、5の倍数の時「Buzz」、3と5の倍数の時「FizzBuzz」、その他のときは数字を表示します。初級プログラマの指標として使われることがあるようです。}}ここで使用されている構文は変数、クラス(class)、くり返し(for)、条件分岐(if)のみです。これに配列が加われば基本的にはどんなプログラムでも作ることができます。Unityを使うためには、どうしてもこのプログラム以上の知識が必要になります。リスト、コルーチン、コールバック、スレッド、ガベージコレクション、LINQ、例外処理、ファイルIO......。C#が書けないとUnityはきちんと使えないのです。入門者にはなかなかハードルが高いなぁと感じてしまいます。TouchDesignerはプログラムを書く代わりにノードベースでロジックを組んでいくことができるのが特徴です。TouchDesignerの起動画面はちょっと面白くて以下のようになっています。簡単なサンプルが用意されているのです。眺めていると左下の波がジェリービーンズの画像を揺らしているのだろうと想像がつきます。TouchDesignerは以下のようなオペレータを組み合わせてネットワークを構築し、コンテンツを作っていきます。各オペレータの内容は全てサムネイルやグラフで表示されます。左下のnoise1のノードをクリックするとそのパラメータが表示されます。この値を適当に変更するとリアルタイムに波の形が変わっていきます。コードを書く部分は一切ありません。実はそんなことはまったくなく、ある意味ではUnityよりもロジカルな考え方が必要になります。詳しくネットワークを見てみましょう。Noiseと呼ばれるものを生成してくれます。Noiseは連続した乱数値を得ることができ、地形の生成、パーティクルの演出などなどあらゆる場面で利用することができます。これが破線でchopto1につながっています。chopto1は紫色のボックスですね。これはTOPというグループに属することを表しています。Operatorのことで画像処理関連のオペレータです。noise1は緑色でCHOPグループに属します。Operatorのことで、様々な信号処理を行うグループです。Noise信号を生成するCHOPだということがわかります。CHOPとTOPは型がちがうので直接接続させることはできません。これはchopto1のパラメータです。注目すべきはCHOPにnoise1と書いてあることです。CHOPとTOPは型がちがうので直接接続させることができないため、このようにCHOPを受け取り、TOPに渡せるかたちに変換しています。chopto1でCHOPをTOPに変換したら実線でほかのTOPにつなげることができるようになります。chopto1はdisplace1につながります。画像をゆがませるためのTOPです。Displace(変位)はPhotoshopなどでもお馴染みなのでイメージが付きやすいと思います。元の画像は左上のmoviefilein1で指定されています。元の画像と変位量をdisplaceオペレータに渡すと画像をゆがませてくれます。ゆがめられたテクスチャがBoxに変換され、最後にまた2次元の画像に戻っています。この例は、ちょっと意味がわからないと思います。Boxを触っても回転できるだけで何の情報も取れません。Active)をクリックしてみると、パラメータが表示されるようになります。ダブルクリックするとgeo1の中のネットワークを見ることができます。これはGeometryCOMPという形状に関するオペレータをまとめるしくみです。box1とtexture1はSOPです。Operatorのことで形状に関するオペレータのグループです。この2つのオペレータのつながりはboxオブジェクトにテクスチャマッピングの情報を付加していることを表しています。その下のin1とout1はこのCOMPの入出力を定義しています。これがないと外部からテクスチャ情報を受け取ることができません。in1で受け取ったテクスチャはphone1に破線でつなげられています。Map」に指定されています。phone1は黄色でMATオペレータの仲間なので紫のTOPを直接つなげることはできないため、このように設定されています。phong1オペレータはその名の通りPhongシェーディングを行うためシェーダノードです。最近はPBRが主流で古典的なPhongシェーディングを知らない方もいらっしゃるかもしれません。COMP内にまとめられたSOPとMATは自動的に関連付けられます。in1からつながっているout1はCOMPの結果であるという意味です。geo1COMPを抜けた先にある最後のout1はレンダリングの最終画像であるという意味になります。TouchDesignerは[F1]キーを押すとパフォーマンスモードという実行モードに切り替わります。このモードで表示される結果がout1オペレータになります。試しにout1を消してパフォーマンスモードを実行すると何も映らなくなります。途中にあったBoxはサンプルとして置いてあるだけでした。このままだとBoxの計算結果はまったく無視され、displace1の結果がそのまま最終結果として表示されます。Boxを最終結果として表示させるためにはCamera、Light、Rendererオペレータを追加して以下のように接続する必要があります。プログラムを書かなくても済んでいますが、各オペレータのしくみをきちんと理解していないとまったく手が出ないと思います。コードメインで構築するUnityもノードベースのTouchDesignerも処理の流れをイメージできないと作るのは難しいものです。やりたいことの最終的なイメージをできるだけ明確にもつと、それを実現するための方法や学ぶべき項目を絞ることができるようになります。UnityやTouchDesignerなどを習得するのに一番早いのは、やりたいことに近いサンプルを探してきてそれを自分なりに改造していくことだと思います。プログラムの勉強で「写経」と呼ばれる方法があります。わからなくても自分でコードを打って実行してみるのです。コピペしてはいけません、目で見て自分で1文ずつ打ち込みます。これを行うと必ずミスが発生します。それを直して実行できるようにするだけでかなり勉強になります。ミスがなくても知らない作り方などに気が付きます。目的のものが出来上がってきたら、可能な限り詳細部分を見てわからない部分は公式のドキュメントをあたるようにします。慣れてくるとどんなアプリでも共通の考え方ができることに気が付きます。考え方さえ身に付けば、コードを書く場合でもノードをつなげていく場合でも表現方法が違うだけなので、その表現の差を学習するだけで使えるようになっていきます。どちらが楽ということはないので、目的に合わせて柔軟にツールを選択していくのが大事だと思います。ソニー・インタラクティブエンタテインメント)でPS4のOSD開発などを経て2006年にCodelight株式会社を設立。今回は、コンテンツ開発におけるUnityとTouchDesigner、それぞれの特徴と必要な知識について考えます。/...2019.09.27第11回:デバッグと設定ファイル今回は、コンテンツ開発の過程では欠かせないデバッグと、設定ファイルの記述法について紹介します。Toshinori...2019.08.20第10回:Spoutを使ってリアルタイムに画像を共有する今回は、UnityとTouchDesignerの間でリアルタイムに画像を共有する方法を紹介します。Controlでライトを制御する今回は、通信プロトコルOSCを、Unityで使えるようにセットアップします。Takata(C...2019.05.21第8回:押しボタンの入力をUnityで取得する今回は、押しボタンの入力をUnityで取得できるように、ボタンとデジタル入出力装置とPCを接続し、設定をしていきます。TEXT_高田稔則...2019.04.18第7回:プロジェクタのキャリブレーションをする第5回から引き続き、測域センサを用いたコンテンツの制作を進めていきます。今回はプロジェクタによる投影位置をより使いやすいよう調整します。...2019.02.21第6回(番外編):裸眼立体視ホログラムディスプレイを使ってみる前回から測域センサを用いたコンテンツの紹介がスタートしましたが、今回は番外編として、今注目の裸眼立体視用ホログラムディスプレイ「Looki...2019.01.24第5回:測域センサを使ってみる今回からは、レーザー式測域センサを利用したコンテンツを考えていきます。Unityで使えるようセットアップをし、簡単なインタラクティ...2018.12.19第4回:顔検出まとめ前回は、複数人の顔を検出してお面をかぶせるところまでコードをアレンジしてみました。今回は、さらにその精度を高めつつ、他の顔検出アルゴリズム...2018.10.26第3回:複数人の顔検出に対応させる前回、顔を検出してお面をかぶせるところまでつくってみました。今回はさらにそれを発展させ、複数人の顔を検出できるようにします。TEXT_高...2018.09.21第2回:OpenCVで顔検出こんにちは、Codelight株式会社の高田です。真さんの「おいしいデ」を読みました。ハリウッドでも活躍する佐藤隆之氏がFRONTIERのクリエイター向けPCをレビュー。ハリウッドでも活躍する佐藤隆之氏がFRONTIERのクリエイター向けPCをレビュー。次の100年も愛されるフォントを創る。FIX!森田悠揮氏、マーザ・アニメーションプラネット、カヤック、萌、SNKの登壇が決定。