CG関連

【GLSL(シェーダー)】プログラムでかっこいい映像をつくる『レイマーチング』

プログラミングでかっこいい映像をつくるには、『GLSL(ジーエルエスエル)』なるものを使えればいいと知りまして。

参考記事

こんな映像も『GLSL』でつくれるようです。

アオキ
いったいどんな裏技を使ってるんだろうか・・・

とググっているうちに、

なにやら『レイマーチング(Ray Marching)』なる技がある事を知りましたので、

ざっくりまとめてみたいと思います。

Sponsored link

プログラミングでかっこいい映像なら『レイマーチング』がいいらしい

言葉の意味を調べてみると、

  • レイ (Ray) は英語で光線
  • マーチング (Marching) は英語で行進

になります。

アオキ
光線がどんどん前へ前へ進んでいくようなイメージでしょうか。

『レイマーチング(Ray Marching)』をざっくりまとめると、

3D空間の中で、
ちょっとずつレイ(光線)を進めて、
『距離関数』で物体との距離を計算する

というような手法だそうです。

動画もありました。

画面全体を1スクリーンとして描画するため、

例えばパソコンで表示している画面が 横1024×縦768 だとしたら、
横1024×縦768 = 約78万回 も計算するそうです。

昔はとても実現できなかったそうですが、

最近はパソコンやGPU(グラフィック専門の演算装置)の性能が上がっていることで実現できるようになったようです。

しっかり動かすためにはそこそこハイスペックなパソコンが必要だそうです。

とはいえ、ここまでの説明だと

アオキ
なんのこっちゃ、、

っとなってしまうので、

参考スライドを貼っておきます。

シェーダだけで世界を創る!three.jsによるレイマーチング from Sho Hosoda

画像を一部抜粋。

『距離関数』のわかりやすい説明はこちら。

GLSL でのレイマーチングについて雑に語ってみます

『距離関数』コードのサンプルはこちら。

『距離関数』コードのサンプル。

アオキ
うんうん、なんかすごいのはわかったよ、うんうん。←わかってない。
Sponsored link

プログラミングでかっこいい映像をつくるための『レイマーチング』を触ってみる

『レイマーチング(Ray Marching)』の解説を読むだけだとなかなか頭に入ってこないので、

『レイマーチング qiita』などで検索してみて、
良さげな記事をやってみることにしました。

[GLSL] レイマーチング入門 vol.1

コードはこちら。

  • 『距離関数』を微分すると法線ベクトルになる
  • 『内積』で光の当たり方を計算

の2箇所がスッキリしてないんですが、とりあえず前に進みながら調べて見ようと思います。

他のコードの詳細は、
オリジナル記事がとてもわかりやすいので、興味があればぜひ見てみてください。

このコードの中でも当たり前のように『ベクトル』が使われています。

参考記事

アオキ
『プログラミング』でかっこいい映像をつくろうとなると、
アオキ
『ベクトル』の知識は必須になってくるので、しっかり覚えていきたいところですね。
Sponsored link

プログラミングでかっこいい映像といえば『レイマーチング』まとめ

まさか『プログラミング』でこんなにも、

かっこいい映像表現ができるようになるとは思ってなかったので、

ワクワクしながらググり、試していくことができました。

なかなか難しい内容なので、ちょっとずつコードを読み解きつつ、

『レイマーチング(Ray Marching)』の理解を深めていけたらと思います。

アオキ
かっこいい映像もりもりつくるどー。

 

 

『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. IoT関連

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラムの覚え方
  2. 学び・教育

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

    コードの転回形の練習方法をまとめてみた【大人のピアノ】
  4. バックエンド

    【検索システム】をつくってみた【実際にログインしてさわれます】
  5. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
PAGE TOP