シェーダー デザイナー
このドキュメントでは、Visual Studio シェーダー デザイナーを使用して、シェーダーと呼ばれるカスタム視覚効果を作成、変更、およびエクスポートする方法について説明します。
HLSL のプログラミングの知識がなくても、シェーダー デザイナーを使用してゲームやアプリ用のカスタム視覚効果を作成できます。 シェーダー デザイナーでシェーダーを作成するには、シェーダーをグラフとしてレイアウトします。つまり、データと操作を表すデザイン サーフェイスのノードに追加してから、ノード間を接続して各操作によるデータの処理方法を定義します。 各操作ノードには、結果を視覚化するためのその時点までの効果のプレビューが提供されています。 データはノードを介してシェーダーの出力を表す終了ノードまでフローします。
サポートされる形式
シェーダー デザイナーは次のシェーダー形式をサポートします。
形式名 |
ファイル拡張子 |
サポートされる操作 (表示、編集、エクスポート) |
|---|---|---|
Directed Graph Shader Language |
.dgsl |
表示、編集 |
HLSL シェーダー (ソース コード) |
.hlsl |
エクスポート |
HLSL シェーダー (バイトコード) |
.cso |
エクスポート |
C++ ヘッダー (HLSL バイトコード配列) |
.h |
エクスポート |
作業の開始
ここでは Visual Studio のプロジェクトに DGSL シェーダーを追加する方法を説明します。また、開始するのに役立つ基本的な情報を提供します。
DGSL シェーダーをプロジェクトに追加するには
[ソリューション エクスプローラー] で、[新しいアイテム] シェーダーに、[追加] をクリックしますに追加し、対象のプロジェクトのショートカット メニューを開きます。
[新しいアイテムの追加] ダイアログ ボックスで、[インストール済み] で、[グラフィックス] を選択します、[視覚シェーダー グラフ (.dgsl)] を選択します。
シェーダー ファイルの [名前] をし、作成する [場所] を指定します。
[追加] ボタンをクリックします。
既定のシェーダー
これは、DGSL シェーダーを作成するたびに、[最終的な色] ノードにアタッチされるだけ [ポイントの色] ノードを持つ最小シェーダーとして表示されます。 このシェーダーは、完全機能ですが、多くのしません。 したがって、動作するシェーダーを作成する最初の手順は、[ポイントの色] ノードを削除する場合、または他のノードを配置するに [最終的な色] ノードから切断できます。です。
シェーダー デザイナーの使用
以下のセクションでは、カスタム シェーダーを使用するには、シェーダー デザイナーを使用する方法について説明します。
シェーダー デザイナーのツール バー
シェーダー デザイナーのツール バーには、DGSL のシェーダー グラフに使用できるコマンドがあります。
シェーダー デザイナーの状態に影響を与えるコマンドは、Visual Studio メイン ウィンドウのシェーダー デザイナー モードのツール バーにあります。 デザイン ツールとコマンドは、シェーダー デザイナーのデザイン サーフェイス上のシェーダー デザイナーのツール バーにあります。
シェーダー デザイナー モードのツール バーを次に示します。
.png "シェーダー デザイナーのモーダル ツール バー。")
次の表は、シェーダー デザイナー モードのツール バーに、左から右へ順に表示される項目を示します。
ツール バーの項目 |
説明 |
|---|---|
選択 |
グラフのノードとエッジの操作を有効にします。 このモードでは、ノードを選択して移動または削除、エッジの設定、または解除ができます。 |
パン |
ウィンドウ フレームに対するシェーダー グラフの相対的な移動を有効にします。 パンするには、デザイン サーフェイスのポイントを選択してその周囲を移動します。 [選択] モードで Ctrl キーを押したままにすると、[パン] モードを一時的に有効にすることができます。 |
ズーム |
ウィンドウ フレームに対する相対的なシェーダー グラフの拡大表示または縮小表示を有効にします。 [ズーム] モードで、デザイン サーフェイスのポイントを選択し、右または下へ移動して拡大表示するか、左または上へ移動して縮小表示します。 [選択] モードで Ctrl キーを押したままにすると、マウス ホイールを使用して拡大表示または縮小表示ができます。 |
ウィンドウのサイズに合わせて大きさを変更 |
ウィンドウ フレームにシェーダー グラフ全体を表示します。 |
Real-Time Rendering Mode (リアルタイム レンダリング モード) |
リアルタイム レンダリングを有効にすると、ユーザー動作がない場合でも、Visual Studio でデザイン サーフェイスを再描画します。 このモードは、時間と共に変化するシェーダーを使用する場合に役立ちます。 |
球でプレビュー |
有効にすると、シェーダーのプレビューに球モデルが使用されます。 有効にできるプレビュー図形は、一度に 1 つのみです。 |
直方体でプレビュー |
有効にすると、シェーダーのプレビューに直方体モデルが使用されます。 有効にできるプレビュー図形は、一度に 1 つのみです。 |
円柱でプレビュー |
有効にすると、シェーダーのプレビューに円柱モデルが使用されます。 有効にできるプレビュー図形は、一度に 1 つのみです。 |
円すいでプレビュー |
有効にすると、シェーダーのプレビューに円すいモデルが使用されます。 有効にできるプレビュー図形は、一度に 1 つのみです。 |
ティーポットでプレビュー |
有効にすると、シェーダーのプレビューにティーポット モデルが使用されます。 有効にできるプレビュー図形は、一度に 1 つのみです。 |
平面でプレビュー |
有効にすると、シェーダーのプレビューに平面モデルが使用されます。 有効にできるプレビュー図形は、一度に 1 つのみです。 |
ツールボックス |
ツールボックスを表示または非表示にします。 |
プロパティ |
[プロパティ] ウィンドウを表示または非表示にします。 |
詳細設定 |
高度なコマンドとオプションがあります。 エクスポート 複数書式でのシェーダーのエクスポートを有効にします。
グラフィックス エンジン デザイン サーフェイスの表示に使用するレンダラーの選択が可能になります。
ビュー シェーダー デザイナーに関する追加情報の選択が可能になります。
ヒント [詳細設定] ボタンをクリックすると、最後のコマンドを再実行できます。 |
ノードと接続を使用
ノードの追加、削除、再配置、接続、および構成には [選択] モードを使用します。 次に、これらの基本操作を実行する方法を示します。
[選択] モードで基本操作を実行するには
次の手順に従います。
グラフにノードを追加するには、ツールボックスでノードを選択し、デザイン サーフェイスに移動します。
グラフからノードを削除するには、ノードを選択し、Del キーを押します。
ノードの位置を変更するには、ノードを選択し、新しい場所に移動します。
2 つのノードを接続するには、1 つのノードの出力ターミナルを他のノードの入力ターミナルに移動します。 互換性のある型を持つターミナルのみを接続できます。 ターミナル間の線は、接続を示します。
接続を削除するには、接続されているいずれかのターミナルのショートカット メニューで、[リンクの解除] を選択します。
ノードのプロパティを構成するには、ノードを選択し、[プロパティ] ウィンドウでプロパティの新しい値を指定します。
シェーダーのプレビュー
アプリでのシェーダーの表示方法を理解するために、効果のプレビュー方法を構成できます。 アプリに近い状態を再現するには、描画する図形のいずれかを選択し、テクスチャおよびその他の素材のパラメーターを構成してから、時間ベースの効果のアニメーションを有効にして、さまざまな角度からのプレビューを確認できます。
図形
シェーダー デザイナーでは、球、直方体、円柱、円すい、ティーポット、および平面という 6 種類の図形を使用してシェーダーをプレビューすることができます。 シェーダーによっては、特定の図形を使用することでプレビューが向上する場合があります。
プレビュー図形を選択するには
- シェーダー デザイナー モードのツール バーで、目的の図形を選択します。
テクスチャおよび素材のパラメーター
多くのシェーダーは、テクスチャおよび素材のプロパティを使用して、アプリに各種のオブジェクト特有の外観を生成します。 アプリでのシェーダーの表示方法を確認するには、プレビューの描画に使用されるテクスチャおよび素材のプロパティを、アプリで使用するテクスチャおよびパラメーターと同様に設定することができます。
異なるテクスチャをテクスチャ レジスタにバインドするか、他の素材のパラメーターを変更するには
[選択] モードで、デザイン サーフェイスの空の領域を選択します。 これにより [プロパティ] ウィンドウにグローバル シェーダーのプロパティが表示されます。
[プロパティ] ウィンドウで、変更するテクスチャおよびパラメーターのプロパティに新しい値を指定します。
変更できるシェーダーのパラメーターを次に示します:
|
|
|
|
|---|---|---|
|
|
||
|
素材: アンビエント |
||
|
素材: 拡散 |
||
|
素材: 放射 |
||
|
素材: 鏡面 |
||
|
素材: 反射の度合い |
||
時間ベースの効果
一部のシェーダーには、効果をアニメーション化する時間ベースのコンポーネントがあります。 実際の効果の表示方法を確認するには、プレビューを毎秒数回更新する必要があります。 既定では、プレビューはシェーダーが変更されたときにのみ更新されます。この動作を変更して時間ベースの効果を表示できるようにするには、リアルタイム レンダリングを有効にする必要があります。
リアルタイム レンダリングを有効にするには
- シェーダー デザイナーのツール バーで、[Real Time Rendering] (リアルタイム レンダリング) を選択します。
効果の確認
多くのシェーダーは角度または指向性ライトのような変数に影響されます。 これら変数の変化に対する効果の応答方法を調べるには、プレビュー図形を自由に回転して、シェーダーの動作方法を確認することができます。
図形を回転するには
- Alt キーを押しながら、デザイン サーフェイスの任意のポイントを選択して移動します。
シェーダーのエクスポート
アプリでシェーダーを使用するには、DirectX が理解できる形式でシェーダーをエクスポートする必要があります。
シェーダーは HLSL ソース コードまたはコンパイル済みシェーダー バイトコードとしてエクスポートできます。 HLSL ソース コードでは、ファイル名拡張子が .hlsl のテキスト ファイルにエクスポートされます。 シェーダー バイトコードでは、ファイル名拡張子が .cso の生のバイナリ ファイルか、シェーダー バイトコードを配列にエンコードする C++ ヘッダー (.h) ファイルのいずれかにエクスポートできます。
シェーダーのエクスポート方法の詳細については、「方法: シェーダーをエクスポートする」を参照してください。
キーボード ショートカット
コマンド |
キーボード ショートカット |
|---|---|
[選択] モードに切り替えます。 |
Ctrl + G、Gtrl + Q S |
[ズーム] モードに切り替えます。 |
Ctrl + G、Ctrl + Z Z |
[パン] モードに切り替えます。 |
Ctrl + G、Ctrl + P K |
すべて選択 |
Ctrl + A |
現在の選択範囲を削除します。 |
[Delete] |
現在の選択を取り消します。 |
エスケープ特殊文字 |
ズーム イン |
Ctrl + マウス ホイール前方移動 プラス記号 (+) |
ズーム アウト |
Ctrl + マウス ホイール後方移動 マイナス記号 (-) |
デザイン サーフェイスを上へパン |
マウス ホイール後方移動 PageDown |
デザイン サーフェイスを下へパン |
マウス ホイール前方移動 PageUp |
デザイン サーフェイスを左へパン |
Shift + マウス ホイール後方移動 マウス ホイール左 Shift + PageDown |
デザイン サーフェイスを右へパン |
Shift + マウス ホイール前方移動 マウス ホイール右 Shift + PageUp |
キーボード フォーカスを別のノードに移動 |
方向キー |
キーボード フォーカスがあるノードを選択 (選択グループにノードを追加) |
Shift + Space |
キーボード フォーカスがあるノードの選択を切り替え |
Ctrl + Space |
現在の選択を切り替え (ノードが選択されていない場合、キーボード フォーカスがあるノードを選択) |
Space |
現在の選択を上へ移動 |
Shift + ↑ |
現在の選択を下へ移動 |
Shift + ↓ |
現在の選択を左へ移動 |
Shift + ← |
現在の選択を右へ移動 |
Shift + → |
関連トピック
タイトル |
説明 |
|---|---|
、テクスチャとイメージ、3-D モデル、シェーダー効果を操作するために使用できる Visual Studio ツールの概要を説明します。 |
|
Visual Studio イメージ エディターを使用してテクスチャとイメージを操作する方法について説明します。 |
|
Visual Studio モデル エディターを使用して 3-D モデルを操作する方法について説明します。 |