インタラクティブコンテンツ制作ロードマップ
26.7.4
ロードマップ
インタラクティブ
概要
ダウンロード
内容
インタラクティブの基礎理解
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| 分野の概要 | インタラクティブとは | ユーザーや環境からの入力に応答して表現が変化するメディアの概念を理解する | インタラクション |
| 分野の全体像 | Webインタラクション・デジタルサイネージ・AR/VRなど主要分野の関係と特性を整理する | クリエイティブコーディング デジタルサイネージ Webインタラクション AR VR MR | |
| インタラクションデザイン | 入力と出力の設計 | センサー・カメラ・マウス・タッチなどの入力と、映像・音・物理出力などの出力の関係を設計する | 入力デバイス 出力デバイス |
| 反応・フィードバックの設計 | ユーザーの操作や環境変化に対して、視覚・音・動き・触覚などでどのような反応を返すかを設計する。即時性・変化量・分かりやすさを考える | レイテンシ 視覚フィードバック 音響フィードバック | |
| ツール選定 | Unity / TouchDesigner / Three.js の使い分け | 3ツールの特徴・得意領域・連携方法を理解し、目的に応じた選択基準を身につける | Unity TouchDesigner Three.js Arduino |
| プロトタイピングの進め方 | アイデアを素早く形にするプロトタイピングの考え方と手順を理解する。クリエイティブコーディングツールを使った素早い試作も有効 | PoC p5.js openFrameworks |
Webインタラクション
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| 基礎理解 | Webインタラクションの概念と種類 | マウス・タッチ・キーボード・ジェスチャー・音声・視線など多様な入力に対する反応設計を理解する | インタラクションデザイン |
| インタラクションデザインフロー | 要件定義からプロトタイピング、ユーザーテストまでの制作フローを理解する | Figma プロトタイピング ユーザーテスト | |
| 導線・状態・フィードバック設計 | ユーザーが次に何をすればよいか、操作後に状態がどう変化したか、どのような反応が返るかを分かりやすく設計する | 状態設計 導線設計 | |
| ブラウザ表現技術 | WebGL / WebGPU | ブラウザでGPUを利用した高性能グラフィックスの仕組みを概念レベルで理解する。現行の安定した標準はWebGLで、WebGPUは次世代標準として移行期にある | WebGL WebGPU WGSL |
| Three.js / R3Fの位置づけ | Three.jsがWebGLラッパーとしての役割と、React Three Fiber（R3F）がReact上で宣言的に3Dシーンを構築する位置づけを理解する。詳細な実装は§11 Three.jsで学ぶ | Three.js React Three Fiber R3F | |
| トゥイーンアニメーション（GSAP） | DOM要素・CSSプロパティ・Three.jsオブジェクトなど幅広い対象を高精度にアニメーションさせるGSAPの基礎を理解する。ScrollTriggerと組み合わせたスクロール連動演出も広く使われる | GSAP ScrollTrigger パララックス | |
| UIアニメーション（Rive / Lottie） | WebGLやThree.jsを使うほどではないUI演出では、RiveやLottieを使うことでインタラクティブなアニメーションを実装できる | Rive Lottie マイクロインタラクション | |
| WebXRの位置づけ | ブラウザ上でVR/AR体験を提供するWebXR APIの役割を理解する。実装の詳細は§4 AR/VR/MRで学ぶ | WebXR Immersive Web | |
| リアルタイムWeb体験 | マルチユーザー・低遅延体験 | 複数ユーザーが同時に参加するWeb体験に必要な同期・状態共有・遅延共有の考え方を理解する。通信方式の詳細は§5 ネットワーク・通信プロトコルで学ぶ | マルチユーザー 状態同期 低遅延 リアルタイム通信 |
| カメラ・マイクを使った体験 | ブラウザからカメラ・マイク入力を取得し、映像・音声を使った参加型体験を設計する | getUserMedia MediaStream | |
| パフォーマンス最適化 | Core Web Vitals | LCP・INP・CLSを計測・改善し、インタラクションの応答性と視覚的安定性を確保する | LCP INP CLS Chrome DevTools |
| バンドルサイズ最適化 | ViteやRollupでのコード分割（Code Splitting）とTree Shakingにより、初期読み込みを抑える | Vite Tree Shaking Dynamic Import Code Splitting | |
| アセット最適化 | WebP/AVIF画像・WebM動画・Brotli圧縮を活用し、表示速度を最適化する | AVIF WebP WebM Brotli | |
| 配信・運用 | ローカル配信とキオスク表示 | 展示・イベント用途でローカルサーバーやキオスクモードを使い、安定してWeb体験を運用する方法を理解する | キオスクモード |
デジタルサイネージ
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| 基礎理解と構成選択 | デジタルサイネージの概念と種類 | 屋内・屋外・インタラクティブ・LEDビジョンなど表示形態の違いと、用途に応じた構成選定の前提を理解する | デジタルサイネージ LEDビジョン キオスク 透過ディスプレイ |
| 業務用メディアプレイヤーとリアルタイムレンダリングの使い分け | 動画ループ向け業務用メディアプレイヤーとインタラクティブ演出向けPCベースの適材適所を理解する | BrightSign スケジュール再生 リアルタイムレンダリング | |
| コンテンツ制作技術の選定 | 動画ループ・HTML5/ブラウザ・Unity・TouchDesignerなど、目的に応じた制作技術と再生環境の選び方を理解する | HTML5 Unity TouchDesigner 動画ループ | |
| ハードウェア選定の基準 | 業務用ディスプレイと民生用ディスプレイの違い、明るさ・耐久性・入力端子・設置環境による選定ポイントを把握する | 業務用ディスプレイ | |
| 映像配信とマルチディスプレイ | マルチディスプレイとビデオウォール | 複数画面を使った表示構成や、ディスプレイ側のビデオウォール機能、PCからの複数画面出力、デイジーチェーンの考え方を理解する | マルチディスプレイ ビデオウォール デイジーチェーン |
| IP映像配信の考え方 | ネットワーク経由で映像を送る方法や、ローカル配信・ライブ映像入力の考え方を理解する。具体的なプロトコルは§5で学ぶ | IP映像配信 ライブ映像 低遅延配信 | |
| 照明・空間演出との連携 | サイネージの映像と照明・音響・空間演出を組み合わせ、空間全体として体験を設計する考え方を理解する。具体的な制御プロトコルは§5で学ぶ | 照明連携 | |
| コンテンツ管理と運用設計 | CMS連携とスケジューリング | コンテンツ集中管理と再生スケジュールを行うCMSの役割を理解する。クラウド型とローカル型の違いと導入ポイントを把握する | CMS |
| データ連動と動的コンテンツ | REST APIやJSONを使って外部データを取得し自動更新する仕組みを理解する。天気・ニュース・予約情報など動的なデータをサイネージに表示できる | REST API JSON 外部API連携 | |
| 24時間稼働設計と遠隔監視 | 連続運用に必要な熱設計・UPS・自動復旧・遠隔監視の基礎を理解する。現地に行かず電源再起動やログ確認できる体制を構築する | UPS 熱設計 遠隔監視 |
AR/VR/MR
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| 基礎理解 | AR/VR/MRの概念整理 | 拡張現実・仮想現実・複合現実の違いと、それぞれの特性・用途を理解する | AR VR MR XR |
| 座標系と空間認識 | 現実空間とデジタル空間を対応づけるトラッキング・平面検出・アンカーの仕組みを理解する | 6DoF 平面検出 空間アンカー | |
| 空間設計 | 空間UI・UXデザイン | 3D空間における情報配置・ナビゲーション・インタラクションを設計する | Spatial UI 空間ナビゲーション |
| 空間コンテンツへの応用 | AR/MR技術を使って、空間に情報や体験を重ねるコンテンツ制作の考え方を理解する | 空間コンテンツ 場所性 空間演出 | |
| Unity AR/VR | AR Foundation | Unityを使ったクロスプラットフォームARアプリの開発基礎を理解する | AR Foundation ARKit ARCore |
| XR Interaction Toolkit | VRコントローラー・ハンドトラッキング・インタラクションの標準実装を理解する | XR Interaction Toolkit XR Rig Ray Interactor | |
| Meta Quest対応 | Questヘッドセット向けビルド設定とOpenXRによるVRアプリ開発の基礎を理解する | Meta Quest OpenXR Hand Tracking | |
| Apple Vision Pro / visionOS | Unity PolySpatialを使ったvisionOS向けMRコンテンツ制作の基礎を理解する | Vision Pro visionOS Unity PolySpatial RealityKit | |
| VR向け最適化 | VRで必要なパフォーマンス目標とUnity上での最適化手法を理解する | Foveated Rendering バッチング | |
| Web AR/VR | Three.js + WebXR | Three.jsにWebXRを組み合わせてブラウザVR/ARシーンを実装する概要を理解する。Three.jsを使った実装の詳細は§11で学ぶ | WebXR Three.js XRSession |
| 体験設計・快適性 | 没入感とユーザー体験 | VR/AR体験における快適性・没入感・酔いの設計上の考慮点を理解する | VR酔い 視野角 コンフォートガイドライン |
| 空間オーディオ | 3D空間内の音源配置・方向感・距離感を設計し、没入感を高める音響表現を理解する | Spatial Audio HRTF Ambisonics |
ネットワーク・通信プロトコル
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| 基礎理解 | リアルタイム通信の概念 | HTTP通信との違い、双方向通信・同期・遅延の基礎概念を理解する | WebSocket HTTP レイテンシ 非同期 |
| TCP / UDPの違い | 信頼性を重視するTCPと低遅延を重視するUDPの違いを理解し、用途に応じた通信方式を選べるようにする | TCP UDP 信頼性 低遅延 | |
| 設計パターン | 複数クライアントが関わる体験では、誰がデータを持ち・誰に配るかの設計が体験品質を左右する。サーバー集中型・P2P型・ブロードキャスト型の違いと使い分けを理解する | サーバー・クライアント P2P 同期設計 ブロードキャスト | |
| リアルタイム同期 | TCP Socket | OSレベルの双方向通信。ブラウザからは使えないが、Unity・TouchDesigner・Node.js間などツール同士の直接通信に使われる。WebSocketより低レベルで軽量 | TcpClient TcpListener TCP/IP DAT net |
| WebSocket / Socket.IO | WebSocketはブラウザとサーバー間の常時接続プロトコル。Socket.IOはその上に乗るライブラリで、自動再接続・ルーム管理・ブロードキャストなど複数クライアントの状態同期に必要な機能を提供する | WebSocket Socket.IO ルーム管理 ブロードキャスト 状態同期 | |
| 各ツールとの連携概要 | Unity・TouchDesigner・Three.jsそれぞれがWebSocketまたはSocket.IOを使ってサーバーと通信する構成の概要を理解する。実装の詳細は各ツール章（§9/§10/§11）で学ぶ | ||
| 映像・音声通信 | WebRTC | ブラウザ同士が直接映像・音声・データをやり取りするP2P通信の仕組みを理解する。接続の確立には仲介サーバーが必要だが、通信自体は相手と直接行われるため低遅延になる。ビデオ通話や参加者間の映像共有に活用される | WebRTC P2P getUserMedia DataChannel |
| 制御・IoTプロトコル | OSCプロトコル | UDP経由でリアルタイムに制御データを送受信するOSCの仕組みと3ツール間連携を理解する | OSC |
| MQTTプロトコル | IoT・サイネージ・展示・体験型コンテンツで広く使われる軽量Pub/Sub通信プロトコルを理解する | MQTT Pub/Sub Broker | |
| 映像・照明・演出プロトコル | NDI / SRT | ネットワーク経由で映像を送るための代表的なプロトコルを理解する。ローカルネットワーク内の低遅延映像や、遠隔地への安定した映像配信で使われる | NDI SRT IP映像配信 |
| DMX / Art-Net / sACN | 照明機器や演出機器を制御するDMXと、それをネットワーク経由で扱うArt-Net・sACNの仕組みを理解する | DMX Art-Net sACN 照明制御 |
センサー・制御
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| 基礎理解 | センサーの種類と特性 | 距離・加速度・圧力・温度・光・深度など各センサーの仕組みと得意な用途を理解する | 距離センサー 加速度センサー 圧力センサー LiDAR 深度カメラ |
| 入力のノイズと安定化 | センサー入力のノイズを除去・平滑化し、安定したインタラクションを実現する | ローパスフィルター 移動平均 閾値処理 | |
| 深度カメラ・LiDAR | 機器の種類と特性 | RGBカメラに深度情報を加えた深度カメラと、レーザーで空間を計測するLiDARの違いと、それぞれの得意な用途を理解する | RealSense Orbbec LiDAR 深度カメラ ToF |
| 点群・深度データの扱い方 | 深度カメラが出力する深度マップや点群データの概念を理解し、インタラクションや空間認識への活用方法を把握する | 点群 深度マップ | |
| Unityへの取り込み | 深度カメラの入力をUnityに取り込み、空間認識・オブジェクト配置・インタラクションに活用する方法を理解する | RealSense SDK Orbbec SDK Unity | |
| TouchDesignerへの取り込み | 深度カメラの入力をTouchDesignerに取り込み、映像演出・空間インタラクションに活用する方法を理解する | OpenCV TOP Orbbec CHOP | |
| Arduino / マイコン | Arduinoの基礎 | センサーやアクチュエーターを制御するArduinoの基本構造と使い方を理解する | Arduino analogRead digitalWrite |
| シリアル通信（独自プロトコル / JSON） | ArduinoとPC上のアプリケーション間のデータ送受信を実装する | Serial JSON | |
| Arduino Wi-Fiモデル（MKR WiFi 1010 / Nano 33 IoT） | Wi-Fi内蔵のArduinoボードを使ったMQTTによるワイヤレスセンサー連携を実装する。Arduino IDEで統一した開発環境のまま無線化できる | Arduino MKR WiFi 1010 Arduino Nano 33 IoT WiFiNINA MQTT | |
| Raspberry Piの活用 | Linux環境でPythonを使い複雑な処理とセンサー連携を組み合わせる | Raspberry Pi GPIO Python | |
| Unityとの連携 | シリアル通信によるArduino連携 | C#のシリアル通信機能を使ってUnityとArduino間でデータを送受信する方法を理解する | System.IO.Ports シリアル通信 Unity |
| Wi-Fi経由のワイヤレス連携（MQTT / OSC / UDP） | Wi-Fi内蔵ArduinoからMQTT・OSC・UDPでセンサーデータを送信し、Unityで受信してオブジェクト・エフェクトに反映する | MQTT M2MQTT OSC UDP UDPClient | |
| センサーデータのマッピング | Arduino取得値をUnityのオブジェクト・エフェクトに反映する設計を行う | マッピング 正規化 カーブ補正 | |
| TouchDesignerとの連携 | Serial DATによる連携 | TouchDesignerでArduinoのシリアルデータを受信・処理する | Serial DAT CHOP |
| Wi-Fi経由のワイヤレス連携（MQTT / OSC / UDP） | Wi-Fi内蔵ArduinoからMQTT・OSC・UDPでセンサーデータを送信し、TouchDesignerのDAT/CHOPで受信・処理する | MQTT DAT OSC In DAT UDP CHOP | |
| センサー→映像マッピング | センサー値をTouchDesignerのビジュアル・音響パラメータに反映する | CHOP to TOP Math CHOP Select CHOP | |
| 身体インタラクション | カメラ・骨格推定の活用 | RGBカメラ・LiDAR・深度カメラ・MediaPipeなどの入力をUnity・TouchDesignerに取り込み、身体や空間の情報を活用する（詳細はAIロードマップ参照） | MediaPipe Pose Estimation LiDAR 深度カメラ |
| ジェスチャーマッピング設計 | 身体の動き・姿勢を作品の表現要素に結びつける設計を行う | マッピング 閾値設計 ランドマーク |
展示設計
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| 企画・コンセプト・空間設計 | コンセプト設計 | 作品のテーマ・意図・体験者への問いかけを言語化し、設計の軸にする | 企画書 |
| 空間レイアウト設計 | プロジェクター・スクリーン・スピーカー・センサーの配置と空間導線を設計する | フロアプラン | |
| 設置・準備 | 設置・撤収フロー | 搬入・設置・調整・撤収の手順を事前に整理する。会場側への技術要件（電源・ネットワーク・天井高など）を事前に伝える技術ライダーの作成も含む | 技術ライダー チェックリスト |
| 運用・安定稼働 | 長期稼働のための設計 | 展示期間中の連続稼働を想定し、クラッシュ対策・自動復旧の仕組みを実装する | 自動起動 ログ監視 |
| トラブルシューティング設計 | 会場での障害対応を想定した対応手順・マニュアルを整備する | チェックリスト フェイルセーフ 遠隔監視 | |
| ドキュメンテーション | 作品記録 | 展示の映像・写真・テキストによる記録を制作・公開する | |
| 技術仕様書 | 再展示・引き継ぎのための技術仕様・構成図をまとめる | 技術仕様書 構成図 |
機材・デバイス
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| 映像出力 | プロジェクター | 展示・プロジェクションマッピングで使われるプロジェクターの種類（短焦点・超短焦点・レーザー）と選定ポイントを理解する | レーザープロジェクター 短焦点 超短焦点 |
| ディスプレイ・モニター | 業務用ディスプレイと民生用の違い、タッチパネル・透過ディスプレイなど用途別の選定を理解する | 業務用ディスプレイ タッチパネル 透過ディスプレイ | |
| LEDビジョン | ピッチ・輝度・屋内外対応など、LEDビジョンの構成と選定ポイントを理解する | LEDビジョン ピッチ 輝度 | |
| 音響 | スピーカー | パッシブ・アクティブの違いと、展示空間に応じたスピーカー配置の考え方を理解する | パッシブスピーカー アクティブスピーカー |
| オーディオインターフェース | PCからの音声出力をスピーカーに送るためのオーディオインターフェースの役割と選定を理解する | オーディオインターフェース Focusrite | |
| DSP・ミキサー | 複数チャンネルの音声を処理・分配するDSPとミキサーの役割を理解する | DSP ミキサー Yamaha | |
| 照明 | 照明機器の種類 | スポット・ウォッシュ・ムービングライトなど展示で使われる照明機器の種類と特性を理解する | スポットライト ウォッシュライト ムービングライト |
| DMX制御 | DMXコントローラーやインターフェースを使って照明機器を制御する仕組みを理解する。プロトコルの詳細は§5で学ぶ | DMXコントローラー DMXインターフェース Enttec | |
| 再生・制御機材 | 再生PC・GPU選定 | インタラクティブ展示に必要なPC・GPU性能の目安と、安定稼働のための構成を理解する | GPU リアルタイムレンダリング |
| メディアプレイヤー | 動画ループ再生に特化した業務用メディアプレイヤーの役割と選定を理解する | メディアプレイヤー BrightSign | |
| AV統合制御 | 映像・音響・照明・電源など複数の機器をまとめて制御する展示システムの考え方を理解する。大規模展示では専用の統合制御システムが使われる | AV制御 システム制御 Crestron | |
| UPS（無停電電源装置） | 瞬断・停電時にPCや機器を保護し、展示を安全に終了させるUPSの役割と選定を理解する。容量（VA/W）の計算と、PCへの自動シャットダウン連携も押さえる | UPS APC OMRON 自動シャットダウン | |
| 投影・映像調整 | 投影調整・エッジブレンディング | 複数プロジェクターの境界をなめらかにつなぐエッジブレンディングと、不整形スクリーン・曲面への投影に対応するワーピングを理解する | エッジブレンディング ワーピング Resolume Arena MadMapper GeoBox |
| 映像分配・スイッチング | 複数の映像ソースや出力先を切り替え・分配する機器の役割を理解する | HDMIスプリッター マトリックススイッチャー Blackmagic Design IMAGENICS Extron | |
| LAN映像伝送・延長機器 | HDMIケーブルの代わりにLANケーブルを使って離れた場所のディスプレイやプロジェクターへ映像を伝送する機器を理解する。送信機・受信機のセットで使い、長距離配線や別室への映像伝送に使われる | HDMIエクステンダー HDBaseT IMAGENICS Extron Kramer ATEN |
Unity
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| 基礎 | エンジンの構造 | シーン・GameObject・コンポーネントによる設計モデルを理解する | Scene GameObject Component Hierarchy |
| C#スクリプティング | MonoBehaviourを継承したスクリプトの基本構造・ライフサイクル・変数公開を理解する | MonoBehaviour ライフサイクル | |
| 座標系・Transform | 3D空間の座標・回転・スケールの操作とLocal/World座標の違いを理解する | Transform Vector3 Quaternion | |
| カメラ・ライティング | メインカメラの設定と主要ライトの種類・設定方法を理解する | Camera ライティング URP | |
| ビルドと実機検証 | PC・Android・iOS・XRデバイスなど対象プラットフォームに合わせたビルド設定と、実機での動作確認の手順を理解する | Build Settings Player Settings プラットフォーム切り替え | |
| 物理・インタラクション | Physics（物理演算） | Rigidbodyによる物理シミュレーションとColliderによる当たり判定を実装する | Rigidbody Collider レイキャスト |
| 入力処理 | キーボード・マウス・タッチ・コントローラー入力の取得と処理を実装する | Input System | |
| コルーチン・非同期処理 | 時間差処理・フェード・シーケンス制御をコルーチンとasync/awaitで実装する。Unity標準のAwaitableを基本とし、UniTaskは既存資産や高度な非同期制御で活用する | Coroutine async/await Awaitable UniTask | |
| DOTween | C#のメソッドチェーンでオブジェクトの移動・回転・フェードなどをシンプルに記述できるトゥイーンライブラリ。Sequenceを使ったアニメーションの連結・並列実行も直感的に扱える | DOTween | |
| Rx・イベント設計 | R3（UniRx後継）を使ったリアクティブなイベント駆動設計を実装する | R3 Observable Subject | |
| アニメーション・演出 | Animatorの基礎 | アニメーションクリップ・ステートマシン・遷移条件の設定を理解する | Animator Animation Clip State Machine |
| Timelineによる演出 | カットシーン・インスタレーション演出をTimelineで設計・実装する | Timeline | |
| Cinemachine | 動的なカメラワークをコードなしで設計・実装する | Cinemachine Virtual Camera | |
| グラフィックス | Shader Graph | ノードベースのビジュアルシェーダー制作ツールでカスタムエフェクトを実装する | Shader Graph URP ノードエディタ |
| VFX Graph | GPU駆動のパーティクルシステムで大規模なビジュアルエフェクトを制作する | VFX Graph GPU Particles | |
| Post Processing | ブルーム・被写界深度・カラーグレーディングなどのポストエフェクトを適用する | Post Processing Bloom Color Grading | |
| Audio | Unity Audio System | AudioSource・AudioListenerによる3Dサウンドの配置と制御を理解する | AudioSource AudioListener 3D Sound |
| Audio Mixer | ミキサーとエフェクトチェーンを使った音響演出を設計する | Audio Mixer DSP | |
| 空間オーディオ | HRTFや空間音響を使い、VR/AR/MR向けの立体的な音響体験を設計する | Spatial Audio HRTF Ambisonics | |
| 応用表現 | ゲーム開発 | 物理・アニメーション・当たり判定・UIを使ったゲーム制作の基礎を実装する | Rigidbody Tilemap UI Toolkit |
| ジェネラティブ表現 | アルゴリズムとShader/VFXを組み合わせたプロシージャルビジュアルを制作する | Procedural ランダムシード ジェネラティブ | |
| AIとの連携 | MediaPipeやONNXモデルをUnityに取り込み、インタラクティブな体験を実現する | Sentis ONNX MediaPipe |
TouchDesigner
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| 基礎 | TouchDesignerとは | ノードベースのリアルタイム映像・インタラクション制作環境の概要と得意領域を理解する | TouchDesigner ノードベース リアルタイム |
| オペレーターの種類 | TOP・CHOP・SOP・MAT・DATの役割と接続の考え方を理解する | TOP CHOP SOP MAT DAT | |
| COMPの基礎 | UI・階層構造・ウィンドウ出力を構成するCOMPの役割を理解する | COMP Container COMP Panel COMP Window COMP | |
| 基本的なネットワーク構築 | ノードを接続して映像・データフローを設計する基本操作を習得する | ネットワーク ワイヤー接続 パラメータ | |
| Pythonによるスクリプティング | DAT・スクリプトを使って動的な制御・自動化を実装する | Python DAT Execute DAT | |
| 映像・ビジュアル演出 | TOPによる映像処理 | カメラ入力・動画・生成映像をTOPネットワークで処理・合成する | Movie File In TOP Composite TOP Feedback TOP |
| ジェネラティブビジュアル | GLSLやSOPを使って手続き的なビジュアルを生成する | GLSL TOP Noise TOP SOP | |
| エフェクト・ポストプロセス | レベル補正・ブラー・カラーグレーディングなどのビジュアルエフェクトを実装する | Level TOP Blur TOP Lookup TOP | |
| 応用・発展：POPs（Point Operators） | POPsの基礎 | GPU上で動作する点群・パーティクル・3Dジオメトリを扱う新オペレーターファミリーの概念を理解する。初学者はTOP/CHOP/SOPの基礎習得後に扱う | POPs Point Attributes GPU |
| パーティクルシステム | Particle POPとFeedback POPを使ったGPUパーティクルの生成・制御を実装する | Particle POP Feedback POP Force POP | |
| 点群の読み込みと活用 | 点群ファイルをPoint File In POPで読み込み、映像演出に活用する | Point File In POP 点群 ポイントクラウド | |
| 音響連携 | CHOPによる音響解析 | 音声入力をCHOPで解析し、FFT・ビート検出・振幅を映像に反映する | Audio Analysis CHOP Beat CHOP FFT |
| MIDIコントローラー連携 | MIDIデバイスの入力をTouchDesignerに取り込み映像・パラメータを制御する | MIDI MIDIコントローラー | |
| OSC送受信 | 外部アプリケーション（Unity・スマートフォン等）とOSCでデータを連携する | OSC TouchOSC | |
| センサー・入力連携 | Arduinoとの連携 | Arduinoのセンサーデータをシリアルまたは MQTT経由でTouchDesignerに取り込む | シリアル通信 MQTT |
| カメラ・骨格認識連携 | RealSense・Orbbec・MediaPipeなどの身体認識データを映像演出に活用する | OpenCV TOP MediaPipe Orbbec | |
| タッチ入力 | タッチ入力をリアルタイムで映像・音響に反映する | Panel COMP Touch | |
| プロジェクションマッピング | 基礎概念とキャリブレーション | 物体・建物の形状に合わせた映像投影の概念とキャリブレーション手法を理解する | プロジェクションマッピング キャリブレーション カメラマッピング |
| Stoner / CamSchnappr による実装 | TouchDesigner内でのプロジェクションマッピング実装ツールを活用する | Stoner CamSchnappr ホモグラフィ | |
| 複数プロジェクター構成 | 複数台のプロジェクターを使ったエッジブレンディング・分割出力を設計する | エッジブレンディング NDI 分割出力 | |
| 出力・配信 | 複数ディスプレイ出力 | 複数のスクリーン・プロジェクターへの映像出力を設計する | Window COMP NDI Out TOP |
| Cookとパフォーマンス管理 | Cookの仕組み、FPS、GPUメモリ使用量を確認し、重いネットワークを安定して動かす | Cook FPS GPUメモリ Performance Monitor | |
| 長期稼働設定 | 展示向けの自動起動・ウォッチドッグ・パフォーマンス監視を設定する | パフォーマンスモニター 自動起動 Perform Mode |
Three.js
| 中項目 | 小項目 | 説明 | キーワード / ツール |
|---|---|---|---|
| 基礎 | Three.jsとは | WebGLを抽象化した3DライブラリとUnityの使い分けを理解する | Three.js WebGL ブラウザ3D |
| シーン・カメラ・レンダラー | 3Dシーンの基本構造とレンダリングループの仕組みを理解する | Scene PerspectiveCamera WebGLRenderer | |
| ジオメトリ・マテリアル | 形状とマテリアルの組み合わせで3Dオブジェクトを制作する | BufferGeometry MeshStandardMaterial PBR | |
| ライティング・シャドウ | 光源の種類・影の設定を理解しリアルな質感を表現する | DirectionalLight AmbientLight ShadowMap | |
| アニメーション・インタラクション | オブジェクトのアニメーションとマウス・タッチインタラクションを実装する | AnimationMixer Raycaster OrbitControls | |
| GSAPとの連携 | GSAPを使ってThree.jsのオブジェクトプロパティ（position・rotation・material等）をトゥイーンアニメーションさせる。ScrollTriggerと組み合わせたスクロール連動3D演出も実装できる | GSAP ScrollTrigger | |
| シェーダー（GLSL） | GLSLの基礎 | GPUで実行されるシェーダープログラミングの基礎概念を理解する | GLSL フラグメントシェーダー バーテックスシェーダー |
| Three.jsへのシェーダー組み込み | カスタムShaderMaterialとuniform変数でオリジナルエフェクトを実装する（WebGLRenderer向け） | ShaderMaterial uniform GLSL | |
| Shadertoy / The Book of Shaders | シェーダーの学習リソースと制作プラットフォームを活用する | Shadertoy raymarching | |
| WebGPU・TSL | WebGPURendererの基礎 | 現行安定のWebGLRendererと、移行期にあるWebGPURendererの違い・使い分けを理解する | WebGPURenderer WebGLRenderer |
| TSL（Three.js Shading Language） | JavaScriptでシェーダーを記述するTSLの基礎を理解する | TSL NodeMaterial | |
| 応用表現 | ポストプロセッシング | レンダリング後にフィルター・エフェクトを加える。WebGLではEffectComposer、WebGPUでは新しいPostProcessingスタックを使う | EffectComposer PostProcessing Bloom SSAO |
| パーティクル・ポイントクラウド | 大量の点群や粒子を3D空間で表現する | Points BufferAttribute GPU Instancing | |
| モデル読み込み・アニメーション | glTF形式の3DモデルをThree.jsで読み込み・再生する | GLTFLoader glTF Draco | |
| Three.js特有の最適化 | 大量オブジェクトや高解像度アセットを扱うための描画負荷・メモリ削減手法を理解する | InstancedMesh LOD KTX2 Frustum Culling | |
| WebXR連携 | WebXRの基礎 | ブラウザ上でAR/VR体験を構築するWebXR Device APIとThree.jsの連携を理解する。概念・体験設計は§4を参照 | WebXR |
| WebAR / ブラウザAR | モバイルブラウザ上で平面検出やマーカー認識を使ったAR体験を実装する。対応ブラウザ・OSに制約があり、主にAndroid Chromeで動作する | WebAR 平面検出AR マーカーAR |