饂飩コーディング

iOSアプリやら、Unityやら、Cocos2dやらごにょごにょ書いております

モデルのポリゴンを削減したい

Blender でUnityようにモデルを作成して出力するんですが、結構ポリゴン数が大きくなっていてUnityでの実行を重たくする可能性がある場合が多々あります。
そこで、今回はテキストの数字をMesh化しそこからポリゴンを減らしていきましょう。

1、Textで数字の8を入力し、Exclude 0.2 Bevel 0.04で厚みとベベルをつける。
f:id:appdeappuappu:20181213132956p:plain
f:id:appdeappuappu:20181213132948p:plain
2、Mesh化する Alt + C で Mesh From Textを選択
f:id:appdeappuappu:20181213134002p:plain
3、MeshのFace数が964になっています!!!減らしていきましょう。
f:id:appdeappuappu:20181213140849p:plain
4、まずは、平面が無駄に分割されている場合にFaceを減らす為に
 Mesh → Clean UP → Limited Dissolve
 f:id:appdeappuappu:20181213141106p:plain
5、Face数502半分近くに削減するできましたが、さらに減らしていきましょう
f:id:appdeappuappu:20181213141257p:plain
6、側面をAlt + Controlを押しながらエッジをクリックしてリング選択してください。
ぐるっと一周選択してみましょう。
7、Select → Checker Deselectで一つおきに非選択し
結果として一文字側面のエッジを均等に半分選択した事になりました。
f:id:appdeappuappu:20181213141343p:plain
f:id:appdeappuappu:20181213141405p:plain
f:id:appdeappuappu:20181213141427p:plain

8、選択したエッジを削除します。xキー → Edge Loop 
これで側面のエッジが半分に削減されました!
f:id:appdeappuappu:20181213141445p:plain

9、あとは穴の中とその入り口、各5箇所に同じ処理を施すと
Face数231まで削減!あとはお好みもっと減らすなり可能。
f:id:appdeappuappu:20181213141504p:plain

UnityにBlender作成のモデルを出力する。(備忘録的な)

大まかな手順
Blender
1、モデリングする
2、中心点を重心(質量ベース)に変更する。
Object → Transform → Origin center of Mass (Volume)
f:id:appdeappuappu:20181213122446p:plain
3、Rotation Scale を確定させる。
Ctrl + A で Apply Rotation and Scale
f:id:appdeappuappu:20181213123904p:plain
4、FBXでExportする
File → Export → FBX (.fbx)
f:id:appdeappuappu:20181213124109p:plain

書き出しオプションは下の感じで!
UnityとBlenderでは空間座標の方向が違う為にこのように
設定します。
f:id:appdeappuappu:20181213125323p:plain


Unity側
1、Import New assetsで読み込む
f:id:appdeappuappu:20181213130004p:plain

Shaderで透明部分を抜いたり、動きを持たせたりする

f:id:appdeappuappu:20181203215314p:plain
透明抜きパターン

↓まずは実行結果↓こちらをクリック
Unity WebGL Player | Learn_Shader


テクスチャーの画像ファイルに透明化部分を作成して、その部分を抜くようにShaderで実現する
3パターンを考えて見ました。



左(青) "Queue"="AlphaTest" パターン
PNGファイルで透明部分を作成して使うことができますが、Unityでは古い方法なので推奨はされていません。



中(赤) Vertex Shader でClipするパターン
フラグメンテーション処理部分で、透明化されている部分をClip関数で抜く方法。
Unityでは現在この方法がよく使われていると思われる。



右(緑) "Queue" = "Transparent" パターン
Photoshop等でアルファマスクを作成してそのアルファマスクを使って抜く場合はこちらでOK



右下の蝶はVertex ShaderでPanelを動かして、羽を羽ばたかせてそこにテクスチャーをつけています。
ParticleSystemにこのShaderを使って飛ばして見ました。

Vertex Shader Butterfly

Shader シェーダー なんぞをいじってみる。

Shader?なーんとなくわかってるようでわかっていない自分の為に書きながらまとめてみます。

じゃ、マテリアルとシェーダーってどう違うの?ってとこからなんだけど
「マテリアルという便利な道具箱に入っている一つのツールがシェーダーである。」
という個人的な理解にしています。
もちろん、シェーダー 以外にもマテリアル道具箱にはテクスチャーとかも含まれています。

f:id:appdeappuappu:20181129113445p:plain
シェーダーってなんなの?


シェーダーってどう使うの?
まずは、Unityでどう使われているのか実際に使ってみるところから始めてみます。
1、http://www.shaderslab.com/demo-41---animated-flag.htmlを眺めて何ができるのか確認して見ましょう。
2、UnityでShaderとMaterialを新規作成し、共に「Flag」という名前に変更しておきます。
3、Assetにカナダ国旗を追加する。
↓カナダ国旗
f:id:appdeappuappu:20181129114601p:plain
↓2、3で取り込み作成結果
f:id:appdeappuappu:20181129120324p:plain
4、panelを一つシーンに追加する。
5、Flag(Material)のInspectorからFlag(Shader)を選択する。
↓5、での設定(ShaderをMaterialにドラッグしてもいい)
f:id:appdeappuappu:20181129120818p:plain
6、http://www.shaderslab.com/demo-41---animated-flag.htmlのソースをコピーして、Flag(Shader)をダブルクリックしてコードエディター上で開き、丸っとペーストしてしまう。(全置き換えでok)
7、Flag(Material)を4で作ったPanelに適応する。
8、上記PanelのInspector内MaterialコンポーネントのパラメータでSpeed,Frequency,Amplitudeを調整する。
9、Flag MaterialのInspectorで再生ボタンを押すと、SceneViewで実行結果を見ることができる。
f:id:appdeappuappu:20181129120032p:plain

↓下のリンクをクリックして実行結果をご覧ください
Unity WebGL Player | ShaderTest3


Unityでオブジェクトの変形はShaderでの出来るって事だと分かったけど
Shaderでの変形ってあくまでも見え方だけのようで、Mesh自体が変形している
訳ではないのでもちろんMeshColliderも変形していないと思われますのでご注意を!


Shaders Laboratoryは製作者さんがチュートリアルとして使ってくださいとの記述をされていましたので使用させていただきました。

Offsetいじってテクスチャーを動かしてみよう。

f:id:appdeappuappu:20181126212931p:plain

まずは下のリンクをクリックして実行結果をご覧ください
Unity WebGL Player | LearnC#


真ん中青いのやつ
1、Updateの中でフレームごとにテクスチャのオフセットを少しずつ変化させてます。
考え方も簡単。

public class nekoScript : MonoBehaviour {

    public Renderer rend;

    public float offsetDelta;
    public float offsetValue;

    // Use this for initialization
    void Start () {
        rend = gameObject.GetComponent<Renderer>();
        offsetDelta = 0.001f;
        offsetValue = 0.0f;
	}
	
	// Update is called once per frame
	void Update () {

        offsetValue = offsetValue + offsetDelta;
        rend.material.SetTextureOffset("_MainTex", new Vector2(0, offsetValue));

    }
}

次は左の赤い方
2、Time.deltaTimeに係数をかけてスピード調整してオフセットをいじってスクロールさせています。
これだと実行環境による速度に差があってもうまいことだいたい同じスピードになりそうです。
途中のoffsetValueの-1.0f調整は無くてもいいです。

public class nekoScript3 : MonoBehaviour
{
    public Renderer rend;
    public float offsetValue;
    public float speedFactor;

    // Use this for initialization
    void Start()
    {
        rend = gameObject.GetComponent<Renderer>();
        offsetValue = 0.0f;
        speedFactor = 0.1f;//スピード係数
    }

    // Update is called once per frame
    void Update()
    {
        offsetValue = offsetValue + Time.deltaTime * speedFactor;

        if(offsetValue >= 1.0f){
            offsetValue = offsetValue - 1.0f;
        }
        rend.material.SetTextureOffset("_MainTex", new Vector2(0, offsetValue));
    }
}


最後は、右の猫の後ろにブロックがないやつ
3、コルーチンを使ってスクロールさせてみたバージョン

public class nekoScript2 : MonoBehaviour
{
    public Renderer rend;
    public float value;

    // Use this for initialization
    void Start()
    {
        rend = gameObject.GetComponent<Renderer>();
        value = 0.0f;
        StartCoroutine(loop());
    }

    // Update is called once per frame
    void Update()
    {
    }
    private IEnumerator loop()
    {
        while (true)
        {
            yield return new WaitForSeconds(0.01f);
            onTimer();
        }
    }

    private void onTimer()
    {
        value = value + 0.001f;
        rend.material.SetTextureOffset("_MainTex", new Vector2(0, value));
        Debug.Log("on timer");
    }

}

↓使ったテクスチャーはこちら。
f:id:appdeappuappu:20181126214832p:plain

Unity SceneをWebGLで公開してみよう

とりあえずこんな感じ
1、Build Settingsを開らく。
f:id:appdeappuappu:20181123221949p:plain

2、WebGLを選ぶ、Add Open Scenesで対象のシーンを選択する。後はBuildかBuild And Runで
ファイルを出力する。
Buildはファイルを出力するだけで、Build And Runはファイル出力後ファイルをテスト実行してくれる。
出来上がった実行ファイルはローカルではブラウザで実行できないが、Build And RunでUnityがサーバを
シミュレートしてくれてる?為か実行できるので確認には最適。
f:id:appdeappuappu:20181123221956p:plain

3、出力されたフォルダーをそのままWeb Serverにアップロードする。
f:id:appdeappuappu:20181123222005p:plain


4、実行サンプルはこんな感じ!↓
f:id:appdeappuappu:20181123223738p:plain
Unity WebGL Player | prefabTest

Terrain 地形をHeight Mapファイルから作ってみよう

UnityでTerrain機能を使ってみましょう

概要
1、グレースケールで地形を描く(黒がへっこんで、白が出っ張る)。黒と白のグラデーションにすると坂になるよ
2、上の画像ファイルをGimpでrawファイルに変換する。
3、Unityの TerrainObjectに2で作成したrawファイル(Height Map File)をImportする。
4、Terrain Height パラメータを調整して高さを調整する。

って感じですかね。

Photoshopを持っていれば、rawファイルへの変換は簡単ですが、
自分はPhotoshopElements15しか手元にないので、Gimpを使うことにしました。

こんな感じのグレースケール画像を作る。
サイズは513x513
Procreateなんかで手書きすると味が出ますw
f:id:appdeappuappu:20181104213511p:plain

グレースケールのファイルをGimpで読み込んでから
「名前をつけてエクスポートする」を選択し、
「ファイル形式の選択」で「RAW画像データ」を選択しエクスポートする。
「RGB保存タイプ」を「Planer」にする!!!
出力されたファイルの拡張子が「.data」なので「.raw」にリネームしておく。
f:id:appdeappuappu:20181104213520p:plain
f:id:appdeappuappu:20181104213526p:plain

ファイルの関係はこんな具合で
f:id:appdeappuappu:20181104213504j:plain

UnityにTerrain Objectを使いしてInspectorウィンドウで
歯車の小さなアイコンをクリックして下の方にある
Importボタンを押して、作成したRAWファイルを読み込む
f:id:appdeappuappu:20181104213533p:plain

読み込みOption選択画面で
8bit
513*513
Mac
でImportする
f:id:appdeappuappu:20181104213544p:plain

こんな感じでTerrainが画像ファイルの作成程度で簡単に作成できます。
この後は、テクスチャーを設定すれば見栄えよ良くなるはずです。w
f:id:appdeappuappu:20181104213548p:plain