【Unity2020.2 / VFX Graph】HDRPサンプルの蝶のVFXを読んでみる

はじめに

Unity 2020.2 HDRP のサンプルプロジェクトを見ると、

きれいなお部屋の中を歩き回ることができます。

このお部屋、竹の根元に蝶々がいます。かわいい。

蝶々

この蝶々はVFX Graph で作られています。

VFX Graph

今回は この VFX Graphを読んでいきたいと思います。

Inspector上の設定

Visual Effect コンポーネントを見ると、以下のような設定になっています。

Visual Effect コンポーネント

Rendering Layer Mask

Rendering Layer Maskの部分が Mixed... になっているのが気になります。

Rendering Layer Mask

二つのLayerのチェックがONになっている

Rendering Layer Maskを変えてみる

蝶々を拡大すると、以下のような表示になっています。

初期設定

Rendering Layer Mask を Decal Layer default のみ有効にすると、白っぽい感じになります。

Light LayerDefault を有効にすることで、VFXの描画結果がライトの影響を受けるようになるみたいです。

Light LayerDefaultのみをONにすると以下のような表示になります。

Light LayerDefaultのみに設定

Properties

続いては、Propertiesを見てみます。

Properties

パラメータは以下のようなものを表しているようです。

プロパティ	意味
Count	蝶々の生成数
Radius	蝶々を生成する位置の半径
Wing Animation Speed	蝶々の羽ばたくアニメーションの速さ

VFX Graphのプロパティからアニメーションを制御できるのが興味深いと思いました。

VFX Graphの中を見てみる

次は、VFX GraphアセットButterFliesの中を覗いていきます。

VFX Graph

コンテキスト

ButterFlies アセットの中身は以下のようになっています。

VFX Graph の 4つのコンテキスト

コンテキスト	やっている内容
Spawn	蝶の生成
Initialize	蝶の初期化
Update	蝶を動かす
Output	蝶を画面に出す

Spawn

Spawn コンテキストでは、 Single Burst ブロックが使用されています。

VFX開始時に、一度だけ Count 分の蝶を生成しています。

Spawn コンテキスト

Initialize Particle

その次のInitialize Particle コンテキストは以下のようになっています。

Initialize Particle コンテキスト

Initialize Particle コンテキストには、以下のようなブロックが接続されています。

ブロック	やっている内容
Add Position (Shape: Sphere)	蝶の初期位置を、球内部のランダムな位置に設定する
Set Direction	蝶の向きを設定
Set Tex Index	蝶のテクスチャ番号設定
Add Velocity from Direction & Speed (Random Direction)	速度を足す

Add Position

蝶の初期位置を、球内部のランダムな位置に設定しています。

 

Set Direction

SetDirectionブロックでは、位置と外積を利用して、球に沿って下方向へ向かうような向きを設定しています。

やっていることがやや複雑なので紐解いていきます。

SetDirectionブロック

Set Directionへ設定しているベクトルデータ(Houdiniで可視化)

Get Attribute : position current

Get Attribute は パーティクルが持つ情報(Attribute)を取得するノードです。

今回は position currrent(現在の座標)を取得しています。

今回、蝶(パーティクル)は球の内部にまばらに存在しています。

Houdiniを使って可視化してみると、以下のようになるでしょうか。

球の内部にまばらに存在する点

Normalize (Vector3)

Normalizeはベクトル長を1にする(正規化)を行うノードです。

Normalize で 座標を正規化

座標にNormalizeをかけると、点は半径1の球の表面に並びます。

Cross Product (Vector 3)

Cross Product は　ベクトルの外積を行うノードです。

Cross Product

外積結果を黄色い線として、表示してみると以下のようになります。

時計周りの向きになります。

さらにこのベクトルを、元の座標と外積しています。

座標とベクトルの外積

ベクトルの計算結果は以下のようになります。

球に沿って下方向に向かうベクトルになりました。

ノードだけを見るとなかなかイメージがつかみにくいですが、可視化すると分かりやすいですね。

最終的に得られるベクトル

このベクトルは、Set Direction ブロックへ入力されます。

つまり、蝶は最初は下を向いているということになります。

Set Direction へ入力

実際のノードと、ベクトルの可視化を並べてみました。

ノードとベクトルの対応

Set Tex Index

Set Tex Index ブロック

この蝶々の元素材は以下のようなテクスチャシートになっています。

蝶々の元素材

Set Tex Indexブロックでは、テクスチャシートの左から何番目のテクスチャを使うか、という番号を設定した物になります。

Add Velocity from Direction & Speed (Random Direction)

このブロックは、パーティクルのDirectionの方向に対して、ランダムな速度を加算しています。

先ほど、Set Direction ブロックにて以下のようなベクトルを設定していたので、

球に沿って下方向に対して、長さ0.2 ~ 1.0 のランダムな速度が足されることになります。

Add Velocity ブロック

加算される速度の向き

以上で Initialize Particle コンテキストは終わりとなります。

次に Update Particle コンテキストを見ていきます。

Update Particle コンテキスト

Update Particle コンテキスト

Updateコンテキストでは、以下のようなブロックが接続されています。

ブロック	やっている内容
Force	力を足す
Turbulence	速度に乱流を与える
Set Velocity	速度が0.5を下回らないように制限を加える
Set Scale.XY	パーティクルの大きさの設定
Set Pivot.X	メッシュのピボットを設定 (メッシュの回転の中心位置を決める)

Force

Forceブロックでは、蝶にかかる外力を設定しています。

Forceブロック

PositionとDirectionの外積

PositionとDirectionの外積

ノードだけ見てもよくわからないので、Houdiniを使って可視化してみます。

Direction

Initialize コンテキストにて設定したDirectionですが、

時間が経過するとパーティクルは移動し、以下のようにバラバラな向きになります。

どのパーティクルも、下方向になっています。

PositionとDirectionの外積をとると、球に沿ったベクトルになります。

つまり、原点(0,0,0)の周りをグルグル回るようなベクトルになります。

別の角度から見た場合

横方向ベクトルへランダム値を乗算

ここで求めた横方向ベクトルに、パーティクルごとのランダムな数値を乗算し、

速度に揺らぎを持たせています。

ランダム値の乗算

中心へ向かう引力

先ほどにベクトルに対して、座標(position) の符号を反転したものを加算しています。

これは原点へ向かって引き寄せる力になります。

符号反転した座標を加算

座標は正規化せずに符号反転したものを使っているので、

パーティクルが原点から離れるほど強い引力になり、

パーティクルが原点に近づくと弱い引力になります。

中心へ向かう引力

最終的には以下のようなベクトルが外力となります。

横方向ベクトルを灰色、 中心へ向かうベクトルを黄色で表しています。

中心へ向かう引力(黄色) と 回転の力(灰色)

Turbulence

Turbulenceブロックではパーティクルに乱流を与えるもので、

蝶の動きに揺らぎを与えます。

Turbulenceブロック

Set Velocity

Set Velocityはパーティクルの速度を上書きするものです、

パーティクルの速さ(VelocityのLength)が0.5を下回らないように制限を与えています。

Set Velocity

Set Scale / Set Pivot

ここでは、パーティクルのスケールやピボットを設定しています。

0.45や0.6という謎の数字が登場しますが、アートの都合によってこのような数値になったのだと思います。

Set Scale / Set Pivot

Set Pivotを外してみた

通常の蝶はこのような表示になっていますが、

蝶の表示

Set Pivot を無効にすると、以下のようないびつな表示になってしまいます。

以上でUpdate Particleは終わりとなります。

次にOutput 系のコンテキストを見ていきます。

Output コンテキスト

Output Particle Lit Quad

Orient Adnvanced (羽の向きの設定)

パーティクルの向きの設定は Orient Adnvanced ブロックで行っています。

向きの設定

 

Axis Z、Axis Y の挙動について

Axis Z や Axis Y を設定した際のメッシュの向きは以下のようになります。

メッシュの面はAxisZを向き、メッシュの上方向はAxisYに一致するようにメッシュ自体が回転します

Z軸を変えた時のパーティクルの向き

Y軸を変えた時のパーティクルの向き

ちなみに、パーティクルのローカルのX軸(赤い線)は, Axis Z と Axis Y外積に一致しています。

パーティクルのX方向はZ, Y の外積に一致

蝶の羽の向き

今回の蝶パーティクルのAxis は以下のように設定されています。

• Axis Z : 進行方向に対して横向き
• Axis Y : 上方向

蝶の羽メッシュとAxisの対応関係

向きの設定

蝶のはばたき

蝶の羽ばたきは、Add Potision や Set Angle.Y によって実装されています。

Y方向の位置変化(Add Position) + 羽の回転(Set Angle.Y) をSine波で動かすことで羽ばたきを表現しています。

Add Position / Set Angle.Y

羽ばたきの実装

羽ばたき

Sine波が大きくなると、羽が大きく広がり、蝶も早く移動するような実装になっています。

Angle.Y = 0 だと、羽が完全に閉じた状態になります。

Angle.Y = 0の場合

Set Angle.X

最後のSet Angle.X は、羽のX回転を設定しています。

Set Angle.X

以下のような軸で回転します。

回転の軸

関連

Unity 2020.2 TECH ストリームがダウンロード可能になりました

Unity 2020.2 TECH Stream is now available for download (unity3d.com)

【Unity2020.2】URP向けのグレースケールPostEffectを作る

はじめに

Unity 2020.2 の Universal RP 向けのグレースケールポストエフェクトを作ってみました。

グレースケールをかける前

グレースケールをかけた後

環境

Unity 2020.2
Universal RP 10.2.2

ポストエフェクトに必要なもの

Universal RP でポストエフェクトを実装する際、以下のようなデータを扱うことになります。
・Universal Render Pipeline Asset
・Forward Renderer Data
・ポストエフェクト用シェーダー (.shader)
・RendererFeature (C#スクリプト)

ポストエフェクト実装の流れ

1. ポストエフェクト用シェーダー (.shader)を作る
2. ポストエフェクトを実行するRendererFeatureを作る
3. ForwardRendererDataを作成し、RendererFeatureをそこへ登録する
4. Universal Render Pipeline アセットにForwardRendererDataを登録
5. シーンのCameraコンポーネントから、使用したいForwardRendererDataを選択
6. 画面にグレースケールがかかるようになる

イメージとしては以下のようになります。

Forward

グレイスケールを実装したRendererFeature

グレースケールエフェクトを作ってみる

1 : ポストエフェクト用シェーダー

画面色のR, G, B からグレースケールを計算するシェーダーを作成します。

今回は CIE XYZ を利用してグレースケールを計算しました。

参考 : グレースケール画像のうんちく - Qiita

以下のシェーダーを Grayscale.shader としてUnityプロジェクト内に保存します。

Shader "PostEffect/Grayscale"
{
    Properties
    {
        [HideInInspector] _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                return dot(col.rgb, fixed3(0.2126, 0.7152, 0.0722));
            }
            ENDCG
        }
    }
}

2 : RendererFeature

次に、カメラのレンダリング結果にグレースケールを適用するRendererFeatureを実装します。
以下のスクリプトを Grayscale.cs としてUnityプロジェクト内に保存します。

using UnityEngine;
using UnityEngine.Rendering;
using UnityEngine.Rendering.Universal;

public class Grayscale : ScriptableRendererFeature
{
    [System.Serializable]
    public class GrayscaleSetting
    {
        // レンダリングの実行タイミング
        public RenderPassEvent renderPassEvent = RenderPassEvent.AfterRenderingTransparents;
    }

    /// <summary>
    /// Grayscale実行Pass
    /// </summary>
    class GrayScalePass : ScriptableRenderPass
    {
        private readonly string profilerTag = "GrayScale Pass";

        public Material grayscaleMaterial; // グレースケール計算用マテリアル

        public override void Execute(ScriptableRenderContext context, ref RenderingData renderingData)
        {
            var cameraColorTarget = renderingData.cameraData.renderer.cameraColorTarget;

            // コマンドバッファ
            var cmd = CommandBufferPool.Get(profilerTag);

            // マテリアル実行
            cmd.Blit(cameraColorTarget, cameraColorTarget, grayscaleMaterial);

            context.ExecuteCommandBuffer(cmd);
        }
    }

    [SerializeField] private GrayscaleSetting settings = new GrayscaleSetting();
    private GrayScalePass scriptablePass;

    public override void Create()
    {
        var shader = Shader.Find("PostEffect/Grayscale");
        if (shader)
        {
            scriptablePass = new GrayScalePass();
            scriptablePass.grayscaleMaterial = new Material(shader);
            scriptablePass.renderPassEvent = settings.renderPassEvent;
        }
    }

    public override void AddRenderPasses(ScriptableRenderer renderer, ref RenderingData renderingData)
    {
        if (scriptablePass != null && scriptablePass.grayscaleMaterial != null)
        {
            renderer.EnqueuePass(scriptablePass);
        }
    }
}

3 : Forward Renderer Data の作成

Forward Renderer Data を作成します。

Forward Renderer Data は以下のような名前にしてみました。

作成した Forward Renderer Data

4 : Forward Renderer Data を PIpeline Asset へ登録

Univesal Render Pipeline Asset へ　STEP1で作成したForward Renderer Data を登録します。

Forward Renderer Data を Pipeline Assetへ登録

5 : Forward Renderer Data に Grayscale を登録

Forward Renderer Data に Grayscale を登録します。

Add Renderer Feature ボタンをクリックします。

Add Renderer Feature ボタンをクリックして、Renderer Feature を登録

ドロップダウンメニューからGrayscale を選択します。

Grayscale RendererFeatureを選択

登録された Grayscale

6 : カメラの設定

CameraコンポーネントのRenderer にて、 STEP2で PIpeline Asset に登録したForward Renderer Data を 選択します。

CameraコンポーネントのRenderer の設定

STEP2 で 登録したForward Renderer Data

結果

画面にグレースケールエフェクトが適用されます。

画面にグレースケールエフェクトが適用される

【Unity 2020.2】物陰に隠れた部分を描画する

はじめに

今回は、Unity2020.2で物陰に隠れた部分を描画する方法を紹介します。

URPのForward Renderer Dataを設定するだけで実装可能です。

物陰に隠れた部分を

環境

Unity2020.2

Universal RP 10.2.2

物影を水色にする方法

Unityが不透明のオブジェクトの描画を終えた後、

手前のオブジェクトの裏に隠れている領域だけを青く塗りつぶしています。

不透明オブジェクトを描画

物陰に隠れている領域だけを青く塗りつぶす

実装方法

次に、Unity2020.2でこれを実装する方法をご紹介します。

STEP1 : 影を描画させたいオブジェクトのLayerを設定

今回はPlayerという名前のレイヤーを作成し、球体のレイヤーをPlayerにします。

隠れた部分描画をさせたいオブジェクト(Sphere)

レイヤーをPlayerに設定

STEP2 : Materialを用意

物陰を青く塗りつぶすときに使用するMaterialを用意します。

今回は以下のような水色のUnlitマテリアルを用意しました。

Unlitマテリアル

マテリアルの名前は Color にしておきます。

作成したマテリアル

STEP3 : Forward Renderer Data  

ForwardRenderer.assetを編集すると、Universal RPの描画ロジックがカスタマイズできます。

URPテンプレートでプロジェクトを作成している場合、Settingsフォルダの中にいます。

ForwardRendererData.asset

STEP4 : Forward Renderer Data に影の描画パスを追加

今回はForwardRenderer.asset に ２つのRender Objects を登録して、以下のように設定してみました。

Render Objects の追加方法

Inspectorの下の方にある　Add Renderer Feature ボタンから Render Objects は登録できます。

RendererFeature追加ボタン

Render Objects を追加

結果

物陰に隠れている部分は、Colorマテリアルで描画され、水色になります。

物陰に隠れている部分がColorマテリアルで描画されている

Color(Render Objects)を外すと、以下のような表示になります。

Colorマテリアルの描画を外した場合

特許

特許が既に登録されているそうです(来年切れる？)

https://www.j-platpat.inpit.go.jp/web/PU/JPB_3637031/83F99CD3BABFA1C42D5F2FA913BC1CF9

関連

【Unity】LWRPで、壁で遮られて見えないキャラクターをシルエット表示するのが超簡単にできた - テラシュールブログ (hateblo.jp)

【シェーダーグラフメモ その55】ボロノイを利用した、水中コースティクス表現

 

はじめに

ShaderGraphで水中コースティクス表現を作る方法を紹介します。

コースティクス表現

ライトの向きを変えた時のコースティクス

水中コースティクスが発生する仕組み

まず最初に、水中コースティクスの発生原理を簡単に紹介します。

水の外からやってきた光が水底にぶつかると、そこにコースティクスが生まれます。

光が水底にぶつかった位置にコースティクスが発生する

光が水面のどこを通ったかが分かればコースティクスを描画できますが、

光がどこを通ってきたかは未知の情報です。

コースティクスの描画方法 (Backward Ray Tracing)

今回はBackward Ray Tracingと呼ばれる手法でコースティクスを描画したいと思います。

描画したい水底の各点から、光とは逆方向にRayを飛ばします。

逆方向にRayを飛ばす

Rayが水面にぶつかる位置をコースティクスのテクスチャ座標として利用して、

コースティクスを描画します。

Rayを水面へ向けて飛ばし、ぶつかった点の色を使う

※水へ入射する光はスネルの法則などを利用して屈折させるのが正しいですが、

今回そこは重要ではないので処理を省きます。

水面のコースティクス座標の計算

今回は計算を簡単にするため、水面は平面として扱います。

Rayが進む距離dの計算

初めに、水底にある点から出たRayが水面にぶつかるまでの距離dを計算します。

距離dは、高低差h、Rayの向きL から算出できます。

Rayの向きLは、射し込む光と真逆にします。

Rayが進む距離を求める

Rayが水面にぶつかる座標Cの計算

距離dやRay向きLなどを利用して、水面コースティクスの座標Cを計算します。

水面のコースティクスの座標を求める。

点CのXZ座標をUV座標として利用することで、水底に投影されたコースティクスが描画されます。

水面コースティクスの点の色を水底のコースティクスとして利用する

Rayを水面へ向けて飛ばし、ぶつかった点の色を使う

以上でコースティクスの実装方法の解説は終わりです。

ShaderGraphによる実装

次に、ShaderGraphで水中コースティクスを実装します。

ShaderGraph全体は以下のようになります。

ShaderGraph全体

Rayが進む距離の計算

左下の箇所では、Rayが進む距離dを計算しています。

Rayが進む距離dの計算処理

Rayが進む距離を求める

水面コースティクスの位置の計算

その右上では水面のコースティクスの座標を計算しています。

水面のコースティクスの位置(Rayが当たる位置)の計算

水面のコースティクスの座標を求める。

ボロノイの描画

求めた点Cのxz座標をUVとして、ボロノイを描画します。(Voronoiノード)

これにより、水底に投影されるボロノイが取得できます。

Rayを水面へ向けて飛ばし、ぶつかった点の色を使う

最後に、Lerpを使ってボロノイに色を付けます。

色をつける

以上でシェーダーグラフの実装は完了です。

シェーダーパラメータ

プロパティ名	説明
Light (_Light)	光の向きベクトル
WaterLevel	水面の高さ(Y座標)
CausticsScale	コースティクスの大きさ調整用パラメータ
WaterColor	コースティクス無しの水の色
LightColor	光の色(コースティクスの色)
LightIntensity	光の強度(コースティクスの強度)
VoronoiPower	ボロノイの鋭さ(Powerノードの指数部分に使用する数値

ShaderGraphパラメータ

シェーダー内の光の向き(Light)の同期

シーンに配置されたライトの向きをシェーダーのLightと同期させるロジックをC#スクリプトで書きます。

コースティクスを描画するMeshRenderが付いたGameObjectへ、以下のコンポーネントをアタッチします。

using UnityEngine;

public class MaterialSyncLight : MonoBehaviour
{
    // シェーダープロパティ _Light にアクセスするためのShaderID
    private readonly int shaderId_Light = Shader.PropertyToID("_Light");
    
    [SerializeField] private Light targetLight = null;
    private Material _material = null;
    
    void Start()
    {
        var meshRenderer = GetComponent<MeshRenderer>();
        if (meshRenderer != null)
        {
            _material = meshRenderer.material;
        }
    }

    void Update()
    {
        if (_material != null)
        {
            _material.SetVector(shaderId_Light, targetLight.transform.forward);
        }
    }
}

コンポーネント設定

Material Sync LightコンポーネントのTarget Lightには、シーン内のライト(DirectionalLight)を持たせておきます。 

シーン内のライト

ゲームを再生すると、ライトの向きとコースティクスが同期します。

ライトの向きを変えた時の、コースティクスの振る舞い

 

参考リンク

コースティクスの描画は下記リンクを参考にしました(英語)

developer.download.nvidia.com

Unityエフェクトレシピ02 - 六角形シールド表現 (2/2)

はじめに

六角形シールド表現を作る方法を紹介します。

www.youtube.com

前回の記事では、エフェクト用の3Dモデルの作り方を紹介しました。

今回の記事ではシェーダーの作り方を紹介します。

目次 

サンプルデータ

今回のエフェクトはGitHubにて公開中です。

github.com

前回作成した3Dモデル

3Dモデルの頂点には、エフェクトで使用するデータが格納されています。

アトリビュート	説明
uv	テクスチャ座標(モデル全体)
uv2	面それぞれに対して展開したテクスチャ座標
頂点カラー(Rチャンネル)	メッシュの中心から外側へ向かう、0~1のグラデーション
頂点カラー(Gチャンネル)	五角形・六角形メッシュの番号(0, 1, 2, ・・・, N)をNで割り、0~1の範囲に収まるようにしたもの

エフェクトの要素

今回のエフェクトは、6個の要素によって構成されています。

1. テクスチャ

オーラ系のテクスチャをUVスクロールで流します。

2. ライン

ラインを追加します。

3. 波紋

 

広がる波紋を追加します。

4. フレネル

球のシルエットの部分を発光させます。(フレネル効果) 

5. 頂点アニメーション

メッシュを法線方向にアニメーションさせます。

6. 文字スクロール(完成)

文字テクスチャをUVスクロールで流し、完成です。 

第2章. シェーダーの作成

ここからは、エフェクトの作り方を解説していきます。 

Part 1 :  テクスチャスクロール

STEP 1 : テクスチャをモデルに貼る

Masterノードは以下のように設定します。

テクスチャをLerpで色をつけ、マスクテクスチャを乗算します。

補足 : Lerpを使った色のブレンドについて

Lerpを使うと、色が暗い部分にはA、明るい部分にはBの色を付けるように色を混ぜることができます。

今回のシェーダーでは、以下の部分でLerpを使用しています。

STEP 2 : UVスクロール

UVに時間とVector2の数値を乗算したものを加算し、テクスチャがスクロールするようにします。

結果

テクスチャが時間経過でスクロール移動するようになります。

 

Part 2 :  ラインの追加

次に、光が流れるラインを追加します。

Step 1 : ラインを作る

3Dモデルの頂点カラーRチャンネルには以下のようなグラデーションが乗っています。

このグラデーションにStepをかけて線を作ります。

シェーダー

 頂点カラーのRチャンネルに、Stepをかけます。

 

結果

補足 : Stepノードの挙動

Stepノードは以下のようなふるまいを持っています。

• Edge < In なら 1
• Edge > In なら 0

ある値をしきい値として二値化を加えたい場合に便利なノードです。

Step 2 : 流れるグラデーションを作る 

今回は面ごとのテクスチャ座標をuv2アトリビュートとして保存していました。

このuv2を利用してグラデーションのスクロールを作ります。

ShaderGraph

UV1のX成分に時間を加算し、時間経過で移動するグラデーションを作ります。

結果

Step 3 : ラインとグラデーションを乗算する

Step1で作ったラインと、Step2のグラデーションを乗算して

ラインの上を光が流れるような表現を作ります。

Step 4 : 加算する(完成)

Part1へ今回のラインを加算すると以下のようになります。

実際のシェーダーグラフは以下になります。

Part 3 : 波紋

六角形の波紋を追加します。

頂点カラーのRチャンネルには、波紋のグラデーションが格納されていました。

今回はこれを使用します。

Step 1 : グラデーションを動かす

頂点カラーRチャンネルに時間を足し、Fractionをかけて0~1の範囲でリピートするようにします。

グラデーションが動き、以下のようになります。

Step 2 : 二値化する

グラデーションをStepで二値化します。

結果

広がるラインになります。

Step 3 : 波紋をランダムにする

ここで、頂点カラーのGチャンネルには面の番号を0~1に収まるようにした値が設定されていました。

これを利用して波紋のタイミングをランダムにずらします。

 シェーダー

頂点カラーのGチャンネルからランダム値を作り、これをグラデーションと足し合わせます。

結果

波紋の時間がランダムにずれるようになります。

Step 4

波紋をPart2と加算合成します。

結果

裏面の色を薄くする

メッシュのオモテ面とウラ面が重なった部分がゴチャゴチャしており、

見づらいものになっています。(赤線で囲った箇所)

シェーダー 

メッシュの裏表判定(Is Front Face)を利用して手前のメッシュは濃く、向こう側のメッシュは薄く表示されるようにします。

Is Front FaceノードとBranchノードを以下のように接続します。

オモテ面の場合は色をそのまま出力。

ウラ面の場合は、1より小さい値を乗算した色を出力します。

結果

ビフォーアフターを並べてみました。　右のほうが見やすいですね。

Part 4 : フレネル効果

シルエットの部分を発光させてバリアっぽい質感を加えます。

フレネルの作り方 

STEP 1 : 内積

カメラ方向ベクトルととモデル法線Nの内積(Dot Product)をとります。

カメラの手前は黒く、奥は白くなります。

今回は、両面の半透明描画なので、これだと球全体が白く表示されてしまいます。

STEP 2 : 絶対値Abs

内積値に絶対値Absを適用します。

カメラから見て球の中央は白く、フチの部分は黒くなります

STEP 3 : OneMinus

OneMinusを適用すると、フチの部分だけ白くなります。

フレネル部分のシェーダー

フレネル効果をシェーダーグラフで実装すると以下のようになります。

 

内積(Dot Product) + Abs + OneMinusでフレネルを作った後、

Pow でコントラストを調整しています。

Normal Vectorノードで法線が取れます。

全体

今回作ったフレネルは、AddでPart 3と合成します

 結果

フレネルあり・なしを並べてみました。右のほうが質感がリッチですね。

Part 5 : 頂点アニメーション

シェーダーで頂点をアニメーションさせます。

STEP 1 : sinで頂点を動かす

頂点を法線方向へsinで動かすようなシェーダーを組みます。

Add(計算結果)はMasterノードのVertex Positionの部分へ接続します。

sinカーブでメッシュが動くようになりました。

STEP 2:  頂点アニメーションをランダムにずらす

次に、六角形ごとに頂点がランダムに動くようにします。

シェーダー

STEP1で組んだシェーダーグラフに変更を加えます。

ランダム値をTimeにAddし、それをSinへ入力します。

ここでは頂点カラーGチャンネル使用していますが、

Gチャンネルには以下のような色が格納されています。

結果

頂点アニメーションのタイミングがランダムにズレるようになりました。

Part 6 : 文字スクロール

最後に文字スクロールアニメーションを加えます。

シェーダー

文字テクスチャを時間経過でスクロールさせます。

 そして、Part 5と文字テクスチャをAddで合成します。

結果

文字がスクロールするようになりました。

以上でエフェクトの完成です。

最終的なシェーダーは以下にようになります。 

Unityエフェクトレシピ 02 - 六角形シールド表現 (1/2)

はじめに

六角形シールド表現を作ってみました。

本記事では、このエフェクトの作り方を紹介したいと思います。

www.youtube.com

記事が長くなりそうなので、今回は3Dモデルの作り方のみ紹介します。

シェーダーの作り方は改めて別の記事で紹介しようと思います。

今回のエフェクトやhiplcはGitHubにて公開中です。

github.com

後編はこちら 

Unityエフェクトレシピ02 - 六角形シールド表現 (2/2) - rn.log

 

環境

Windows 10

Unity 2020.1.0b2

Houdini 18.0.460 (Indie)

第1章. 3Dモデルの作成

Houdiniを利用して、五角形や六角形を球面上にしき詰めた3Dモデルを作成します。

モデル頂点には以下のデータを持たせています。

アトリビュート	説明
uv	テクスチャ座標(モデル全体)
uv2	面それぞれに対して展開したテクスチャ座標
頂点カラー(Rチャンネル)	メッシュの中心から外側へ向かう、0~1のグラデーション
頂点カラー(Gチャンネル)	五角形・六角形の番号(0, 1, 2, ・・・, N)をNで割り、0~1の範囲に収まるようにしたもの

※ 作成したモデルデータを最終的にFBXファイルとして出力しているため、Houdini Indieライセンス以上が必要になります。 

3Dモデルの作り方 解説

STEP 1 : Sphere

Sphereノードを作成し、Primitive Type = Polygonに設定します。

STEP 2 : Divide 

Divideノードを接続し、Compute Dualのチェックを入れます。

六角形と五角形を敷き詰めたような形状になります。

STEP 3 : Subnetwork

Subnetworkの実行結果は以下のようになっています。

Subnetworkの中身はこのようになっています。順番に解説していきます。

STEP 4 : Color

Colorノードを利用し、頂点カラーを{0, 0, 0}に設定します。

STEP 5 : AttributeWrangle

プリミティブ番号(@primnum)が0 ~ 1の範囲に収まるように @numprim - 1 で割り、

結果の値は @id アトリビュートとして保存しておきます。

f@id = (float)@primnum / (@numprim - 1);

※@primnumはint型なので、float型にキャストしてから割っています。

※@idの代わりにf@idと書くことで、@idはfloat型であることを明示することができます。

STEP 6 : For-Each Primitive

For-Each Primitiveでは各メッシュにグラデーションをつけています。

さらに細かく見ていきます。

For-Eachループの開始部分を見ると、六角形(or 五角形)になっています。

 

STEP 6.1 : PolyExtrude

Poly ExtrudeノードのInsetを利用して、多角形を内側へ押し出します。

また、Front Groupのチェックを入れます。

これにより、押し出したプリミティブに対してextrudeFrontというグループが割り当てられます。

STEP 6.2 : Group Promote

押し出したポイントを一つにまとめる、という操作を下流で行いたいので、

extrudeFrontグループをPrimitiveからPointへ変換します。

STEP 6.3 : Fuse

Fuseノードでポイントを一つにまとめます。

グループにextrudeFrontを設定することで、先ほど押し出したポイントのみをまとめることができます。

STEP 6.4

ColorノードでグループextrudeFrontに対して赤色(1, 0, 0)を割り当てます。

内側から外側へ向かうグラデーションを作ることができました。

ForEach Endノードを見ると、すべての多角形にグラデーションが適用されていることが確認できます。

STEP 7 : UV Texture

下流のUV Textureでは、モデル全体にuvを割り当てています。

ちなみに、UV Quick Shadeを使うとUVをプレビュー表示することができます。

STEP 8 : Attribute Wrangle

v@Cd.g = prim(geoself(), "id", @primnum);

※ここでは、primitiveコンポーネントとして保存されている@idアトリビュート(0~1の値)をとってきて、@Cdアトリビュートのgチャンネルへ代入しています。

※v@Cdと書くことで、@Cdアトリビュートはvector型であることを明示しています。

STEP 9 : UV展開(uv2)

五角形、六角形それぞれに対し、個別にテクスチャ座標を設定します。

uvはモデル全体のテクスチャ座標としてすでに利用されているため、

代わりにuv2へ設定します。

UV Viewモードでuv2を確認すると、UVが0-1の範囲に収まっていません。

今回これは都合が悪いので、uv2が0-1の範囲に収まるように修正を加えていきます。

STEP 9.1 : uv2の最小値の取得

Attribute Promoteでuv2の最小値をuv_min(detail)として保存します。

STEP 9.2 : uv2の最大値の取得

Attribute Promoteノードでuv2の最大値をuv_max(detail)として保存します。

STEP 9.3 : uv2の範囲変換

AttributeWrangleを利用して、uv2の範囲[uv_min, uv_max] を [0, 1]へ変換します。 

// detailが持つアトリビュート uv_min を取得
vector uv_min = detail(geoself(), "uv_min", 0); 

// detailが持つアトリビュート uv_max を取得
vector uv_max = detail(geoself(), "uv_max", 0); 

// uv2 を 範囲(uv_min ~ uv_max)から 範囲(0 ~ 1)へ変換
v@uv2 = fit(v@uv2, uv_min, uv_max, 0, 1);
 

UV View モードを見ると、UVが0~1の正方形に収まっていることが確認できます。

以上でSubnetworkの解説は終わりです。

STEP 10 : ROP FBX Output

最後はFBXファイルとして出力するだけですが、今回は便利なTipsを一つご紹介したいと思います。

OUTPUT Fileを以下のように設定すると、入力ノードと同名のFBXを$HIP階層へ出力することができます。

`strcat($HIP, strcat(opinput(".", 0), ".fbx"))`

opinput(".", 0)は1番目の入力ノード名を取得するようなエクスプレッションです。

 
今回はROP FBX Outputへ SK_fx_hex_sphere01というノードが接続されているので、
SK_fx_hex_sphere01.fbxファイルが出力されます。

以上でモデルデータの作成は完了です。

GitBookでWebサイトを作ってGitHub Pagesで公開する方法

はじめに

制作物をまとめた簡素なポートフォリオを作ってみました。

rngtm.github.io

今回のWebサイト、GitBookを利用して作成しています。
GitBook - Document Everything!

今回はGitBookを使用したWebサイトの作り方を紹介します。
そして、作ったWebページをGitHubPagesとして外部に公開する方法も解説したいと思います。

GitBookでWebサイトを作るまで

下のようなテキストファイルから...

以下のようなWebサイトをコマンド一発で生成します。

必要な知識

gitbookで作成したWebサイトを外部へ公開したい場合、以下の知識が必要になります。
1. PowerShellなどのコマンドラインツールの使い方(gitbook実行に必要)
2. Markdownの書き方(Webページを編集するときに必要)
3. Gitの知識(GitHubPagesを使うと、作ったWebページを外部へ公開できます)

GitBookの導入(Windows 10)

Windows 10 で GitBookを使えるようにするまでの手順を紹介します。

npm をインストール

GitBookを使うためには npm というものが必要になります。
公式サイトのインストーラを使ってインストールしましょう。

nodejs.org

インストールが完了すると、PowerShellからnpmコマンドが使えるようになっているはずです。(PowerShellでコマンドを実行してます)

gitbookのインストール

以下のコマンドを実行し、gitbookをインストールします。

npm install -g gitbook-cli

インストールが完了すると、gitbookコマンドが使えるようになるはずです。

Webサイトのひな型作成

gitbookを使ってWebサイトのひな型を作成します。

Webサイト用フォルダの初期化

Webサイトのファイルを置きたいフォルダの中で、以下のコマンドを実行します。

npm init

フォルダを見るとpackage.jsonができていることが確認できます。

Webサイトのひな型の作成

以下のコマンドを実行します。

gitbook init

README.mdと、SAMMARY.mdが作成されます。

これらがWebサイトの元データになります。

Webサイトをローカル表示してみる

以下のコマンドを実行してみます。

gitbook serve

Webブラウザでhttp://localhost:4000 へアクセスすると、たった今作成したWebページをプレビュー表示することができます。

Webサイトの元データ

README.mdやSUMMARY.mdを編集することで、Webサイトを編集することができます。
また、Webページを新たに追加したい場合はmdファイルを増やします。

README.md の中身

見出し文字(Introduction)だけが入っています。

# Introduction

README.md はWebサイトで最初に表示されるWebページを記述するためのテキストファイルになります。

SUMMARY.md の中身

見出し文字(Summary)と、README.mdへのリンクが記述されています。

# Summary

* [Introduction](README.md)

SAMMARY.md は画面の左に並ぶメニューを記述するためのテキストファイルになります。

ページを追加してみる

markdown編集用のツール

markdownの編集に適したツールには複数ありますが、今回はVSCodeを使ってmarkdownを編集したいと思います。

code.visualstudio.com

仮ページ(test.md)の追加

markdownという名前のフォルダを作り、その中に test.md ファイルを作成します。


test.mdは以下のような内容にします。

# Test
これはテストページです

README.mdへリンクの追加

README.mdにtest.mdへのリンクを追記してみます。

# Introduction

[テスト用ページ](markdown/test.md)

Introductionのページにリンク付きの文字が追加されます。

SAMMARY.mdへリンクの追加

SAMMARY.mdにtest.mdへのリンクを追記してみます。

# Summary

* [Introduction](README.md)

* [Test](markdown/test.md)

これにより、Webサイト左側のメニューにTestという項目が追加されます。

* [Test](markdown/test.md) という行が、Testという名前でtest.mdへのリンクを貼っている行になります。

Testという項目をクリックすると、test.mdがWebページとして表示されます。

Webサイトのhtmlファイル化

現時点ではmdファイルを作成しただけなので、Webサイトとして公開することはできません。
公開するためには、htmlファイルへコンバートする必要があります。

以下のコマンドを実行します。

gitbook build

コマンドが完了すると、_bookフォルダが作成されます。

_bookフォルダの中を見ると、htmlファイルなどが作成されています。

この_bookフォルダの中身をGitHubへアップロードすることで、Webページを外部へ公開することができます。

予備知識 : _bookではなくdocsへ出力する

htmlファイルが出力されるフォルダ名は変えることができます。

gitbook build (元データが置いてあるディレクトリ) (出力先のディレクトリ)

以下のコマンドを実行すると _bookではなく docsというフォルダへhtmlファイルが出力されます。

gitbook build . docs

Webページのアップロード(GitHub)

作成したWebページをGitHubへアップロードする手順を紹介します。

Gitの環境をインストールしておく必要があります。
git-scm.com

STEP1 : GitHubにリポジトリを作る

GitHubにて好きな名前のリポジトリを作ります。

今回はTestという名前でリポジトリを作ってみました。

STEP 2 : WebページのGitリポジトリ化

Webページのルートフォルダにて、git initコマンドを実行してGitリポジトリ化します。

まずはgit init でgitを初期化します。

git init

フォルダを見ると.gitフォルダ作成され、gitリポジトリ化したことが確認できます。

STEP 3 : WebページをGitHubへアップロードする

GitHubのリポジトリの関連付け

git remote add origin https://github.com/{ユーザー名}/Test.git

ローカルにある全ファイルをバージョン管理の対象として追加

git add .

git addで追加したファイルのコミット

git commit -m "initial commit"

コミットをプッシュ(GitHub上のmasterブランチへ反映される)

git push origin master

参考 : リモートへのプッシュする方法
git pushでリモートリポジトリにプッシュする方法 | TechAcademyマガジン

結果

GitHubのリポジトリを確認すると、ローカルのファイルがアップロードされていることが確認できます。

Webページの公開設定(GitHub Pages)

STEP 1 : Settingsを開く

GitHubリポジトリのSettingsの部分をクリックします。

STEP 2 : GitHub Pagesの設定

ページの下のほうにGit Hub Pagesと書かれている項目があります。

Noneと書かれた部分をクリックすると、どのブランチをGitHub Pagesとして公開するかを選ぶことができます。
今回はWebページをmasterブランチにアップしているので、 master branchを選択します。

今回アップしたWebページが https://(ユーザー名).github.io/{リポジトリ名} としてアクセスすることができるようになりました。

今回、Webページのデータは _bookフォルダの中に入っているため、以下のURLでアクセスできます。

https://(ユーザー名).github.io/{リポジトリ名}/_book 

公開設定が反映されるまでにはラグがあるっぽいので気長に待ちましょう。

補足 : docsフォルダに入れたWebサイトは直接読める

_bookというフォルダの中にWebサイトのファイルを入れた場合、

https://(ユーザー名).github.io/{リポジトリ名}/_book 

というURLでアクセスできました。

docsという名前のフォルダに入れた場合は、

https://(ユーザー名).github.io/{リポジトリ名}

というURLでWebサイトにアクセスできるようになります。
こちらのURLのほうがスマートです。

docsを直接表示したい場合、GitHub Pagesの設定にて master branch / docs folder を選ぶ必要があります。

今回アップロードしたTest用のWebサイトは以下から確認できます。
https://rngtm.github.io/Test/