Designer de Sombreador

 

Para obter a documentação mais recente do Visual Studio 2017 RC, consulte a documentação do Visual Studio 2017 RC.

Este documento descreve como trabalhar com o Visual Studio Designer do sombreador para criar, modificar e exportar efeitos visuais personalizados que são conhecidos como sombreadores.

Você pode usar o Designer do sombreador para criar efeitos visuais personalizados para seu jogo ou aplicativo, mesmo se você não souber programação HLSL. Para criar um sombreador no Designer de sombreador, você simplesmente organizar o layout como um gráfico. ou seja, você adicionar à superfície de design nós que representam dados e operações e, em seguida, fazer conexões entre eles para definir como as operações de 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.

O Designer de sombreador oferece suporte a esses formatos de sombreador:

Nome do formatoExtensão do arquivoOperações com suporte (Exibir, editar, exportar)
Idioma do sombreador de gráfico direcionado.dgslExibir, editar
Sombreador HLSL (código-fonte).HLSLExportar
Sombreador HLSL (código de bytes).CSOExportar
Cabeçalho C++ (matriz de código de bytes do HLSL). hExportar

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

Para adicionar um sombreador DGSL ao seu projeto

  1. Em Solution Explorer, abra o menu de atalho para o projeto que você deseja adicionar o sombreador e escolha Adicionar, Novo Item.

  2. Na Adicionar Novo Item caixa de diálogo instalados, selecione gráficos, e, em seguida, selecione gráfico de sombreador Visual (.dgsl).

  3. Especifique o nome do arquivo sombreador e o local onde você deseja que ele seja criado.

  4. Escolha o Add botão.

O sombreador padrão

Cada vez que você criar um sombreador DGSL, ele começa como um sombreador mínimo que tem apenas um ponto cor nó que está conectado ao cor Final nó. Embora esse sombreador é completo e funcional, ele não faz muita coisa. Portanto, a primeira etapa na criação de um sombreador de trabalho geralmente é excluir o cor de ponto nó ou desconectá-lo do cor Final nó para liberar espaço para outros nós.

As seções a seguir descrevem como usar o Designer do sombreador para trabalhar com sombreadores personalizados.

Barras de ferramentas de Designer de sombreador

O Designer de sombreador barras de ferramentas contém comandos que ajudam a trabalhar com gráficos de sombreador DGSL.

Comandos que afetam o estado do Designer de sombreador estão localizados no modo de Designer de sombreador barra de ferramentas principal Visual Studio janela. Ferramentas de design e comandos estão localizados o Designer de sombreador barra de ferramentas na superfície de design do Designer de sombreador.

Aqui está o modo de Designer de sombreador barra de ferramentas:

Barra de ferramentas modal do Designer de sombreador.

Esta tabela descreve os itens na modo de Designer de sombreador barra de ferramentas, que estão listados na ordem em que aparecem da esquerda para a direita:

Item da barra de ferramentasDescrição
SelecioneHabilita a interação conosco e bordas do gráfico. Nesse modo, você pode selecionar nós e mova ou excluí-los e você pode estabelecer bordas ou dividi-los.
PanorâmicaPermite a movimentação de um gráfico de sombreador em relação ao quadro da janela. Para aplicar panorâmica, selecione um ponto na superfície de design e movê-lo.

Em Selecione modo, pressione e segure a tecla Ctrl para ativar Panorâmica modo temporariamente.
ZoomPermite a exibição de mais ou menos detalhes do gráfico de sombreador em relação ao quadro da janela. Em Zoom modo, selecionar um ponto na superfície de design e movê-lo à direita ou para baixo para aumentar o zoom ou para a esquerda ou para cima para reduzir horizontalmente.

Em Selecione modo, pressione e segure a tecla Ctrl para ampliar ou reduzir usando a roda do mouse.
Ajustar nível de zoomExibe o gráfico de sombreador completa no quadro da janela.
Modo de renderização em tempo realQuando 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 esferaQuando habilitado, um modelo de uma esfera é usado para visualizar o sombreador. Forma de visualizar apenas um por vez pode ser habilitada.
Visualização com o cuboQuando habilitado, um modelo de um cubo é usado para visualizar o sombreador. Forma de visualizar apenas um por vez pode ser habilitada.
Visualização com cilindroQuando habilitado, um modelo de um cilindro é usado para visualizar o sombreador. Forma de visualizar apenas um por vez pode ser habilitada.
Visualizar com coneQuando habilitado, um modelo de um cone é usado para visualizar o sombreador. Forma de visualizar apenas um por vez pode ser habilitada.
Visualizar com buleQuando habilitado, um modelo de um bule é usado para visualizar o sombreador. Forma de visualizar apenas um por vez pode ser habilitada.
Visualizar com planoQuando habilitado, um modelo de um plano é usado para visualizar o sombreador. Forma de visualizar apenas um por vez pode ser habilitada.
Caixa de ferramentasComo alternativa, mostra ou oculta o ferramentas.
PropriedadesComo alternativa, mostra ou oculta o propriedades janela.
AvançadoConté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 de origem HLSL ou código de bytes do sombreador compilado. Para obter mais informações sobre como exportar sombreadores, consulte como: exportar um sombreador.

 Mecanismos de 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 o Direct3D 11 Windows Advanced Rasterization Platform (WARP) para renderizar a superfície de design do Designer de sombreador.

 Exibição: permite a seleção de informações adicionais sobre o Designer de sombreador.

 Taxa de quadro: quando habilitado, 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ê ativa o modo de renderização em tempo real opção.
System_CAPS_ICON_tip.jpg Dica

Você pode escolher o Avançado botão Executar novamente o último comando.

Trabalhando conosco e conexões

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

Para executar operações básicas no modo de seleção
  • Veja como:

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

    • Para remover um nó do gráfico, selecione-o e pressione Delete.

    • Para reposicionar um nó, selecione-o e, em seguida, movê-lo 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ó. Podem ser conectados somente os terminais que possuem tipos compatíveis. Uma linha entre os terminais mostra a conexão.

    • Para remover uma conexão, no menu de atalho para qualquer um dos terminais de conectado, escolha Quebrar Links.

    • Para configurar as propriedades de um nó, selecione o nó e, em seguida, no propriedades janela, especificar novos valores para as propriedades.

Visualização de sombreadores

Para ajudá-lo a entender como um sombreador aparecerá em seu aplicativo, você pode configurar como o 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 examine 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.

Escolher uma forma de visualização
  • Sobre o modos do Designer de sombreador barra de ferramentas, 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 seu sombreador em seu aplicativo, você pode definir as texturas e propriedades de material que são usadas para processar a visualização para corresponder as texturas e parâmetros que você pode usar em seu aplicativo.

Para associar uma textura diferente para um registro de textura ou modificar outros parâmetros de material
  1. Em Selecione modo, selecione uma área vazia da superfície de design. Isso faz com que o propriedades janela para exibir as propriedades globais do sombreador.

  2. No propriedades janela, especificar novos valores para as propriedades de textura e o parâmetro que você deseja alterar.

Aqui estão os parâmetros de sombreador que você pode modificar:

ParâmetroPropriedades
1 de texturatextura 8Acesso: pública para permitir que a propriedade seja definida no Editor de modelo; caso contrário, particular.

 Nome do arquivo: O caminho completo do arquivo de textura que está associado este registro de textura.
Material de ambienteAcesso: pública para permitir que a propriedade seja definida no Editor de modelo; caso contrário, particular.

 Valor: A cor do pixel atual devido a iluminação indireta ou ambiente difusa.
Material difusoAcesso: pública para permitir que a propriedade seja definida no Editor de modelo; caso contrário, particular.

 Valor: uma cor que descreve como o pixel atual difunde iluminação direta.
Material EmissivoAcesso: pública para permitir que a propriedade seja definida no Editor de modelo; caso contrário, particular.

 Valor: A contribuição de cor do pixel atual devido a iluminação fornecida automaticamente.
Material especularAcesso: pública para permitir que a propriedade seja definida no Editor de modelo; caso contrário, particular.

 Valor: uma cor que descreve como o pixel atual reflete a luz direta.
Energia especular materialAcesso: pública para permitir que a propriedade seja definida no Editor de modelo; caso contrário, particular.

 Valor: O expoente que define a intensidade de realces especulares em pixel atual.

Efeitos de tempo

Alguns sombreadores tem um componente baseado em tempo que anime o efeito. Para mostrar o que o efeito é semelhante em ação, a visualização tem que ser atualizados 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 renderização em tempo real.

Para habilitar a renderização em tempo real
  • Na barra de ferramentas do Designer de sombreador, escolha processamento em tempo Real.

Examinando o efeito

Muitos sombreadores são afetados pelas variáveis como exibir ângulo ou iluminação direcional. Para examinar como o efeito responde como alterar essas 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 a tecla Alt e, em seguida, selecionar qualquer ponto na superfície de design e movê-lo.

Exportando sombreadores

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

Você pode exportar sombreadores como código-fonte HLSL ou código de bytes do sombreador compilado. Código-fonte HLSL é exportado para um arquivo de texto que tem uma extensão de nome de arquivo .hlsl. 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 em um arquivo de cabeçalho (. h) de C++ que codifica o código de bytes do sombreador em uma matriz.

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

ComandoAtalhos de teclado
Alternar para Selecione modoCtrl+G, Gtrl+Q

S
Alternar para Zoom modoCtrl+G, Ctrl+Z

Z
Alternar para Panorâmica modoCtrl+G, Ctrl+P

M
Selecionar tudoCtrl+A
Excluir a seleção atualExcluir
Cancelar a seleção atualEscape
AmpliarCtrl+Roda do mouse para frente

Sinal de mais (+)
ReduzirCTRL roda do Mouse para trás

Sinal de menos (-)
Deslocar a superfície de design para cimaRoda do mouse para trás

PageDown
Deslocar a superfície de design para baixoRoda do mouse para frente

PageUp
Deslocar para a esquerda na superfície de designShift+Roda do mouse para trás

Roda do mouse para a esquerda

Shift+PageDown
Panorâmica diretamente na superfície de designShift+Roda do mouse para frente

Roda do mouse para a direita

Shift+PageUp
Mova 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
Alterar a seleção do nó que tem o foco do tecladoCtrl+Barra de espaços
Alterna a seleção atual (se nenhum nó for selecionada, selecione o nó que tem o foco do teclado)Barra de espaços
Mover a seleção atual para cimaShift+Seta para Cima
Mova a seleção atual para baixoShift+Seta para Baixo
Mover a seleção atual para a esquerdaShift+Seta para a Esquerda
Mover para a direita seleção atualSHIFT + seta para direita.
TítuloDescrição
Trabalhando com ativos 3D para jogos e aplicativosFornece uma visão geral de Visual Studio ferramentas que você pode usar para trabalhar com imagens e texturas, modelos 3D e efeitos de sombreamento.
Editor de imagensDescreve como usar o Editor de Imagens do Visual Studio para trabalhar com texturas e imagens.
Editor de modelosDescreve como usar o Visual Studio Editor de modelos para trabalhar com modelos 3D.
Mostrar: