「魔法少女戦記外伝」DL委託販売中!!

DMM 同人様 Melonbooks DL様 DLsite.com 様
DMM 同人様 Melonbooks DL 様 DLsite.com 様



最新記事ほか

【Unity】Unity でワイヤフレーム的な表現【小ネタ】

ご無沙汰しております、管理人Empressでございます。

昨年までですと月末付近では同人ゲームの進捗報告をしていたのですが、現時点では次回作の基礎土台をコツコツと作り始めている段階ですので、今回はちょっとしたネタのご報告ができればと思い記事を起こしました。


■宣伝:「魔法少女戦記外伝」DL販売中です~
DMM 同人様DMM 同人様
Melonbooks DL様Melonbooks DL様


ちょいと宣伝を挟みつつ、さっそくいってみましょう。





次回作のイメージにも使用したいと思って「ワイヤーフレーム」について色々調べていたのですが、Unityではビルド後にワイヤーフレーム表現を反映する機能は無いようです。

開発途中のエディタ上では下の画像のように表示可能なんですが、最終出力ではこれは表示されません。
しかも表示されるフレームがポリゴンの最小単位である「三角形」で構成したものでのみ表示されるため、四角形であっても2枚の三角形に分割されて表示されます。

20160129_00.png

個人的には映画やアニメなどで良くある「四角形で表現された網目のようなワイヤーフレーム」を表現したいのですが、無いのであれば作るしかありません。
ですが良くある表現手法である以上、先駆者がすでに居るのでは?・・・と思い調べてみました。

Unityでワイヤーフレームシェーダー(amano-kiyoyuki様)
http://qiita.com/amano-kiyoyuki/items/01c2be92010e1a08f4eb

こちらで紹介されたシェーダーを実装してみたのですが、元になるメッシュ1つに四角が1つという描画方法になっています。

20160129_01.png

これをそのまま利用して網目のような表現をしようとするとたくさんのメッシュが必要となり、網目の数だけメッシュとシェーダーの描画を繰り返すとなると処理負荷的にもよろしくありません。


というわけで、こちらのコードをお借りしながらどうにか1メッシュで網目を描画しようと色々いぢってみた結果がこちらになります。

20160129_02.png

ソースはこちら。

Shader "Custom/WireFrame"
{
Properties
{
_LineColor("Line Color", Color) = (1,1,1,1)
_GridColor("Grid Color", Color) = (1,1,1,0)
_LineWidth("Line Width", float) = 0.01
_Divide("Divided Line", Range(1, 100)) = 1
}
SubShader
{
Pass
{
Cull off
Tags{ "RenderType" = "Transparent" }
Blend SrcAlpha OneMinusSrcAlpha
AlphaTest Greater 0.5

CGPROGRAM
#pragma vertex vert
#pragma fragment frag

uniform float4 _LineColor;
uniform float4 _GridColor;
uniform float _LineWidth;
uniform int _Divide;

// vertex input: position, uv1, uv2
struct appdata
{
float4 vertex : POSITION;
float4 texcoord1 : TEXCOORD0;
float4 color : COLOR;
};

struct v2f
{
float4 pos : POSITION;
float4 texcoord1 : TEXCOORD0;
float4 color : COLOR;
};

v2f vert(appdata v)
{
v2f o;
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
o.texcoord1 = v.texcoord1;
o.color = v.color;
return o;
}

fixed4 frag(v2f i) : COLOR
{
fixed4 answer;

float divx = frac( _Divide * i.texcoord1.x);
float divy = frac( _Divide * i.texcoord1.y);
float lx = step( _LineWidth, divx);
float ly = step( _LineWidth, divy);
float hx = step( divx, 1 - _LineWidth);
float hy = step( divy, 1 - _LineWidth);

answer = lerp(_LineColor, _GridColor, lx*ly*hx*hy);

return answer;
}
ENDCG
}
}
Fallback "Vertex Colored", 1
}


具体的に変更したことは以下のようになります。

・分割数を示す変数「_Divide」を追加
・メッシュの両端を探索するための値「i.texcoord1.x、i.texcoord1.y」と「_Divide」を積算
・積算結果から「frac()」を使って小数点以下を抽出(divx、divy)
・抽出結果を両端探索式の「i.texcoord1」部分を先ほどの結果と置き換える



メッシュの両端を探索している箇所はフラグメントシェーダ関数frag()です。

3DCGの世界ではドットや座標の数値に関係なく最小値を0、最大値を1として扱うことが多々ありまして、今回の事例では「i.texcoord1.x、i.texcoord1.y」がそれに該当します。「i.texcoord1.x、i.texcoord1.y」のどちらかが0か1の場合のみ「_LineColor」を採用し、それ以外は「_GridColor」を採用するという手順が今回の frag() 関数の処理内容です。

では「i.texcoord1.x、i.texcoord1.y」を操作すると意図的に「_LineColor」で描画する機会が増えるよね?

というのが今回の変更です。

メッシュそのものの大きさや_Divideの値、マテリアルのインスペクタから見えている「Divided Line」のスライダを変更することによってある程度網目の大きさも変更することも可能ですし、コードの「_Divide」を2種類に分けて縦と横の分割数を個別に変更するというのも場合によっては良いかもしれません。


制御的な利用というよりは、ビジュアル・演出面での利用になるだろうとは思いますが、このような表現を利用したい方への一助になれば幸いです。

ではでは今回はこの辺で~ノシ
スポンサーサイト

tag : Unity Unity小ネタ プログラミング

コメントの投稿

非公開コメント

プロフィール

Empress

Author:Empress
同人サークル「Atelier Empress」を立ち上げてしまった愚か者です。少しずつでも作品を公開していければと思う次第でございます。

検索フォーム
リンク
カテゴリ
タグ一覧

同人 Unity 進捗 雑記 コミケ C89 小ネタ プログラミング Unity小ネタ 年末 新年 Android 

委託販売
スポンサード リンク
FLOWER KNIGHT GIRL オンラインゲーム 千年戦争アイギス オンラインゲーム
Twitter