You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/designers/shader-designer-nodes.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -11,11 +11,11 @@ manager: douge
11
11
ms.workload:
12
12
- "multiple"
13
13
---
14
-
# Shader Designer Nodes
14
+
# Shader Designer nodes
15
15
The articles in this section of the documentation contain information about the various Shader Designer nodes that you can use to create graphics effects.
16
16
17
17
## Nodes and node types
18
-
The Shader Designer represents visual effects as a graph. These graphs are built from nodes that are specifically chosen and connected in precise ways to achieve the intended affect. Each node represents either a piece of information or a mathematical function, and the connections between them represent how the information flows through the graph to produce the result. The Shader Designer provides six different node types—filters, texture nodes, parameters, constants, utility nodes, and math nodes—and several individual nodes belong to each type. These nodes and node types are described in the other articles in this section—see the links at the end of this document.
18
+
The Shader Designer represents visual effects as a graph. These graphs are built from nodes that are specifically chosen and connected in precise ways to achieve the intended effect. Each node represents either a piece of information or a mathematical function, and the connections between them represent how the information flows through the graph to produce the result. The Shader Designer provides six different node types—filters, texture nodes, parameters, constants, utility nodes, and math nodes—and several individual nodes belong to each type. These nodes and node types are described in the other articles in this section. For more information, see the links at the end of this document.
19
19
20
20
## Node structure
21
21
All nodes are made up of a combination of common elements. Every node has at least one output terminal on its right-hand side (except the final color node, which represents the output of the shader). Nodes that represent calculations or texture samplers have input terminals on their left-hand sides, but nodes that represent information have no input terminals. Output terminals are connected to input terminals to move information from one node to another.
@@ -39,9 +39,9 @@ The articles in this section of the documentation contain information about the
39
39
40
40
|Title|Description|
41
41
|-----------|-----------------|
42
-
|[Constant Nodes](../designers/constant-nodes.md)|Describes nodes that you can use to represent literal values and interpolated vertex-state information in shader calculations. Because vertex-state is interpolated—and therefore, is different for each pixel—each pixel-shader instance receives a different version of the constant.|
43
-
|[Parameter Nodes](../designers/parameter-nodes.md)|Describes nodes that you can use to represent camera position, material properties, lighting parameters, time, and other app-state information in shader calculations.|
44
-
|[Texture Nodes](../designers/texture-nodes.md)|Describes the nodes that you can use to sample various texture types and geometries, and to produce or transform texture coordinates in common ways.|
45
-
|[Math Nodes](../designers/math-nodes.md)|Describes the nodes that you can use to perform algebraic, logic, trigonometric, and other mathematical operations that map directly to HLSL instructions.|
46
-
|[Utility Nodes](../designers/utility-nodes.md)|Describes the nodes that you can use to perform common lighting calculations and other common operations that do not map directly to HLSL instructions.|
47
-
|[Filter Nodes](../designers/filter-nodes.md)|Describes the nodes that you can use to perform texture filtering and color filtering.|
42
+
|[Constant nodes](../designers/constant-nodes.md)|Describes nodes that you can use to represent literal values and interpolated vertex-state information in shader calculations. Because vertex-state is interpolated—and therefore, is different for each pixel—each pixel-shader instance receives a different version of the constant.|
43
+
|[Parameter nodes](../designers/parameter-nodes.md)|Describes nodes that you can use to represent camera position, material properties, lighting parameters, time, and other app-state information in shader calculations.|
44
+
|[Texture nodes](../designers/texture-nodes.md)|Describes the nodes that you can use to sample various texture types and geometries, and to produce or transform texture coordinates in common ways.|
45
+
|[Math nodes](../designers/math-nodes.md)|Describes the nodes that you can use to perform algebraic, logic, trigonometric, and other mathematical operations that map directly to HLSL instructions.|
46
+
|[Utility nodes](../designers/utility-nodes.md)|Describes the nodes that you can use to perform common lighting calculations and other common operations that do not map directly to HLSL instructions.|
47
+
|[Filter nodes](../designers/filter-nodes.md)|Describes the nodes that you can use to perform texture filtering and color filtering.|
This section describes how to add a DGSL shader to your [!INCLUDE[vsprvs](../code-quality/includes/vsprvs_md.md)] project and provides basic information to help you get started.
37
37
38
38
### To add a DGSL shader to your project
39
39
40
-
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**.
40
+
1. In **Solution Explorer**, open the shortcut menu for the project to which you want to add the shader, and then choose **Add** > **New Item**.
41
41
42
42
2. In the **Add New Item** dialog box, under **Installed**, select **Graphics**, and then select **Visual Shader Graph (.dgsl)**.
43
43
@@ -68,8 +68,8 @@ This table describes the items on the **Shader Designer Mode** toolbar, which ar
68
68
|Toolbar Item|Description|
69
69
|------------------|-----------------|
70
70
|**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.|
71
-
|**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.<br /><br /> In **Select** mode, you can press and hold Ctrl to activate **Pan** mode temporarily.|
72
-
|**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.<br /><br /> In **Select** mode, you can press and hold Ctrl to zoom in or out by using the mouse wheel.|
71
+
|**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.<br /><br /> In **Select** mode, you can press and hold **Ctrl** to activate **Pan** mode temporarily.|
72
+
|**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.<br /><br /> In **Select** mode, you can press and hold **Ctrl** to zoom in or out by using the mouse wheel.|
73
73
|**Zoom to Fit**|Displays the full shader graph in the window frame.|
74
74
|**Real-Time Rendering Mode**|When real-time rendering is enabled, [!INCLUDE[vsprvs](../code-quality/includes/vsprvs_md.md)] redraws the design surface, even when no user action is performed. This mode is useful when you work with shaders that change over time.|
75
75
|**Preview with sphere**|When enabled, a model of a sphere is used to preview the shader. Only one preview shape at a time can be enabled.|
@@ -80,7 +80,7 @@ This table describes the items on the **Shader Designer Mode** toolbar, which ar
80
80
|**Preview with plane**|When enabled, a model of a plane is used to preview the shader. Only one preview shape at a time can be enabled.|
81
81
|**Toolbox**|Alternately shows or hides the **Toolbox**.|
82
82
|**Properties**|Alternatively shows or hides the **Properties** window.|
83
-
|**Advanced**|Contains advanced commands and options.<br /><br /> **Export**: Enables the export of a shader in several formats.<br /><br /> **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](../designers/how-to-export-a-shader.md).<br /><br /> **Graphics Engines**: Enables the selection of the renderer that is used to display the design surface.<br /><br /> **Render with D3D11**: Uses Direct3D 11 to render the Shader Designer design surface.<br /><br /> **Render with D3D11WARP**: Uses Direct3D 11 Windows Advanced Rasterization Platform (WARP) to render the Shader Designer design surface.<br /><br /> **View**: Enables the selection of additional information about the Shader Designer.<br /><br /> **Frame Rate**: When enabled, displays the current frame rate in the upper-right corner of the design surface. 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.|
83
+
|**Advanced**|Contains advanced commands and options.<br /><br /> **Export**: Enables the export of a shader in several formats.<br /><br /> **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](../designers/how-to-export-a-shader.md).<br /><br /> **Graphics Engines**: Enables the selection of the renderer that is used to display the design surface.<br /><br /> **Render with D3D11**: Uses Direct3D 11 to render the Shader Designer design surface.<br /><br /> **Render with D3D11WARP**: Uses Direct3D 11 Windows Advanced Rasterization Platform (WARP) to render the Shader Designer design surface.<br /><br /> **View**: Enables the selection of additional information about the Shader Designer.<br /><br /> **Frame Rate**: When enabled, displays the current frame rate in the upper-right corner of the design surface. 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.|
84
84
85
85
> [!TIP]
86
86
> You can choose the **Advanced** button to run the last command again.
@@ -95,7 +95,7 @@ Use **Select** mode to add, remove, reposition, connect, and configure nodes. He
95
95
96
96
- To add a node to the graph, select it in the **Toolbox** and then move it to the design surface.
97
97
98
-
- To remove a node from the graph, select it and then press Delete.
98
+
- To remove a node from the graph, select it and then press **Delete**.
99
99
100
100
- To reposition a node, select it and then move it to a new location.
101
101
@@ -151,39 +151,39 @@ To rotate the shape, press and hold **Alt**, and then select any point on the de
151
151
152
152
Before you can use a shader in your app, you have to export it in a format that DirectX understands.
153
153
154
-
You can export shaders as HLSL source code or as compiled shader bytecode. HLSL source code is exported to a text file that has an .hlsl file name extension. 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.
154
+
You can export shaders as HLSL source code or as compiled shader bytecode. HLSL source code is exported to a text file that has an *.hlsl* file name extension. 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.
155
155
156
-
For more information about how to export shaders, see [How to: Export a Shader](../designers/how-to-export-a-shader.md).
156
+
For more information about how to export shaders, see [How to: Export a shader](../designers/how-to-export-a-shader.md).
157
157
158
158
## Keyboard shortcuts
159
159
160
160
|Command|Keyboard shortcuts|
161
161
|-------------|------------------------|
162
-
|Switch to **Select** mode|Ctrl+G, Gtrl+Q<br /><br /> S|
163
-
|Switch to **Zoom** mode|Ctrl+G, Ctrl+Z<br /><br /> Z|
164
-
|Switch to **Pan** mode|Ctrl+G, Ctrl+P<br /><br /> K|
165
-
|Select all|Ctrl+A|
166
-
|Delete the current selection|Delete|
167
-
|Cancel the current selection|Escape|
168
-
|Zoom in|Ctrl+Mouse wheel forward<br /><br /> Plus Sign (+)|
169
-
|Zoom out|Ctrl-Mouse wheel backward<br /><br /> Minus Sign (-)|
170
-
|Pan the design surface up|Mouse wheel backward<br /><br /> PageDown|
171
-
|Pan the design surface down|Mouse wheel forward<br /><br /> PageUp|
|Move the keyboard focus to another node|The **Arrow** keys|
175
+
|Select the node that has keyboard focus (adds the node to the selection group)|**Shift**+**Spacebar**|
176
+
|Toggle selection of the node that has keyboard focus|**Ctrl**+**Spacebar**|
177
+
|Toggle current selection (if no nodes are selected, select the node that has keyboard focus)|**Spacebar**|
178
+
|Move the current selection up|**Shift**+**Up Arrow**|
179
+
|Move the current selection down|**Shift**+**Down Arrow**|
180
+
|Move the current selection left|**Shift**+**Left Arrow**|
181
+
|Move current selection right|**Shift**+**Right Arrow**.|
182
182
183
183
## Related topics
184
184
185
185
|Title|Description|
186
186
|-----------|-----------------|
187
-
|[Working with 3D Assets for Games and Apps](../designers/working-with-3-d-assets-for-games-and-apps.md)|Provides an overview of the [!INCLUDE[vsprvs](../code-quality/includes/vsprvs_md.md)] tools that you can use to work with textures and images, 3D models, and shader effects.|
187
+
|[Working with 3D assets for games and apps](../designers/working-with-3-d-assets-for-games-and-apps.md)|Provides an overview of the [!INCLUDE[vsprvs](../code-quality/includes/vsprvs_md.md)] tools that you can use to work with textures and images, 3D models, and shader effects.|
188
188
|[Image Editor](../designers/image-editor.md)|Describes how to use the [!INCLUDE[vsprvs](../code-quality/includes/vsprvs_md.md)] Image Editor to work with textures and images.|
189
189
|[Model Editor](../designers/model-editor.md)|Describes how to use the [!INCLUDE[vsprvs](../code-quality/includes/vsprvs_md.md)] Model Editor to work with 3D models.|
Copy file name to clipboardExpand all lines: docs/designers/the-visual-studio-image-library.md
+4-4Lines changed: 4 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -19,15 +19,15 @@ manager: douge
19
19
ms.workload:
20
20
- "multiple"
21
21
---
22
-
# The Visual Studio Image Library
22
+
# The Visual Studio image library
23
23
24
24
The Visual Studio Image Library contains application images that appear in Microsoft Visual Studio, Microsoft Windows, the Office system and other Microsoft software. This set of over 1,000 images can be used to create applications that look visually consistent with Microsoft software.
25
25
26
-
[Download the Visual Studio Image Library](http://go.microsoft.com/fwlink/p/?LinkId=275090)
26
+
[Download the Visual Studio image library](http://go.microsoft.com/fwlink/p/?LinkId=275090)
27
27
28
-
The image library is divided into five categories: Common Elements, Actions, Annotations, Icons and Objects. Readme files are included in the PDF format for the Common Elements and Icon types. They contain information about how to use these images appropriately in your applications.
28
+
The image library is divided into five categories: Common Elements, Actions, Annotations, Icons, and Objects. Readme files are included in the PDF format for the Common Elements and Icon types. They contain information about how to use these images appropriately in your applications.
0 commit comments