Designer de Sombreador
Este documento descreve como trabalhar com o Designer de Sombreador do Visual Studio para criar, modificar e exportar efeitos visuais personalizados conhecidos como sombreadores.
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. Para criar um sombreador em Designer de sombreador, você organiza o layout como um gráfico. 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. Em cada nó de operação, uma visualização do efeito até esse ponto é fornecida para que você possa visualizar seu resultado. Os dados fluem através de nós para um nó final que representa a saída do sombreador.
Formatos com suporte
O Designer de Sombreador dá suporte a esses formatos de sombreador:
| Nome do formato | Extensão do arquivo | Operações com suporte (Exibir, Editar, Exportar) |
|---|---|---|
| Idioma do Sombreador de Gráfico Direcionado | .dgsl | Exibir, Editar |
| Sombreador HLSL (código-fonte) | .hlsl | Exportação |
| Sombreador HLSL (código de bytes) | .cso | Exportação |
| Cabeçalho C++ (matriz de código de bytes HLSL) | .h | Exportação |
Introdução
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.
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++.
Para adicionar um sombreador DGSL ao seu projeto
Verifique se você tem o componente necessário do Visual Studio instalado para trabalhar com gráficos. O componente é chamado de Editores de imagens e modelos 3D.
Para instalá-lo, abra o Instalador do Visual Studio selecionando Ferramentas>Obter Ferramentas e Recursos na barra de menus e selecione a guia Componentes individuais. Selecione o componente Editores de imagem e modelo 3D na categoria Jogos e Gráficos e selecione Modificar.
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.
Na caixa de diálogo Adicionar Novo Item, em Instalado, selecione Gráficos e 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.
Especifique o Nome do arquivo de modelo e a Localização em que deseja que ele seja criado.
Clique no botão Adicionar.
O sombreador padrão
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. Embora esse sombreador seja completo e funcional, ele não faz muita coisa. 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.
Trabalhar com o Designer de Sombreador
As seções a seguir descrevem como usar o Designer de Sombreador para trabalhar com sombreadores personalizados.
Barras de ferramentas do Designer de sombreador
As barras de ferramentas do Designer de Sombreador contêm comandos que ajudam a trabalhar com grafos de sombreador DGSL.
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. Ferramentas de design e comandos estão localizados na barra de ferramentas Designer de Sombreador na superfície de design do Designer de Sombreador.
Aqui está a barra de ferramentas Modo de 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:
| Item da barra de ferramentas | Descrição |
|---|---|
| Selecionar | Habilita a interação com nós e bordas no grafo. Nesse modo você pode selecionar nós e movê-los ou excluí-los, além de poder estabelecer bordas ou dividi-las. |
| Panorâmica | Habilita a movimentação de um grafo de sombreador em relação ao quadro de janela. Para deslocar, selecione um ponto na superfície de design e movimente-o ao redor. No modo Selecionar, pressione e segure a tecla Ctrl para ativar o modo Panorâmica temporariamente. |
| Zoom | Habilita a exibição de mais ou menos detalhes do grafo de sombreador em relação ao quadro de janela. 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. No modo Selecionar, pressione e segure a tecla Ctrl para ampliar ou reduzir usando o botão de rolagem do mouse. |
| Aplicar Zoom para Ajustar | Exibe o grafo de sombreador completo no quadro de janela. |
| Modo de Renderização em Tempo Real | 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. Esse modo é útil quando você trabalha com sombreadores que se alteram ao longo do tempo. |
| Visualizar com esfera | Quando habilitado, um modelo de uma esfera é usado para visualizar o sombreador. Só é possível habilitar uma forma de visualização por vez. |
| Visualizar com cubo | Quando habilitado, um modelo de um cubo é usado para visualizar o sombreador. Só é possível habilitar uma forma de visualização por vez. |
| Visualizar com cilindro | Quando habilitado, um modelo de um cilindro é usado para visualizar o sombreador. Só é possível habilitar uma forma de visualização por vez. |
| Visualizar com cone | Quando habilitado, um modelo de um cone é usado para visualizar o sombreador. Só é possível habilitar uma forma de visualização por vez. |
| Visualizar com bule | Quando habilitado, um modelo de um bule é usado para visualizar o sombreador. Só é possível habilitar uma forma de visualização por vez. |
| Visualizar com plano | Quando habilitado, um modelo de um plano é usado para visualizar o sombreador. Só é possível habilitar uma forma de visualização por vez. |
| Caixa de Ferramentas | De modo alternado, mostra ou oculta a Caixa de Ferramentas. |
| Propriedades | De modo alternado, mostra ou oculta a janela Propriedades. |
| Avançado | Contém comandos e opções avançados. Exportar: permite a exportação de um sombreador em vários formatos. Exportar Como: exporta o sombreador como o código-fonte HLSL ou código de bytes do sombreador compilado. Para obter mais informações sobre como exportar sombreadores, confira Como exportar um sombreador. Mecanismos Gráficos: permite a seleção do renderizador que é usado para exibir a superfície de design. Renderizar com D3D11: usa o Direct3D 11 para renderizar a superfície de design do Designer de Sombreador. Renderizar com D3D11WARP: usa a WARP (Direct3D 11 Windows Advanced Rasterization Platform) para renderizar a superfície de design do Designer de Sombreador. Exibir: permite a seleção de informações adicionais sobre o Designer de Sombreador. Taxa de Quadros: quando habilitada, exibe a taxa de quadros no canto superior direito da superfície de design. A taxa de quadros é o número de quadros desenhados por segundo. Essa opção é útil quando você habilita a opção Modo de Renderização em Tempo Real. |
Dica
Você pode escolher o botão Avançado para executar novamente o último comando.
Trabalhar com nós e conexões
Use o modo Selecionar para adicionar, remover, reposicionar, conectar e configurar nós. Eis como executar essas operações básicas:
Para executar operações básicas no modo Selecionar
Este é o procedimento:
Para adicionar um nó ao grafo, selecione-o na Caixa de Ferramentas e mova-o para a superfície de design.
Para remover um nó do grafo, selecione-o e, em seguida, pressione Delete.
Para reposicionar um nó, selecione-o e, em seguida, mova-o para um novo local.
Para conectar dois nós, mova um terminal de saída de um nó para um terminal de entrada do outro nó. Somente terminais de tipos compatíveis podem ser conectados. Uma linha entre os terminais mostra a conexão.
Para remover uma conexão, no menu de atalho para qualquer um dos terminais conectados, escolha Quebrar Links.
Para configurar as propriedades de um nó, selecione o nó e, em seguida, na janela Propriedades, especifique novos valores para as propriedades.
Visualizar sombreadores
Para ajudá-lo a entender como um sombreador aparecerá em seu aplicativo, você pode configurar como seu efeito é visualizado. 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.
Formas
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. Dependendo do sombreador, determinadas formas podem fornecer uma melhor visualização.
Para escolher uma forma de visualização, na barra de ferramentas Modos do Designer de Sombreador, escolha a forma que você deseja.
Parâmetros de materiais e texturas
Muitos sombreadores contam com texturas e propriedades de material para produzir uma aparência exclusiva para cada tipo de objeto em seu aplicativo. 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.
Para associar uma textura diferente a um registro de textura ou modificar outros parâmetros de material:
No modo Selecionar, selecione uma área vazia da superfície de design. Isso faz com que a janela Propriedades exiba as propriedades globais do sombreador.
Na janela Propriedades, especifique novos valores para as propriedades de textura e de parâmetro que você deseja alterar.
A tabela a seguir mostra os parâmetros de sombreador que você pode modificar:
| Parâmetro | Propriedades |
|---|---|
| Textura 1 - Textura 8 | Access: Public para permitir que esta propriedade possa ser configurada pelo Editor de Modelo; caso contrário, Private. Filename: o caminho completo do arquivo de textura que está associado com o registro de textura. |
| Material Ambiente | Access: Public para permitir que esta propriedade possa ser configurada pelo Editor de Modelo; caso contrário, Private. Valor: a cor difusa do pixel atual devido à luz indireta, ou seja, a luz ambiente. |
| Material Difuso | Access: Public para permitir que esta propriedade possa ser configurada pelo Editor de Modelo; caso contrário, Private. Valor: uma cor que descreve como o pixel atual difunde a iluminação direta. |
| Material Emissivo | Access: Public para permitir que esta propriedade possa ser configurada pelo Editor de Modelo; caso contrário, Private. Valor: a contribuição de cor do pixel atual é devido à iluminação própria. |
| Material Especular | Access: Public para permitir que esta propriedade possa ser configurada pelo Editor de Modelo; caso contrário, Private. Valor: uma cor que descreve como o pixel atual reflete a iluminação direta. |
| Material Energia Especular | Access: Public para permitir que esta propriedade possa ser configurada pelo Editor de Modelo; caso contrário, Private. Valor: o expoente que define a intensidade dos realces especulares no pixel atual. |
Efeitos de tempo
Alguns sombreadores têm um componente baseado em tempo que anima o efeito. Para mostrar qual a aparência do efeito em ação, a visualização tem que ser atualizada várias vezes por segundo. 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.
Para habilitar a renderização em tempo real, na barra de ferramentas do Designer de Sombreador, escolha Renderização em Tempo Real.
Examinar o efeito
Muitos sombreadores são afetados por variáveis como ângulo de exibição ou luz direcional. 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.
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.
Exportar sombreadores
Antes de usar um sombreador em seu aplicativo, você precisa exportá-lo em um formato compatível com o DirectX.
Você pode exportar sombreadores como código-fonte HLSL ou código de bytes do sombreador compilado. O código-fonte HLSL é exportado para um arquivo de texto que tem uma extensão de nome de arquivo .hlsl. O código de bytes do sombreador pode ser exportado para um arquivo binário bruto que tenha uma extensão de nome de arquivo .cso ou para um arquivo de cabeçalho (.h) C++ que codifique o código de bytes do sombreador em uma matriz.
Para obter mais informações sobre como exportar sombreadores, confira Como exportar um sombreador.
Atalhos do teclado
| Comando | Atalhos do teclado |
|---|---|
| Mudar para o modo Selecionar | Ctrl+G, Ctrl+Q S |
| Mudar para o modo Zoom | Ctrl+G, Ctrl+Z Z |
| Mudar para o modo Panorâmico | Ctrl+G, Ctrl+P K |
| Selecionar tudo | Ctrl+A |
| Excluir a seleção atual | Excluir |
| Cancelar a seleção atual | Escape (Esc) |
| Ampliar | Ctrl+Botão de rolagem do mouse para frente Sinal de adição (+) |
| Reduzir | Ctrl+Botão de rolagem do mouse para trás Sinal de subtração (-) |
| Deslocar para cima na superfície de design | Botão de rolagem do mouse para trás PageDown |
| Deslocar para baixo na superfície de design | Botão de rolagem do mouse para frente PageUp |
| Deslocar para a esquerda na superfície de design | Shift+Botão de rolagem do mouse para trás Botão de rolagem do mouse para a esquerda Shift+PageDown |
| Deslocar para a direita na superfície de design | Shift+Botão de rolagem do mouse para frente Botão de rolagem do mouse para a direita Shift+PageUp |
| Mover o foco do teclado para outro nó | As teclas de direção |
| Selecione o nó que tem o foco do teclado (adiciona o nó para o grupo de seleção) | Shift+Barra de espaços |
| Ativar/desativar a seleção do nó que tem o foco do teclado | Ctrl+Barra de espaços |
| Ativar/desativar a seleção atual (se nenhum nó estiver selecionado, selecione o nó que tem o foco do teclado) | Barra de espaços |
| Mover a seleção atual para cima | Shift+Seta para cima |
| Mover a seleção atual para baixo | Shift+Seta para baixo |
| Mover a seleção atual para a esquerda | Shift+Seta para a esquerda |
| Mover a seleção atual para a direita | Shift+Seta para a direita. |
Tópicos relacionados
| Título | Descrição |
|---|---|
| Trabalhando com ativos 3D para jogos e aplicativos | 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. |
| Editor de Imagens | Descreve como usar o Editor de Imagens do Visual Studio para trabalhar com texturas e imagens. |
| Editor de modelo | Descreve como usar o Editor de Modelos do Visual Studio para trabalhar com modelos 3D. |