Designer de sombreador

Esse documento descreve como trabalhar com o Visual Studio Shader Designer para criar, modificar e exportar efeitos visuais personalizados conhecidos como sombreadores.

Você pode usar o Shader Designer para criar efeitos visuais personalizados para seu game ou app mesmo se você não souber a programação de HLSL.Para criar um sombreador no Shader Designer, é só você dispor como um gráfico; ou seja, você adiciona os nós de superfície de design que representam dados e operações e faz as conexões entre elas definirem como as operações processam os dados.Em cada nó da operação, uma visualização do efeito até esse ponto é fornecido para que você possa exibir o resultado.Os dados fluem pelos nós em direção ao nó final que representa a saída do sombreador.

Formatos suportados

O Shader Designer suporte esses formatos de sombreadores:

Nome do formato	File Extension	Operações suportadas (Exibir, Editar, Exportar)
Linguagem do Sombreador de Gráfico Direcionado	.dgsl	Exibir, editar
Sombreador HLSL (código-fonte)	.hlsl	Exportar
Sombreador HLSL (bytecode)	.cso	Exportar
Cabeçalho do C++ (matriz de bytecode de HLSL)	.h	Exportar

Guia de Introdução

Esta seção descreve como adicionar um shader de DGSL ao seu projeto de Visual Studio e fornece informações básicas para ajudá-lo a começar.

Para adicionar um shader de DGSL ao seu projeto

1. Em Gerenciador de Soluções, abra o menu de atalho para o projeto ao qual você deseja adicionar o shader, e então escolha Adicionar, Novo Item.

2. Na caixa de diálogo de Adicionar novo item , em Instalado, Gráficosselecione, e então seleciona Gráfico de Shader (visual .dgsl).

3. Especificar Nome do arquivo do shader, e Local onde você deseja seja criado.

4. Escolha o botão Adicionar.

O shader padrão

Cada vez que você cria um shader de DGSL, ele começa como um shader mínimo que tem apenas um nó de Ponto de Cor que é conectado ao nó de Cor final .Embora esse seja shader completo e funcional, não faz muito.Como consequência, a primeira etapa na criação um shader trabalhando é geralmente excluir o nó de Ponto de Cor ou desligá-lo do nó de Cor final para fazer espaço para outros nós.

Trabalhando com o Shader Designer

As seguintes seções descrevem como usar o designer de Shader para trabalhar com shaders personalizados.

Barras de ferramentas do Designer de Sombreador

As barras de ferramentas do Shader Designer contêm comandos que o ajudam a trabalhar com elementos gráficos de sombreador do DGSL.

Os comandos que afetam o estado de Shader Designer estão localizados na barra de ferramentas Modo do Shader Designer na janela principal do Visual Studio.As ferramentas de design e os comandos estão localizados na barra de ferramentas Shader Designer na superfície de design Shader Designer.

Aqui está a barra de ferramentas Modo do Shader Designer:

Esta tabela descreve os itens na barra de ferramentas Modo Designer de Sombreador, listados na ordem em que aparecem da esquerda para a direita:

Item da barra de ferramentas	Descrição
Select	Permite a interação com nós e bordas no gráfico.Neste modo, você pode selecionar nós e movê-los ou excluí-los, e você pode estabelecer limites ou quebrá-los.
Bandeja	Habilita a movimentação de um gráfico do sombreador em relação ao quadro da janela.Para filtrar, selecione um ponto na superfície de design e mova-o ao redor. No modo Selecionar, você pode manter pressionado Ctrl para ativar o modo Panorâmico temporariamente.
Zoom	Habilita a exibição de mais ou menos detalhes do gráfico do sombreador em relação ao quadro da janela.No modo Zoom, selecionar um ponto na superfície de design e, em seguida, movê-lo para a direita ou para baixo para ampliar ou para a esquerda ou para cima para diminuir o zoom. No modo Selecionar, você pode manter pressionado Ctrl ampliar ou diminuir usando o botão de rolagem do mouse.
Ampliar para caber	Exibe o gráfico do sombreador completo no quadro da janela.
Modo de renderização em tempo real	Quando o processamento em tempo real for ativado, o Visual Studio redesenha a superfície de design, mesmo quando nenhuma ação de usuário é executada.Esse modo é útil quando você trabalha com sombreadores que mudam ao longo do tempo.
Visualização com esfera	Quando ativado, um modelo de uma esfera é usado para visualizar o sombreador.Somente uma forma de visualização de cada vez pode ser ativada.
Visualização com cubo	Quando ativado, um modelo de um cubo é usado para visualizar o sombreador.Somente uma forma de visualização de cada vez pode ser ativada.
Visualização com cilindro	Quando ativado, um modelo de um cilindro é usado para visualizar o sombreador.Somente uma forma de visualização de cada vez pode ser ativada.
Visualização com cone	Quando ativado, um modelo de um cone é usado para visualizar o sombreador.Somente uma forma de visualização de cada vez pode ser ativada.
Visualização com bule	Quando ativado, um modelo de um bule é usado para visualizar o sombreador.Somente uma forma de visualização de cada vez pode ser ativada.
Visualização com plano	Quando ativado, um modelo de um plano é usado para visualizar o sombreador.Somente uma forma de visualização de cada vez pode ser ativada.
Caixa de Ferramentas	Como alternativa, mostra ou oculta a Caixa de Ferramentas.
Propriedades	Como alternativa, mostra ou oculta a janela Propriedades.
Avançado	Contém comandos e opções avançados. Exportar Habilita a exportação de um sombreador em vários formatos. Exportar como Exporta o sombreador como código-fonte HLSL ou como o bytecode do sombreador compilado.Para obter mais informações sobre como exportar sombreadores, consulte Como: exportar um sombreador. Mecanismos gráficos Habilita a seleção do renderizador usado para exibir a superfície de design. Processar com D3D11 Usa a Direct3D 11 para processar a superfície de design do Shader Designer. Processar com D3D11WARP Usa o Direct3D 11 Windows Advanced Rasterization Platform (WARP) para processar a superfície de design do Shader Designer. View Habilita a seleção de informações adicionais sobre o Shader Designer. Taxa de quadros Quando ativado, exibe a taxa de quadros atual 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 processamento em tempo real . Dica Você pode escolher o botão Avançado para executar novamente o último comando.

Trabalhar connosco e conexões

Use o modo Selecionar para adicionar, remover, reposicionar, conectar, e configurar nós.Aqui está como executar essas operações básicas:

Para executar operações básicas no modo de Seleção

• Aqui está como:

  • Para adicionar um nó ao gráfico, selecione-o em Caixa de Ferramentas e mova-o para a superfície de design.

  • Para remover um nó de gráfico, selecione e pressione exclusão.

  • 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 de outro nó.Somente terminais com 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 um dos terminais conectados, escolha Links de interrupção.

  • Para configurar as propriedades de um nó, selecione o nó e, em seguida, na janela Propriedades , especifique os novos valores para as propriedades.

Visualizando sombreadores

Para ajudar você a entender como um sombreador aparecerá no seu app, você pode configurar como o efeito é visualizado.Para aproximar o app, você pode escolher uma das várias formas para processar, configurar texturas e outros parâmetros materiais, para ativar a animação de efeitos com base o tempo e para examinar a visualização de ângulos diferentes.

Formas

O Shader Designer inclui seis formas — uma esfera, um cubo, um cilindro, um cone, um bule e um plano — que você pode usar para visualizar seu sombreador.Dependendo do sombreador, determinadas formas podem fornecer uma visualização melhor.

Escolha uma forma de visualização

• Na barra de ferramentas Modos de Designer de Sombreador, escolha a forma desejada.

Texturas e parâmetros de material

Muitos sombreadores dependem de texturas e propriedades de material para produzir uma aparência única para cada tipo de objeto no seu aplicativo.Para ver o aspecto que o seu sombreador terá em seu app, você pode definir as texturas e as propriedades de material usadas para processar a visualização para combinar as texturas e parâmetros que você pode usar em seu app.

Para associar uma textura diferente a um registro de textura, ou alterar outros parâmetros materiais

1. No modo Selecionar, selecionar uma área vazia na superfície de design.Isso faz com que a janela de Propriedades exiba as propriedades globais do sombreador.

2. Na janela Propriedades, especificar novos valores para as propriedades de textura e parâmetro que você quer mudar.

Aqui estão os parâmetros do sombreador que você pode alterar:

Parâmetro	Propriedades
Textura 1 – Textura 8	Acesso Público para permitir que a propriedade seja definida a partir do editor de modelo; caso contrário, Particular. Nome de arquivo O caminho completo do arquivo de textura que está associado com esse registro de textura.
Material de ambiente	Acesso Público para permitir que a propriedade seja definida a partir do editor de modelo; caso contrário, Particular. Valor A cor difusa do pixel atual devido à iluminação indireta – ou ambiente.
Material difuso	Acesso Público para permitir que a propriedade seja definida a partir do editor de modelo; caso contrário, Particular. Valor Uma cor que descreve como o pixel atual difunde a iluminação direta.
Material emissivo	Acesso Público para permitir que a propriedade seja definida a partir do editor de modelo; caso contrário, Particular. Valor A contribuição de cores de pixel atual devido à iluminação auto-fornecida.
Material especular	Acesso Público para permitir que a propriedade seja definida a partir do editor de modelo; caso contrário, Particular. Valor Uma cor que descrevem como o pixel atual reflete a iluminação direta.
Poder especular material	Acesso Público para permitir que a propriedade seja definida a partir do editor de modelo; caso contrário, Particular. Valor O expoente que define a intensidade de realces especulares no pixel atual.

Efeitos baseados no tempo

Alguns sombreadores têm um componente temporizado que anima o efeito.Para mostrar como fica o efeito em ação, o visualizador precisa ser atualizado várias vezes por segundo.Por padrão, a visualização é atualizada somente quando o sombreador é alterado; para alterar esse comportamento para que você possa exibir efeitos baseados em tempo, será necessário ativar a renderização em tempo real.

Para ativar a renderização em tempo real

• Na barra de ferramentas Designer de Sombreador, escolha Renderização em Tempo Real.

Examinando o efeito

Muitos sombreadores são afetados por variáveis como o ângulo de exibição ou iluminação direcional.Para examinar como o efeito responde enquanto essas variáveis são alteradas, você pode rotacionar a forma de visualização livremente e observar como o sombreador se comporta.

Para girar uma forma

• Pressione a tecla ALT e mantenha-a pressionada enquanto seleciona um ponto na superfície de design e move-o.

Exportando sombreadores

Antes de usar um sombreador em seu aplicativo, você precisa exportá-lo em um formato que o DirectX compreende.

Você pode exportar sombreadores como o código-fonte de HLSL ou como o bytecode compilado do sombreador.O código-fonte HLSL é exportado para um arquivo de texto que possui uma extensão de nome de arquivo .hlsl.O bytecode do sombreador pode ser exportado para um arquivo binário bruto que tenha uma extensão de nome de arquivo .cso ou para um cabeçalho C+++ (.h) que codifique o bytecode do sombreador em uma matriz.

Para obter mais informações sobre como exportar sombreadores, consulte Como: exportar um sombreador.

Atalhos de teclado

Comando	Atalhos de teclado
Alterne para o modo Selecionar	Ctrl+G, Gtrl+Q S
Alternar para o modo Zoom	Ctrl+G, Ctrl+Z Z
Alternar para o modo Panorâmico	Ctrl+G, Ctrl+P K
Selecione tudo	Ctrl+A
Excluir a seleção atual	Excluir
Cancelar a seleção atual	Escape
Ampliar	Ctrl+Roda do mouse para frente Sinal de Adição (+)
Reduzir	Ctrl-Roda do mouse para trás Sinal de subtração (-)
Mover a superfície de design para cima	Roda do mouse para trás PageDown
Mover a superfície de design para baixo	Roda do mouse para frente PageUp
Mover a superfície de design para a esquerda	Shift+Roda do mouse para trás Roda do mouse para a esquerda Shift+PageDown
Mover a superfície de design para a direita	Shift+Roda do mouse para frente Roda 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ó ao 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ço
Seleção atual de alternância (se nenhum nó for selecionado, selecione o nó que tem o foco do teclado)	Barra de espaço
Mover a seleção atual para cima	Shift+Seta para Cima
Mover seleção atual para baixo	Shift+Seta para baixo
Mover seleção atual para a esquerda	Shift+Seta à Esquerda
Mover seleção atual para a direita	Shift+Seta à Direita.

Tópicos relacionados

Nome	Descrição
Trabalhando com ativos 3D para jogos e aplicativos	Fornece uma visão geral das ferramentas de Visual Studio que você pode usar para trabalhar com texturas e imagens, modelos 3d, e efeitos de características.
Editor de imagem	Descreve como usar o Editor de Imagem Visual Studio para trabalhar com texturas e imagens.
Editor de modelo	Descreve como usar o Editor Modelo Visual Studio para trabalhar com modelos 3-D.