こんにちは、あるいはこんばんは！クライアントエンジニアのHです。
今回は、私がCG初学者だった時にとても印象的だったエピソードをお話させていただこうかと思います。
ゲーム開発やCGに興味がある方にはぜひご覧いただきたいですし、まったくご縁が無い方も「なるほどな！」と思っていただけるんじゃないかな…それでは参りましょう！

前置き-法線とは-

CGの分野において「法線」というものがあります。
これは法線ベクトルのことを指すのですが、3次元上にある面や頂点、曲面上の点から垂直に伸びるものです。細かい説明は省略しますが、3DCGにおいて、ポリゴンの表裏を判定したり、キャラクターを画面に映す時の計算に必要だったりと、非常に重要な要素であります。
 

 
参考までに下の画像は、空間上に浮かぶ赤い球と、その法線情報を表したものです。連続的でとてもきれいですね。
 

ちょっと待って

「空間上に浮かぶ赤い球と、その法線情報を表したもの」
 
…ちょっと待って？
 
「空間上に浮かぶ赤い球」これはわかる。そりゃそうだ、見たまんまだし。
でも「法線情報を表したもの」って、いや球の法線なんだから連続してそうなのはイメージとしてはわかるんだけど…法線ベクトルってさ、

 
これでしょ？
どうして3次元の情報が2次元の画像として表せるの！？
おかしいでしょ！いったいどんなからくりが！？
当時の私はとても疑問だったわけですね。しかしながらこの疑問、答えはいたってシンプルだったのです。

答え合わせ

法線情報の画像は、カラー画像で表されてますよね。
色というのは、R（赤）G（緑）B（青）の3原色で表されています。この3原色の割合を変えることで、様々な色を表現することができます。このことは多くの人に馴染み深いものかと思います。
 

 
重要なのは、カラー画像はRGBの3要素で表現されるということです。
 
お気づきでしょうか？
そう！「3次元のベクトルの各次元の情報をRGBの3つの変数に落とし込む」これができそうじゃないでしょうか！！

具体的にはこうです。

• 法線ベクトルの大きさを1にする（正規化する）
• 正規化した法線ベクトルの各要素が取りうる値の範囲は-1から1のため、それを割合(0から1)に変換する（ex. x = 0.5 であればその割合は 0.75 です）
• 各要素の割合に 255 をかける（RGBへの変換）
• この計算結果をRGBのカラー情報とする

この法則で、画像の１点１点に対応する場所の法線ベクトルを変換していった結果、あのようなカラー画像を作成することができるのです。

まとめ

法線情報を表すには、法線ベクトルの (x, y, z) を割合にして、各要素を RGB それぞれの割合として対応させればよい！
 
私の中で、CGと数学が結びついて、とても楽しいな、美しいなと思った瞬間でした。この他にも、CGと数学は切っても切り離せない要素が数多く存在します。今回の話でCGの分野について少しでも面白いなと思っていただければ幸いです。それでは！