CG関連

【GLSL(シェーダー)】プログラムでかっこいい映像をつくりたい! 〜『TouchDesigner』を見据えて

最近いろんなところで目にする『プロジェクションマッピング』や『インタラクティブアート』。

 
インタラクティブアート・・人の手や声を検知して動く映像など
 

例えばこんなのとか。

こんなのとか。

アオキ
めっちゃかっこいい・・やってみたい・・

と思うようになり、いろいろググるうちに、

『TouchDesigner(タッチデザイナー)』なるソフトを使えばできそうだということがわかりました。

Sponsored link

プログラミングでかっこいい映像をつくる 『TouchDesigner』

『TouchDesigner(タッチデザイナー)』は、

『オペレーター』と呼ばれるブロックをつなぎ合わせて『グラフィック』をつくったり、

  • センサー
  • MIDI機材(音響機器)
  • ドローン
  • Arduino(アルデュイーノ・ちっちゃいIoTアイテム)

など、

いろんな外部機器をつなげられる全世界的に人気なソフトだそう。

善は急げとさっそく実践。

早速本を読みつつ、さくっと3D画像がつくれました。

TouchDesignerで 3Dだせるようになったけど、ここからどうやって動かせばいいんだろうか、カメラ動かすか geometory動かせばいいとは思うけども。  midiキーボードともつないでインタラクションやりたい。  #kuma_td

読んだ本。

アオキ
『プログラミング』をまったく書かずにこんな画像がだせるってすごい・・

タイミングよく熊本でも、

『KumaMCN』 主催の『熊本TouchDesignerもくもく会』なる勉強会が開催されることを知り、

早速参加してみました。

まさかのメドローア、めっさおもろいやんけー

メドローア・・ダイの大冒険の魔法使いポップの必殺技。

created by Rinker
¥680 (2019/11/19 23:22:58時点 Amazon調べ-詳細)

『TouchDesigner』で、『Kinect(キネクト)』というセンサーをつかって、

手を開いたら火がでる、というエフェクトをつけているそうです。

勉強会の中で、たくさんの先輩方のお話を聞くうちに、

『GLSL(ジーエルエスエル)』を使うとさらにヌルヌル動かせるという事を知りました。

『GLSL』に慣れるとこんな動画がわずか20分(?!)でつくれるようです。

アオキ
20分てマジっすか・・

というわけで、さっそく『GLSL』をやってみることにしました。

プログラミングでかっこいいグラフィックをつくる『GLSL』の練習

まずは専門用語のざっくり整理。

  • OpenGL・・3Dグラフィックの仕様
  • WebGL・・OpenGLをWebブラウザで使える仕組み
  • GLSL・・OpenGL Shading Languageの略。(C++に似てる)
  • Shading・・シェーディング。3Dを2Dで表現できるようにする(影・ライト・カメラなど)

いろいろググってまずはこの記事(全10回)をやってみました。

[連載]やってみれば超簡単! WebGL と GLSL で始める、はじめてのシェーダコーディング

全10回の内容はざっくりこんな内容でした。

  1. GLSL概要
  2. GLSL説明
  3. 三角関数(サイン・コサイン)
  4. 正規化
  5. ベクトル
  6. for文
  7. ラジアン
  8. 行列(回転行列)
  9. 関数・定数・マクロ
  10. 総集編

『GLSL』自体は『C++』に近い言語のようで、

『JavaScript』なり『PHP』なり『Python』なり、
何かしら触ったことがあれば、そこまで難しいとは感じないのですが、

それよりも必要だなと感じたのが『数学』の知識です。

『5G』『AI』『ビッグデータ』『VR/AR/MR』などの新しい技術が増えるに連れ、

これまで以上に『数学』『物理』は必要になってきます。

このブログでも徐々に『数学』の記事を増やしていたので、

ほぼつまることなく読み進めることができました。

参考記事

三角関数

ラジアン

ベクトル

線形代数(行列+ベクトル)

関数

アオキ
高校生の頃は、まさかこんなに数学を使うことになるとは思いもよらなかったですね・・
Sponsored link

プログラミングでかっこいい映像をつくる まとめ

パソコンの高性能化に伴い、

『プログラミング』を使わなくても、

簡単にかっこいいグラフィックがつくれるようになってきました。

一方で、
簡単に作れるという事は、
他の人も簡単につくれるという事かなと思います。

一歩違う表現なりオリジナリティを出そうとするなら、

多少なりとも難しかったり珍しい知識が必要になるかなと思います。

『プログラミング』+『数学の知識』を高めていくことで、

よりオリジナリティ溢れるかっこいい映像がつくれたらいいなと思います。

アオキ
『数学』は、テストのためだけの勉強じゃなくて、
アオキ
現実世界で役に立つんだよっていう事を、もっと伝えていきたいですね。

『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】波のつくり方簡易まとめ。波もプログラムでつくれます【コピペスタイル】

 

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. CG関連

    【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】
  2. CG関連

    【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっ…
  3. バックエンド

    【検索システム】をつくってみた【実際にログインしてさわれます】
  4. CG関連

    【WebGL】入門 わかりやすく【図解】してみた
  5. バックエンド

    【Python】手軽に試す方法2つとwebフレームワークについて【初心者向け】
PAGE TOP