SURPR!SE
サプライズ
2013.11.23
GLSLでトゥーンシェーディング
「WebGLでトゥーンシェーディング」を目標に制作を始めました。
普通に影を付けます。
法線ベクトルとライトの逆ベクトルの内積から2本のベクトルが成す角の余弦(cos)がわかります。
余弦は角度が0°のとき1、 90°のとき0になるので、0以上のときにライトの反射率として扱うことができます。
影を段階的にします。
頂点シェーダで反射率の値を3つに振り分けましたが、影がギザギザしてしまいます。
頂点シェーダの段階では、データがフラグメントのデータとして補完されていないので、値を分けても頂点の位置で分けられてしまいます。
同じ処理をフラグメントシェーダで行うと、影の境目がなめらかになりました。
これはフラグメント単位で補完された法線ベクトルの値を計算に使っているからです。
ハイライトにあたる部分には白色を乗せています。影は色を乗算することで表現しています。
同じ要領で「縁取り」にチャレンジ
カメラの向きベクトルとフラグメントの法線が成す角度が一定以上であるフラグメントを赤色で塗りつぶす処理を加えました。
テクスチャを適用します。
使う予定のテクスチャの色をチェックしながら調整をします。
色の境目をさらに2段階に分けてぼかします。
スクリーン処理で光の色を乗せられるようにしました。
実際のモデルに適用してみます。
今回はノーマルマップを使用せず、ポリゴンの法線を頂点毎に平均化して頂点の法線として使用しています。
実行速度を求める場合はノーマルマップを用いるほうが良いです。
ライトの強さやしきい値など細かい点を修正しました。
ほとんど目立ちませんが、青白い線で縁取りをしています。