投稿者 tel | 2014年4月5日

裏面ポリゴンでアウトラインを表示する

よくあるポリゴンを裏返してアウトラインを表示するやつ。

outline_ss

http://jsdo.it/sapphire_al2o3/f1Rm

最初に普通にモデルを描画してからgl.cullFace(gl.FRONT)でカリングの面を切り替えてアウトラインを描画している。

attribute vec3 position;
attribute vec3 normal;

uniform mat4 mvMatrix;
uniform mat4 pMatrix;
uniform mat3 nMatrix;

void main() {
vec3 pos = position;
vec3 n = nMatrix * normal;
vec2 nn = normalize(n.xy);
vec4 p = pMatrix * mvMatrix * vec4(pos, 1.0);
gl_Position = p + vec4(nn * 1.0 / 200.0 * p.w, 0.0, 0.0);
}

アウトラインの頂点シェーダはモデルに対して法線方向に頂点を移動している。
スクリーン座標で1画素分だけアウトラインを出すために法線をビュー座標系にしてからxyの方向に画面比率(1/200)をかけている。

裏面ポリゴンだと立方体とか面がフラットで法線が個別に付けられている場合、隙間ができてしまう。

outline_cube_ss

わかりやすいように線を太くして白抜きにしている。

アウトラインのモデルの法線をちゃんと統合しておけばいいんだけどちょっと手間。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。