Stage3Dでエッジ検出を実装(+Away3D)

=前置き=

 自作のドット絵エディタの陰付けは法線でやるよりエッジ検出で付けた方がドット絵っぽくなりそうなので、高速化の意味も込めてStage3Dでエッジ検出を試すことにした。

Flash

wonderfl build flash online | 面白法人カヤック


 ドット絵の陰影付けを目的としているので、エッジの色は「本来の色を0.3倍したもの」とかになるようにした。ゲームによってはエッジの色を専用の色に変更したりするかもしれないが、今回はそこまで考慮していない。

アルゴリズム詳細=

 基本的には今給黎さんの「DirectX9 シェーダプログラミングブック」の「輪郭抽出」の深度バージョンを参考にしている。この本は8年前の本だけど、自分のドット絵エディタの金属マテリアルとかの計算でいまだにお世話になっている。

DirectX 9 シェーダプログラミングブック

DirectX 9 シェーダプログラミングブック


 具体的には以下の手順で輪郭を描画している。(いわゆるポストエフェクト)

  1. まずは普通に描画する(深度バッファを含めて)
  2. その後、描画結果に対して以下の処理を1ピクセルずつに対して行う
    1. 「左上と右下」「右上と左下」の深度の差(の絶対値)の合計を求める
    2. それが閾値以上ならそのピクセルを黒くする


 上の本とは少し処理が違うが、これはドット絵を考慮しているため。

=注意事項=

深度バッファの取得の問題

  • Stage3Dは深度バッファを標準では取得できないため、Away3Dが内部で使っている深度バッファを参照するようにした


Away3Dの深度バッファの値

  • depthTextureのARGBに分離された値が格納されており、これと(1.0, 1 / 255.0, 1 / 65025.0, 1 / 16581375.0)というベクトルの内積をとることで実際の値が取得できる

=予定=

 エッジ検出は完了したので、次の土日はこれをドット絵エディタへ適用を開始したい。まずはAway3D用にドット絵エディタを作り直すところから始めないといけないので、そこそこ時間がかかる見込み。

 明日からの月〜金は再びローグライクの作成を進める予定。この週で基本的な挙動は一通り作ってしまいたい。