Compartilhar via


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.

Hh315733.collapse_all(pt-br,VS.110).gifO 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.

Hh315733.collapse_all(pt-br,VS.110).gifBarras 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:

Barra modal do Designer do sombreador.

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 .

DicaDica
Você pode escolher o botão Avançado para executar novamente o último comando.

Hh315733.collapse_all(pt-br,VS.110).gifTrabalhar 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.

Hh315733.collapse_all(pt-br,VS.110).gifVisualizando 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.

Hh315733.collapse_all(pt-br,VS.110).gifFormas

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.

Hh315733.collapse_all(pt-br,VS.110).gifTexturas 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 1Textura 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.

Hh315733.collapse_all(pt-br,VS.110).gifEfeitos 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.

Hh315733.collapse_all(pt-br,VS.110).gifExaminando 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.

Hh315733.collapse_all(pt-br,VS.110).gifExportando 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.