Designer de SombreadorShader Designer

Este documento descreve como trabalhar com o Designer de Sombreador do Visual Studio para criar, modificar e exportar efeitos visuais personalizados conhecidos como sombreadores.This document describes how to work with the Visual Studio Shader Designer to create, modify, and export custom visual effects that are known as shaders.

Você poderá usar o Designer de Sombreador para criar efeitos visuais personalizados para seu jogo ou aplicativo, mesmo se não souber programação HLSL ou linguagem de sombreador de alto nível.You can use Shader Designer to create custom visual effects for your game or app even if you don't know high-level shader language (HLSL) programming. Para criar um sombreador em Designer de sombreador, você organiza o layout como um gráfico.To create a shader in Shader Designer, you lay it out as a graph. Ou seja, você adiciona nós que representam dados e operações à superfície de design e, em seguida, faz conexões entre eles para definir como as operações processam os dados.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. Em cada nó de operação, uma visualização do efeito até esse ponto é fornecida para que você possa visualizar seu resultado.At each operation node, a preview of the effect up to that point is provided so that you can visualize its result. Os dados fluem através de nós para um nó final que representa a saída do sombreador.Data flows through the nodes toward a final node that represents the output of the shader.

Formatos com suporteSupported formats

O Designer de sombreador dá suporte a estes formatos de sombreador:The Shader Designer supports these shader formats:

Nome do formatoFormat Name Extensão do arquivoFile Extension Operações com suporte (Exibir, Editar, Exportar)Supported Operations (View, Edit, Export)
Idioma do Sombreador de Gráfico DirecionadoDirected Graph Shader Language .dgsl.dgsl Exibir, EditarView, Edit
Sombreador HLSL (código-fonte)HLSL Shader (source code) .hlsl.hlsl ExportaçãoExport
Sombreador HLSL (código de bytes)HLSL Shader (bytecode) .cso.cso ExportaçãoExport
Cabeçalho C++ (matriz de código de bytes HLSL)C++ header (HLSL bytecode array) . h.h ExportaçãoExport

IntroduçãoGet started

Esta seção descreve como adicionar um sombreador DGSL ao seu projeto do Visual Studio C++ e fornece informações básicas para ajudá-lo a começar.This section describes how to add a DGSL shader to your Visual Studio C++ project and provides basic information to help you get started.

Observação

A integração de compilação automática de itens gráficos, como gráficos do sombreador (arquivos .dgsl) tem suporte apenas para projetos em C++.Automatic build integration of graphics items like shader graphs (.dgsl files) is only supported for C++ projects.

Para adicionar um sombreador DGSL ao seu projetoTo add a DGSL shader to your project

  1. Verifique se você tem o componente necessário do Visual Studio instalado para trabalhar com gráficos.Ensure you have the required Visual Studio component installed that you need to work with graphics. O componente é chamado de Editores de imagens e modelos 3D.The component is called Image and 3D model editors.

    Para instalá-lo, abra instalador do Visual Studio selecionando ferramentas > obter ferramentas e recursos na barra de menus e, em seguida, selecione a guia componentes individuais . Selecione o componente imagem e editores de modelo 3D na categoria jogos e gráficos e, em seguida, selecione Modificar.To install it, open Visual Studio Installer by selecting Tools > Get Tools and Features from the menu bar, and then select the Individual components tab. Select the Image and 3D model editors component under the Games and Graphics category, and then select Modify.

    Componente Editores de imagens e modelos 3D

  2. No Gerenciador de Soluções, abra o menu de atalho do projeto do C++ ao qual deseja adicionar o sombreador e escolha Adicionar > Novo Item.In Solution Explorer, open the shortcut menu for the C++ project to which you want to add the shader, and then choose Add > New Item.

  3. Na caixa de diálogo Adicionar Novo Item, em Instalado, selecione Gráficos e Visual Shader Graph (.dgsl).In the Add New Item dialog box, under Installed, select Graphics, and then select Visual Shader Graph (.dgsl).

    Observação

    Se a categoria Elementos Gráficos não aparece na caixa de diálogo Adicionar Novo Item e você tem o componente Editores de imagens e modelos 3D instalado, não há suporte para os itens de gráficos desse tipo de projeto.If you don't see the Graphics category in the Add New Item dialog, and you have the Image and 3D model editors component installed, graphics items are not supported for your project type.

  4. Especifique o Nome do arquivo de modelo e a Localização em que deseja que ele seja criado.Specify the Name of the shader file, and the Location where you want it to be created.

  5. Clique no botão Adicionar.Choose the Add button.

O sombreador padrãoThe default shader

Cada vez que você criar um sombreador DGSL, ele começará como um sombreador mínimo com apenas um nó de Cor de Ponto conectado ao nó Cor Final.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. Embora esse sombreador seja completo e funcional, ele não faz muita coisa.Although this shader is complete and functional, it doesn't do much. Portanto, a primeira etapa na criação de um sombreador de trabalho geralmente é excluir o nó Cor de Ponto ou desconectá-lo do nó Cor Final para liberar espaço para outros nós.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.

Trabalhar com o Designer de SombreadorWork with the Shader Designer

As seções a seguir descrevem como usar o Designer de Sombreador para trabalhar com sombreadores personalizados.The following sections describe how to use the Shader Designer to work with custom shaders.

Barras de ferramentas do Designer de sombreadorShader Designer toolbars

As barras de ferramentas do Designer de Sombreador contêm comandos que ajudam a trabalhar com grafos de sombreador DGSL.The Shader Designer toolbars contain commands that help you work with DGSL shader graphs.

Os comandos que afetam o estado do Designer de Sombreador estão localizados na barra de ferramentas Modo do Designer de Sombreador na janela principal do Visual Studio.Commands that affect the state of the Shader Designer are located on the Shader Designer Mode toolbar in the main Visual Studio window. Ferramentas de design e comandos estão localizados na barra de ferramentas Designer de Sombreador na superfície de design do Designer de Sombreador.Design tools and commands are located on the Shader Designer toolbar on the Shader Designer design surface.

Aqui está a barra de ferramentas Modo de Designer de Sombreador:Here's the Shader Designer Mode toolbar:

A barra de ferramentas modal do Designer de Sombreador.

Esta tabela descreve os itens na barra de ferramentas Modo do Designer de Sombreador, que são listados na ordem em que aparecem, da esquerda para a direita: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:

Item da barra de ferramentasToolbar Item DescriçãoDescription
SelecionarSelect Habilita a interação com nós e bordas no grafo.Enables interaction with nodes and edges in the graph. Nesse modo você pode selecionar nós e movê-los ou excluí-los, além de poder estabelecer bordas ou dividi-las.In this mode, you can select nodes and move or delete them, and you can establish edges or break them.
PanorâmicaPan Habilita a movimentação de um grafo de sombreador em relação ao quadro de janela.Enables movement of a shader graph relative to the window frame. Para deslocar, selecione um ponto na superfície de design e movimente-o ao redor.To pan, select a point on the design surface and move it around.

No modo de seleção , você pode pressionar e manter a tecla CTRL para ativar o modo panorâmico temporariamente.In Select mode, you can press and hold Ctrl to activate Pan mode temporarily.
ZoomZoom Habilita a exibição de mais ou menos detalhes do grafo de sombreador em relação ao quadro de janela.Enables the display of more or less shader-graph detail relative to the window frame. No modo Zoom, selecione um ponto na superfície de design e mova-o para a direita ou para baixo para ampliar ou então para a esquerda ou para cima para reduzir.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.

No modo de seleção , você pode pressionar e manter a tecla CTRL para ampliar ou reduzir usando a roda do mouse.In Select mode, you can press and hold Ctrl to zoom in or out by using the mouse wheel.
Ajustar zoomZoom to Fit Exibe o grafo de sombreador completo no quadro de janela.Displays the full shader graph in the window frame.
Modo de Renderização em Tempo RealReal-Time Rendering Mode Quando a renderização em tempo real for habilitada, o Visual Studio redesenhará a superfície de design, mesmo quando nenhuma ação de usuário for executada.When real-time rendering is enabled, Visual Studio redraws the design surface, even when no user action is performed. Esse modo é útil quando você trabalha com sombreadores que se alteram ao longo do tempo.This mode is useful when you work with shaders that change over time.
Visualizar com esferaPreview with sphere Quando habilitado, um modelo de uma esfera é usado para visualizar o sombreador.When enabled, a model of a sphere is used to preview the shader. Só é possível habilitar uma forma de visualização por vez.Only one preview shape at a time can be enabled.
Visualizar com cuboPreview with cube Quando habilitado, um modelo de um cubo é usado para visualizar o sombreador.When enabled, a model of a cube is used to preview the shader. Só é possível habilitar uma forma de visualização por vez.Only one preview shape at a time can be enabled.
Visualizar com cilindroPreview with Cylinder Quando habilitado, um modelo de um cilindro é usado para visualizar o sombreador.When enabled, a model of a cylinder is used to preview the shader. Só é possível habilitar uma forma de visualização por vez.Only one preview shape at a time can be enabled.
Visualizar com conePreview with cone Quando habilitado, um modelo de um cone é usado para visualizar o sombreador.When enabled, a model of a cone is used to preview the shader. Só é possível habilitar uma forma de visualização por vez.Only one preview shape at a time can be enabled.
Visualizar com bulePreview with teapot Quando habilitado, um modelo de um bule é usado para visualizar o sombreador.When enabled, a model of a teapot is used to preview the shader. Só é possível habilitar uma forma de visualização por vez.Only one preview shape at a time can be enabled.
Visualizar com planoPreview with plane Quando habilitado, um modelo de um plano é usado para visualizar o sombreador.When enabled, a model of a plane is used to preview the shader. Só é possível habilitar uma forma de visualização por vez.Only one preview shape at a time can be enabled.
Caixa de FerramentasToolbox De modo alternado, mostra ou oculta a Caixa de Ferramentas.Alternately shows or hides the Toolbox.
PropriedadesProperties De modo alternado, mostra ou oculta a janela Propriedades.Alternatively shows or hides the Properties window.
AvançadoAdvanced Contém comandos e opções avançados.Contains advanced commands and options.

Exportar: permite a exportação de um sombreador em vários formatos.Export: Enables the export of a shader in several formats.

Exportar Como: exporta o sombreador como o código-fonte HLSL ou código de bytes do sombreador compilado.Export As: Exports the shader as either HLSL source code or as compiled shader bytecode. Para obter mais informações sobre como exportar sombreadores, consulte como exportar um sombreador.For more information about how to export shaders, see How to: Export a shader.

Mecanismos Gráficos: permite a seleção do renderizador que é usado para exibir a superfície de design.Graphics Engines: Enables the selection of the renderer that is used to display the design surface.

Renderizar com D3D11: usa o Direct3D 11 para renderizar a superfície de design do Designer de Sombreador.Render with D3D11: Uses Direct3D 11 to render the Shader Designer design surface.

Renderizar com D3D11WARP: usa a WARP (Direct3D 11 Windows Advanced Rasterization Platform) para renderizar a superfície de design do Designer de Sombreador.Render with D3D11WARP: Uses Direct3D 11 Windows Advanced Rasterization Platform (WARP) to render the Shader Designer design surface.

Exibir: permite a seleção de informações adicionais sobre o Designer de Sombreador.View: Enables the selection of additional information about the Shader Designer.

Taxa de Quadros: quando habilitada, exibe a taxa de quadros no canto superior direito da superfície de design.Frame Rate: When enabled, displays the current frame rate in the upper-right corner of the design surface. A taxa de quadros é o número de quadros desenhados por segundo.The frame rate is the number of frames that are drawn per second. Essa opção é útil quando você habilita a opção Modo de Renderização em Tempo Real.This option is useful when you enable the Real-Time Rendering Mode option.

Dica

Você pode escolher o botão Avançado para executar novamente o último comando.You can choose the Advanced button to run the last command again.

Trabalhar com nós e conexõesWork with nodes and connections

Use o modo Selecionar para adicionar, remover, reposicionar, conectar e configurar nós.Use Select mode to add, remove, reposition, connect, and configure nodes. Eis como executar essas operações básicas:Here's how to perform these basic operations:

Para executar operações básicas no modo SelecionarTo perform basic operations in Select mode

  • Aqui está como:Here's how:

    • Para adicionar um nó ao grafo, selecione-o na Caixa de Ferramentas e mova-o para a superfície de design.To add a node to the graph, select it in the Toolbox and then move it to the design surface.

    • Para remover um nó do grafo, selecione-o e pressione excluir.To remove a node from the graph, select it and then press Delete.

    • Para reposicionar um nó, selecione-o e, em seguida, mova-o para um novo local.To reposition a node, select it and then move it to a new location.

    • Para conectar dois nós, mova um terminal de saída de um nó para um terminal de entrada do outro nó.To connect two nodes, move an output terminal of one node to an input terminal of the other node. Somente terminais de tipos compatíveis podem ser conectados.Only terminals that have compatible types can be connected. Uma linha entre os terminais mostra a conexão.A line between the terminals shows the connection.

    • Para remover uma conexão, no menu de atalho para qualquer um dos terminais conectados, escolha Quebrar Links.To remove a connection, on the shortcut menu for either one of the connected terminals, choose Break Links.

    • Para configurar as propriedades de um nó, selecione o nó e, em seguida, na janela Propriedades, especifique novos valores para as propriedades.To configure the properties of a node, select the node, and then, in the Properties window, specify new values for the properties.

Visualizar sombreadoresPreview shaders

Para ajudá-lo a entender como um sombreador aparecerá em seu aplicativo, você pode configurar como seu efeito é visualizado.To help you understand how a shader will appear in your app, you can configure how your effect is previewed. Para aproximar o seu aplicativo, você pode escolher uma das várias formas para renderizar, configurar texturas e outros parâmetros de material, habilitar animação dos efeitos com base em tempo e examinar a visualização de ângulos diferentes.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.

FormasShapes

O Designer de Sombreador inclui seis formas – uma esfera, um cubo, um cilindro, um cone, um bule e um plano – que você pode usar para visualizar o sombreador.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. Dependendo do sombreador, determinadas formas podem fornecer uma melhor visualização.Depending on the shader, certain shapes might give you a better preview.

Para escolher uma forma de visualização, na barra de ferramentas Modos do Designer de Sombreador, escolha a forma que você deseja.To choose a preview shape, on the Shader Designer Modes toolbar, choose the shape that you want.

Parâmetros de materiais e texturasTextures and material parameters

Muitos sombreadores contam com texturas e propriedades de material para produzir uma aparência exclusiva para cada tipo de objeto em seu aplicativo.Many shaders rely on textures and material properties to produce a unique appearance for each kind of object in your app. Para ver a aparência que seu sombreador terá em seu aplicativo, você pode definir as texturas e propriedades de material que são usadas para renderizar a visualização para corresponder às texturas e parâmetros que você deseja usar em seu aplicativo.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.

Para associar uma textura diferente a um registro de textura ou modificar outros parâmetros de material:To bind a different texture to a texture register, or to modify other material parameters:

  1. No modo Selecionar, selecione uma área vazia da superfície de design.In Select mode, select an empty area of the design surface. Isso faz com que a janela Propriedades exiba as propriedades globais do sombreador.This causes the Properties window to display the global shader properties.

  2. Na janela Propriedades, especifique novos valores para as propriedades de textura e de parâmetro que você deseja alterar.In the Properties window, specify new values for the texture and parameter properties that you want to change.

A tabela a seguir mostra os parâmetros de sombreador que você pode modificar:The following table shows the shader parameters that you can modify:

ParâmetroParameter PropriedadesProperties
Textura 1 - Textura 8Texture 1 - Texture 8 Acesso: público para permitir que a propriedade seja definida no editor de modelo; caso contrário, privado.Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

Filename: o caminho completo do arquivo de textura que está associado com o registro de textura.Filename: The full path of the texture file that is associated with this texture register.
Material AmbienteMaterial Ambient Acesso: público para permitir que a propriedade seja definida no editor de modelo; caso contrário, privado.Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

Valor: a cor difusa do pixel atual devido à iluminação indireta ou de ambiente.Value: The diffuse color of the current pixel due to indirect - or ambient - lighting.
Material DifusoMaterial Diffuse Access: Public para permitir que esta propriedade possa ser configurada pelo Editor de Modelo; caso contrário, Private.Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

Valor: uma cor que descreve como o pixel atual difunde a iluminação direta.Value: A color that describes how the current pixel diffuses direct lighting.
Material EmissivoMaterial Emissive Acesso: público para permitir que a propriedade seja definida no editor de modelo; caso contrário, privado.Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

Valor: a contribuição de cor do pixel atual é devido à iluminação própria.Value: The color contribution of the current pixel due to self-provided lighting.
Material EspecularMaterial Specular Acesso: público para permitir que a propriedade seja definida no editor de modelo; caso contrário, privado.Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

Valor: uma cor que descreve como o pixel atual reflete a iluminação direta.Value: A color that describes how the current pixel reflects direct lighting.
Material Energia EspecularMaterial Specular Power Acesso: público para permitir que a propriedade seja definida no editor de modelo; caso contrário, privado.Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

Valor: o expoente que define a intensidade dos realces especulares no pixel atual.Value: The exponent that defines the intensity of specular highlights on the current pixel.

Efeitos de tempoTime-based effects

Alguns sombreadores têm um componente baseado em tempo que anima o efeito.Some shaders have a time-based component that animates the effect. Para mostrar qual a aparência do efeito em ação, a visualização tem que ser atualizada várias vezes por segundo.To show what the effect looks like in action, the preview has to be updated several times per second. Por padrão, a visualização só é atualizada quando o sombreador é alterado; para alterar esse comportamento para que você possa exibir efeitos baseados em tempo, você precisa habilitar a renderização em tempo real.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.

Para habilitar a renderização em tempo real, na barra de ferramentas do Designer de Sombreador, escolha Renderização em Tempo Real.To enable real-time rendering, on the Shader Designer toolbar, choose Real time Rendering.

Examinar o efeitoExamine the effect

Muitos sombreadores são afetados por variáveis como ângulo de exibição ou luz direcional.Many shaders are affected by variables such as viewing angle or directional lighting. Para examinar como o efeito responde às alterações nessas variáveis, você pode girar a forma de visualização livremente e observar como o sombreador se comporta.To examine how the effect responds as these variables change, you can rotate the preview shape freely and observe how the shader behaves.

Para girar a forma, pressione e mantenha pressionada a tecla Alt e, em seguida, selecione qualquer ponto na superfície de design e mova-o.To rotate the shape, press and hold Alt, and then select any point on the design surface and move it.

Exportar sombreadoresExport shaders

Antes de usar um sombreador em seu aplicativo, você precisa exportá-lo em um formato compatível com o DirectX.Before you can use a shader in your app, you have to export it in a format that DirectX understands.

Você pode exportar sombreadores como código-fonte HLSL ou código de bytes do sombreador compilado.You can export shaders as HLSL source code or as compiled shader bytecode. O código-fonte HLSL é exportado para um arquivo de texto que tem uma extensão de nome de arquivo . HLSL .HLSL source code is exported to a text file that has an .hlsl file name extension. O código de bytes do sombreador pode ser exportado para um arquivo binário bruto que tem uma extensão de nome de arquivo . CSO ou para um arquivo de cabeçalho (. h) do C++ que codifica o código de bytes do sombreador em uma matriz.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.

Para obter mais informações sobre como exportar sombreadores, consulte como exportar um sombreador.For more information about how to export shaders, see How to: Export a shader.

Atalhos do tecladoKeyboard shortcuts

ComandoCommand Atalhos do tecladoKeyboard shortcuts
Mudar para o modo SelecionarSwitch to Select mode Ctrl + G, Ctrl + QCtrl+G, Ctrl+Q

SS
Mudar para o modo ZoomSwitch to Zoom mode Ctrl + G, Ctrl + ZCtrl+G, Ctrl+Z

ZZ
Mudar para o modo PanorâmicoSwitch to Pan mode Ctrl + G, Ctrl + PCtrl+G, Ctrl+P

CK
Selecionar tudoSelect all Ctrl + UmCtrl+A
Excluir a seleção atualDelete the current selection Delete (excluir)Delete
Cancelar a seleção atualCancel the current selection Escape (Esc)Escape (Esc)
AmpliarZoom in Ctrl + Avanço da roda do mouseCtrl+Mouse wheel forward

Sinal de adição ( + )Plus Sign (+)
ReduzirZoom out Ctrl + Rolagem do mouse para trásCtrl+Mouse wheel backward

Sinal de subtração ( - )Minus Sign (-)
Deslocar para cima na superfície de designPan the design surface up Botão de rolagem do mouse para trásMouse wheel backward

PageDownPageDown
Deslocar para baixo na superfície de designPan the design surface down Botão de rolagem do mouse para frenteMouse wheel forward

PageUpPageUp
Deslocar para a esquerda na superfície de designPan the design surface left Shift + Rolagem do mouse para trásShift+Mouse wheel backward

Botão de rolagem do mouse para a esquerdaMouse wheel left

Shift + PageDownShift+PageDown
Deslocar para a direita na superfície de designPan the design surface right Shift + Avanço da roda do mouseShift+Mouse wheel forward

Botão de rolagem do mouse para a direitaMouse wheel right

Shift + PageUpShift+PageUp
Mover o foco do teclado para outro nóMove the keyboard focus to another node As teclas de direçãoThe Arrow keys
Selecione o nó que tem o foco do teclado (adiciona o nó para o grupo de seleção)Select the node that has keyboard focus (adds the node to the selection group) Shift + Barra de espaçosShift+Spacebar
Ativar/desativar a seleção do nó que tem o foco do tecladoToggle selection of the node that has keyboard focus Ctrl + Barra de espaçosCtrl+Spacebar
Ativar/desativar a seleção atual (se nenhum nó estiver selecionado, selecione o nó que tem o foco do teclado)Toggle current selection (if no nodes are selected, select the node that has keyboard focus) Barra de espaçosSpacebar
Mover a seleção atual para cimaMove the current selection up Shift + Seta para cimaShift+Up Arrow
Mover a seleção atual para baixoMove the current selection down Shift + Seta para baixoShift+Down Arrow
Mover a seleção atual para a esquerdaMove the current selection left Shift + Seta para a esquerdaShift+Left Arrow
Mover a seleção atual para a direitaMove current selection right Shift + Seta para a direita.Shift+Right Arrow.
TitleTitle DescriçãoDescription
Trabalhando com ativos 3D para jogos e aplicativosWorking with 3D assets for games and apps Fornece uma visão geral das ferramentas do Visual Studio que você pode usar para trabalhar com texturas e imagens, modelos 3D e efeitos de sombreamento.Provides an overview of the Visual Studio tools that you can use to work with textures and images, 3D models, and shader effects.
Editor de imagemImage Editor Descreve como usar o Editor de Imagens do Visual Studio para trabalhar com texturas e imagens.Describes how to use the Visual Studio Image Editor to work with textures and images.
Editor de modelosModel Editor Descreve como usar o Editor de Modelos do Visual Studio para trabalhar com modelos 3D.Describes how to use the Visual Studio Model Editor to work with 3D models.