GLSL/WebGL

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

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

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

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

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

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

コメント

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

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

CAPTCHA


関連記事

  1. GLSL/WebGL

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

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

  2. HTML/CSS

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

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

  3. P5.js (Processing)

    『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

    遊ぶようにプログラミングができて、デザインやアートをつくれる『クリエ…

  4. GLSL/WebGL

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

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

  5. GLSL/WebGL

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

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

  6. GLSL/WebGL

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

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

Sponsored link

最近の記事

  1. 検索システム

    【検索システム】をつくってみた【実際にログインしてさわれます】
  2. P5.js (Processing)

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

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

    【微分】わかりやすくプログラミング目線で整理してみる【初心者向け】
  5. クリエイティブコーディング

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