このドキュメントでは、Visual Studio シェーダー デザイナー を使用して、シェーダーと呼ばれるカスタムビジュアルエフェクトを作成、変更、およびエクスポートする方法について説明 します。
シェーダー デザイナーを使用すると、高度なシェーダー言語 (HLSL) プログラミングがわからない場合でも、ゲームまたはアプリのカスタム視覚効果を作成できます。 シェーダー デザイナーでシェーダーを作成するには、グラフとしてレイアウトします。 つまり、データと操作を表すデザイン サーフェイス ノード に追加し、それらのノード間に接続を作成して、操作でデータを処理する方法を定義します。 各操作ノードでは、結果を視覚化できるように、その時点までの効果のプレビューが提供されます。 データは、シェーダーの出力を表す最終的なノードに向かってノードを通過します。
サポートされるフォーマット
シェーダー デザイナーでは、次のシェーダー形式がサポートされています。
| 書式名 | ファイル拡張子 | サポートされている操作 (表示、編集、エクスポート) |
|---|---|---|
| 有向グラフ シェーダー言語 | .dgsl | 表示、編集 |
| HLSL シェーダー (ソース コード) | .hlsl | Export |
| HLSL シェーダー (バイトコード) | .cso | Export |
| C++ ヘッダー (HLSL バイトコード配列) | .h | Export |
概要
このセクションでは、Visual Studio C++ プロジェクトに DGSL シェーダーを追加する方法について説明し、作業の開始に役立つ基本情報を提供します。
注
シェーダー グラフ (.dgsl ファイル) などのグラフィックス項目の自動ビルド統合は、C++ プロジェクトでのみサポートされています。
プロジェクトに DGSL シェーダーを追加するには
グラフィックスを操作するために必要な Visual Studio コンポーネントがインストールされていることを確認します。 このコンポーネントは、 イメージ および 3D モデル エディターと呼ばれます。
インストールするには、メニュー バーから [ツール>Get Tools and Features]\(ツールと機能\) を選択して Visual Studio インストーラーを開き、[個々のコンポーネント] タブを選択します。[ゲームとグラフィックス] カテゴリの下にあるイメージおよび 3D モデル エディター コンポーネントを選択し、[変更] を選択します。
ソリューション エクスプローラーで、シェーダーを追加する C++ プロジェクトのショートカット メニューを開き、[追加>新しい項目] を選択します。
[ 新しい項目の追加 ] ダイアログ ボックスの [ インストール済み] で、[ グラフィックス] を選択し、[ Visual Shader Graph (.dgsl)] を選択します。
注
[新しい項目の追加] ダイアログに [グラフィックス] カテゴリが表示されず、Image および 3D モデル エディター コンポーネントがインストールされている場合、プロジェクトの種類に対してグラフィックス項目はサポートされません。
シェーダー ファイルの 名前 と、作成する 場所 を指定します。
[追加] ボタンをクリックします。
既定のシェーダー
DGSL シェーダーを作成するたびに、最後のカラー ノードに接続されているポイント カラー ノードのみを持つ最小限のシェーダーとして開始されます。 このシェーダーは完全で機能しますが、あまり機能しません。 したがって、作業シェーダーを作成する最初の手順は、多くの場合、[ ポイント カラー] ノードを削除するか、[ 最終色 ] ノードから切断して、他のノード用のスペースを作成することです。
シェーダー デザイナーを使用する
次のセクションでは、シェーダー デザイナーを使用してカスタム シェーダーを操作する方法について説明します。
シェーダー デザイナーのツール バー
シェーダー デザイナーのツール バーには、DGSL シェーダー グラフの操作に役立つコマンドが含まれています。
シェーダー デザイナーの状態に影響するコマンドは、Visual Studio のメイン ウィンドウの [シェーダー デザイナー モード ] ツール バーにあります。 デザイン ツールとコマンドは、[ シェーダー デザイナー] デザイン サーフェイスの [シェーダー デザイナー] ツール バーにあります。
シェーダー デザイナー モードツール バーを次に示します。
次の表では、 シェーダー デザイナー モード ツール バーの項目について説明します。これらは、左から右に表示される順序で一覧表示されます。
| ツールバー項目 | Description |
|---|---|
| 選ぶ | グラフ内のノードとエッジとの対話を有効にします。 このモードでは、ノードを選択してノードを移動または削除し、エッジを確立したり、分割したりできます。 |
| パン | ウィンドウ フレームに対するシェーダー グラフの移動を有効にします。 パンするには、デザイン サーフェイス上のポイントを選択して移動します。 選択モードでは、Ctrl キーを押しながらパン モードを一時的に有効にすることができます。 |
| ズーム | ウィンドウ フレームを基準にして、多かれ少なかれシェーダー グラフの詳細を表示できるようにします。
ズーム モードで、デザイン サーフェイス上のポイントを選択し、右または下に移動して拡大するか、左または上に移動して縮小します。 選択モードでは、Ctrl キーを押しながらマウス ホイールを使用して拡大または縮小できます。 |
| サイズに合わせてズーム | ウィンドウ フレームに完全なシェーダー グラフを表示します。 |
| Real-Time レンダリング モード | リアルタイム レンダリングが有効になっている場合、ユーザー アクションが実行されない場合でも、Visual Studio によってデザイン サーフェイスが再描画されます。 このモードは、時間の経過と共に変化するシェーダーを操作する場合に便利です。 |
| 球を使用したプレビュー | 有効にすると、シェーダーのプレビューに球のモデルが使用されます。 一度に有効にできるプレビュー図形は 1 つだけです。 |
| キューブを使用したプレビュー | 有効にすると、キューブのモデルを使用してシェーダーをプレビューします。 一度に有効にできるプレビュー図形は 1 つだけです。 |
| シリンダーを使用したプレビュー | 有効にすると、円柱のモデルを使用してシェーダーをプレビューします。 一度に有効にできるプレビュー図形は 1 つだけです。 |
| 円錐を使用したプレビュー | 有効にすると、円錐のモデルを使用してシェーダーをプレビューします。 一度に有効にできるプレビュー図形は 1 つだけです。 |
| ティーポットを使用したプレビュー | 有効にすると、ティーポットのモデルを使用してシェーダーをプレビューします。 一度に有効にできるプレビュー図形は 1 つだけです。 |
| 平面を使用したプレビュー | 有効にすると、平面のモデルを使用してシェーダーをプレビューします。 一度に有効にできるプレビュー図形は 1 つだけです。 |
| ツールボックス | ツールボックスを交互に表示または非表示にします。 |
| プロパティ | または、[ プロパティ ] ウィンドウを表示または非表示にします。 |
| 上級 | 高度なコマンドとオプションが含まれています。 エクスポート: シェーダーのエクスポートを複数の形式で有効にします。 エクスポート: HLSL ソース コードまたはコンパイル済みシェーダー バイトコードとしてシェーダーをエクスポートします。 シェーダーをエクスポートする方法の詳細については、「 方法: シェーダーをエクスポートする」を参照してください。 グラフィックス エンジン: デザイン サーフェイスの表示に使用するレンダラーの選択を有効にします。 D3D11 を使用したレンダリング: Direct3D 11 を使用してシェーダー デザイナーのデザイン サーフェイスをレンダリングします。 D3D11WARPを使用したレンダリング: Direct3D 11 Windows Advanced Rasterization Platform (WARP) を使用してシェーダー デザイナーのデザイン サーフェイスをレンダリングします。 ビュー: シェーダー デザイナーに関する追加情報の選択を有効にします。 フレーム レート: 有効にすると、現在のフレーム レートがデザイン サーフェイスの右上隅に表示されます。 フレーム レートは、1 秒あたりに描画されるフレームの数です。 このオプションは、 Real-Time レンダリング モード オプションを有効にする場合に便利です。 |
ヒント
[詳細設定] ボタンを選択して、最後のコマンドをもう一度実行できます。
ノードと接続の操作
選択モードを使用して、ノードの追加、削除、位置変更、接続、構成を行います。 これらの基本的な操作を実行する方法を次に示します。
Select モードで基本的な操作を実行するには
その方法は次のとおりです。
グラフにノードを追加するには、[ ツールボックス] でノードを選択し、デザイン 画面に移動します。
グラフからノードを削除するには、ノードを選択して Delete キーを押 します。
ノードの位置を変更するには、ノードを選択し、新しい場所に移動します。
2 つのノードを接続するには、1 つのノードの出力ターミナルをもう一方のノードの入力ターミナルに移動します。 接続できるのは、互換性のある型を持つターミナルのみです。 ターミナル間の線が接続を示しています。
接続を削除するには、いずれかの接続済みターミナルのショートカット メニューで、[ リンクの解除] を選択します。
ノードのプロパティを構成するには、ノードを選択し、[ プロパティ ] ウィンドウでプロパティの新しい値を指定します。
シェーダーのプレビュー
シェーダーがアプリでどのように表示されるかを理解するために、効果のプレビュー方法を構成できます。 アプリを近似するには、レンダリングする複数の図形のいずれかを選択し、テクスチャやその他のマテリアル パラメーターを構成し、時間ベースの効果のアニメーションを有効にして、さまざまな角度からプレビューを調べることができます。
Shapes
シェーダー デザイナーには、シェーダーのプレビューに使用できる 6 つの図形 (球、立方体、円柱、円錐、ティーポット、平面) が含まれています。 シェーダーによっては、特定の図形のプレビューが向上する場合があります。
プレビュー図形を選択するには、[ シェーダー デザイナー モード ] ツール バーで、目的の図形を選択します。
テクスチャとマテリアル のパラメーター
多くのシェーダーは、テクスチャとマテリアルのプロパティに依存して、アプリ内のオブジェクトの種類ごとに一意の外観を生成します。 アプリでシェーダーの外観を確認するには、プレビューのレンダリングに使用されるテクスチャとマテリアル のプロパティを、アプリで使用するテクスチャとパラメーターと一致するように設定できます。
別のテクスチャをテクスチャ レジスタにバインドしたり、他のマテリアル パラメータを変更したりするには:
選択モードで、デザイン サーフェイスの空の領域を選択します。 これにより、[ プロパティ] ウィンドウにグローバル シェーダー プロパティが表示されます。
[ プロパティ ]ウィンドウで、変更するテクスチャプロパティとパラメータプロパティの新しい値を指定します。
次の表に、変更できるシェーダー パラメーターを示します。
| パラメーター | プロパティ |
|---|---|
| テクスチャ 1 - テクスチャ 8 | ファイル名: このテクスチャ レジスタに関連付けられているテクスチャ ファイルの完全なパス。 |
| マテリアルアンビエント |
Access: プロパティをモデルエディターから設定できるようにする場合は パブリック。そうでない場合は プライベート。 値: 間接 (アンビエント) 照明による現在のピクセルの拡散色。 |
| マテリアル拡散 |
Access: モデルエディターからプロパティを設定できるようにするには Public、それ以外の場合は Private。 値: 現在のピクセルが直接光を拡散する方法を表す色。 |
| 材料放射 |
Access: モデル エディターからプロパティを設定できるようにするには Public。それ以外の場合は Private。 値: 自己提供の照明による現在のピクセルの色の影響。 |
| マテリアルの反射 |
Access: 「Public」にすると、モデルエディターからプロパティを設定できます。それ以外の場合は「Private」です。 値: 現在のピクセルが直接照明を反映する方法を表す色。 |
| マテリアルの反射力 |
Access: モデルエディターからプロパティを設定できるようにするには公開設定にします。それ以外の場合は非公開設定です。 値: 現在のピクセルの反射ハイライトの強度を定義する指数。 |
時間ベースの効果
一部のシェーダーには、効果をアニメーション化する時間ベースのコンポーネントがあります。 実際の効果を表示するには、プレビューを 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 |
| すべて選択する | + |
| 現在の選択範囲を削除する | 削除 |
| 現在の選択範囲を取り消す | エスケープ (Esc) |
| ズームインする |
+
マウス ホイールを前方に移動する プラス記号 (+) |
| ズームアウト |
+
マウス ホイールを後方に移動する マイナス符号 (-) |
| デザイン サーフェスを上にスクロールする |
マウス ホイールを後方に移動する PageDown |
| デザイン サーフェイスを下にスクロールする |
マウス ホイールを前方に移動する PageUp |
| デザイン サーフェイスを左に移動する |
+
マウス ホイールを後方に移動する マウスホイール左 + PageDown |
| デザイン サーフェイスを右にパンする |
+
マウス ホイールを前方に移動する マウス ホイール右 + PageUp |
| キーボード フォーカスを別のノードに移動する | 方向キー |
| キーボード フォーカスがあるノードを選択します (選択グループにノードを追加します) | Shift+スペースキー |
| キーボード フォーカスがあるノードの選択を切り替える | Ctrl+スペースバー |
| 現在の選択を切り替える (ノードが選択されていない場合は、キーボード フォーカスがあるノードを選択します) | スペースバー |
| 現在の選択範囲を上に移動する | + |
| 現在の選択範囲を下に移動する | + |
| 現在の選択範囲を左に移動する | Shift+左矢印 |
| 現在の選択範囲を右に移動する | + 右矢印。 |
関連トピック
| Title | Description |
|---|---|
| ゲームとアプリの 3D アセットの操作 | テクスチャとイメージ、3D モデル、シェーダー効果の操作に使用できる Visual Studio ツールの概要について説明します。 |
| イメージ エディター | Visual Studio イメージ エディターを使用してテクスチャとイメージを操作する方法について説明します。 |
| モデル エディター | Visual Studio モデル エディターを使用して 3D モデルを操作する方法について説明します。 |