ビルボード
概要
最終更新日:2020/03/03
3Dの描画手法であるビルボードについて書いた記事です。
主に次の項目に該当する方に向けて書いています。
- ビルボードとは何か知りたい
- 実装法を知りたい
- 注意点などがあれば知っておきたい
ビルボードとは
ビルボードとは板ポリなどのオブジェクトを常にカメラの方に向ける技術のことです。
3D空間上に表示するHPゲージなどのUIやエフェクトなどでよく使用されています。
メリット
ビルボードを使用することによるメリットは描画コスト減らせることです。
3Dのオブジェクトを全てポリゴンとして作成していたら
大量のポリゴンを描画することになるので、描画コストに多大な負荷がかかります。
そこでオブジェクトの一部をビルボードにすることで
描画を行うポリゴン数を減少させ、描画コストを軽減させます。
サンプル
サンプルはここからダウンロードできます。
環境は以下の通りです。
開発環境
VSのバージョン |
DirectXのバージョン |
VisualStudio 2017 |
DirectX9(June 2010) |
実装手順
以下は実装方法の手順となります。
※サンプルの関連する場所に順番の番号をコメントで書いています。
①.カメラのビュー行列を作成する
ビルボードで描画するにはカメラのビュー行列が作成されている
必要がありますので、ビルボード描画前には最新の行列にしておきます。
DirectGraphics.cpp
//ビュー座標変換用の行列算出
// カメラの向き
D3DXVECTOR3 up_vector(0.0f, 1.0f, 0.0f);
D3DXMatrixIdentity(&g_MatView);
D3DXMatrixLookAtLH(&g_MatView,
camera_pos, // カメラ座標
eye_pos, // 注視点座標
&up_vector); // カメラの上の向きのベクトル
g_pD3DDevice->SetTransform(D3DTS_VIEW, &g_MatView);
②.オブジェクトの行列を作成する
ビルボード対象のオブジェクトは通常の3Dオブジェクト同様の方法で
移動と拡縮の行列を作成します。
BillBoard.cpp
// 移動
D3DXMatrixTranslation(
&trans,
g_BillBoardPos.x,
g_BillBoardPos.y,
g_BillBoardPos.z
);
③.カメラのビュー行列の逆行列を作成する
カメラのビュー行列を作成したら、その行列の持っている向き(回転)情報とは
真逆の向き(回転)情報を作成するために逆行列を作成します。
BillBoard.cpp
// ビューマトリックスの逆行列作成
InverseViewMatrix(&view_mat);
④.逆行列の移動値を打ち消す
逆回転を作成した段階では行列に向き(回転)情報だけではなく
移動情報も含まれています。
この情報はビルボードでは必要がないので打ち消します。
BillBoard.cpp
// 移動情報の打ち消し
view_mat._41 = 0.0f;
view_mat._42 = 0.0f;
view_mat._43 = 0.0f;
⑤.行列を掛け合わせる
④で作成した③で移動情報を打ち消したビューの逆行列を掛け合わせます。
この時の掛け合わせの順番は通常通りに移動行列を最後にしてください。
BillBoard.cpp
// ワールド座標作成
world = view_mat * trans;
⑥.行列の設定
⑤で作成した行列をワールド行列として使用するに指定します。
BillBoard.cpp
// ワールド座標の設定
GetD3DDevice()->SetTransform(D3DTS_WORLD, &world);
⑦.板ポリ描画
最後に板ポリを描画します。
BillBoard.cpp
// 頂点構造の指定
GetD3DDevice()->SetFVF(D3DFVF_XYZ | D3DFVF_TEX1);
GetD3DDevice()->SetTexture(0, texture_data->m_pTexture);
GetD3DDevice()->DrawPrimitiveUP(
D3DPT_TRIANGLEFAN,
2,
v,
sizeof(VERTEX)
);
描画の注意点
ポリゴンは3Dオブジェクトなのでライティングや
カリングなど3Dモデル描画する際に注意することと同じ注意をしてください。
特にライティングがONになっている状態で
板ポリに法線が入っていないと描画が上手くいきません。
回転の打ち消し
完全にカメラの方向を向く見せ方が問題になる演出があります。
このような場合に逆行列を以下のように変更すれば各軸の回転を打ち消すことができます。
X軸の打ち消し
// X軸回転情報の打ち消し
view_mat._11 = 1.0f;
view_mat._12 = 0.0f;
view_mat._13 = 0.0f;
Y軸の打ち消し
// Y軸回転情報の打ち消し
view_mat._21 = 0.0f;
view_mat._22 = 1.0f;
view_mat._23 = 0.0f;
Z軸の打ち消し
// Z軸回転情報の打ち消し
view_mat._31 = 0.0f;
view_mat._32 = 0.0f;
view_mat._33 = 1.0f;