Topへ戻る
ドット絵シェーダーへの道
ドット絵が好きだから、ドット絵シェーダーを書くぜ！というページ
ポリゴンのモデルからドット絵風の画像を生成するよ！
下にいくほど古い内容です。
2012/01/30
どーん！ クリックで更にどどーん！
2011/11/14
パレットを調整してみた。なんとなくKOFっぽいコントラストの強い感じになったけど、結構よくね？
2011/11/11
スペキュラなし
輪郭等表示
未実装にしてあった溝の検出処理を実装した。
これによって指の隙間や、水着の縫い目（縦線）が出るようになった。
マテリアルエッジも実装したが、こちらはあまり機能していないので、要調査。
これからの課題
・「やわらかい感じ」を出すために、照度にブラーをかけてみる
・テクスチャで模様を描けるようにする（特に目）
・中間色をタイルパターンに置き換える
・マテリアル単位でスペキュラ係数を指定できるようにする（現在は全てのマテリアルがテカっている状態。肌以外は不要だろう）
・髪の毛用の特別なシェーダーの検討（天使の輪を出しつつ、ゴチャゴチャを抑えられるように）
・よりドット絵に特化したモデルデータへの差し替え（現在のモデルは細かすぎるかもしれない。協力者を募集する）
2011/10/31
輪郭検出のアルゴリズムを改良。
従来は、隣接ピクセルとZ値の差をとり、差が閾値以上であればそこを輪郭とする、よくある方法であった。
しかしこれには大きな問題があった。
カメラからポリゴンまでの距離や、ポリゴンの大きさにより、閾値が一意に決定できないのである。
例を挙げる。
カメラに対して少しだけ横を向いているポリゴンを視界いっぱいに大写しにしたとき、ポリゴン中のどこかの一点とその隣接点のZ値にはほとんど差がない。
しかしこのポリゴンをカメラから遠ざけ、わずか２ピクセルの大きさにしたとする。
この時、この２点のZ値の差というのは、ポリゴンの頂点Z値の最小値と最大値の差である。
従ってこの差は大きな値となり、閾値を越えて輪郭と判定されてしまうのである。
この原因により、ある程度の奥行きになると、ポリゴン中の全てのピクセルが輪郭と判定される。
上記の問題を解決するために、「ラスタライズを考慮したエッジ判定」を考案した。
まず、予めモデルのレンダリング時に全てのピクセルにおいて、座標と法線を記録しておく。
エッジ判定をする際は、対象となるピクセルに対し、座標と法線からなる「面」を定義する。
隣接点に関しては、原点（カメラの座標）から隣接点の座標を通る「直線」を定義する。
この「面」と「直線」の交点を、「理想的な隣接点の座標」とする。
この座標は当然、面上に存在する。隣接ピクセルがこの座標に存在するのであれば、対象ピクセルにとってなめらかに連続したピクセルが存在することになり、
対象ピクセル自身はエッジではないということになる。
2011/10/中旬
縦横５倍画像（リンク）
縦横２倍サイズのレンダリングに限界を感じたので、縦横５倍サイズのスーパーサンプリングに変更した。
最終解像度は256*256で、モデル描画時はその５倍の1280*1280である。
５×５の範囲で、平均深度値が最も手前のマテリアルが採用される。
ただし面積が小さすぎるマテリアルは無視される。
面積はその後のパスにまわされ、照度に影響を与える。
これによってアンチエイリアスとして機能する。
シェーダーを一新したので、溝などを検出する機能は一旦外した。
2011/09/25
輪郭をどの部分も同じ色にするのではなく、明るい部分には明るい色の輪郭を描くようにした。
ディフューズライトだけではイマイチだったので、スペキュラーを追加。
それによって、両手の感じが変わった。
髪の毛にも立体感が生まれたが、ゴチャゴチャした印象も受ける。
2011/09/17
先日の画像を2ch某スレに上げたところ、ドット絵として描き直したものをいただいた。
無断転載につき御容赦を。
ドット絵ならではのやわらかさがあり、とても参考になる。
ドット絵にもタッチというものがあり、ドット絵シェーダーが何を目指すかというのは難しいところである。
しかしこのやわらかさは個人的に好むところであるので、今後はこれを参考にさせていただくことにした。
完全コピーというわけではなく、細部の処理などを比較していきたい。
2011/09/16
パレットテクスチャ
初期のバージョン。
「トゥーンシェーダーの諧調を少なくして、輪郭付ければドット絵っぽくなるんじゃね？」と思って作り始めた。
そんな甘い話はどこにもなかったのだが。
モデルデータは某所より拝借してきている。
色の違う部分ごとにマテリアルを分け、マテリアル番号を割り振った。
モデルからはテクスチャを削除し、色情報は二次元のパレットテクスチャ一枚にまとめた。
処理の内容は、
・ライティングはディフューズのみ
・縦横２倍サイズでレンダリング
・モデル描画時に、マテリアル番号と照度を書き込み
・縮小時に、２×２ピクセル中で最も手前のピクセルを採用
・自分と周りのピクセルを調べて、以下の条件に合致したら照度を落とす
・周りのピクセルが自分より奥にある（輪郭）
・２×２ピクセル中の高低差が大きい（複雑さ）
・隣り合ったピクセルの法線が狭い角度で向き合っている（しわや溝）
・最後に、別途用意したパレットテクスチャから、マテリアル番号と照度で色を引く
ある程度思った通りにはなったものの、指やヒザにガタガタが目立つ。
Topへ戻る
kushi34123616bd@gmail.com
縦横５倍画像（リンク）