HLSLで画像の赤と青の成分を入れ替える
コードを直接入れる方法と、自作のHLSLファイルを読む方法を比べます。
始める前に
- 効果をかける画像アイテム。この見本は自作の色付き格子を使います。
コードを直接入力する
映像エフェクトの一覧を開く
使いたいアイテムを選んだ状態で、「映像エフェクト」の + を押します。
「HLSLピクセルシェーダーコード」を探す
検索欄に HLSLピクセルシェーダーコード と入力します。
「HLSLピクセルシェーダーコード」を追加する
候補の HLSLピクセルシェーダーコード を選びます。
ソースコードを入れる
ソースコード の内容を、下の見本へ置き換えます。元の色を読むコードの最後を return color.bgra; にした、自作の見本です。
Texture2D InputTexture : register(t0); SamplerState InputSampler : register(s0); cbuffer constants : register(b0) { float time: packoffset(c0.x); float duration: packoffset(c0.y); float value0 : packoffset(c0.z); float value1 : packoffset(c0.w); float value2 : packoffset(c1.x); float value3 : packoffset(c1.y); float left : packoffset(c1.z); float top : packoffset(c1.w); float right : packoffset(c2.x); float bottom : packoffset(c2.y); }; float4 main(float4 pos : SV_POSITION, float4 posScene : SCENE_POSITION, float4 uv : TEXCOORD0) : SV_Target { float4 color = InputTexture.Sample(InputSampler, uv.xy); return color.bgra; };

左:元の画像/右:コード適用後。赤と青の成分を交換しています。
同じコードをファイルから読む
コード版とは別の確認用アイテムを使います。両方の効果を重ねず、同じ元画像から比べます。
映像エフェクトの一覧を開く
使いたいアイテムを選んだ状態で、「映像エフェクト」の + を押します。
「HLSLピクセルシェーダーファイル」を探す
検索欄に HLSLピクセルシェーダーファイル と入力します。
「HLSLピクセルシェーダーファイル」を追加する
候補の HLSLピクセルシェーダーファイル を選びます。
自作のHLSLファイルを用意する
上のコードを .hlsl ファイルとして保存します。このページで使った自作の見本ファイルも下から開けます。
ファイルを選ぶ窓を開く
ソースコード の右端にあるフォルダーのボタンを押します。
ソースコードのファイルを選ぶ
用意したHLSLファイルを選びます。コード版と同じ色の変化が出ました。


左:元の画像/右:同じシェーダーをファイルから読み込んだ結果
できたか確かめるコード版とファイル版で、同じ赤青成分の交換が出ることを確かめます。