本文へスキップ
SYRUP

インタラクティブコンテンツ制作イントロダクション

海辺康志
26.7.4
ビギナー
ロードマップ
インタラクティブ

概要

Webインタラクション、デジタルサイネージ、AR/VR/MRから、映像・音響・照明機材、センシング、リアルタイム通信、Unity、TouchDesignerまで、インタラクティブコンテンツ制作に関わる分野を11のセクションで整理したロードマップの概要版です。各分野の技術と代表的なツールをつかみ、自分が深堀りしたい領域を見つけることを目的としています。

詳細版はこちら

用語集はこちら

アウトプット

1 / …↗ PDF

内容

イントロダクション

  • 「インタラクティブ」とは、ユーザーや環境の入力に応じて表現が変化するメディアのこと
  • 今日見るのは、インタラクティブコンテンツ制作ロードマップの全体像
  • Web体験・デジタルサイネージ・AR/VRまで、幅広い分野をカバー
  • ゴールは、自分が楽しめそうな分野を1つ見つけ、さらに深堀りしてみること
流れ
  1. インタラクションデザインとは
  2. Webインタラクション
  3. Three.js
  4. デジタルサイネージ
  5. 映像・音響・照明機材
  6. センシング
  7. リアルタイム通信
  8. 展示設計・安定稼働・コンテンツ管理
  9. AR/VR/MR
  10. Unity
  11. TouchDesigner

インタラクションデザインとは

  • インタラクションデザインは、人の入力に対して、システムが反応を返す体験を設計する分野
  • コンテンツは、入力・処理・出力・フィードバックの4つの要素で構成される
  • 設計で大事なのは、即時性・変化量・状態設計の3点
流れ
  1. 入力 — タッチ、マウス、カメラ、センサー、身体の動きなど
  2. 処理 — プログラム、3Dエンジン、映像処理、音響処理
  3. 出力 — 映像、音、照明
  4. フィードバック — 入力に対してどんな出力を返すか

入力 処理 出力 フィードバック 即時性 レイテンシ 変化量 状態設計

Webインタラクション

  • ブラウザで動くインタラクティブ体験。PCでもスマホでも、URLひとつで届けられる
  • 主な入力：マウス・タッチ・キーボード・カメラ・マイク・ジェスチャー
  • 主な技術スタック：GSAP、Rive/Lottie、WebGL/WebGPU、Three.js、WebXR

GSAP Rive Lottie WebGL WebGPU Three.js WebXR

GSAP

  • Webアニメーションで広く使われる、動きの制御に特化したJavaScriptトゥイーンライブラリ
  • DOM要素・CSSプロパティ・Three.jsオブジェクトなど幅広い対象を高精度にアニメーションさせる
  • ScrollTriggerの機能を使うことで、スクロール連動の演出（パララックス効果）が簡単に実装できる

GSAP ScrollTrigger パララックス イージング

Rive / Lottie

  • WebGLやThree.jsを使うほどではないUI演出に向く、軽量なアニメーションツール
  • Rive：インタラクティブなアニメーションを設計できる次世代ツール。ステートマシンで「ホバーしたら変化」などの動きを直接設計できる
  • Lottie：After Effectsで作ったアニメーションをJSONとして書き出し、ブラウザで再生できる

Rive Lottie ステートマシン マイクロインタラクション

WebGL / WebGPU

  • ブラウザからGPUを直接使って、高性能なグラフィックスを描画する仕組み
  • WebGL：現行の安定したAPI。シェーダー（GLSL）を書いてGPUに命令を送る低レベルAPI
  • WebGPU：主要ブラウザで対応が進む次世代GPU API。より現代的なGPU機能にアクセスでき、計算シェーダーも使える

GPU WebGL WebGPU GLSL シェーダー

Three.js

  • WebGL / WebGPUを抽象化した3Dライブラリ。難しいGPU命令を書かずに3Dシーンを構築できる
  • できること：3Dオブジェクト・ライティング・カメラの配置、シェーダーを使ったカスタムエフェクト、マウス・スクロール・タッチとの連動
  • React Three Fiber（R3F）：Reactのコンポーネントとして Three.jsシーンを書けるライブラリ

Three.js WebGL WebGPU R3F

WebXR

  • ブラウザ上でVR/AR体験を提供するWeb標準API
  • アプリのインストール不要。URLを開くだけでVR/ARが体験できる
  • Three.jsと組み合わせて実装することが多い。Safari / iOS SafariはWebXR非対応なので注意

WebXR AR VR

Three.js

Three.jsの基礎

  • Three.jsは、ブラウザ上で3D表現を実現するJavaScriptライブラリ
  • WebGLの難しい部分を扱いやすくしてくれる
  • 基本は4つの要素で考える：Scene（3D空間）・Camera（どこから見るか）・Light（光源）・Renderer（画面に描画する仕組み）
  • 3Dオブジェクトは、**形（Geometry：箱、球、モデルデータなど）と見た目（Material：色、質感、透明度、反射など）**を組み合わせて作る

Scene Camera Light Renderer Geometry Material

Three.jsでできる表現

  • マウスやタッチに反応させる（Raycaster）
  • スクロールに合わせて動くパララックス演出（GSAPのScrollTriggerと組み合わせる）
  • カメラを回して商品や作品を見せるビューア（OrbitControls）
  • 3Dモデルを読み込んでWeb上に表示する
  • GSAPと組み合わせ、高度なアニメーションを作る
  • glTF形式を使い、Blenderなどで作った3Dモデルを読み込む

Raycaster ScrollTrigger OrbitControls Blender glTF

Three.jsの発展表現

  • パーティクル — 点を大量に使った星空・煙・粒子表現
  • シェーダー — 波、歪み、発光などの特殊な見た目
  • ポストエフェクト — Bloomなど、映像的な仕上げ
  • 物理表現 — 重力、衝突、揺れなどのリアルな動き
  • データ連動 — APIやセンサーの値を使って3D表現を変化させる
  • 重くなりやすいので、「見た目」と「軽さ」のバランスが大事

Particle Shader Post Effect

デジタルサイネージ

デジタルサイネージとは

  • 店舗・駅・施設・イベント会場などに設置された、デジタル表示システムの総称
  • 主な表示形態：
    • 屋内サイネージ（店舗・ロビー・展示）
    • 屋外LEDビジョン（大型ビルボード・スタジアム）
    • インタラクティブキオスク（タッチ操作・センサー連動）
    • 透過ディスプレイ（ショーウィンドウ・展示ケース）
    • プロジェクション — 壁・床・建物・オブジェクトに映像を投影。プロジェクションマッピングで形状に合わせた演出も可能

LEDビジョン 透過ディスプレイ プロジェクションマッピング

制作技術の選び方

ツール得意なこと苦手なこと
動画ループ安定稼働・低コスト・管理のシンプルさインタラクティブ演出・動的なデータ反映
HTML5 / Three.jsブラウザ表示・データ連動・更新のしやすさ高負荷なリアルタイム処理・センサー制御・常設設備での安定稼働
Unity3D・物理演算・インタラクティブUI・AR/VR・クロスプラットフォームリアルタイム映像合成・ノードベースの演出・ライブでの即興演出
TouchDesignerリアルタイム映像処理・センサー連動・音響連動・ライブ演出緻密なUI設計・複雑なゲームロジック・モバイル対応
  • ツールは組み合わせて使うことも多い — センサー制御をTouchDesignerに任せ、3D表示をUnityで行うなど、役割分担して連携させる構成も現場では一般的
  • TouchDesigner / Unityは後のセクションで詳しく扱う

動画ループ HTML5 Unity TouchDesigner

映像・音響・照明機材

映像出力機材

  • プロジェクター：
    • 短焦点 — 狭いスペースでも大画面投影が可能（Epson・Panasonic等）
    • レーザープロジェクター — 長寿命・高輝度。常設サイネージに向く
  • ディスプレイ・モニター：
    • 業務用ディスプレイ — 民生品より高輝度・高耐久・24時間稼働対応（Panasonic・Samsung・SharpNEC等）
    • タッチパネル — インタラクティブキオスクに使用（Elo Touch等）
    • 透過ディスプレイ — 半透明のディスプレイ（Samsung・LG等）
  • LEDビジョン：ピッチ（画素間隔）が小さいほど近距離でも綺麗に見える。屋外対応は高輝度・防水仕様が必要（Absen・ROE Visual等）
  • マルチディスプレイ・ビデオウォール：複数モニタを1つの大きなキャンバスとして使う構成。デイジーチェーン接続やPCからの複数出力で実現

短焦点 レーザープロジェクター タッチパネル 透過ディスプレイ LEDビジョン ビデオウォール デイジーチェーン

映像調整・分配機材

  • 映像調整：
    • エッジブレンディング — 複数プロジェクター映像をつなぐ際、境界をなめらかにする技術
    • ワーピング — 曲面・立体物への投影時に歪みを補正する
    • 代表的なソフトにResolumeやMadMapper、専用ハードにGeobox等がある
  • 映像分配・スイッチング：
    • HDMIスプリッター — 1つの映像ソースを複数の出力先に同時分配する機器（Blackmagic Design・IMAGENICS・Extron等）
    • マトリックススイッチャー — 複数の入力と複数の出力先を自由に組み合わせて切り替える機器
  • LAN映像伝送：HDMIエクステンダー — HDBaseTという規格を使い、LANケーブルにより離れた場所のディスプレイやプロジェクターへ映像を送る機器。送信機・受信機のセットで長距離の映像伝送に使用（IMAGENICS・Extron・ATEN等）

エッジブレンディング ワーピング HDMIスプリッター マトリックススイッチャー HDMIエクステンダー HDBaseT

音響機材

  • スピーカー：
    • パッシブスピーカー — アンプ別体型。大型展示・ホール向け（Yamaha・JBL等）
    • アクティブスピーカー — アンプ内蔵型。小〜中規模展示に扱いやすい（Genelec・Yamaha等）
  • オーディオインターフェース：PCからの音声をスピーカーに送るための変換機器。音質向上・複数チャンネル出力に対応（Focusrite・MOTU等）
  • DSP・ミキサー：
    • ミキサー — 複数の音声入力をまとめて音量・音質を調整する機器（Yamaha・Allen & Heath等）
    • DSP — 音声をデジタル処理して遅延補正・イコライジング・ルーティングを行う（Yamaha・QSC等）

パッシブスピーカー アクティブスピーカー DSP オーディオインターフェース

照明機材

  • 照明機器の種類：
    • スポットライト — 特定の場所・オブジェクトを狙って照らす（ETC・Chauvet等）
    • ウォッシュライト — 広い範囲をムラなく照らす。背景・壁面の色づけに使う
    • ムービングライト — 向きや色をリモートで動的に変えられる。ライブ・イベント演出に（Robe・Martin等）
  • DMX制御：照明機器をデジタル信号で制御する業界標準プロトコル
    • DMXコントローラー — 照明の明るさ・色・動きをプログラムして制御する機器（Enttec）
    • DMXインターフェース — PCからDMX信号を送るためのUSB接続機器（Enttec Open DMX）
    • TouchDesignerやUnityからDMXを送ってリアルタイムに照明を制御することも可能

スポットライト ウォッシュライト ムービングライト DMX

再生・制御機材

  • 再生PC・GPU選定：インタラクティブ展示には高性能GPUが必要。常設・長期運用ではNVIDIA RTX系GPU搭載のワークステーション構成がベスト
  • メディアプレイヤー：動画ループ再生に特化した小型機器（BrightSign・Scala等）。シンプルなサイネージには最適だがインタラクティブにはできない
  • AV統合制御：映像・音響・照明・電源など複数機器をまとめて制御する
    • 大規模：専用システムで細かく制御（Crestron・AMX等）
    • 小〜中規模：電源コントローラーなどで起動順序を管理するシンプルな構成も多い
  • UPS（無停電電源装置）：停電・瞬断時に機器への電源供給を維持する。24時間稼働・展示の安定運用に必須（APC・Omron等）

メディアプレイヤー BrightSign Crestron UPS

センシング

様々なセンサー

  • センサーの種類：
    • 距離センサー — 物体までの距離を計測。超音波型が安価（HC-SR04等）
    • 加速度センサー・ジャイロセンサー — X・Y・Z軸の加速度・角速度を3軸で取得（MPU-6050等）
    • 圧力センサー — 踏む・押す力をアナログ値で取得。感圧フィルム（FSR）が展示でよく使われる
    • 光センサー — 明るさをアナログ値で取得。照度センサー（BH1750）などが使われる
    • タッチ・静電容量センサー — 触れた/触れていないの2値、または近接距離をアナログで取得
    • 温度・湿度センサー — 気温・湿度をデジタル値で取得。環境データを映像に反映する用途に（DHT22等）
    • 曲げセンサー — 曲がり具合をアナログ値で取得。手袋や衣装に仕込んだ身体表現に活用
  • ノイズ安定化：センサー値はそのまま使うと不安定。ローパスフィルター・移動平均で平滑化する

距離センサー 加速度センサー ジャイロセンサー 圧力センサー 光センサー 静電容量センサー 温度・湿度センサー 曲げセンサー ローパスフィルター 移動平均

深度カメラ・LiDAR

  • 深度カメラ（RGB-Dカメラ）：通常のRGB情報に加え、画素ごとの距離情報を取得できるカメラ
    • RealSense（Intel） — 構造化光方式・ToF方式のモデルがある。屋内展示でよく使われる
    • Orbbec Femto Bolt（元Azure Kinect）— ToF方式。骨格認識精度が高く、インタラクティブ展示での実績も多い
    • 点群（ポイントクラウド）— 空間を3D点の集合として取得。Unity・TouchDesignerに取り込んでインタラクションや映像演出に活用
  • LiDAR：レーザーで空間をスキャンして距離を計測する技術。iPad Pro・iPhoneに搭載し、ARKitと組み合わせてAR体験に使われる。タッチ位置取得もよく行われる（Hokuyoシリーズ等）
  • 活用例：人の位置・動きをリアルタイムで3D取得→映像・音・照明に反映、空間スキャンによるAR配置

深度カメラ RealSense Orbbec Femto Bolt 点群 LiDAR

Arduino・マイコンとの連携

  • Arduinoの基礎：センサー・ボタン・LEDなどを制御するマイコンボード
  • シリアル通信：ArduinoとPCをUSBで接続してデータをやり取り
  • Wi-Fi通信：
    • MKR WiFi 1010 — IoT向けシリーズ。Wi-Fi/BT内蔵でコンパクト
    • Nano 33 IoT — 小型でWi-Fi内蔵。スペースが限られた展示に向く
    • WiFiNINA — MKR/Nano向けのArduino公式Wi-Fiライブラリ。サーバー・クライアント・UDP通信に対応
    • Wi-Fi通信ではSocket / OSC / WebSocket / MQTTなどでPCへデータを送れる
  • Unity / TouchDesignerへの取り込み：USB接続はシリアル通信、Wi-Fi接続はSocket / OSC / WebSocket / MQTTなどで受信し、3Dオブジェクトや映像パラメータに反映する

Arduino analogRead Serial MKR WiFi 1010 Nano 33 IoT WiFiNINA Socket OSC WebSocket MQTT

身体インタラクション

  • カメラ・骨格推定：
    • MediaPipe（Google） — RGBカメラ1台で手・顔・全身の骨格をリアルタイム推定。基本的に無料で利用しやすいが、商用利用時はライセンスを確認する
    • 深度カメラ — より精度の高い3D身体認識が可能。深度情報そのものを使う場合はRealSense SDKなどと組み合わせる
    • Unity・TouchDesigner両方に取り込んで映像演出・インタラクションに活用
  • ジェスチャーマッピング設計：
    • 骨格の「ランドマーク（関節点）」の座標を取得して、映像・音・照明のパラメータに変換
    • 閾値設計 — 「手を上げたら発火」などのトリガー条件を設計する
    • 複雑なジェスチャーは、複数フレームの変化や機械学習モデルを使って判定する

MediaPipe 骨格推定 ランドマーク ジェスチャー 閾値設計 機械学習

リアルタイム通信

リアルタイム通信の基礎

  • TCP vs UDP：
    • TCP — 信頼性重視。データが必ず届く・順序が保たれる
    • UDP — 低遅延重視。信号が必ず届く保証がない
    • インタラクティブ展示では低遅延を重視する場面でUDPを選ぶ
  • Socket通信：TCP/UDPを使って、アプリ同士が直接データを送受信する通信方法。Unity・TouchDesigner間で数値や制御信号を送るときに使われる
  • WebSocket：Socket通信と同じく双方向にデータを送れるが、Webブラウザから扱いやすいように設計されている。ブラウザ・Unity・TouchDesignerすべてで使える
  • Socket.IO：WebSocketの上に乗るライブラリ。自動再接続・ルーム管理・ブロードキャストを簡単に実装でき、複数クライアントの状態同期に向く

TCP UDP Socket WebSocket Socket.IO ルーム管理 ブロードキャスト

機器制御・IoTプロトコル

  • MIDI：
    • 音楽機器・ソフト間で演奏データをやり取りする業界標準プロトコル
    • ノート・CC（コントロールチェンジ）などのメッセージを送受信
    • TouchDesigner・Max/MSP・Ableton Liveなどで直接扱える
    • MIDIコントローラーのノブやフェーダーをパラメータ制御に使うことも多い
  • OSC（Open Sound Control）：音楽・映像・照明ツール間で制御データをリアルタイムに送信。アドレスパターン（例：/sensor/hand/x）で任意の値を送れる。MIDIより柔軟で高精度
  • MQTT：IoT機器やセンサーの値をネットワーク経由で送受信する軽量プロトコル。**Broker（仲介サーバー）**を経由してデータを購読・発行し、低帯域・不安定なネットワークでも動作。複数デバイスの状態共有に向く

MIDI OSC MQTT Broker

映像転送・照明制御プロトコル

  • NDI（Network Device Interface）：ローカルネットワーク内で映像をリアルタイム配信するプロトコル。低遅延・高品質で、同一LAN内での複数PC間映像共有に向く
  • Spout / Syphon：同一PC内でGPUテクスチャをリアルタイム共有するプロトコル。TouchDesignerで合成した映像をUnityに送る、といった連携が可能（Windows：Spout、Mac：Syphon）
  • DMX / Art-Net / sACN：
    • DMX — 照明機器を制御する業界標準プロトコル。512チャンネルの値（0〜255）を送る
    • Art-Net — DMX信号をUDPネットワーク経由で送る拡張規格。複数ユニバース対応
    • sACN（E1.31）— Art-Netと並んで使われるネットワーク照明制御プロトコル

NDI Spout Syphon DMX Art-Net sACN

展示設計・安定稼働・コンテンツ管理

展示設計

  • コンセプト・空間設計：
    • 作品のテーマ・意図・体験者への問いかけを言語化し、設計の軸にする
    • 空間レイアウト設計 — プロジェクター・スクリーン・スピーカー・センサーの配置と導線をレイアウト図で整理する
  • 設置・撤収フロー：
    • 搬入・設置・調整・撤収の手順を事前に整理する
    • 技術ライダー — 会場側への技術要件（電源容量・ネットワーク・プロジェクター設置位置など）を事前に文書で伝える
  • ドキュメンテーション：
    • 技術仕様書 — 再展示・引き継ぎのための構成図・機材リスト・配線図をまとめる
    • 作品記録 — 展示の映像・写真よる記録を制作・公開する

技術ライダー 技術仕様書 構成図

安定稼働・トラブル対応

  • 長期稼働のための設計：
    • 自動起動 — PC・機材の電源投入時にアプリが自動で立ち上がるように設定
    • クラッシュ対応 — アプリが落ちたとき自動で再起動する仕組み（タスクスケジューラ・supervisord等）
    • ログ監視 — 異常を検知して通知する仕組みを用意する
  • 遠隔監視・管理：現地に行かずにPCの状態確認・再起動ができる環境を整える。VPN＋リモートデスクトップ（TeamViewer等）をよく使う
  • トラブルシューティング設計：障害対応手順・マニュアルを事前に整備する。フェイルセーフ — 一部が壊れても展示全体が止まらない設計を考える

自動起動 ログ監視 遠隔監視 リモートデスクトップ フェイルセーフ

コンテンツ管理・データ連動

  • CMS連携とスケジューリング：CMSで複数拠点のコンテンツを一元管理し、時間帯・曜日・イベントに合わせたコンテンツの自動切り替えが可能
  • データ連動と動的コンテンツ：REST API / JSONで外部データを取得して自動反映。活用例：天気・ニュース・交通情報・予約状況・SNSフィード
  • ファイル監視・ホットリロード：指定フォルダに画像・動画を入れると自動でコンテンツが切り替わる独自システムを作ることもよく行われる。検知後にコンテンツを差し替える処理（ホットリロード）と組み合わせることで、再起動なしに反映できる。活用例：スタッフが画像をフォルダに入れるだけで表示が更新されるサイネージ

CMS REST API

AR/VR/MR

AR/VR/MRとは

  • 3つの概念の違い：
    • AR（拡張現実）— 現実の映像にデジタル情報を重ねる。スマホカメラ・ARグラス
    • VR（仮想現実）— 完全にデジタルの空間に没入する。多くの場合ヘッドセットを使う
    • MR（複合現実）— 現実空間を認識し、デジタルオブジェクトを空間に固定・相互作用しているように見せる
    • XR — AR/VR/MRをまとめた総称
  • 代表的なデバイス：
    • VR：Meta Quest、PlayStation VR
    • AR/MR：スマートフォン、Meta Quest、Apple Vision Pro、HoloLens 2（既存導入・産業用途）
  • 活用シーン：展示・教育・建築可視化・ゲーム・医療・空間演出

AR VR MR XR Meta Quest Apple Vision Pro

AR/VR/MRの制作環境

  • Unity：
    • AR Foundation — iOS（ARKit）・Android（ARCore）両対応の開発基盤
    • XR Interaction Toolkit — VRコントローラー・ハンドトラッキングの実装でよく使われる公式ツールキット
    • Meta Quest対応 — OpenXRでQuest向けVRアプリをビルド
  • WebXR：ブラウザ上でVR/ARを体験。アプリインストール不要。Three.jsと組み合わせて実装することが多い
  • 体験設計の注意点：
    • VR酔い — フレームレート・移動方法の設計が快適性に直結（デバイスのリフレッシュレートに合わせたfpsを維持する。90fps前後が快適性の目安）
    • 空間UI — 3D空間での情報配置・文字サイズ・視線誘導はWebやスマホと別の設計が必要

AR Foundation ARKit ARCore XR Interaction Toolkit OpenXR WebXR VR酔い

Unity

Unityの基礎

  • Unityの基本構造：「Scene → GameObject → Component」の階層でできている
    • Scene — 空間全体。カメラ・ライト・オブジェクトをまとめる箱
    • GameObject — すべてのオブジェクトの基本単位。Componentを追加することで初めて機能を持つ
    • Component — GameObjectに機能を追加するパーツ。例えばRigidbody（物理）・AudioSource（音）・MeshRenderer（見た目）。自作スクリプトも同じComponentとして扱う
    • Transform：すべてのGameObjectが持つ位置・回転・スケールの情報
  • C#スクリプト（MonoBehaviour）：GameObjectに貼り付けて動作を記述する。Start()は起動時に1回実行、Update()は毎フレーム実行
  • URP（Universal Render Pipeline）：新規プロジェクトで標準的に選ばれるレンダリング設定。ライティング・シェーダー・ポストエフェクトの品質に影響する

Scene GameObject Component MonoBehaviour Transform URP

Unityでできる表現

  • 物理・インタラクション：
    • Rigidbody — 重力・衝突・力を受けるオブジェクトに付与。Colliderと組み合わせて物理挙動を実現する
    • Input System — キーボード・マウス・タッチ・コントローラー入力を統一的に処理。デバイスを問わず同じコードで扱える
    • DOTween — メソッドチェーンで移動・回転・フェードをシンプルに記述できるトゥイーンライブラリ。transform.DOMove()一行で動く
  • アニメーション・演出：
    • Animator — アニメーションクリップとステートマシンで状態遷移を管理。「歩く→走る→止まる」のような切り替えを設計できる
    • Timeline — カットシーン・インスタレーション演出をタイムライン上で設計
    • Cinemachine — コードなしで動的なカメラワークを設計。追従・揺れ・切り替えなどを直感的に設定できる

Rigidbody Collider Input System DOTween Animator Timeline Cinemachine

Unityの発展表現

  • グラフィックス：
    • Shader Graph — ノードベースのビジュアルシェーダー。コードなしでカスタムエフェクトを作れる
    • VFX Graph — GPU駆動のパーティクルシステム。大規模な煙・炎・星空エフェクト
    • Post Processing — Bloom・被写界深度・カラーグレーディングなどのポストエフェクト
  • 応用表現：
    • ジェネラティブ表現 — アルゴリズム＋Shader/VFXでプロシージャルなビジュアルを生成
    • AIとの連携 — MediaPipeやONNXモデルを取り込んだインタラクティブ体験（Sentis）
    • AR/VR — AR Foundation・XR Interaction Toolkitで前セクションの内容を実装

Shader Graph VFX Graph Post Processing Bloom Sentis

TouchDesigner

TouchDesignerの基礎

  • リアルタイム映像・インタラクション制作のためのノードベース環境
  • ノードを「ワイヤー」でつないでデータフローを設計する。コードを書かなくても映像が作れる
  • オペレーターの種類（ノードの分類）：
    • TOP — 映像・テクスチャの処理・合成
    • CHOP — 数値・音声・センサーデータの処理
    • SOP — 3Dジオメトリの生成・変形
    • MAT — マテリアル・シェーダーの設定
    • DAT — テキスト・テーブル・Pythonスクリプト
  • Pythonスクリプトで動的な制御・自動化も可能

TOP CHOP SOP MAT DAT

TouchDesignerでできる表現

  • TOPによる映像処理：カメラ入力・動画・生成映像をリアルタイムで処理・合成。Feedback TOP — 映像を自己参照してループ・残像・フラクタル的な表現を生成
  • ジェネラティブビジュアル：
    • GLSL TOP — GLSLシェーダーを直接書いてGPUで映像を生成
    • Noise TOP — ノイズ関数でオーガニックなテクスチャ・動きを生成
  • 音響連携：Audio Analysis CHOP — 音声入力をFFT解析してビート・振幅を映像化。MIDIコントローラーでパラメータをリアルタイム制御
  • センサー・カメラ連携：Arduinoでセンサーデータを取り込む、MediaPipe / RealSenseで骨格認識・深度カメラを映像演出に活用

Feedback TOP GLSL TOP Noise TOP MIDI Audio Analysis CHOP

TouchDesignerの発展表現

  • プロジェクションマッピング：Stoner / CamSchnappr — TouchDesigner内でのマッピング実装ツール。複数プロジェクター構成でエッジブレンディング・分割出力も可能
  • 外部アプリ連携：OSC — Unity・スマートフォン・他のアプリとリアルタイムにデータをやり取り
  • 複数ディスプレイ出力・パフォーマンス管理：Window COMP — 複数の画面への映像出力を設計。Performance Monitor — メモリ使用量を確認し最適化
  • 展示向け長期稼働設定：Perform Mode — UIを非表示にして映像出力のみに切り替える展示モード

Stoner CamSchnappr Window COMP Perform Mode Performance Monitor

まとめ

どこか気になる分野がありましたか？

気になる分野やスキルがあったら、それを深堀りしてみて下さい。深堀りすることで、他の分野へと繋がり、世界がさらに広がってゆきます。

関連リンク

GSAP Rive LottieFiles Three.js Resolume MadMapper RealSense Orbbec Femto Bolt MediaPipe Meta Quest Apple Vision Pro Unity TouchDesigner

インタラクティブコンテンツ制作ロードマップ

海辺康志
26.7.4

インタラクティブコンテンツ制作用語集

海辺康志
26.7.4