Game Development #11 Wireframe

映画のメイキング映像なんかを見ていたら見せ方が格好良かったりして、あれもひとつのプレゼンテーションだなあと感心しながら、自分のプログラムにもそんなデバッグ機能をつけたくなりました。開発の効率にもつながりそうだしね。

battleship_20130530_wireframe_01

通常描画だとこのような感じです。

 

battleship_20130530_wireframe_02

ワイヤーフレーム描画を分岐として挿入してみました。シェーダーの描画設定はそのままにしてワイヤーフレームのみを描画したものです。よくあるタイプですね。

 

battleship_20130530_wireframe_03

モデルを単色で塗りつぶすシェーダーを書いて、ワイヤーフレームで描画したものです。透明部分がないのでパーティクルや軌跡のポリゴン構造が把握しやすいです。

 

battleship_20130530_wireframe_04

モデルの向こう側のワイヤーフレームまで見えるとわかりにくいので、重ならないように塗りつぶしたタイプです。これは一度単色でモデルを描画した上に、ワイヤーフレームを深度バイアスを若干手前側にずらして重ねるように描画しています。モデルを二度レンダリングしているのでコストはちょっと重いです。

 

battleship_20130530_wireframe_05

同じ要領で、通常描画にワイヤーフレームを重ねたもの。

 

battleship_20130530_debug_03

空間上に変数名を表示するような機能も書きました。視覚的に確認したいことも多々あるんですよね。あるはずのモデルがないと思ったら計算ミスで遥か彼方のとんでもない場所に配置されていることとかありますし。笑

 

battleship_20130530_debug_04

プログラムで生成しているポリゴンの頂点番号を確認、などなど。視覚的に確認できるということは結構重要なんですよね。

ワイヤーフレームはそれだけでひとつの表現というか、本来のCGらしくていいですよね。他に格好いい表現がないか研究してみます。

広告

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中