CG関連

【GLSL(シェーダー)】波のつくり方簡易まとめ。波もプログラムでつくれます【コピペスタイル】

プログラミングでかっこいい映像をつくりたいと始めた『GLSL』。

関連記事

いろんなサイトを見ているうちに、
同じようなコードをよく見かけるようになりました。

それは『波』

英語だと『Wave』。
『波』は文字通り水を表すこともあれば、

  • 電波
  • 音波
  • 振動
  • 波動
  • 波紋
  • 地震波
  • 波形
  • 津波

などなど、いろんな自然現象にも『波』という漢字が使われています。

現実世界でも『波』の理論を使うことで、

  • 携帯電話(スマホ)
  • パソコン
  • デジカメ
  • ラジオ
  • 地震
  • 音響ホールの設計
  • 声紋分析
  • 音声圧縮
  • 画像圧縮
  • CTスキャン

などなど、いろんな技術に使われています。

穏やかな『波』と激しい『波』。
規則的な『波』とガヤガヤした不規則な『波』。
1つの『波』があればいくつかの『波』が混ざることもあり。

アオキ
どうやら『波』を使いこなせればかなり表現の幅が広がるらしい・・

と思い、いろいろググっていると、

どうやら学術的には『フーリエ解析』なるものを使いこなせればいいようなのですが、

試しに読んでみたところ、

アオキ
これはさすがにさくっと理解はできないで・・マジメな理系大学生さんのシロモノやで・・

となってしまったので、

『コピペ』ありきで『波』を表現しつつ、後から理論を調べることにしてみました。

アオキ
動いてなんぼですからね、まずは動かすことに専念しとこ。(開き直り)
Sponsored link

『波』のつくり方 プログラミングで温泉をつくったらしい

早稲田の学生さん?がプログラミングで『温泉』をつくったそうで、
こちらの記事を参考にしています。

湯を沸かすほどの熱いGLSL

完成画像はこちら。

アオキ
も、もはや温泉にしか見えない・・・っ!

リンク先の記事でわかりやすく?つくり方が載っていたので、
記事の補足という形でメモしていきます。

さっそく完成版のコード。

theBookOfShaders.comなどにコピペすれば動きます。

コメント内にいくつか外部リンクがあったので、

それらのページも読みつつまとめて見ることにしました。

『波』をつくるために知っておきたい知識 『三角関数』

まず大前提として、

『波』をつくるためには『三角関数』が必要になります。

『三角関数』は『円』で考えるとわかりやすいです。

参考記事

『円』の半径が1とすると、サイン(sinθ)の場合、

  • 0度・・0
  • 90度・・1
  • 180度・・0
  • 270度・・-1
  • 360度・・0

という規則で変化して、『波』のような動きをします。

『サインウェーブ』と言ったりします。

コサイン(cosθ)の場合は下記になります。

  • 0度・・1
  • 90度・・0
  • 180度・・-1
  • 270度・・0
  • 360度・・1

これらの値を変えたり合成したりなんやかんやして、

きれいな『波』から不規則な『波』に変えていくことができます。

なめらかに動かすとこんな感じになります。

ちなみに角度は『ラジアン』で渡す必要があります。

参考記事

『波』をつくるために知っておきたい知識 『波』は合成できる

『フーリエ解析』に絡んでくるのですが、

複雑な『波』は、実はいくつかのシンプルな『波』を足し合わせてできているそうです。

アオキ
うーん、なんで?

と思ってしまうんですが、調べだすときりがないのでいったんは飲み込むことに。

2019/7/22追記
『高校生からわかるフーリエ解析』という本の中のグラフを見て、あぁそうかと納得しました。

グレーの線が3本ともプラスなら、青の線もグイーンとプラスに伸びて、
グレーの線がプラスマイナス混ざっていたら、青の線は微妙な幅になっています。

アオキ
波を足し合わせると面白い動き方が表現できるんですね。

先ほどのコードの中でも、いくつかの『波』を足し合わせているのがわかります。

ノイズ関数は、
a波、b波、c波、d波をつくって最終的に全部足してます。

下の段のコードも、
s波、t波、u波をつくって、

v波 = s波 + t波 + u波 と3つの『波』を足し合わせた『v波』をつくっています。

Sponsored link

『波』をつくるために知っておきたい知識 ランダム・ノイズ・FBM

オリジナルの『波』表現をするためには、
下記3つを使いこなすといいようです。

  • ランダム
  • ノイズ(パーリンノイズ)
  • FBM(Fractal Browniam Motion)非整数ブラウン運動

外部リンクはこちら。
ランダム
ノイズ
セルラーノイズ
非整数ブラウン運動

実際に値を変えて『波』が変わっていくのを体感できるサイトになっています。

アオキ
このサイトめっちゃ勉強になります・・

詳細は外部リンク先に譲りつつ、

サンプルコードでは、ランダム関数、ノイズ関数、FBM関数は外部リンクの内容そのまま使われています。

アオキ
ランダム、ノイズ、FBMの3点セットは他のコードでもしょっちゅう目にするので、とりあえずコピペ+調整で扱い慣れていこうと思います。

サンプルコードでは、他の技術として、

  • レイマーチング・・レイ(光)をあてて物体にあたったら画面に描写する手法
  • 法線ベクトル・・光の反射。偏微分で計算。
  • 距離関数・・物体との距離を計算する。物体の形によってさまざま。

なども使われています。

参考記事

特に『距離関数』はひねりが必要で、ぱっと把握は難しいので、時間を作ってゆっくり理解しなきゃなと思っています。

『波』をつくる方法 まとめ

学生時代ろくに勉強してなかった身としては、

『フーリエ解析』をしっかり理解するにはまだまだ時間がかかりそうですが、

幸いしっかり動いているプログラミングコードがあるので、

外部リンクの記事も参考にしつつ、

  • 三角関数
  • ランダム
  • ノイズ(パーリンノイズ)
  • FBM(非整数ブラウン運動)

あたりの知識をちょっとずつ脳みそになじませて、

数ヶ月後にはしっかり使いこなせるようになりたいなと思っております。

アオキ
ずっと数式解くだけだと挫折してたかも。やっぱり動かしつつ把握していくスタイルの方が楽しいし向いていると思いますわ。
created by Rinker
ベレ出版
¥2,200 (2019/11/18 12:37:13時点 Amazon調べ-詳細)

『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. 学び・教育

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  2. 数学

    【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】
  3. IoT関連

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラムの覚え方
  4. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  5. CG関連

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