シェーダー デザイナー

このドキュメントでは、Visual Studio シェーダー デザイナーを使用して、シェーダーというカスタム視覚効果を作成、変更、およびエクスポートする方法について説明します。

シェーダー デザイナーを使用すると、上位レベル シェーダー言語 (HLSL) でのプログラミングを知らなくても、ゲームやアプリのカスタム視覚効果を作成できます。 シェーダー デザイナーでシェーダーを作成するには、それをグラフとしてレイアウトします。 つまり、データおよび操作を表す "ノード" をデザイン サーフェイスに追加し、各ノードを接続することで、操作がどのようにデータを処理するのかを定義します。 各操作ノードでは、その時点までの効果のプレビューを表示して、結果を視覚化することができます。 データは、ノード間を移動して最終ノードに到達します。この最終ノードはシェーダーの出力を表しています。

サポートされるフォーマット

シェーダー デザイナーは、以下のシェーダー形式をサポートしています。

形式名	ファイル拡張子	サポートされる操作 (表示、編集、エクスポート)
Directed Graph Shader Language	.dgsl	表示、編集
HLSL シェーダー (ソース コード)	.hlsl	エクスポート
HLSL シェーダー (バイトコード)	.cso	エクスポート
C++ ヘッダー (HLSL バイトコード配列)	.h	エクスポート

作業開始

このセクションでは、Visual Studio C++ プロジェクトに DGSL シェーダーを追加する方法を説明し、作業の開始に役立つ基本的な情報を提供します。

Note

シェーダー グラフ (.dgsl ファイル) のようなグラフィックス項目の自動ビルド統合がサポートされるのは、C++ プロジェクトの場合のみです。

プロジェクトに DGSL シェーダーを追加する手順

1. グラフィックスを操作するために必要な必須 Visual Studio コンポーネントがインストールされていることを確認します。 このコンポーネントはイメージ エディターと 3D モデル エディターと呼ばれます。

   これをインストールするには、メニュー バーから [ツール]>[ツールと機能を取得] を選択して Visual Studio インストーラーを開き、 [個々のコンポーネント] タブを選択します。 [ゲームおよびグラフィックス] カテゴリで [イメージ エディターと 3D モデル エディター] コンポーネントを選択し、 [変更] を選択します。

   

2. ソリューション エクスプローラーで、シェーダーを追加する C++ プロジェクトのショートカット メニューを開き、[追加]>[新しい項目] の順に選択します。

3. [新しい項目の追加] ダイアログ ボックスで、[インストール済み] の下にある [グラフィックス] を選択し、[視覚シェーダー グラフ (.dgsl)] を選択します。

   Note

   [新しい項目の追加] ダイアログ ボックスで [グラフィックス] カテゴリが表示されず、[イメージ エディターと 3D モデル エディター] コンポーネントをインストール済みである場合は、お使いのプロジェクトの種類でグラフィックス項目がサポートされていません。

4. シェーダー ファイルの [名前] を指定し、作成する [場所] を指定します。

5. [追加] ボタンを選びます。

既定のシェーダー

DGSL シェーダーを作成するたびに、ポイントの色ノードが最終的な色ノードに接続されている、最小限のシェーダーが最初に作成されます。 このシェーダーは完全なものとして機能しますが、その機能は限られています。 そのため、実用的なシェーダーを作成するには、多くの場合、最初の手順としてポイントの色ノードを削除するか、または最終的な色ノードから切断して、他のノードを追加できるようにします。

シェーダー デザイナーを操作する

以下のセクションでは、シェーダー デザイナーを使用してカスタム シェーダーを操作する方法について説明します。

シェーダー デザイナーのツール バー

シェーダー デザイナーのツール バーには、DGSL シェーダー グラフを操作する際に役立つコマンドが用意されています。

シェーダー デザイナーの状態を変更させるコマンドは、Visual Studio のメイン ウィンドウの [シェーダー デザイナー モード] ツール バーにあります。 デザイン ツールおよびコマンドは、シェーダー デザイナーのデザイン サーフェイス上の [シェーダー デザイナー] ツール バーにあります。

[シェーダー デザイナー モード] ツール バーを以下に示します。

次の表では、[シェーダー デザイナー モード] ツール バーの各項目について、左から右へ表示される順序で説明します。

ツール バーの項目	説明
Select	グラフのノードおよびエッジを操作できるようにします。 このモードでは、ノードを選択したり、ノードを移動または削除したり、エッジを設定または解除したりすることができます。
パン	ウィンドウ フレームに合わせてシェーダー グラフを移動できるようにします。 パンするには、デザイン サーフェイス上のポイントを選択し、周囲に移動します。 [選択] モードで Ctrl キーを押したままにすると、 [パン] モードを一時的に有効にすることができます。
ズーム	ウィンドウ フレームに合わせてシェーダー グラフの詳細を拡大表示または縮小表示できます。 [ズーム] モードで、デザイン サーフェイス上のポイントを選択し、右または下へ移動して拡大表示するか、左または上へ移動して縮小表示します。 [選択] モードでは、Ctrl キーを押しながらマウス ホイールを使用して、拡大または縮小することができます。
ウィンドウのサイズに合わせて大きさを変更	ウィンドウ フレームにシェーダー グラフ全体を表示します。
リアルタイム レンダリング モード	リアルタイム レンダリングを有効にすると、ユーザー動作がない場合でも、Visual Studio でデザイン サーフェスを再描画します。 このモードは、時間と共に変化するシェーダーを使用する場合に役立ちます。
球でプレビュー	有効な場合、球のモデルを使用してシェーダーをプレビューします。 一度に 1 つのプレビュー図形だけ有効にすることができます。
直方体でプレビュー	有効な場合、直方体のモデルを使用してシェーダーをプレビューします。 一度に 1 つのプレビュー図形だけ有効にすることができます。
円柱でプレビュー	有効な場合、円柱のモデルを使用してシェーダーをプレビューします。 一度に 1 つのプレビュー図形だけ有効にすることができます。
円すいでプレビュー	有効な場合、円すいのモデルを使用してシェーダーをプレビューします。 一度に 1 つのプレビュー図形だけ有効にすることができます。
ティーポットでプレビュー	有効な場合、ティーポットのモデルを使用してシェーダーをプレビューします。 一度に 1 つのプレビュー図形だけ有効にすることができます。
平面でプレビュー	有効な場合、平面のモデルを使用してシェーダーをプレビューします。 一度に 1 つのプレビュー図形だけ有効にすることができます。
ツールボックス	ツールボックスの表示または非表示を切り替えます。
Properties	[プロパティ] ウィンドウの表示または非表示を切り替えます。
詳細	高度なコマンドとオプションがあります。 エクスポート: 複数の形式でシェーダーをエクスポートできます。 名前を付けてエクスポート: HLSL ソース コードか、またはコンパイル済みシェーダー バイトコードとしてシェーダーをエクスポートします。 シェーダーをエクスポートする方法の詳細については、「方法:シェーダーをエクスポートする」を参照してください。 グラフィックス エンジン: デザイン サーフェイスの表示に使用されるレンダラーを選択できます。 D3D11 で描画: Direct3D 11 を使用して、シェーダー デザイナーのデザイン サーフェイスを描画します。 D3D11WARP で描画: Direct3D 11 Windows Advanced Rasterization Platform (WARP) を使用して、シェーダー デザイナーのデザイン サーフェイスを描画します。 表示: シェーダー デザイナーに関する追加情報を選択できるようにします。 フレーム レート: 有効にすると、デザイン サーフェイスの右上隅に現在のフレーム レートが表示されます。 フレーム レートは、1 秒あたりの描画フレーム数です。 このオプションは リアルタイム レンダリング モード オプションを有効にする場合に便利です。

ヒント

[詳細設定] ボタンを選択すると、最後のコマンドを再実行できます。

ノードと接続を操作する

[選択] モードを使用して、ノードを追加、削除、位置変更、接続、および構成します。 これらの基本操作を実行する方法を以下に示します。

[選択] モードで基本操作を実行する方法

• その方法は次のとおりです。

  • グラフにノードを追加するには、ツールボックスでノードを選択し、デザイン サーフェイスに移動します。

  • グラフからノードを削除するには、ノードを選択し、Delete キーを押します。

  • ノードの位置を変更するには、ノードを選択し、新しい場所に移動します。

  • 2 つのノードを接続するには、一方のノードの出力ターミナルを、もう一方のノードの入力ターミナルに移動します。 互換性のある種類のターミナルのみを接続することができます。 ターミナル間の線は、接続を示しています。

  • 接続を解除するには、接続されたターミナルのいずれかのショートカット メニューで、[リンクの解除] を選択します。

  • ノードのプロパティを構成するには、ノードを選択し、[プロパティ] ウィンドウで、プロパティの新しい値を指定します。

シェーダーをプレビューする

アプリでシェーダーがどのように表示されるかを確認するため、効果のプレビュー方法を構成することができます。 アプリを概観するには、いくつかの描画図形のうちの 1 つを選択し、テクスチャやその他の素材のパラメーターを構成し、時間ベースの効果アニメーションを有効にし、さまざまな角度からプレビューを確認します。

図形

シェーダー デザイナーには、シェーダーのプレビューに使用できる、球、直方体、円柱、円すい、ティーポット、および平面という 6 つの図形が用意されています。 シェーダーに応じて特定の図形を使用することで、より効果的なプレビューを表示できます。

プレビュー図形を選択するには、[シェーダー デザイナー モード] ツール バーで、適切な図形を選びます。

テクスチャおよび素材パラメーター

シェーダーの多くは、テクスチャおよび素材プロパティを基盤として、アプリ内のオブジェクトの種類ごとに固有の外観を生成します。 アプリでシェーダーが表示される様子を確認するには、アプリで使用する可能性があるテクスチャおよびパラメーターに合うように、プレビューの描画に使用するテクスチャおよび素材プロパティを設定します。

別のテクスチャをテクスチャ レジスタにバインドする、または他の素材パラメーターを変更する方法:

1. [選択] モードで、デザイン サーフェイスの空の領域を選択します。 すると、[プロパティ] ウィンドウにグローバル シェーダー プロパティが表示されます。

2. [プロパティ] ウィンドウで、変更するテクスチャおよびパラメーターのプロパティに新しい値を指定します。

変更可能なシェーダー パラメーターを次の表に示します。

パラメーター	プロパティ
テクスチャ 1 - テクスチャ 8	アクセス: このプロパティをモデル エディターから設定できるようにする場合は Public、それ以外の場合は Private です。 ファイル名: このテクスチャ レジスタに関連付けられているテクスチャ ファイルの完全パスです。
素材: アンビエント	アクセス: このプロパティをモデル エディターから設定できるようにする場合は Public、それ以外の場合は Private です。 値:間接光 (環境光) による、現在のピクセルの拡散色。
素材: 拡散	アクセス: このプロパティをモデル エディターから設定できるようにする場合は Public、それ以外の場合は Private です。 値: 現在のピクセルによる直接光の拡散を示す色。
素材: 放射	アクセス: このプロパティをモデル エディターから設定できるようにする場合は Public、それ以外の場合は Private です。 値: オブジェクト自体から放射される光による、現在のピクセルの色の効果。
素材: 鏡面	アクセス: このプロパティをモデル エディターから設定できるようにする場合は Public、それ以外の場合は Private です。 値: 現在のピクセルによる直接光の反射を示す色。
素材: 反射の度合い	アクセス: このプロパティをモデル エディターから設定できるようにする場合は Public、それ以外の場合は Private です。 値: 現在のピクセルに対する反射の光源の輝度を定義する指数。

時間ベースの効果

シェーダーによっては、効果をアニメーション表示する、時間ベースのコンポーネントがあります。 アクションで効果が表示される様子を示すには、プレビューを 1 秒あたりに数回更新する必要があります。 既定では、シェーダーが変更されたときにのみ、プレビューが更新されます。時間ベースの効果を表示できるようにこの動作を変更するには、リアルタイム レンダリングを有効にする必要があります。

リアルタイム レンダリングを有効にするには、シェーダー デザイナー ツール バーで、[リアルタイム レンダリング] を選択します。

効果を確認する

多くのシェーダーは、視野角や指向性ライトなどの変数の影響を受けます。 これらの変数を変更することで効果に及ぶ影響を確認するには、プレビュー図形を自由に回転して、シェーダーの動きを確認します。

図形を回転するには、Alt キーを押しながら、デザイン サーフェス上の任意のポイントを選択して動かします。

シェーダーをエクスポートする

アプリでシェーダーを使用するには、その前に、DirectX が認識できる形式でシェーダーをエクスポートする必要があります。

シェーダーは、HLSL ソース コードまたはコンパイル済みシェーダー バイトコードとしてエクスポートできます。 HLSL ソース コードは、 .hlsl ファイル名拡張子の付いたテキスト ファイルにエクスポートされます。 シェーダー バイトコードは、 .cso ファイル名拡張子の付いた未処理のバイナリ ファイルにエクスポートするか、またはシェーダー バイトコードを配列にエンコードする C++ ヘッダー ( .h) ファイルにエクスポートすることができます。

シェーダーをエクスポートする方法の詳細については、「方法:シェーダーをエクスポートする」を参照してください。

キーボード ショートカット

command	キーボード ショートカット
[選択] モードに切り替え	Ctrl+G、Ctrl+Q S
[ズーム] モードに切り替え	Ctrl+G、Ctrl+Z Z
[パン] モードに切り替え	Ctrl+G、Ctrl+P K
すべて選択する	Ctrl+A
現在の選択範囲を削除します。	削除
現在の選択を取り消します。	エスケープ (Esc)
拡大します	Ctrl+マウス ホイール前方移動 プラス記号 ( + )
縮小します	Ctrl+マウス ホイール後方移動 マイナス記号 ( - )
デザイン サーフェイスを上にパン	マウス ホイール後方移動 PageDown
デザイン サーフェイスを下にパン	マウス ホイール前方移動 PageUp
デザイン サーフェイスを左にパン	Shift+マウス ホイール後方移動 マウス ホイール左 Shift+PageDown
デザイン サーフェイスを右にパン	Shift+マウス ホイール前方移動 マウス ホイール右 Shift+PageUp
キーボード フォーカスを別のノードに移動	方向キー
キーボード フォーカスのあるノードを選択 (選択グループにノードを追加)	Shift+Space キー
キーボード フォーカスのあるノードの選択を切り替える	Ctrl+Space キー
現在の選択を切り替える (ノードが選択されていない場合、キーボード フォーカスのあるノードを選択)	Space キー
現在の選択を上に移動	Shift+↑ キー
現在の選択を下に移動	Shift+↓ キー
現在の選択を左に移動	Shift+← キー
現在の選択を右に移動	Shift+→ キー。

関連トピック

Title	説明
ゲームとアプリ用の 3D アセットの操作	テクスチャ、イメージ、3D モデル、およびシェーダー効果の操作に使用できる Visual Studio のツールの概要を説明します。
Image Editor	Visual Studio イメージ エディターを使用してテクスチャとイメージを操作する方法について説明します。
モデル エディター	Visual Studio モデル エディターを使って 3D モデルを操作する方法について説明します。