【Unity/パーティクル】雨を作る方法

2018年08月08日 2018年12月19日

Unityで雨を作り、STYLYへアップロードするまでの手順を解説します。 ※サンプルプロジェクトはこちらから：https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/Rain

Unityの頂点シェーダーを使った雨のサンプル

1 雨の作り方の解説
2 メッシュ作成
3 実際にメッシュを作ってみる
4 三角形メッシュに動きを与える
5
6 雨の見た目の調整
7 STYLYへアップロード
8

雨の作り方の解説

雨の作成に入る前に、どうやって雨を作るのかを軽く解説いたします。以下の3STEPで雨を作ります。

三角形メッシュを大量に作成
並べた三角形メッシュを高速で揺らす
色を調整すると雨っぽく見えます(完成)

三角形をメッシュを大量に作成します

三角形メッシュをプログラムで作成

立方体を埋める形で大量の細かい三角形メッシュを並べています。

三角形メッシュを高速で揺らします

頂点シェーダーで三角形メッシュを揺らす

頂点シェーダーで頂点を揺らします。

色味を調整すると雨っぽい(完成)

色を調整し、雨っぽい見た目にして完成

メッシュを水色の半透明にすると雨っぽい見た目になって完成です。

メッシュ作成

ここから、実際に雨を作る手順の解説をしていきます。まずはメッシュを作成します。

プログラムで大量の三角形メッシュを作成

準備

今回は三角形メッシュを作成するために２つのC#スクリプトを使用します。ここでは、2つのC#スクリプトを追加する手順を解説します。

スクリプト1 : RandomMesh.cs の作成

まずはProjectウィンドウ上で右クリックしてC#スクリプトを作成します。

C#スクリプト作成

名前をRandomMeshにします。

作成したスクリプトの確認

スクリプトRandomMeshを開き、中身を以下のように書き換えます。

using UnityEngine;
using System.Collections.Generic;

[RequireComponent(typeof(MeshRenderer))]
[RequireComponent(typeof(MeshFilter))]
public class RandomMesh : MonoBehaviour
{
    const string k_MeshName = "[Generated]RainMesh"; // メッシュの名前
    [SerializeField, Header("雨粒の数")] int m_TriangleCount = 1500; // 三角形の個数
    [SerializeField, Header("雨粒の大きさ")] float m_TriangleScale = 0.3f; // 三角形の大きさ
    [SerializeField, Header("雨全体のバラつき")] Vector3 m_TriangleRange = new Vector3(4f, 4f, 4f); // メッシュの大きさ
    [SerializeField, HideInInspector] string m_OnCreateText = "メッシュ情報がありません\nメッシュを更新してください";

    public int TriangleCount { get { return m_TriangleCount; } }
    public float TriangleScale { get { return m_TriangleScale; } }
    public Vector3 TriangleRange { get { return m_TriangleRange; } }
    public string OnCreateText { get { return m_OnCreateText; } set { m_OnCreateText = value; } }

    /// <summary>
    /// メッシュの新規作成 
    /// </summary>
    public Mesh CreateNewMesh()
    {
        Vector3[] vertices = new Vector3[m_TriangleCount * 3]; // 頂点の座標
        int[] triangles = new int[m_TriangleCount * 3]; // 頂点インデックス
        Vector3[] normals = new Vector3[vertices.Length];
        int pos = 0;
        for (int i = 0; i < m_TriangleCount; i++)
        {
            var v1 = Vector3.Scale(new Vector3(Random.value, Random.value, Random.value) - Vector3.one * 0.5f, m_TriangleRange);
            var v2 = v1 + new Vector3(Random.value - 0.5f, 0f, Random.value - 0.5f) * m_TriangleScale;
            var v3 = v1 + new Vector3(Random.value - 0.5f, 0f, Random.value - 0.5f) * m_TriangleScale;

            vertices[pos + 0] = v1;
            vertices[pos + 1] = v2;
            vertices[pos + 2] = v3;
            pos += 3;
        }

        for (int i = 0; i < triangles.Length; i++)
        {
            triangles[i] = i;
        }

        for (int i = 0; i < normals.Length; i++)
        {
            normals[i] = new Vector3(0f, 1f, 0f);
        }
        
        //メッシュ生成
        var mesh = new Mesh();
        mesh.vertices = vertices;
        mesh.triangles = triangles;
        mesh.normals = normals;

        return mesh;
    }

}

スクリプトRandomMeshはこれで完成です。

スクリプト2 : RandomMeshInspector.cs の作成

同様の手順で、スクリプトRandomMeshInspectorも作成します。

スクリプトを開く

スクリプトRandomMeshInspectorの中身を以下のように書き換えます。

using UnityEngine;
using UnityEditor;
using UnityEditor.SceneManagement;
using System.IO;

// エディター拡張
[CustomEditor(typeof(RandomMesh))]
public class RandomMeshInspector : Editor
{
    const string k_ExportMeshName = "[Generated]RainMesh"; // 保存するメッシュの名前
    static readonly Color k_ButtonColor = Color.yellow;
    static readonly Color k_ButtonTextColor = Color.white;

    /// <summary>
    /// インスペクタの描画
    /// </summary>
    public override void OnInspectorGUI()
    {
        if (PrefabUtility.GetPrefabType(target) != PrefabType.Prefab)
        {
            EditorGUILayout.HelpBox("雨の設定はPrefab上でのみ可能です。 \nYou must edit settings via Prefab.", MessageType.Info);
            return;
        }

        var defaultColor = GUI.color;
        var defaultContentColor = GUI.contentColor;

        var randomMesh = target as RandomMesh;

        // メッシュ情報 表示
        EditorGUILayout.BeginVertical("Box");
        EditorGUILayout.LabelField(randomMesh.OnCreateText, GUILayout.Height(54f));
        EditorGUILayout.EndVertical();

        // 色を変更
        GUI.color = k_ButtonColor;
        GUI.contentColor = k_ButtonTextColor;

        if (PrefabUtility.GetPrefabType(target) == PrefabType.Prefab)
        {
            if (GUILayout.Button("メッシュの更新"))
            {
                EditorCreateMesh();
            }
        }

        // 元に戻す
        GUI.color = defaultColor;
        GUI.contentColor = defaultContentColor;

        base.DrawDefaultInspector();
    }

    /// <summary>
    /// メッシュを作成し、保存する
    /// </summary>
    [ContextMenu("Create Mesh")]
    void EditorCreateMesh()
    {
        var randomMesh = target as RandomMesh;
        var meshFilter = randomMesh.GetComponent<MeshFilter>();

        // 古い内蔵メッシュを削除
        var meshAssets = AssetDatabase.LoadAllAssetsAtPath(AssetDatabase.GetAssetPath(randomMesh));
        foreach (var meshAsset in meshAssets)
        {
            if (meshAsset is Mesh)
            {
                Object.DestroyImmediate(meshAsset, true);
            }
        }

        // メッシュ作成
        var newMesh = randomMesh.CreateNewMesh();
        newMesh.name = k_ExportMeshName;
        meshFilter.sharedMesh = newMesh;

        // メッシュを内蔵させる
        AssetDatabase.AddObjectToAsset(newMesh, randomMesh);

        randomMesh.OnCreateText = string.Format(
            "【現在のメッシュ情報】\n・雨の粒の数:{0}\n・雨の粒の大きさ:{1}\n・雨全体の大きさ: {2}",
            randomMesh.TriangleCount,
            randomMesh.TriangleScale,
            randomMesh.TriangleRange
        );

        // 保存
        AssetDatabase.SaveAssets();
        AssetDatabase.Refresh();
    }


    /// <summary>
    /// メッシュの保存パスを生成(Prefabと同階層)
    /// </summary>
    string GenerateMeshPath()
    {
        var path = AssetDatabase.GetAssetPath(target);
        var parentFullPath = Directory.GetParent(path).FullName;
        var parentPath = "Assets" + parentFullPath.Substring(Application.dataPath.Length);
        var assetPath = parentPath + Path.DirectorySeparatorChar + k_ExportMeshName; // アセットの保存先パス
        return assetPath;
    }
}

以上で２つのC#スクリプトの作成は完了です。

実際にメッシュを作ってみる

次に、三角形メッシュを実際に作ってみます。

三角形メッシュ

Rainオブジェクトの作成

HierarchyウィンドウでGameObjectを作成します.

空オブジェクトを作成

オブジェクトの名前をRainにします.

名前の変更

名前変更後のオブジェクト

コンポーネントRandomMeshをくっつける

RainオブジェクトにRandomMeshコンポーネントを追加します。

コンポーネントRandomMeshの追加

コンポーネントを追加するとInspectorが以下のような表示になります

追加前と追加後のInspectorウィンドウの比較

コンポーネントの確認

RainオブジェクトをPrefab化する

次にRainオブジェクトをPrefab化します。 HierarchyウィンドウのRainオブジェクトをProjectウィンドウへドラッグ＆ドロップします

ドラッグアンドドロップでPrafabを作成

Prefabが作成されます。

作成されたPrefab

メッシュ作成

RainのPrefabを選択した状態でInspectorウィンドウ上の「メッシュの更新」ボタンをクリックします。

ボタンを押してメッシュ更新

三角形メッシュがたくさん表示されます。

作成されたメッシュ

メッシュがピンク色になる原因

メッシュの色がピンク色になっていますが、これはRainオブジェクトのMeshRendererに マテリアルが登録されていないことが原因です。

マテリアルの有無の比較

マテリアルを登録することで色味を調整することができるようになります。

MeshRenderにマテリアルを登録する

MeshRendererへマテリアルを登録する手順を解説します。 MeshRendererのMaterialsの部分をクリックします。

Materialsをクリックして開く

マテリアルの登録箇所

Materialsの丸ポチの部分をクリックすると、マテリアル一覧ウィンドウが表示されるので登録したいマテリアルを選択します。

Default-Diffuseマテリアルを登録

Default-Diffuseを選択するとDefault-DiffuseマテリアルがMeshRendererに登録されます。

マテリアル登録後の三角形メッシュ

Default-Diffuseマテリアルを登録した場合、白色になります。

三角形メッシュに動きを与える

次にメッシュに動きを与えることでより雨らしくなります。ここでは、三角形メッシュに動きを与える手順を解説します。

カスタムシェーダーで動きを作る

今回は、カスタムシェーダーを利用して頂点を動かし、雨っぽい動きを与えます。

三角形メッシュとカスタムシェーダーを組み合わせて雨を作る

カスタムシェーダーの作成

ここからは実際にカスタムシェーダーを作成する手順を解説します。

Rainシェーダー

まずはProjectウィンドウのCreateをクリックします。(Projectウィンドウ上での右クリックでもOK)

Createをクリック

Shader/Standard Surface Shaderを選択します。

Standard Surface Shaderを選択

シェーダが出現するので、名前をRainにします。

シェーダーの名前をRainにする

シェーダーファイルの編集

シェーダーRainを開きます。

シェーダーRainをダブルクリック

シェーダーRain.shaderを以下のように書き換えます。

Shader "Custom/Rain" {
    Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {}
        _Speed ("［VS］雨が落ちる速さ", Float) = 6.0 
        _Scale ("［VS］雨の高さ", Float) = 4.0
		_Remap("［VS］Remap", Range(0.0, 1.0)) = 0.7
        [Space]
        _Albedo ("［FS］雨 色", Color) = (1.0, 1.0, 1.0, 0.5) 
        _Emission ("［FS］雨 発光色", Color) = (0.0, 0.0, 0.0, 0.0) 
        _Specular ("［FS］雨 スペキュラーパワー", Range(0.0, 1.0)) = 0.5 
        _Gloss ("［FS］雨 スペキュラー強度", Range(0.0, 1.0)) = 0.5 
	}

    SubShader {
        Tags {
            "Queue" = "Transparent"
            "RenderType" = "Transparent"
        }
        CGPROGRAM
        #pragma surface surf Lambert alpha
        #pragma vertex vert

        sampler2D _MainTex;

        // [0;1]のランダムな値を返す関数
        float nhash11(float n){
            return frac(sin(n) * 43758.5453);
        }

        // 値域[a;b] を 値域[0;1]へ変換する関数
        float remap(float t, float a, float b){
            return clamp((t-a)/(b-a), 0, 1);
        }
        // 頂点シェーダー
        half _Speed;
		half _Scale;
		half _Range;
		fixed _Remap;

        // 色
        half4 _Albedo;
        half4 _Emission;
        fixed _Specular;
        fixed _Gloss;


        // 頂点シェーダー関数
        void vert(inout appdata_full v) {
            fixed rnd = nhash11(fmod(v.vertex.z, 512.0)); // ランダム値
			//float timer = _Time.w * _Speed * remap(0.7, 1.0, rnd);
			float timer = _Time.w * _Speed * remap(_Remap, 1.0, rnd); // 値域の変換 [_Remap, 1.0] -> [0;1]
            v.vertex.y -= fmod(-v.vertex.y + timer, _Scale) + v.vertex.y - _Scale * 0.5;
            // v.vertex.y -= fmod(-v.vertex.y + timer, 4.0 / _Range) + v.vertex.y - _Scale * 0.5;
        }

        struct Input {
            float2 uv_MainTex;
        };

        // サーフェースシェーダー関数
        void surf(Input IN, inout SurfaceOutput o) {
            half4 c = tex2D(_MainTex, IN.uv_MainTex);
            o.Albedo = c.rgb * _Albedo.rgb;
            o.Emission = _Emission; 
            o.Specular = _Specular; 
            o.Gloss = _Gloss; 
            o.Alpha = _Albedo.a; 
        }
        ENDCG
    }
}

以上でシェーダーの編集は完了となります。