GLSL/WebGL

【GLSL】プログラミングでかっこいい映像をつくりたい! 〜『TouchDesigner』を見据えて

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

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

例えばこんなのとか。

こんなのとか。

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

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

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

Sponsored link

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

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

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

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

など、

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

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

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

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

読んだ本。

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

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

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

早速参加してみました。

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

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

『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. 【GLSL】プログラミングでかっこいい映像をつくるには『レイマーチング』なるものを覚えればいいらしい

3. 【GLSL】『レイマーチング』入門その1 距離関数とレイとカメラの設定

4. 【GLSL】『レイマーチング』入門(2) 立体的に見せる方法〜光の反射は『内積』で〜

5. 【GLSL】『レイマーチング』入門(3) 距離関数を使ってみる・回転・合成・量産

6. 【TouchDesinger】で『GLSL』を使う方法まとめ【画像あり】

6. 【GLSL】波のつくり方簡易まとめ。波もプログラミングでつくれます【コピペスタイル】

 

コメント

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

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

CAPTCHA


関連記事

  1. TouchDesigner

    【TouchDesigner】で『GLSL』を使う方法を動画で学んでみる その4 描画(step関数…

    引き続き【TouchDesinger】で『GLSL』を使う動画を見つつ…

  2. HTML/CSS

    【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムに使いたい(3)【P5.j…

    遊ぶようにプログラミングができる『クリエイティブコーディング』はもちろ…

  3. クリエイティブコーディング

    プログラミングで数学も身につく 一石四鳥なクリエイティブコーディング

    2020年から小学校でもプログラミング教育が義務化になり、子ども向…

  4. GLSL/WebGL

    【TouchDesinger】で『GLSL』を使う方法まとめ【画像あり】

    手や身体の動きに合わせて映像が変わっていく『インタラクティブ』な映像を…

  5. P5.js (Processing)

    配列をわかりやすく『ゴディバ』で例えてみる〜ボールを100個に増やしたり(6)【P5.js】

    今回のお題は『配列』。『プログラミング』を始めたばかりの頃を思い出…

Sponsored link

最近の記事

  1. P5.js (Processing)

    【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめの…
  2. Laravel

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  3. HTML/CSS

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
  4. Laravel

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
  5. クリエイティブコーディング

    三角関数の使い方〜わかりやすさ重視でまとめてみた【動画あり】
PAGE TOP