シェーダー基礎
教材一覧

Appearance

改訂前の参考解説

このページは改訂前の教材です。現在の授業の回番号・内容は、後期の授業計画で確認してください。

第15回 補間・UV・テクスチャと色 ​

第14回では、頂点位置を画面へ変換し、単色を出力しました。この回では、頂点が持つUVをフラグメント関数へ渡し、テクスチャから色を取得します。前期で使ったUVノードとSample Texture 2Dノードの役割を、データの受け渡しから確認します。

配布プロジェクト ​

Unity 6.6とURPを使用します。この回に対応する配布プロジェクトは準備中です。配布状況は配布ファイルに掲載します。

開始コードと素材の準備 ​

次の最小コードをSolid.shaderとして保存してください。頂点位置を画面へ変換し、緑の単色を出力する例です。このコードを出発点にして、UVとテクスチャの処理を追加します。

shaderlab
Shader "Course/Solid"
{
    SubShader
    {
        Tags { "RenderPipeline" = "UniversalPipeline" "RenderType" = "Opaque" }

        Pass
        {
            Tags { "LightMode" = "SRPDefaultUnlit" }

            HLSLPROGRAM
            #pragma vertex Vert
            #pragma fragment Frag

            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"

            struct Attributes
            {
                float3 positionOS : POSITION;
            };

            struct Varyings
            {
                float4 positionCS : SV_POSITION;
            };

            Varyings Vert(Attributes input)
            {
                Varyings output;
                output.positionCS = TransformObjectToHClip(input.positionOS);
                return output;
            }

            float4 Frag() : SV_Target
            {
                return float4(0.0, 1.0, 0.0, 1.0);
            }
            ENDHLSL
        }
    }
}
  1. Solid.shaderを複製してTextureTint.shaderにします。元の最小例は残します。
  2. 先頭のShader "Course/Solid"をShader "Course/TextureTint"へ変更して保存します。Shader名を分けることで、二つのファイルを別のShaderとして選べます。
  3. このShaderを使うMaterialを作り、UVを持つQuadへ割り当てます。まだ緑の単色で表示される状態を確認します。
  4. 練習画像を保存し、ProjectへImportします。後のステップでTexture欄を作ってから割り当てます。

実行環境は配布ファイルの取り込み条件を確認してください。コードを読む場合は、各ステップの入力値・出力値を紙上で追い、どの行を変更するか選んでください。

この回のゴール ​

頂点のUVが画素の色になるまで
頂点のUV
頂点属性を受け取る
頂点関数
頂点関数
UVを出力へ渡す
補間
補間
描画位置に応じたUVを渡す
フラグメント関数
フラグメント関数
UVで読む位置を指定する
テクスチャ参照
テクスチャ参照
取得した色へTintを掛ける
色の出力

この回では、UVそのものを色として確認する表示と、UVでテクスチャを読む表示を作ります。画像の読み方を変える前に、フラグメント関数へ届いた座標を確認できるようになります。

  • UVを頂点入力から画素処理へ渡し、色として確認できます。
  • Textureを読む位置と、取得した色に掛けるTintを別々に変更できます。
  • 同じ入力のShader GraphとHLSLを比較し、表示の問題を切り分けられます。

今回のポイント ​

頂点の間にも値が必要です ​

メッシュは頂点ごとにUVを持ちますが、画像は三角形の内部にも表示されます。GPUは、頂点から渡されたUVを描画位置に応じて補間します。この関係を理解すると、画像が面全体へ貼られる理由を説明できます。

読む位置と読んだ色を分けます ​

UVの変更は、テクスチャのどこを読むかを変えます。Tintの変更は、取得した色へ掛ける値を変えます。この二つを別々に変更し、座標の問題と色の問題を切り分けます。

前期のテクスチャとUVには、Wrap ModeとFilter Modeの比較があります。この回では、その設定がHLSLによるサンプリングにも適用されることを確認します。

第15回の目次 ​

1 / 4頂点属性のUVの受け渡しUVを入力と出力の構造体へ追加します。メッシュが持つ頂点属性と、頂点関数が後続へ渡す値を区別して理解します。2 / 4補間されたUVの可視化頂点の間の値をGPUが求める仕組みを確認します。テクスチャを読む前に、フラグメント関数へ届いたUVを表示します。3 / 4Textureの入力とUV・Tintの設定Materialの入力欄とHLSLの宣言を用意してから、UVによる参照と色の乗算を追加します。4 / 4Texture表示の比較と条件変更同じテクスチャ、UV設定、Tintを使ったHLSLとShader Graphを比較します。座標の変更と色の変更を別々に確認します。