Step 2 - シェーディング
シェーディングとは、おおざっぱに言えばポリゴンをきれいに塗ることです。フラットシェーディングやグーローシェーディングという言葉を聞いたことのある方もいるかと思いますが、そのあたりの話です。
どんな色で塗りつぶすべきか
ただ単に三角形を塗りつぶすだけであれば、Triangleクラスのrenderメソッドの処理をbeginFillとendFillで囲むだけでできます。
public function render(graphics:Graphics):void { graphics.beginFill(0x0088FF); // 塗りつぶし開始 graphics.lineStyle(5, 0x0088FF); // v0 -> v1 -> v2 -> v0の順に三角形を描く var point:Point = v0.project(); graphics.moveTo(point.x, point.y); point = v1.project(); graphics.lineTo(point.x, point.y); point = v2.project(); graphics.lineTo(point.x, point.y); point = v0.project(); graphics.lineTo(point.x, point.y); graphics.endFill(); // 塗りつぶし終了 }
しかし、これだけでは次のように逆に見づらいとも取れるような結果になってしまいます。
これを3Dらしい見た目にするために、三角形が向いている方向に応じて塗りつぶす色を変えます。このステップのプログラムを実行すると、次のような見た目になります。
こういった塗りつぶし方は、一般に「フラットシェーディング」と呼ばれます。面を平らに（均一）に塗るのでこのような呼ばれ方になっています。フラットと言うと、セルシェーディング（トゥーンシェーディング）を連想されるかもしれませんが、それとは別物です。
フラットシェーディングでは面の色が単色なので、面と面の相対的な明暗で3Dらしさを表現しています。グーローシェーディングなどの他のシェーディング手法を使うと、面の中で色に明暗をつけることもできます。
実世界では、面に垂直に光を当てたとき、最も面が明るくなります。面を傾けていくと、どんどん暗くなっていきます。3Dプログラミングにおいて面を塗る色を決めるときには、このような現象を考慮しなければなりません。
サンプルプログラムでは画面の手前側から光が当たっていることにしています。この場合、面がまっすぐ手前を向いているときに最も明るくなります。これがどんどん傾いていって画面に垂直になるときには、真っ暗になります。後ろ向きになってしまうと表示されません。このような表現をするために、ランバート（Lambert）の法則を使います。詳細については後で実装と共に説明しますが、この法則を使って計算される面の明るさは以下の図のようになります。
さきほど説明したとおり、面が光に垂直なときは明るく、傾くほど暗くなっています。明るさは、面の向きと光の向きを使うことで計算することができます。さっそく計算方法を説明したいのですが、その前にベクトルの内積、外積や、面の法線の計算方法について先に説明します。
