tanaka's Programming Memo

プログラミングについてのメモ。

MK GlassとPro Texで氷を作る

この記事は、Unityアセット冬のアドベントカレンダー 2019 Winter!の17日目の記事です。

assetstore.info


氷のブロックが作りたい!と思い、MK Glassを購入しました!

assetstore.unity.com

こんな感じで利用しています↓

f:id:am1tanaka:20191211231607p:plain
VoxelorerBirdの氷ブロック

この記事では、MK Glassと、テクスチャーをプロシージャルに生成するフリーアセットのProTexを使った氷ブロックの作り方と作例をご紹介します!

f:id:am1tanaka:20191211230909g:plain
作例:氷に乗って迫りくるペンギン!

目次

MK Glassとは

MKさんことMICHAEL KREMMELさんというと、MK Glowで有名かと思います。

assetstore.unity.com

同じ作者さんが作成した透明な物体用のシェーダーです。機能限定のフリー版もあります。

assetstore.unity.com

目に付く違いは、最適化、ライトの数、反射といったところでしょうか。基本機能はFree版にもちゃんとあります。

f:id:am1tanaka:20171101153137j:plain
正規版とFree版の違い

Pro Textとは

ざっくりというと、図形やノイズをグラフで組み合わせてテクスチャーを作成する今どきのプロシージャルなテクスチャー生成アセットです。

assetstore.unity.com

お気に入りのアセットで、前にブログに書きました。

am1tanaka.hatenablog.com

インストールとデモ

MK Glassを購入して、お試し用のプロジェクトを作成してインポートしました。以下の場所にExampleSceneMKGlassというPDFがあるので開きます。Exampleのunitypackageをダウンロードするリンクが開くので、ダウンロードしてインポートします。

f:id:am1tanaka:20191211182102p:plain
Example

※Free版にはこのPDFはありません。

エラーの解消

2019/12/10現在、Unity2019.2.xで開くとMinDrawer.csがどうとかこうとかというエラーが発生しました。ポストプロセス用のものとUnityEngineに含まれるものが被っているとのことです。3行目に以下のようにusingを追加して、MinAttributePPMinAttributeに変えれば直ります。

using UnityEngine;
using UnityEngine.PostProcessing;
using PPMinAttribute = UnityEngine.PostProcessing.MinAttribute;

namespace UnityEditor.PostProcessing
{
    [CustomPropertyDrawer(typeof(PPMinAttribute))]
    sealed class MinDrawer : PropertyDrawer
    {
        public override void OnGUI(Rect position, SerializedProperty property, GUIContent label)
        {
            PPMinAttribute attribute = (PPMinAttribute)base.attribute;

            if (property.propertyType == SerializedPropertyType.Integer)
            {
                int v = EditorGUI.IntField(position, label, property.intValue);
                property.intValue = (int)Mathf.Max(v, attribute.min);
            }
            else if (property.propertyType == SerializedPropertyType.Float)
            {
                float v = EditorGUI.FloatField(position, label, property.floatValue);
                property.floatValue = Mathf.Max(v, attribute.min);
            }
            else
            {
                EditorGUI.LabelField(position, label.text, "Use Min with float or int.");
            }
        }
    }
}

デフォルトで入っているDemoシーンと、ダウンロードして読み込んだMKGlassExample0MKGlassExample1の3種類のデモを見ることができます。

シンプルなデモシーンです。

f:id:am1tanaka:20191211183259p:plain
Demo

オブジェクトの種類や、シェーダーの設定をリアルタイムに変更してみることができるデモです。

f:id:am1tanaka:20191211183313p:plain
MKGlassExample0

WASDで移動、マウスで見回しができるデモです。音が足りないようで、一歩歩くごとにWarningが表示されます・・・^^;

f:id:am1tanaka:20191211183330p:plain
MKGlassExample1

氷を作ってみる

できることはおおよそ分かったので、氷のブロックを作ってみます。あれこれいじれるMKGlassExample0シーンを利用しました。

  • 新規にMaterialを作成して、IceBlockなどの名前にします
  • 作成したIceBlockマテリアルをクリックして選択します
  • InspectorウィンドウのShader設定を、MK > Glass > Defaultの順にクリックして設定します

f:id:am1tanaka:20191211212142p:plain
Glassシェーダー

マテリアルは、Main Cameraにアタッチされているスクリプトで切り替えたりしているので、そこに作成したIceBlockマテリアルを設定します。

  • Hierarchyウィンドウで、Main Cameraをクリックして選択します
  • Projectウィンドウで、作成したIceBlockマテリアルをドラッグして、InspectorウィンドウのMK Glass Example 0 ControlコンポーネントにあるBase MaterialsElement 0にドロップします

f:id:am1tanaka:20191211212222p:plain
マテリアルを設定

Playするとこんな感じになりました。見回してみるとすでにピカピカしてます。

f:id:am1tanaka:20191211212252p:plain
デフォルトのままのGlassシェーダー

左上のボタンをクリックすると設定バーが表示されます。凹凸がないので、現状で有効なのはSpecular(光の反射)とReflection(周囲の景色の反射)ぐらいです。

f:id:am1tanaka:20191211212714p:plain
パラメーターをいじる

デコボコさせてみる

デコボコを作るには、Normalマップのテクスチャーを利用します。サンプルには、以下のような12個のNormalマップが入っています。

f:id:am1tanaka:20191211213224p:plain
Normalマップテクスチャー

先ほど作成したIceBlockNormal map欄の左の四角に、これらのNomalマップテクスチャーをドラッグ&ドロップするとCubeがデコボコになります。

f:id:am1tanaka:20191211214810p:plain
Normalマップをアタッチ

Playを停止して、Sceneウィンドウで確認するのが手っ取り早いです。

f:id:am1tanaka:20191211214856p:plain
デコボコ具合の確認

一通り見てみると分かるのですが、規則的な模様が入っているものがほとんどで、自然の氷っぽい表現のものはWall0_Nか、

f:id:am1tanaka:20191211215138p:plain
Wall0_N

wall01normalぐらいです。

f:id:am1tanaka:20191211215152p:plain
wall01normal

ちょっと物足りない感じ。ということで、ProTexの出番です!

ProTexでデコボコを作る

ProTexをダウンロードしてインポートします。無料なので助かります!

  • ProjectウィンドウのCreateから、ProTex > ProTex Textureを選択して、ProTex Textureを作成して、名前をIceNormalなどにします

f:id:am1tanaka:20191211220315p:plain
ProTex Texture

  • InspectorウィンドウのOpenボタンをクリックして、エディターを開きます

f:id:am1tanaka:20191211220413p:plain
ProTexテクスチャー

ノイズを利用します。ProTexでは、以下の5種類のノイズが作成できます。

f:id:am1tanaka:20191211220648p:plain
ノイズ

今回の用途だとFBM Noiseがよさそうです。他のはクリックして選択したら[Delete]キーで削除します。

  • FBM Noiseoutをドラッグして、Outputnormalでボタンを離します

f:id:am1tanaka:20191211220856p:plain
ノイズをNormalへ

これで、ノイズを使ったNormalマップが作成できました。ProTexウィンドウを閉じます。

Inspectorウィンドウでテクスチャーを作成します。サイズは512x512も必要なさそうなので、少し小さくします。

  • Texture Size 256x256などに変更します。オブジェクトをどのぐらいの大きさで表示するかに応じて変更してください

f:id:am1tanaka:20191211221301p:plain
テクスチャーサイズを設定する

  • Generate Normalをクリックして、画像として保存します

以上で、自作のNormalマップができました。これをIceBlockにアタッチします。

f:id:am1tanaka:20191211221436p:plain
自作のNormalマップによる氷

先ほどより、柔らかい感じの表面になりました。

イメージする感じに近づくようにProTexウィンドウでサイズなどを調整していきます。ProTexに変更を加えたら、先ほどGenerateしたテクスチャーを削除してから、テクスチャーサイズを再設定してGenerateし直します。

f:id:am1tanaka:20191211221919p:plain
パラメーターを変更したら、Apply Changesをクリックするのを忘れずに!

作例

海の上に円盤状の氷を浮かべて、ペンギンを乗せてみました。

f:id:am1tanaka:20191211230909g:plain
完成!

水面はDefinitive Stylized Water - Asset Storeを利用しました。これもお気に入りのアセットで、使い方をこちらにまとめています。

assetstore.unity.com

ペンギンはSuriyunさんのPenguins - Asset Storeを利用しました。

assetstore.unity.com

こちらは、Low Poly Series: Caverns - Asset Storeと組み合わせた例です。

f:id:am1tanaka:20191213211857p:plain
洞窟のクリスタル

クリスタルのシェーダーをMK Glassに変更しました。

assetstore.unity.com

まとめ

MK Glassで氷を作ってみました。設定はマテリアルをいじれば確認できるのでとても簡単です。これで得点用のクリスタルも作ったりしようと考えています。

今回のようにProTexでNormalマップを作れば、応用範囲は広がります。CC0のPBRテクスチャーサイトなどから入手するのもよさそうです。

こんな感じで活躍してます!

f:id:am1tanaka:20191211231607p:plain
VoxelorerBirdの氷ブロック

参考URL