はじめに
UnityのShaderLabを使って流れる雲を作る方法を説明します。
UVスクロールを使うことで雲がアニメーションします。
ノーマルマップを使うことで影をつけます。
テクスチャを作る
雲のテクスチャ
雲のテクスチャを作成します。今回はGIMPで作成します。
- ファイル>新しい画像
- 今回はサイズを2048pxとしました
- レイヤー>透明部分>アルファチャンネルの追加
- 背景画像を削除して透明にする
- フィルター>下塗り>ノイズ>ソリッドノイズ
- Tileableにチェック
- 色>色を透明度に
- Color : 黒を選択
- ファイル>名前を付けてエクスポート
- 今回は「Cloud.png」という名前でエクスポートします
ノーマルマップ
- 雲のテクスチャで白黒画像を作るところまでは同様です
- フィルター>汎用>法線マップ
- Scaleを適当に調整します
- ファイル>名前を付けてエクスポート
- 今回は「CloudNormal.png」という名前でエクスポートします
- UnityでTexture Type : Normal map に設定
マスクテクスチャ
外側を透明にするためのテクスチャを作成します。
真ん中は不透明で外側は透明なテクスチャです。
今回は「CloudMask.png」という名前で作成します。
モデルの作成
天球モデルを作成します。今回はBlenderで作成します。
- Add>Mesh>UV Sphere
- 下半分を削除します
- Object>Shade Smooth
- Add Modifier>Subdivision Surface
- モディファイアを適用
- UV>Unwrap
- File>Export>FBX
- 今回は「Cloud.fbx」という名前でエクスポートします
シェーダーの作成
Unityでシェーダーを作成します
- Create>Shader>Standard Surface Shader
以下のように記述します
Shader "Custom/Cloud" { Properties { // 色 _Color("Color", Color) = (1,1,1,1) // メインテクスチャ _MainTex("Albedo (RGB)", 2D) = "white" {} // ノーマルマップスケール _BumpScale("Normal Scale", Float) = 1.0 // ノーマルマップ [Normal] _BumpMap("Normal Map", 2D) = "bump" {} // マスクテクスチャ _MaskTex("Mask", 2D) = "white" {} // スクロールX速度 _ScrollX("Scroll X Speed", float) = 0 // スクロールY速度 _ScrollY("Scroll Y Speed", float) = 0 } SubShader { // 透過 Tags { "RenderType" = "Transparent" "Queue" = "Transparent" } LOD 200 // 背面も表示 Cull Off CGPROGRAM // Physically based Standard lighting model, and enable shadows on all light types // 透過 #pragma surface surf Standard fullforwardshadows alpha:blend // Use shader model 3.0 target, to get nicer looking lighting #pragma target 3.0 sampler2D _MainTex; struct Input { float2 uv_MainTex; float2 uv_BumpMap; float2 uv_MaskTex; }; fixed4 _Color; float _ScrollX, _ScrollY; sampler2D _MaskTex; sampler2D _BumpMap; half _BumpScale; // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader. // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing. // #pragma instancing_options assumeuniformscaling UNITY_INSTANCING_BUFFER_START(Props) // put more per-instance properties here UNITY_INSTANCING_BUFFER_END(Props) void surf(Input IN, inout SurfaceOutputStandard o) { // UVスクロール量を計算 float2 scroll = float2(_ScrollX, _ScrollY) * _Time.y; // Albedo comes from a texture tinted by color fixed4 c = tex2D(_MainTex, IN.uv_MainTex + scroll) * _Color; o.Albedo = c.rgb; // ノーマルマップを計算 o.Normal = UnpackScaleNormal(tex2D(_BumpMap, IN.uv_BumpMap + scroll), _BumpScale); // マスク fixed4 mask = tex2D(_MaskTex, IN.uv_MaskTex); o.Alpha = c.a * mask.a; } ENDCG } FallBack "Diffuse" }
マテリアルの作成
Unityでマテリアルを作成します。
- Create>Material
- 今回は「Cloud.mat」という名前で作成します
- Shader : Custom/Cloud
- Albedo : Cloud.png
- Normal Map : CloudNormal.png
- Mask : CloudMask.png
- Scroll X/Y : 適当な値
モデルの配置
Unityでモデルを配置します
- Cloud.fbxをシーンに配置
- Scallは今回500にしました
- Mesh Renderer>Materials : Cloud.mat
参考サイト
- https://styly.cc/ja/tips/unity_flowingcloud/
- https://qiita.com/kaiware007/items/ffe7c546bc71136cf8da
