シェーダー デザイナー

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

HLSL のプログラミングの知識がなくても、シェーダー デザイナーを使用してゲームやアプリ用のカスタム視覚効果を作成できます。シェーダー デザイナーでシェーダーを作成するには、シェーダーをグラフとしてレイアウトします。つまり、データと操作を表すデザイン サーフェイスのノードに追加してから、ノード間を接続して各操作によるデータの処理方法を定義します。各操作ノードには、結果を視覚化するためのその時点までの効果のプレビューが提供されています。データはノードを介してシェーダーの出力を表す終了ノードまでフローします。

サポートされる形式

シェーダー デザイナーは次のシェーダー形式をサポートします。

作業の開始

ここでは Visual Studio プロジェクトに DGSL のシェーダーの追加方法と、プログラミングを始めるための基本について説明します。

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

1. [ソリューション エクスプローラー] では、シェーダーを追加するには [追加] 開き、[新しいアイテム] を選択します。プロジェクトのショートカット メニューが。

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

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

4. [追加] ボタンをクリックします。

既定のシェーダー

これは DGSL のシェーダーが作成されるたびに、[最終的な色] のノードに接続されている [ポイントの色] のノードを持つ最小のシェーダーとして開始されます。このシェーダーは、完全機能ですが、多くを行いません。したがって、シェーダー動作を作成する最初の手順は、[ポイントの色] ノードを削除するか、他のノードでを配置するには [最終的な色] のノードから切断です。

シェーダー デザイナーの使用

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

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

シェーダー デザイナーのツール バーには、DGSL のシェーダー グラフに使用できるコマンドがあります。

シェーダー デザイナーの状態に影響を与えるコマンドは、Visual Studio メイン ウィンドウのシェーダー デザイナー モードのツール バーにあります。デザイン ツールとコマンドは、シェーダー デザイナーのデザイン サーフェイス上のシェーダー デザイナーのツール バーにあります。

シェーダー デザイナー モードのツール バーを次に示します。

次の表は、シェーダー デザイナー モードのツール バーに、左から右へ順に表示される項目を示します。

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

ノードおよびつながりを使用

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

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

• 次の手順に従います。

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

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

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

  • 2 つのノードを接続するには、1 つのノードの出力ターミナルを他のノードの入力ターミナルに移動します。互換性のある型を持つターミナルのみを接続できます。ターミナル間の線は、接続を示します。

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

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

シェーダーのプレビュー

アプリでのシェーダーの表示方法を理解するために、効果のプレビュー方法を構成できます。アプリに近い状態を再現するには、描画する図形のいずれかを選択し、テクスチャおよびその他の素材のパラメーターを構成してから、時間ベースの効果のアニメーションを有効にして、さまざまな角度からのプレビューを確認できます。

図形

シェーダー デザイナーでは、球、直方体、円柱、円すい、ティーポット、および平面という 6 種類の図形を使用してシェーダーをプレビューすることができます。シェーダーによっては、特定の図形を使用することでプレビューが向上する場合があります。

プレビュー図形を選択するには

• シェーダー デザイナー モードのツール バーで、目的の図形を選択します。

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

多くのシェーダーは、テクスチャおよび素材のプロパティを使用して、アプリに各種のオブジェクト特有の外観を生成します。アプリでのシェーダーの表示方法を確認するには、プレビューの描画に使用されるテクスチャおよび素材のプロパティを、アプリで使用するテクスチャおよびパラメーターと同様に設定することができます。

異なるテクスチャをテクスチャ レジスタにバインドするか、他の素材のパラメーターを変更するには

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

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

変更できるシェーダーのパラメーターを次に示します:

時間ベースの効果

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

リアルタイム レンダリングを有効にするには

• シェーダー デザイナーのツール バーで、[Real Time Rendering] (リアルタイム レンダリング) を選択します。

効果の確認

多くのシェーダーは角度または指向性ライトのような変数に影響されます。これら変数の変化に対する効果の応答方法を調べるには、プレビュー図形を自由に回転して、シェーダーの動作方法を確認することができます。

図形を回転するには

• Alt キーを押しながら、デザイン サーフェイスの任意のポイントを選択して移動します。

シェーダーのエクスポート

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

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

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

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

関連トピック