2019/10/28 Unityでつくるインタラクティブコンテンツ 第12回:UnityとTouchDesigner、それぞれの特徴 今回は、コンテンツ開発におけるUnityとTouchDesigner、それぞれの特徴と必要な知識について考えます。 TEXT_高田稔則 / Toshinori Takata(Codelight) EDIT_小村仁美 / Hitomi Komura(CGWORLD) コードベースのUnity こんにちは、高田です。先日お台場で行われたUnite Tokyo 2019に参加してきました。大変な盛況ぶりにUnityの勢いを改めて感じる一方、最近制作ではTouchDesignerを使うことが増えてきました。Unityよりもさらに簡単にコンテンツを組み上げることができる場合があるからです。新たにUnityの勉強をしている社員などの様子を見ていてどっちの方が効率良いのだ
ハリウッドやメディアアート界から熱い注目を集めるTouchDesigner。本邦初の入門解説書が遂に登場! TouchDesignerは、リアルタイム映像出力や大規模インスタレーションで威力を発揮する、ノードベースのビジュアルプログラミングツール。表現のアイデアを素早く形にでき、かつ拡張性と安定性にも優れた、アートとテクノロジーの結節点たりうる開発環境です。バージョン099からはMac版も公開され、さらにユーザーを拡げています。 本書は、これからTouchDesignerを始めようとしている入門者、そしてもっと使いこなしたいと思っている初・中級者に向けて、基礎スキルから実践的な応用法までを網羅した解説書です。先駆者たちへのインタビュー、著名デジタルアーティストたちの制作プロセスと設計思想に迫ったコンテンツも掲載。TouchDesigner本家Derivative社 ベン・ヴォイト氏特別監修
カナダのDerivative社が開発、販売しいるノードベースのビジュアルプログラミング環境。映像の高速処理、Arduino、Kinect、Oculus、照明機器等、各種デバイスとの連携も可能でインタラクティブなコンテンツの作成に適している。プロジェクションマッピングやライブ演出等のリアルタイム演出、メディアアートまで幅広く使われている。個人利用であれば機能限定(出力解像度1280×1280等)だが無料で使えるNON-COMMERCIAL版がある。 ノードベースプログラミングでは、下図のようにある機能を持ったノード同士を接続していくことでプログラミングを行う。処理の流れを理解しやすいノードベースツールを利用することで、アーティストやデザイナー自身がプログラミングを行うことが容易になってきている。 ノードベースツールは、TouchDesigner以外にも、vvvv、Max、Notch等、近年増
はじめに 勉強ついでに適当に作ってみたモデルをTouchDesigner内で動かしてみたくなったのでやってみました。 実際やってみたらこんな感じ!(この記事で使ったモデルとは違うけれど、だいたいこんな感じです) サンプルのリポジトリはこちら! ちなみに、今回はWindows前提で記事を書いていますがMacでも動作可能です! TouchDesignerのPythonについて TouchDesignerでは、拡張機能としてPythonを使用することができます(私の環境だと内部でPython3.7.2が動作するようです)。 Dialogs > Textport and DATs からPythonのインタプリタを使うことができます。 プリインストールとして、標準ライブラリとOpenCV、numpyなんかが使えます。 今回はこれに加えて機械学習でよく使われるライブラリを使って、TouchDesgin
Zoomのウェブカメラ映像にTouchDesignerでフィルタかけたい! こんなことが出来るようになります。rgb delayフィルタをかけた例。 新型コロナの影響や、「Zoomでバ美肉」が話題になってたりで、Zoomのカメラ映像を変えるのはホットなのかなと。 ということで、TouchDesignerから出力してみた。 ウェブカメラ画像を入力して、フィルタかけて、Zoomへ送るまで、TouchDesigner上で出来るようになる。 試した環境 Windows10 1909 Spout 2.006 TouchDesigner 2020.20020 以下は手順 SPOUTインストール ここからダウンロード(Donateしないとね) https://leadedge.github.io/spout-download.html 現時点の最新バージョンは 2.006 update2 らしい。 Sp
現在、コロナウイルスの影響で、音楽イベントなどがほとんど中止や延期になっていますが、その中でもみんなで楽しめる方法がないか模索しています。 ∀RroWsはDJ/VJ/LJなどでパフォーマンスや空間演出などをするユニットなので、オンラインでも同様なことがある程度できないか検討しました。 先週末にzoom+TouchDesigner+YouTubeのLive配信の方法でオンラインDJ/VJを@sleepJamさんとやってみました。 思いの外簡単に実現できたので、そのやり方をまとめたいと思います。 https://t.co/TcoqTHNSVz 今日の配信、後からでも見れます。OrangeJamさんの映像炸裂してますね。∀RroWsの持ち曲増やさないと。また次回はLiveCodingとかやります!zoom+YouTube配信でやっていますが、メンバー増やしていきたい。 — Tomoya@∀Rro
余談となりますが、Houdiniのシステムの根幹を為すプロシージャル(Procedural)という概念はCG業界においてパラダイムシフトを起こしつつあり、MayaやCinema4Dなどの手作り的なCGソフト一辺倒だった日本でも急速にシェアを拡大しつつあります。 Procedualについてはここでは細かく説明しませんが、ざっくり言ってしまうと成果物としての3DCGだけでなく、『その作業の手順や内容(=手続き=Procedual)』を保存、再利用するための概念です。少ない作業でProcessを再利用することでバリエーション豊かな制作物を作ることができることがメリットです。 Photoshopのアクションバッチ、ヒストリーの上位概念の自由度の高いものを想像していただくと良いかと思います。 またまたさらに余談となりますが、SideFX社の前進はオムニバス社と言い、日本の大手CG制作会社オムニバスジ
TouchDesigner 099 で簡単にプロジェクションマッピングができる「kantanMapper」の使い方。ステップ1 ナカジ(@cp_nakajun)です。 TouchDesignerには簡単にプロジェクションマッピングができる「kantanMapper」というツールキットがあります。 「kantanMapper」だけで一通りのマッピングができるようです。 TouchDesignerの088での使い方は調べるとWEBに情報がありましたが、 僕の今の環境であるMac版の099とは少し違ってるようだったので記事にしておきたいと思います。 kantanMapperの使い方 – イントロダクション 詳細は英語ですが公式サイトの方にもあります。 https://www.derivative.ca/wiki099/index.php?title=Palette:kantanMapper マス
【Unity】Mediapipeでハンドトラッキング + 人物切り抜き(ONNX or TouchDesignerからSpout)UnityTouchDesignerSpoutMediaPipeKeijiro 概要 ハンドトラッキングと人物切り抜きをUnity単体で完結させる方法と、TouchDesignerからSpoutで送受信する方法を試したのでその記録。 目次 Mediapipeでハンドトラッキング keijiro/NNCamで人物切り抜き TouchDesignerのNvidia Background TOPで切り抜き、Spoutでやり取り 最終的にはNvidia Background TOPが優秀で、Unityで動かすよりディレイが生じないTouchDesigner単体でやるほうが良さそうとなった。 コード全文載せてるので長いです。 環境 OS:Windows 10 Home C
自分用のメモなので説明は省きますmm touchDesigner無料版ダウンロードリンク https://www.derivative.ca/099/Downloads/ オーディオヴィジュアルチュートリアル CHOPとTOPで作るオーディオビジュアライズ TouchDesigner中級編(2) – オーディオリアクティブ表現 (1) TDabletonダウンロードリンク http://www.derivative.ca/Forum/viewtopic.php?f=22&t=10573&p=40385#p40385 連携チュートリアル動画 http://station.backspace.tokyo/satoruhiga/TDWS_2018/tips/tdableton/ ↑もう削除されていた ↓おそらくこれが一番コンパクトにまとまっている https://youtu.be/8fBo5oF
はじめに TouchDesignerを使ってVJをしている皆様ごきげんよう。 現場でテンポに合わせた展開を作りたいとき皆様どうしてますでしょうか? テンポを即座に変更/調整できることは、多くのライブ指向のプロジェクトにとって超重要ですよね。 いろいろな方法があると思いますが、「タップをしてBPMを計測できる機能があるよ」と教わったので、それと思しきwikiの項目「Tap Tempo」を和訳してみました。 概要は、『TouchDesignerの「Beat Dialog」というパネルについている[Tap]ボタンや[Listen]ボタンを「CHOP Execute DAT」を使ってボタンや外部機器からでも制御できるようにしましょう。』ってな感じです。 もし、誤訳している場合は、バシバシ修正を入れてくださいませ。 宜しくお願い致します 参考ページ : Tap Tempo - Derivative
展示やイベントなどでTouchDesignerを使う際に、 ここらへんの設定をしておくと便利だよ。という内容は、各々が秘伝のタレとして持っていると思うのですが、あまり記事としてはまとまってないような気もしたので、僕の中でこれは便利かもと思った項目を書き出してみました。 もしこれを見た方で、こうゆうのもあるよ!などあれば気軽に教えて貰えたら嬉しいです。 それと今回は主にWindows10を対象に書いていますので、Macの方は適宜読み替えつつご覧頂ければと思います。 ※免責とまでは言わないのですが、環境によってはうまく動作しなかったりする可能性もあるので確認・テストは各自できちんと行ってください。 目次 0. マシン側の事前準備 1. TDのプロジェクトを自動立ち上げ&死活監視 1-1. 監視用exeをPythonで作る 1-2. Restart on Crashに登録する 2. Produc
DerivativeとMUTEK.JPが提案する、次世代のアーティストを支援する活動として展開するTouchDesignerのワークショッププログラムは、デジタルテクノロジーの活用を通じて、人々の創造性を社会に発揮する(シビック・クリエイティブ)ための活動拠点シビック・クリエイティブ・ベース東京[CCBT]と提携して開催いたします。 TouchDesignerは、あらゆるインタラクティブ体験のために設計されたビジュアル・プログラミング・プラットフォームです。TouchDesignerのルーツは、ライブ・パフォーマンスのためのリアルタイム・ビジュアルであり、デジタルアートのジャンルで活躍するアーティストのためにその役割を担っているソフトウエアです。本年度は、CCBTの会場を利用し、初日は初心者向け、2日目は経験者向けとして、実践的な事例を通して、TouchDesignerのコンセプトや技術を
TouchDesignerでレーザー機器を使うには、EtherDream CHOP / DATでOKです。 レーザー機器のプロトコルはILDAというのが一般的です。DMXでも使えたりしますた。そのILDAに対応したインターフェースがEtherDreamです。 https://ether-dream.com/ 以前は販売が停止していた事もあって使えなかったのですが、先月のワークショップで友人から借りて試してみました。 何の問題もなく、使うことが出来ました。。 WindowsでもMacでも使えます。Macは当然099です。レーザーやっている友人曰く、あまりパフォーマンスがEtherDreamだと出せないと言っていたので、そのあたりを少し掘り下げるつもりです。 antymark 松波
はじめに 「リアルタイム画像処理によるエフェクトをかけた全天球映像をHMDで見るシステム」を爆速で組みたい等の理由で,UnityではなくTouchDesignerでVRコンテンツ開発を行いたくなる場合が存在します.晴れて映像を見ることができたら,次は頭の先にカーソルを出してみたいですよね1. Unityであれば,Cameraの子オブジェクトにカーソルとなるオブジェクトを入れるなり,CameraからRayを飛ばすなりすれば実装できそうですが,TouchDesignerでこれを実装しようとしたときに手数がかかったので,本記事ではこの実装方法を紹介します. 環境 Windows 10 TouchDesigner 2019.18360 Educational版(Non-Commercial版でも球に貼り付けるequirectangular形式画像のサイズに気を付ければ問題ありません.) HTC V
はじめに TouchDesignerはいろんなことができます。 だからこそさわりはじめになにをやっていいのかよくわからなくなってしまうかも知れません。 そんなときはまずウェブカメラの画像をつかってエフェクトを作ってみることをおすすめします。 ウェブカメラのエフェクトは ・カメラの画像を使うので0から絵を作らなくて済む ・少ない工程で大きく絵が変わって楽しい ・3Dを使わないのでとっつきやすい などはじめてさわる人でもつまづきにくいです。 やってみよう! 1.TouchDesignerを開いたらウィンドウ(network editorといいます)上に最初から置いてあるオペレーターをぜんぶ消して、左側に表示されているPaletteと書かれたウィンドウも閉じてください。 2.network editorをダブルクリック、またはtabキーを押します。 するとこんなのがでてきます。オペレーターを作成
今年の夏の茹だるような暑さに早くも敗北。 今年の夏はアウトドアでは無く思いっきりインドアアクティビティをしようと心に決めた。と、いうことで何をしようかと考えた時に、真っ先に思い浮かんだのが、ノードベースのビジュアルプログラミングツール「TouchDesigner(以下、TD)」である。(2019年8月追記:結局、TouchDesinerではなくUnityでVJ環境の構築にシフトしました。詳しくは、こちら。) 学生の時から、ProcessingやOFでビジュアルプログラミングは趣味程度にはかじっていたものの、池田亮司さんや、黒川良一さんのような超高次元な視覚芸術を目指すには、時間とスキル的を限界を感じていた。 この夏は、外で activity したら熱射病で死にそうなので、「サクッとプロトタイプを作れる」と聞いていた Touch Designer(TD) を触って、オーディオ・ビジュアルを入
タワーアカデミーが、【TouchDesignerを使ったVJ講座】を11月23日から約1か月に渡り開講する。 TouchDesigner(タッチデザイナー)とは、プロジェクションマッピングやメディアアート、VJ 用コントローラーまで、様々な映像や音に関するシステムを簡単に組み上げることができるオーディオビジュアルツール。今年5月に行われた【TouchDesigner講座~Basic編~】において初級者向けの講座を経た今回は、VJアーティストの育成に焦点を絞ったプログラムで設計されている。1日目のオリエンテーションの他、VJを志す人は避けて通れない要素として「ジェネ映像編」「プリレンダ編」「GLSL編」と内容を分け、経験者でも苦手分野を克服できる単発での受講と、お得なセット受講の選択が可能となっている。 ◎イベント情報 【TouchDesignerを使ったVJ講座~ジェネ映像編~】 メイン講
シトロンです。 TouchDesignerの記事は初めて書きます!(ハードル下げ) 普段は、大学や研究所でTouchDesignerの力を借りて研究システムの開発や結果解析などをしています。 今回の執筆の趣旨は、TouchDesignerにonnx簡単に導入できるっぽいからみんな使おうぜ!です。 RobustVideoMatting(RVM)とは YouTubeのショートリール動画がわかりやすいです。 いわゆる人物切り抜きのネットワークモデルです。 RobustVideoMatting(RVM) はそのうちの一つですが、高品質かつ高速に動作するということで注目されています。 Cedroさんのツイート(より詳細な説明のブログあり) ブログを書きました! 通常、動画の背景を後で編集したい場合は、その動画を撮影するときに背景をグリーンバックにしますが、これは結構面倒です。そこで、今回ご紹介するの
タワーレコードが“5G時代の音楽エンタメ人材育成”をテーマに運営している教育事業「タワーアカデミー」が、「TouchDesignerを使ったVJ講座」を、11月23日(土)から約1ヵ月にわたり、東京・東京アニメーションカレッジ(高田馬場)にて開催する。 ◆「TouchDesignerを使ったVJ講座」講師 画像 TouchDesignerはプロジェクションマッピングやメディアアート、VJ用コントローラー等、映像や音に関するシステムを簡単に組み上げることができるオーディオビジュアルツールだ。2019年5月に開催された初級者向け講座「TouchDesigner講座~Basic編~」を経た今回は、VJアーティストの育成に焦点を絞ったプログラムが展開されるという。 内容は「ジェネ映像編」「プリレンダ編」「GLSL編」と分けられ、単発での受講と、セット受講の選択が可能となっている。講師には各分野のプ
TouchDesigner でのドラッグ&ドロップについて 公式Wiki TouchDesignerでUI構築、ツール制作を行う際に便利なドラッグ&ドロップについて解説します サンプルファイルとか 2019年のアドカレで同じ内容の記事を書いていたみたいですが、機能が更新されていたり使いやすくなっていたので改めてドラッグ&ドロップについてまとめていきたいと思います 2019年の記事 ファイルやエディタ上でのD&Dについては上の記事に詳しく書いてあります(ここら辺の機能は変わってません) 以前のD&Dシステム(Legacy Drag/Drop System)との違い 以前はドラッグ・ドロップがされたタイミングで実行でしたが、現在のバージョンではそれ以外にも特定の実行タイミングを持つ Legacy Drag/Drop Systemは新しいバージョンでも使えるので以前の記事を参照してください ドラ
TouchDesignerの学習のため、ReSpeakerを使って音カメラを作った。 ReSpeakerでSSL(Sound Source Localization)を行い、音の到来方向へエフェクトを入れることで、音を可視化したらおもしろいかもしれないと思って製作した。 これを音カメラと呼ぶことにした。 TouchDesigner側 これはずっと悩みだったんですが、こういうビジュアルプログラミング系の製作物って、Qiitaでどう共有したら見やすいんですかねぇ…? とりあえず今回は画像で行きます。 内容はいたってシンプルです。 videodeviceinでカメラからの画像を読みこみ、そこに以下のようなgif画像を位置を指定して重ねているだけです。 SSLは生のPythonでやっているので、そのプロセスから結果をOSCで受けています。 ReSpeaker側 ReSpeakerはv2.0を使いま
chromeで開いたページをTouchdesignerでリアルタイムレンダリングする 動機 大学の課題でTouchdesignerを用いた作品を制作する授業があった。そこで、読み込んだウェブサイトがリアルタイムにTouchdesigner上でレンダーされ、サイトの滞在時間によってウィンドウのサイズを変える仕組みを使うことで何か面白い可視化を行えるのではないかと考えた。 先日、講評が終わりひとまず課題は終了となったがまだシステムを設計したに過ぎない段階で作品として、可視化として意義のあるものとして成立させるにはまだまだ道は長い状況である。 しかし、いったんの区切りとして現在の状況をまとめ改めて振り返り、そして備忘録として残しておきたいと思う。また、作品が進展するたびに更新していけたらと思う。 ※Touchdesignerのことも、プログラミングのこともそんなに詳しくないため正確でない表現や間
TouchDesignerにHoudiniのジオメトリデータを受け渡す方法をまとめます。 TouchDesignerだけでは、複雑なジオメトリを作るのは大変ですが、Houdiniで作って読み込めば容易に活用ができます。僕も教わったばかりではありますが、質問を受けたのもあり、方法をまとめます。 神田さんの講座のおかげで、HoudiniとTouchDesigner連携よく分かりました。とりあえず、ジオメトリデータのやりとりはできるように。attributeは今まさにHoudiniで色々やっているので、持っていて、GLSLとかでいじってみよう。 pic.twitter.com/KGlY44F6KK — Tomoya@∀RroWs (@snufkinliberty) 2019年2月16日 Houdiniでのデータ出力 今回は、おなじみのpigheadを出力してみたいと思います。 まずはHoudin
TouchDesignerプロジェクトの保存TouchDesignerは.toeという形式のファイルで保存されます。保存の方法は通常のアプリケーションと変わりません。保存に関するダイアログはTouchDesigner画面の左上の "File"より行けます。 TouchDesignerプロジェクトの保存 キーボード(Mac) : Command + S キーボード(Windows) : Ctrl + S マウス : "File"をクリック → "Save"をクリック TouchDesignerプロジェクトの別名保存 キーボード(Mac) : Command + Shift + S キーボード(Windows) : Ctrl + Shift + S マウス : "File"をクリック → "Save As..."をクリック TouchDesignerプロジェクトのフォルダ作成.toeファイル単
ビジュアルクリエイターのためのTOUCHDESIGNERバイブル 「ビジュアルクリエイターのためのTOUCHDESIGNERバイブル」Amazonでの購入はこちら 「ビジュアルクリエイターのためのTOUCHDESIGNERバイブル」楽天市場での購入はこちら 映像・動画、テロップにオススメのフォント・書体を紹介 ビジュアルクリエイターのためのTOUCHDESIGNERバイブル 文堂新光社は、2020年12月17日(木)に、映像の先鋭クリエイターである、川村健一氏、松岡湧紀氏、森岡東洋志氏著書による、最先端の映像表現に欠かせないソフト「TOUCHDESIGNER」の使い方をプロの作例を元にわかりやすく解説「ビジュアルクリエイターのためのTOUCHDESIGNERバイブル」を発売した。 TouchDesigner(タッチデザイナー)は、カナダのDerivative(デリバティブ)社が開発した、あ
結構ハマったので忘備録的に書いておきます。 用意するもの Ableton Live 10 (無料体験版でも良いです) TouchDesigner 099 2018.26450 初期設定 1. Ableton用ファイル一式の取得 Ableton LiveにTouchDesignerと連携するためのスクリプトとツールを設定します。 TouchDesignerのPaletteにあるTDAbletonを右クリックして『Browse Folder』を選択していけるフォルダの2階層上にあるTDAbletonフォルダにAbleton Liveに入れ込む『TouchDesginer』というフォルダ名のファイル一式があります。 普通にインストールしてればディレクトリは下記の感じだと思います。 Windows >> C:\Program Files\Derivative\TouchDesigner099\Sa
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く