シェーダー デザイナーShader Designer

このドキュメントでは、Visual StudioVisual Studio シェーダー デザイナーを使用して、シェーダーというカスタム視覚効果を作成、変更、およびエクスポートする方法について説明します。This document describes how to work with the Visual StudioVisual Studio Shader Designer to create, modify, and export custom visual effects that are known as shaders.

シェーダー デザイナーを使用すると、HLSL プログラミングを知らなくても、ゲームまたはアプリのカスタム視覚効果を作成できます。You can use the Shader Designer to create custom visual effects for your game or app even if you don't know HLSL programming. シェーダー デザイナーでシェーダーを作成するには、それをグラフとしてレイアウトします。つまり、データおよび操作を表す複数のノードをデザイン サーフェイスに追加し、それらのノードを接続することで、それらの操作によってデータを処理する方法を定義します。To create a shader in the Shader Designer, you just lay it out as a graph; that is, you add to the design surface nodes that represent data and operations and then make connections between them to define how the operations process the data. 各操作ノードでは、その時点までの効果のプレビューを表示して、結果を視覚化することができます。At each operation node, a preview of the effect up to that point is provided so that you can visualize its result. データは、ノード間を移動して最終ノードに到達します。この最終ノードはシェーダーの出力を表しています。Data flows through the nodes toward a final node that represents the output of the shader.

サポートされる形式Supported formats

シェーダー デザイナーは、以下のシェーダー形式をサポートしています。The Shader Designer supports these shader formats:

形式名Format Name ファイル拡張子File Extension サポートされる操作 (表示、編集、エクスポート)Supported Operations (View, Edit, Export)
Directed Graph Shader LanguageDirected Graph Shader Language .dgsl.dgsl 表示、編集View, Edit
HLSL シェーダー (ソース コード)HLSL Shader (source code) .hlsl.hlsl エクスポートExport
HLSL シェーダー (バイトコード)HLSL Shader (bytecode) .cso.cso エクスポートExport
C++ ヘッダー (HLSL バイトコード配列)C++ header (HLSL bytecode array) .h.h エクスポートExport

作業の開始Getting Started

このセクションでは、Visual StudioVisual Studio プロジェクトに DGSL シェーダーを追加する方法を説明し、作業の開始に役立つ基本的な情報を提供します。This section describes how to add a DGSL shader to your Visual StudioVisual Studio project and provides basic information to help you get started.

プロジェクトに DGSL シェーダーを追加する手順To add a DGSL shader to your project

  1. ソリューション エクスプローラーで、シェーダーを追加するプロジェクトのショートカット メニューを開き、[追加][新しい項目] の順に選択します。In Solution Explorer, open the shortcut menu for the project that you want to add the shader to, and then choose Add, New Item.

  2. [新しい項目の追加] ダイアログ ボックスで、[インストール済み] の下にある [グラフィックス] を選択し、[視覚シェーダー グラフ (.dgsl)] を選択します。In the Add New Item dialog box, under Installed, select Graphics, and then select Visual Shader Graph (.dgsl).

  3. シェーダー ファイルの [名前] を指定し、作成する [場所] を指定します。Specify the Name of the shader file, and the Location where you want it to be created.

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

既定のシェーダーThe default shader

DGSL シェーダーを作成するたびに、ポイントの色ノードが最終的な色ノードに接続されている、最小限のシェーダーが最初に作成されます。Each time that you create a DGSL shader, it begins as a minimal shader that has just a Point Color node that's connected to the Final Color node. このシェーダーは完全なものとして機能しますが、その機能は限られています。Although this shader is complete and functional, it doesn't do much. そのため、実用的なシェーダーを作成するには、多くの場合、最初の手順としてポイントの色ノードを削除するか、または最終的な色ノードから切断して、他のノードを追加できるようにします。Therefore, the first step in creating a working shader is often to delete the Point Color node or disconnect it from the Final Color node to make room for other nodes.

シェーダー デザイナーの操作Working with the Shader Designer

以下のセクションでは、シェーダー デザイナーを使用してカスタム シェーダーを操作する方法について説明します。The following sections describe how to use the Shader Designer to work with custom shaders.

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

シェーダー デザイナーのツール バーには、DGSL シェーダー グラフを操作する際に役立つコマンドが用意されています。The Shader Designer toolbars contain commands that help you work with DGSL shader graphs.

シェーダー デザイナーの状態に影響を与えるコマンドは、メイン Visual StudioVisual Studio ウィンドウの [シェーダー デザイナー モード] ツール バーにあります。Commands that affect the state of the Shader Designer are located on the Shader Designer Mode toolbar in the main Visual StudioVisual Studio window. デザイン ツールおよびコマンドは、シェーダー デザイナーのデザイン サーフェイス上の [シェーダー デザイナー] ツール バーにあります。Design tools and commands are located on the Shader Designer toolbar on the Shader Designer design surface.

[シェーダー デザイナー モード] ツール バーを以下に示します。Here's the Shader Designer Mode toolbar:

シェーダー デザイナーのモーダル ツールバー。The Shader Designer modal toolbar.

次の表では、[シェーダー デザイナー モード] ツール バーの各項目について、左から右へ表示される順序で説明します。This table describes the items on the Shader Designer Mode toolbar, which are listed in the order in which they appear from left to right:

ツール バーの項目Toolbar Item 説明Description
選択Select グラフのノードおよびエッジを操作できるようにします。Enables interaction with nodes and edges in the graph. このモードでは、ノードを選択したり、ノードを移動または削除したり、エッジを設定または解除したりすることができます。In this mode, you can select nodes and move or delete them, and you can establish edges or break them.
パンPan ウィンドウ フレームに合わせてシェーダー グラフを移動できるようにします。Enables movement of a shader graph relative to the window frame. パンするには、デザイン サーフェイス上のポイントを選択し、周囲に移動します。To pan, select a point on the design surface and move it around.

[選択] モードで Ctrl キーを押したままにすると、[パン] モードを一時的に有効にすることができます。In Select mode, you can press and hold Ctrl to activate Pan mode temporarily.
ズームZoom ウィンドウ フレームに合わせてシェーダー グラフの詳細を拡大表示または縮小表示できます。Enables the display of more or less shader-graph detail relative to the window frame. [ズーム] モードで、デザイン サーフェイス上のポイントを選択し、右または下へ移動して拡大表示するか、左または上へ移動して縮小表示します。In Zoom mode, select a point on the design surface and then move it right or down to zoom in, or left or up to zoom out.

[選択] モードでは、Ctrl キーを押しながらマウス ホイールを使用して、拡大または縮小することができます。In Select mode, you can press and hold Ctrl to zoom in or out by using the mouse wheel.
ウィンドウのサイズに合わせて大きさを変更Zoom to Fit ウィンドウ フレームにシェーダー グラフ全体を表示します。Displays the full shader graph in the window frame.
リアルタイム レンダリング モードReal-Time Rendering Mode リアルタイム レンダリングを有効にすると、ユーザー動作がない場合でも、Visual StudioVisual Studio でデザイン サーフェイスを再描画します。When real-time rendering is enabled, Visual StudioVisual Studio redraws the design surface, even when no user action is performed. このモードは、時間と共に変化するシェーダーを使用する場合に役立ちます。This mode is useful when you work with shaders that change over time.
球でプレビューPreview with sphere 有効な場合、球のモデルを使用してシェーダーをプレビューします。When enabled, a model of a sphere is used to preview the shader. 一度に 1 つのプレビュー図形だけ有効にすることができます。Only one preview shape at a time can be enabled.
直方体でプレビューPreview with cube 有効な場合、直方体のモデルを使用してシェーダーをプレビューします。When enabled, a model of a cube is used to preview the shader. 一度に 1 つのプレビュー図形だけ有効にすることができます。Only one preview shape at a time can be enabled.
円柱でプレビューPreview with Cylinder 有効な場合、円柱のモデルを使用してシェーダーをプレビューします。When enabled, a model of a cylinder is used to preview the shader. 一度に 1 つのプレビュー図形だけ有効にすることができます。Only one preview shape at a time can be enabled.
円すいでプレビューPreview with cone 有効な場合、円すいのモデルを使用してシェーダーをプレビューします。When enabled, a model of a cone is used to preview the shader. 一度に 1 つのプレビュー図形だけ有効にすることができます。Only one preview shape at a time can be enabled.
ティーポットでプレビューPreview with teapot 有効な場合、ティーポットのモデルを使用してシェーダーをプレビューします。When enabled, a model of a teapot is used to preview the shader. 一度に 1 つのプレビュー図形だけ有効にすることができます。Only one preview shape at a time can be enabled.
平面でプレビューPreview with plane 有効な場合、平面のモデルを使用してシェーダーをプレビューします。When enabled, a model of a plane is used to preview the shader. 一度に 1 つのプレビュー図形だけ有効にすることができます。Only one preview shape at a time can be enabled.
ツールボックスToolbox ツールボックスの表示または非表示を切り替えます。Alternately shows or hides the Toolbox.
プロパティProperties [プロパティ] ウィンドウの表示または非表示を切り替えます。Alternatively shows or hides the Properties window.
詳細設定Advanced 高度なコマンドとオプションがあります。Contains advanced commands and options.

エクスポート: 複数の形式でシェーダーをエクスポートできます。Export: Enables the export of a shader in several formats.

名前を付けてエクスポート: HLSL ソース コードか、またはコンパイル済みシェーダー バイトコードとしてシェーダーをエクスポートします。Export As: Exports the shader as either HLSL source code or as compiled shader bytecode. シェーダーをエクスポートする方法の詳細については、「方法: シェーダーをエクスポートする」を参照してください。For more information about how to export shaders, see How to: Export a Shader.

グラフィックス エンジン: デザイン サーフェイスの表示に使用されるレンダラーを選択できます。Graphics Engines: Enables the selection of the renderer that is used to display the design surface.

D3D11 で描画: Direct3D 11 を使用して、シェーダー デザイナーのデザイン サーフェイスを描画します。Render with D3D11: Uses Direct3D 11 to render the Shader Designer design surface.

D3D11WARP で描画: Direct3D 11 Windows Advanced Rasterization Platform (WARP) を使用して、シェーダー デザイナーのデザイン サーフェイスを描画します。Render with D3D11WARP: Uses Direct3D 11 Windows Advanced Rasterization Platform (WARP) to render the Shader Designer design surface.

表示: シェーダー デザイナーに関する追加情報を選択できるようにします。View: Enables the selection of additional information about the Shader Designer.

フレーム レート: 有効にすると、デザイン サーフェイスの右上隅に現在のフレーム レートが表示されます。Frame Rate: When enabled, displays the current frame rate in the upper-right corner of the design surface. フレーム レートは、1 秒あたりの描画フレーム数です。The frame rate is the number of frames that are drawn per second. このオプションは リアルタイム レンダリング モード オプションを有効にする場合に便利です。This option is useful when you enable the Real-Time Rendering Mode option.

ヒント

[詳細設定] ボタンを選択すると、最後のコマンドを再実行できます。You can choose the Advanced button to run the last command again.

ノードと接続の操作Working with nodes and connections

[選択] モードを使用して、ノードを追加、削除、位置変更、接続、および構成します。Use Select mode to add, remove, reposition, connect, and configure nodes. これらの基本操作を実行する方法を以下に示します。Here's how to perform these basic operations:

[選択] モードで基本操作を実行する方法To perform basic operations in Select mode
  • 次の手順に従います。Here's how:

    • グラフにノードを追加するには、ツールボックスでノードを選択し、デザイン サーフェイスに移動します。To add a node to the graph, select it in the Toolbox and then move it to the design surface.

    • グラフからノードを削除するには、ノードを選択し、Del キーを押します。To remove a node from the graph, select it and then press Delete.

    • ノードの位置を変更するには、ノードを選択し、新しい場所に移動します。To reposition a node, select it and then move it to a new location.

    • 2 つのノードを接続するには、一方のノードの出力ターミナルを、もう一方のノードの入力ターミナルに移動します。To connect two nodes, move an output terminal of one node to an input terminal of the other node. 互換性のある種類のターミナルのみを接続することができます。Only terminals that have compatible types can be connected. ターミナル間の線は、接続を示しています。A line between the terminals shows the connection.

    • 接続を解除するには、接続されたターミナルのいずれかのショートカット メニューで、[リンクの解除] を選択します。To remove a connection, on the shortcut menu for either one of the connected terminals, choose Break Links.

    • ノードのプロパティを構成するには、ノードを選択し、[プロパティ] ウィンドウで、プロパティの新しい値を指定します。To configure the properties of a node, select the node, and then, in the Properties window, specify new values for the properties.

シェーダーのプレビューPreviewing shaders

アプリでシェーダーがどのように表示されるかを確認するため、効果のプレビュー方法を構成することができます。To help you understand how a shader will appear in your app, you can configure how your effect is previewed. アプリを概観するには、いくつかの描画図形のうちの 1 つを選択し、テクスチャやその他の素材のパラメーターを構成し、時間ベースの効果アニメーションを有効にし、さまざまな角度からプレビューを確認します。To approximate your app, you can choose one of several shapes to render, configure textures and other material parameters, enable animation of time-based effects, and examine the preview from different angles.

図形Shapes

シェーダー デザイナーには、シェーダーのプレビューに使用できる、球、直方体、円柱、円すい、ティーポット、および平面という 6 つの図形が用意されています。The Shader Designer includes six shapes—a sphere, a cube, a cylinder, a cone, a teapot, and a plane—that you can use to preview your shader. シェーダーに応じて特定の図形を使用することで、より効果的なプレビューを表示できます。Depending on the shader, certain shapes might give you a better preview.

プレビュー図形を選択する方法To choose a preview shape
  • [シェーダー デザイナー モード] ツールバーで、適切な図形を選択します。On the Shader Designer Modes toolbar, choose the shape that you want.

テクスチャおよび素材パラメーターTextures and material parameters

シェーダーの多くは、テクスチャおよび素材プロパティを基盤として、アプリ内のオブジェクトの種類ごとに固有の外観を生成します。Many shaders rely on textures and material properties to produce a unique appearance for each kind of object in your app. アプリでシェーダーが表示される様子を確認するには、アプリで使用する可能性があるテクスチャおよびパラメーターに合うように、プレビューの描画に使用するテクスチャおよび素材プロパティを設定します。To see what your shader will look like in your app, you can set the textures and material properties that are used to render the preview to match the textures and parameters that you might use in your app.

別のテクスチャをテクスチャ レジスタにバインドするか、他の素材パラメーターを変更する方法To bind a different texture to a texture register, or to modify other material parameters
  1. [選択] モードで、デザイン サーフェイスの空の領域を選択します。In Select mode, select an empty area of the design surface. すると、[プロパティ] ウィンドウにグローバル シェーダー プロパティが表示されます。This causes the Properties window to display the global shader properties.

  2. [プロパティ] ウィンドウで、変更するテクスチャおよびパラメーターのプロパティに新しい値を指定します。In the Properties window, specify new values for the texture and parameter properties that you want to change.

    変更可能なシェーダー パラメーターを以下に示します。Here are the shader parameters that you can modify:

パラメーターParameter プロパティProperties
テクスチャ 1 - テクスチャ 8Texture 1 - Texture 8 アクセス: このプロパティをモデル エディターから設定できるようにする場合は Public、それ以外の場合は Private です。Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

ファイル名: このテクスチャ レジスタに関連付けられているテクスチャ ファイルの完全パスです。Filename: The full path of the texture file that is associated with this texture register.
素材: アンビエントMaterial Ambient アクセス: このプロパティをモデル エディターから設定できるようにする場合は Public、それ以外の場合は Private です。Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

: 間接光 (環境光) による、現在のピクセルの拡散色。Value: The diffuse color of the current pixel due to indirect - or ambient - lighting.
素材: 拡散Material Diffuse アクセス: このプロパティをモデル エディターから設定できるようにする場合は Public、それ以外の場合は Private です。Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

: 現在のピクセルによる直接光の拡散を示す色。Value: A color that describes how the current pixel diffuses direct lighting.
素材: 放射Material Emissive アクセス: このプロパティをモデル エディターから設定できるようにする場合は Public、それ以外の場合は Private です。Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

: オブジェクト自体から放射される光による、現在のピクセルの色の効果。Value: The color contribution of the current pixel due to self-provided lighting.
素材: 鏡面Material Specular アクセス: このプロパティをモデル エディターから設定できるようにする場合は Public、それ以外の場合は Private です。Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

: 現在のピクセルによる直接光の反射を示す色。Value: A color that describes how the current pixel reflects direct lighting.
素材: 反射の度合いMaterial Specular Power アクセス: このプロパティをモデル エディターから設定できるようにする場合は Public、それ以外の場合は Private です。Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

: 現在のピクセルに対する反射の光源の輝度を定義する指数。Value: The exponent that defines the intensity of specular highlights on the current pixel.

時間ベースの効果Time-based effects

シェーダーによっては、効果をアニメーション表示する、時間ベースのコンポーネントがあります。Some shaders have a time-based component that animates the effect. アクションで効果が表示される様子を示すには、プレビューを 1 秒あたりに数回更新する必要があります。To show what the effect looks like in action, the preview has to be updated several times per second. 既定では、シェーダーが変更されたときにのみ、プレビューが更新されます。時間ベースの効果を表示できるようにこの動作を変更するには、リアルタイム レンダリングを有効にする必要があります。By default, the preview is only updated when the shader is changed; to change this behavior so that you can view time-based effects, you have to enable real-time rendering.

リアルタイム レンダリングを有効にする方法To enable real-time rendering
  • シェーダー デザイナー ツール バーで、[リアルタイム レンダリング] を選択します。On the Shader Designer toolbar, choose Real time Rendering.

効果の確認Examining the effect

多くのシェーダーは、視野角や指向性ライトなどの変数の影響を受けます。Many shaders are affected by variables such as viewing angle or directional lighting. これらの変数を変更することで効果に及ぶ影響を確認するには、プレビュー図形を自由に回転して、シェーダーの動きを確認します。To examine how the effect responds as these variables change, you can rotate the preview shape freely and observe how the shader behaves.

図形を回転する方法To rotate the shape
  • Alt キーを押しながら、デザイン サーフェイス上の任意のポイントを選択して動かします。Press and hold Alt, and then select any point on the design surface and move it.

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

アプリでシェーダーを使用するには、その前に、DirectX が認識できる形式でシェーダーをエクスポートする必要があります。Before you can use a shader in your app, you have to export it in a format that DirectX understands.

シェーダーは、HLSL ソース コードまたはコンパイル済みシェーダー バイトコードとしてエクスポートできます。You can export shaders as HLSL source code or as compiled shader bytecode. HLSL ソース コードは、.hlsl ファイル名拡張子の付いたテキスト ファイルにエクスポートされます。HLSL source code is exported to a text file that has an .hlsl file name extension. シェーダー バイトコードは、.cso ファイル名拡張子の付いた未処理のバイナリ ファイルにエクスポートするか、またはシェーダー バイトコードを配列にエンコードする C++ ヘッダー (.h) ファイルにエクスポートすることができます。Shader bytecode can be exported either to a raw binary file that has a .cso file name extension, or to a C++ header (.h) file that encodes the shader bytecode into an array.

シェーダーをエクスポートする方法の詳細については、「方法: シェーダーをエクスポートする」を参照してください。For more information about how to export shaders, see How to: Export a Shader.

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

コマンドCommand キーボード ショートカットKeyboard shortcuts
[選択] モードに切り替えSwitch to Select mode Ctrl + G、Gtrl + QCtrl+G, Gtrl+Q

SS
[ズーム] モードに切り替えSwitch to Zoom mode Ctrl + G、Ctrl + ZCtrl+G, Ctrl+Z

ZZ
[パン] モードに切り替えSwitch to Pan mode Ctrl + G、Ctrl + PCtrl+G, Ctrl+P

KK
すべて選択Select all Ctrl + ACtrl+A
現在の選択範囲を削除します。Delete the current selection 削除Delete
現在の選択を取り消します。Cancel the current selection エスケープ特殊文字Escape
拡大表示Zoom in Ctrl + マウス ホイール前方移動Ctrl+Mouse wheel forward

プラス記号 (+)Plus Sign (+)
ズーム アウトZoom out Ctrl + マウス ホイール後方移動Ctrl-Mouse wheel backward

マイナス記号 (-)Minus Sign (-)
デザイン サーフェイスを上にパンPan the design surface up マウス ホイール後方移動Mouse wheel backward

PageDownPageDown
デザイン サーフェイスを下にパンPan the design surface down マウス ホイール前方移動Mouse wheel forward

PageUpPageUp
デザイン サーフェイスを左にパンPan the design surface left Shift + マウス ホイール後方移動Shift+Mouse wheel backward

マウス ホイール左Mouse wheel left

Shift + PageDownShift+PageDown
デザイン サーフェイスを右にパンPan the design surface right Shift + マウス ホイール前方移動Shift+Mouse wheel forward

マウス ホイール右Mouse wheel right

Shift + PageUpShift+PageUp
キーボード フォーカスを別のノードに移動Move the keyboard focus to another node 方向キーThe Arrow keys
キーボード フォーカスのあるノードを選択 (選択グループにノードを追加)Select the node that has keyboard focus (adds the node to the selection group) Shift + SpaceShift+Spacebar
キーボード フォーカスのあるノードの選択を切り替えるToggle selection of the node that has keyboard focus Ctrl + SpaceCtrl+Spacebar
現在の選択を切り替える (ノードが選択されていない場合、キーボード フォーカスのあるノードを選択)Toggle current selection (if no nodes are selected, select the node that has keyboard focus) Space キーSpacebar
現在の選択を上に移動Move the current selection up Shift + ↑Shift+Up Arrow
現在の選択を下に移動Move the current selection down Shift + ↓Shift+Down Arrow
現在の選択を左に移動Move the current selection left Shift + ←Shift+Left Arrow
現在の選択を右に移動Move current selection right Shift + →Shift+Right Arrow.
タイトルTitle 説明Description
ゲームとアプリケーション用の 3D アセットの操作Working with 3-D Assets for Games and Apps テクスチャ、イメージ、3-D モデル、およびシェーダー効果の操作に使用できる Visual StudioVisual Studio のツールの概要を説明します。Provides an overview of the Visual StudioVisual Studio tools that you can use to work with textures and images, 3-D models, and shader effects.
イメージ エディターImage Editor Visual StudioVisual Studio イメージ エディターを使用してテクスチャとイメージを操作する方法について説明します。Describes how to use the Visual StudioVisual Studio Image Editor to work with textures and images.
モデル エディターModel Editor Visual StudioVisual Studio モデル エディターを使用して 3-D モデルを操作する方法について説明します。Describes how to use the Visual StudioVisual Studio Model Editor to work with 3-D models.