最近いろんなところで目にする『プロジェクションマッピング』や『インタラクティブアート』。
インタラクティブアート・・人の手や声を検知して動く映像など
例えばこんなのとか。
こんなのとか。
と思うようになり、いろいろググるうちに、
『TouchDesigner(タッチデザイナー)』なるソフトを使えばできそうだということがわかりました。
プログラミングでかっこいい映像をつくる 『TouchDesigner』
『TouchDesigner(タッチデザイナー)』は、
『オペレーター』と呼ばれるブロックをつなぎ合わせて『グラフィック』をつくったり、
- センサー
- MIDI機材(音響機器)
- ドローン
- Arduino(アルデュイーノ・ちっちゃいIoTアイテム)
など、
いろんな外部機器をつなげられる全世界的に人気なソフトだそう。
善は急げとさっそく実践。
早速本を読みつつ、さくっと3D画像がつくれました。
TouchDesignerで 3Dだせるようになったけど、ここからどうやって動かせばいいんだろうか、カメラ動かすか geometory動かせばいいとは思うけども。 midiキーボードともつないでインタラクションやりたい。 #kuma_td pic.twitter.com/iWO7GJKmO7
— 世界のアオキ??プログラミングをもっと身近に (@aoki_monpro) 2019年6月18日
TouchDesignerで 3Dだせるようになったけど、ここからどうやって動かせばいいんだろうか、カメラ動かすか geometory動かせばいいとは思うけども。 midiキーボードともつないでインタラクションやりたい。 #kuma_td
読んだ本。
タイミングよく熊本でも、
『KumaMCN』 主催の『熊本TouchDesignerもくもく会』なる勉強会が開催されることを知り、
早速参加してみました。
まさかのメドローア、めっさおもろいやんけー#touchdesigner #kuma_td pic.twitter.com/X741zMw1xD
— 世界のアオキ??プログラミングをもっと身近に (@aoki_monpro) 2019年6月19日
まさかのメドローア、めっさおもろいやんけー
メドローア・・ダイの大冒険の魔法使いポップの必殺技。
『TouchDesigner』で、『Kinect(キネクト)』というセンサーをつかって、
手を開いたら火がでる、というエフェクトをつけているそうです。
勉強会の中で、たくさんの先輩方のお話を聞くうちに、
『GLSL(ジーエルエスエル)』を使うとさらにヌルヌル動かせるという事を知りました。
『GLSL』に慣れるとこんな動画がわずか20分(?!)でつくれるようです。
昨日の勉強会の懇親会中に20分間のライブコーディングでシェーダーを作りました！
初めて人前でコーディングをしたんですが、めちゃくちゃ楽しかったです！！（当日動かなかったpmod修正済です…）
差分
– q.x = abs(p.x ) – 10.;
+ q.x = abs(q.x ) – 10.;https://t.co/LH3TT4YzSU#klab_meetup pic.twitter.com/k61c3O2ZA1— かねた (@kanetaaaaa) 2019年6月19日
というわけで、さっそく『GLSL』をやってみることにしました。
プログラミングでかっこいいグラフィックをつくる『GLSL』の練習
まずは専門用語のざっくり整理。
- OpenGL・・3Dグラフィックの仕様
- WebGL・・OpenGLをWebブラウザで使える仕組み
- GLSL・・OpenGL Shading Languageの略。(C++に似てる)
- Shading・・シェーディング。3Dを2Dで表現できるようにする(影・ライト・カメラなど)
いろいろググってまずはこの記事(全10回)をやってみました。
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング
全10回の内容はざっくりこんな内容でした。
- GLSL概要
- GLSL説明
- 三角関数(サイン・コサイン)
- 正規化
- ベクトル
- for文
- ラジアン
- 行列(回転行列)
- 関数・定数・マクロ
- 総集編
『GLSL』自体は『C++』に近い言語のようで、
『JavaScript』なり『PHP』なり『Python』なり、
何かしら触ったことがあれば、そこまで難しいとは感じないのですが、
それよりも必要だなと感じたのが『数学』の知識です。
『5G』『AI』『ビッグデータ』『VR/AR/MR』などの新しい技術が増えるに連れ、
これまで以上に『数学』『物理』は必要になってきます。
このブログでも徐々に『数学』の記事を増やしていたので、
ほぼつまることなく読み進めることができました。
参考記事
三角関数
ラジアン
ベクトル
線形代数(行列+ベクトル)
関数
プログラミングでかっこいい映像をつくる まとめ
パソコンの高性能化に伴い、
『プログラミング』を使わなくても、
簡単にかっこいいグラフィックがつくれるようになってきました。
一方で、
簡単に作れるという事は、
他の人も簡単につくれるという事かなと思います。
一歩違う表現なりオリジナリティを出そうとするなら、
多少なりとも難しかったり珍しい知識が必要になるかなと思います。
『プログラミング』+『数学の知識』を高めていくことで、
よりオリジナリティ溢れるかっこいい映像がつくれたらいいなと思います。
『GLSL(シェーディング)』関係ではこんな記事も読まれています。
1. 【GLSL】プログラムでかっこいい映像をつくりたい! 〜『TouchDesigner』を見据えて2. 【WebGL】入門 わかりやすく【図解】してみた
3. 【OpenGL】と【DirectX】のバージョンをまとめてみた【シェーダーメイン】【初心者向け】
4. 【GLSL(シェーディング)】でよく使う関数とユーザー関数のまとめ※随時更新
5. 【GLSL】プログラムでかっこいい映像をつくるには『レイマーチング』なるものを覚えればいいらしい
6. 【GLSL】『レイマーチング』入門その1 距離関数とレイとカメラの設定
7. 【GLSL】『レイマーチング』入門(2) 立体的に見せる方法〜光の反射は『内積』で〜
8. 【GLSL】『レイマーチング』入門(3) 距離関数を使ってみる・回転・合成・量産
9. 【TouchDesigner】で『GLSL』を使う方法まとめ【画像あり】
10. 【TouchDesigner】『GLSL MAT』の使い方 3次元でぐりぐり動かしてみる
11. 【GLSL】波のつくり方簡易まとめ。波もプログラムでつくれます【コピペスタイル】
アオキのツイッターアカウント。
この記事へのコメントはありません。