GLSL/WebGL

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

プログラミングでかっこいい映像をつくる方法の一つに、

『レイマーチング(Ray Marching』なる技術があることを知りました。

前回の記事

前回の記事で円を表示することができたので、

次は光をあてて、明るい箇所と暗い箇所をつくり、

より立体的に見えるようにしています。

Sponsored link

『レイマーチング』入門〜立体的に見せる方法

参考にさせていただいている動画はこちら。

今回の完成画像はこちら。

『レイ(光源)』が当たっている球の中心が白く表示されて、

外側に行くほど暗くなっているのがわかるかと思います。

この画像をつくるためには、

『光源ベクトル(レイ)』と、
『光源ベクトル(レイ)』の接線に垂直な『法線ベクトル』との『内積(ないせき)』を求める必要があります。

アオキ
ど、どういうことだってばよ・・・

と思ったのでググりにググってイメージをつくってみました。

『レイマーチング』入門〜立体的に見せるための『法線ベクトル』

イメージの左側に『光源』があって、
球に向かってまっすぐ『レイ(光源ベクトル)』が飛んでいきます。

『レイ(光源ベクトル)』が球に接する箇所が『接線(グレーの線)』で、

『接線』と垂直に交わる線を『法線(ほうせん)』といいます。

『法線』は英語で 『normal line』だそうです。

アオキ
normal→ものさし→ルール→法 で変わったんじゃないか説があるそうで。

球の中心に近いほど、
『レイ(光源ベクトル)』と『法線ベクトル』の角度が小さくなって、

球の上側(下側)に行くほど、
『レイ(光源ベクトル)』と『法線ベクトル』の間の角度が大きくなっていきます。

角度がどれくらい大きくなるかというと、

『レイ(光源ベクトル)』と『法線ベクトル』の角度が90度(または-90度)になったら、
『レイ(光源ベクトル)』は球に接していない、ということになります。

(イメージの下の段中央の図)

アオキ
そう言われるとなんとなくわかるかなぁ。
Sponsored link

『レイマーチング』入門〜『法線ベクトル』は『偏微分』で求まるそう

『法線ベクトル』を求めるコードがこちら。

アオキ
な、なんじゃこりゃ。。

こちらもいろいろググってみるとどうやら、

『法線ベクトル』は『偏微分(へんびぶん)』で求まるそうで。

参考記事
偏微分(勾配)が法線を表すイメージ

法線ベクトルの求め方と応用

アオキ
むむむ。『偏微分(へんびぶん)』ってどんなんだったっけ・・

と調べてみると、

いくつか変数があった時に、
求めたい変数だけを微分して、他は定数で計算することだそう。

XならXだけ微分して、YとZは定数(今回は0)としてそれぞれ計算するようです。

そう言われると確かにこのコード。

vec3の中が、deltaと0.0、0.0 になっていて、
deltaが1つずつ右にずれて書かれています。

X、Y、Zそれぞれで、2点間の距離を出しているようです。

微分の参考記事

アオキ
1つずつ微分するのね。そう言ってくれればいいのに。なんというか、『偏微分』って名前がややこしいですな・・

名前がしっくりこなくて英語版を調べてみると、

『偏微分』は英語で『Partial differential(パーシャルディファレンシャル)』で、

『Partial(パーシャル)』は一部分という意味なので、

部分的に微分するって理解でよさそう。

アオキ
英語の方がしっくりくることってあるんよなぁ・・
アオキ
あれ?そういえば微分って、2点間を割るんじゃなかったっけ・・?

と思い改めて動画を見てみると、

Vtuber先生
本当はdeltaで割るんですが、normalizeして『勾配(こうばい)』をとったことにします。

というような説明で。

うーん、わかるようでわからん。

ググってみるに関連する情報はありそうですが、
なかなか難しいようなので、とりあえず次に進むことに。

参考記事

偏微分(勾配)が法線を表すイメージ

改めて、『法線ベクトル』を求めるコードがこちら。

球の『法線ベクトル』なので『sphere_normal』という関数名にしています。

それぞれの意味は以下になります。

  • vec3はベクトル3(x,y,z 3つの値をもつ)
  • sphere(スフィア)は英語で球
  • normal(ノーマル)が法線ベクトルの意味

  • float(フロート)は小数点型

  • delta(デルタ)はほんのちょっとの値
  • return(リターン)は関数の戻り値
  • normalize(ノーマライズは正規化(ベクトルを1に最適化)
  • sphere_dは球の距離関数 (前回の記事を参照)

これで、法線ベクトルが求まることになります。

『レイマーチング』入門〜『法線ベクトル』との『内積』を求める

『法線ベクトル』がなんとなく計算できたので、

次は『光源ベクトル』と『法線ベクトル』の『内積(ないせき)』を求めます。

『内積』のイメージ図はこちら。

球に触れる接点から、
『法線ベクトル(緑)』からまっすぐ下に下ろした箇所までの長さを
『内積(ないせき)』というそうです。

『内積(ないせき)』の式はこちら。

内積 = $ |a||b|cosθ $

参考記事
【内積とは】ベクトルの内積の意味や公式・計算方法を知って大学合格へ!

改めてこちらの図をば。

cosθ(コサイン)が入っているので、
『光源ベクトル』と『法線ベクトル』の角度が90度だと、内積は0になります。
『光源ベクトル』と『法線ベクトル』の角度が-90度でも、内積は0になります。

cosθ(コサイン)の参考記事

なので、

-90度 < θ < 90度 の範囲であれば内積が0より大きくなって、
光が当たっているということになります。

コードはこちら。

光源の方向と、法線ベクトルを定義して、float l に『内積』を設定しています。

『内積』は英語で『dot product』なのでdot関数だそうです。

『レイ』がZ軸のマイナス方向からあたっているので、マイナスをつけていると思われます。

ちなみに、マウスがある場所を光源にするには、こちらのコードに変更すればOKです。

全体のコードはこちら。

このコードをGLSLオンラインエディタにコピペすればOKです。

GLSL Sandbox

こんな画像が表示されればOKです。

Sponsored link

『レイマーチング』入門その2 まとめ

『レイマーチング(Ray Marching)』を調べるうちに、
いろんな数学知識が必要になってきました。

  • ベクトル
  • 三角関数
  • 法線ベクトル
  • 微分(偏微分)
  • 内積
  • 外積

学生時代ろくに勉強してなかった身としてはなかなかハードですが、

ずーーっとググって文章を読んで理解しようとしていくうちに、

徐々にではありますがわかってきたような気がしています。

『3Dプログラミング』はこれからますます需要が増えてくると思いますし、

実はこれらの数学知識は『機械学習』『統計学』『経済学』なんかでも応用できるようなので、

まるっとまとめてちょっとずつでも覚えていければと思います。

アオキ
ちょっとずつでもわからなかったことがわかるようになってくると楽しいもんですな。
created by Rinker
¥2,160 (2019/07/17 11:39:36時点 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

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

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

  2. 数学

    プログラミングで回転させたいなら『ラジアン』を知っておくといいかもよ【初心者向け】

    プログラミングを使って、デザインをしたりアートを作ったりすることを…

  3. 数学

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

    学校の勉強で、『なんのために勉強するのかわからないランキングTOP…

  4. GLSL/WebGL

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

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

  5. GLSL/WebGL

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

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

  6. GLSL/WebGL

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

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

Sponsored link

最近の記事

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

    三角関数の使い方〜わかりやすさ重視でまとめてみた【動画あり】
  2. P5.js (Processing)

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

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

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  5. Laravel

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