そろそろShaderをやるパート2 Unite 2017の動画を見る(頂点シェーダーで大きさを変える)

2 min read読了の目安(約2200字

そろそろShaderをやります

そろそろShaderをやります。そろそろShaderをやりたいからです。
パート100までダラダラ頑張ります。10年かかってもいいのでやります。
100記事分くらい学べば私レベルの初心者でもまあまあ理解できるかなと思っています。

という感じでやってます。

※初心者がメモレベルで記録するので
 技術記事としてはお力になれないかもしれません。

下準備

下記参考
そろそろShaderをやるパート1 Unite 2017の動画を見る(基礎知識~フラグメントシェーダーで色を変える)

Unite 2017の動画

社の強い人に入門動画を教えてもらいました。
少し古い動画ですが、たぶん大丈夫だと思います。

【Unite 2017 Tokyo】シェーダープログラミング入門!カスタムシェーダー、作るで!

こんな人におすすめ
・シェーダーを使用してビジュアル改良方法を学びたいプログラマー
・Unityのグラフィックスの仕組みやカスタムシェーダーで何が達成できるか知りたいアーティスト
・シェーダーの基本構造と使用方法を理解したい学生

受講者が得られる知見
・Unityのグラフィックス・パイプラインの仕組みとUnity シェーダーの基本構造
・カスタムシェーダーの作成方法
・頂点シェーダーとフラグメントシェーダーで使用される基本的な数学的コンセプト

動画内のサンプルコード

今回は頂点シェーダーを書き換えて大きさを変更するところまでやります。

Shaderサンプル


Shader "UniteAsia/Shader02" 
{
    SubShader 
    {
        Pass
        {
            Tags { "RenderType"="Opaque" }

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct v2f 
            {
                float4 pos : SV_POSITION;
            };

            v2f vert(appdata_base v) //vはメッシュの頂点情報
            {
                v2f o;
                //メッシュの頂点座標を0.75倍している→縮小
                float4 vert = v.vertex * 0.75;
                o.pos = UnityObjectToClipPos(vert);
                return o;
            }

            half4 frag(v2f i) : COLOR 
            {
                return half4(1, 1, 1, 1);
            }
            ENDCG
        }
    }
}

頂点シェーダー内で渡ってきたメッシュの頂点座標を0.75倍することによって
縮小しています。

実際に白いキューブが縮小したキューブです。
ちゃんとShaderの通り、小さくなっています。

コメントアウトしてある怪しいコードがあったので動かしてみました。

v2f vert(appdata_base v) //vはメッシュの頂点情報
{
    v2f o;
    //メッシュの頂点座標を時間経過に応じてSin関数で変化させている
    float4 vert = float4(v.vertex.xyz * sin(_Time.y), v.vertex.w);
    o.pos = UnityObjectToClipPos(vert);
    return o;
} 

頂点情報のXYZを時間経過に応じてsin波で変化させているようです。

参考リンク

Unityシェーダプログラム入門 UnlitShaderの要素を全て解説