GLSL/WebGL

【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

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

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

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

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

参考記事

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

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

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

アオキ
うーん、なんで?

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

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

ノイズ関数は、
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,592 (2019/07/17 00:15:13時点 Amazon調べ-詳細)

『GLSL(シェーディング)』関係ではこんな記事も読まれています。

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

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

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

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

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

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

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

 

コメント

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

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

CAPTCHA


関連記事

  1. GLSL/WebGL

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

    最近いろんなところで目にする『プロジェクションマッピング』や『インタラ…

  2. GLSL/WebGL

    【TouchDesigner】で『GLSL』を使う方法を動画で学んでみる その1と2

    前回の記事で『TouchDesigner』と『GLSL』を連携させる方…

  3. GLSL/WebGL

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

    プログラミングでかっこいい映像がつくれるということで始めた『レイマーチ…

  4. GLSL/WebGL

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

    プログラミングでかっこいい映像をつくる方法の一つに、『レイマーチン…

  5. GLSL/WebGL

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

    かっこいい『3Dプログラミング』をつくりたいとググって見つけた『レイ…

  6. GLSL/WebGL

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

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

Sponsored link

最近の記事

  1. 数学

    【微分】わかりやすくプログラミング目線で整理してみる【初心者向け】
  2. Laravel

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  3. リベラルアーツ

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  4. HTML/CSS

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
  5. プログラミング

    『プログラミング教育』より大事な事を考えてみる~AI時代を見据えて~
PAGE TOP