リアルタイムで3D迷路を表示する その４

長いつまらん話ですがｗ、これで終わりです。

面に色をつける話です。実際には色というよりは明るさの話です。
まずはゲーム画面で面の明るさを見てください。

真正面にある面は明るい

斜めになった面は暗い

遠くにある面ほど暗い

諧調にあまり差がなくてわかりにくいですね。もっと極端に暗くなるようにした方が良いかもしれません。

それはともかく、このゲームは車のヘッドライトで壁が照らされているイメージです。
なので真正面にあるものは明るく、斜めになると少し暗くなり、遠くのものほど暗くなる、という見え方になるようにしています。

これには面の裏表判定で計算した内積の値を流用します。
視点からのベクトルと面の法線ベクトルとの内積は面の向きによってこのように変わります。

表を向いている面なので内積値はマイナスになります。なので絶対値で考えますが、正面では１．０、斜めを向くとこれが小さくなっていき、視線ベクトルに対して９０度横を向くと０．０となります。
（内積値が０の面は裏面と判断するので描画しませんが）
この０．０～１．０の内積値をそのまま面の明るさのファクターにしてやります。
（フラットシェーディング）

ただしこの方法だと面単位で明るさが変わるので面と面の境目で色が異なりちょっと不自然ではあります。
面の頂点の法線ベクトル毎に計算して面の内部でも色をなめらかに変化させればきれいな表示になります（グローシェーディング）が、当然計算時間がかかりますし、何より１つの div (の border) の中で色を変化させることはできません。

一応参考までにフラットシェーディングとグローシェーディングの見え方の違いを、他所からパチってきた画像で紹介しておきます。

左が面の法線ベクトルだけで計算したフラットシェーディング、
右が面の各頂点の法線ベクトルで計算したグローシェーディングです。
どちらもポリゴン数は同じです。

それはともかくとして、内積を使えば視線ベクトルに対して斜めになればなるほど暗くなるという表現ができることがお分かりかと思います。

次に遠い面ほど暗くなるですが、実はこれもまったく同じロジックです。面の遠近によって何か処理をしているわけではありません。
下図を見てもらえばわかるように、遠い面は内積値（絶対値）が小さくなるのです。