Criar sombreadores com o Designer do Sombreador no Visual Studio
Neste artigo, você aprenderá a usar o Designer do Sombreador para criar diferentes tipos de sombreadores.
Criar sombreadores básicos de cores planas
Você pode usar o Designer do Sombreador e a DGSL (Directed Graph Shader Language) para criar um sombreador de cor simples. Esse sombreador define a cor final em um valor de cor RGB constante. Você pode implementar um sombreador de cor simples gravando o valor de cor de uma constante de cor RGB na cor de saída final.
Antes de começar, verifique se a janela Propriedades e a Caixa de Ferramentas estão sendo exibidas.
Crie um sombreador DGSL com o qual trabalhar. Para obter informações sobre como adicionar um sombreador DGSL ao seu projeto, consulte a seção de Introdução em Designer de Sombreador.
Exclua o nó Ponto de Cor. Use a ferramenta Selecionar para selecionar o nó Cor do Ponto e, em seguida, na barra de menus, escolha Editar>Excluir.
Adicione um nó Constante de Cor ao grafo. Na Caixa de Ferramentas, em Constantes, selecione Constante de Cor e mova para a superfície de design.
Especifique um valor de cor para o nó Constante de Cor. Use a ferramenta Selecionar para selecionar o nó Constante de Cor e, em seguida, na janela Propriedades, na propriedade Saída, especifique um valor de cor. Para laranja, especifique um valor de (1,0, 0,5, 0,2, 1,0).
Conecte a constante de cor à cor final. Para criar as conexões, mova o terminal RGB do nó Constante de Cor para o terminal RGB do nó Cor Final e, em seguida, mova o terminal Alfa do nó Constante de Cor para o terminal Alfa do nó Cor Final. Essas conexões definem a cor final para a constante de cor definida na etapa anterior.
A ilustração a seguir mostra o grafo de sombreador concluído e uma visualização do sombreador aplicado a um cubo.
Observação
Na ilustração foi especificada uma cor laranja para demonstrar melhor o efeito do sombreador.
Determinadas formas podem fornecer melhores visualizações para alguns sombreadores. Para obter mais informações sobre como visualizar sombreadores no Designer de Sombreador, consulte Designer de Sombreador.
Criar um sombreador Lambert básico
Você também pode usar o Designer do Sombreador e o DGSL (Directed Graph Shader Language) para criar um sombreador de iluminação que implementa o modelo de iluminação de Lambert clássico.
O modelo de iluminação de Lambert incorpora iluminação ambiente e direcional para sombrear objetos em uma cena 3D. Os componentes do ambiente fornecem um nível básico de iluminação na cena 3D. Os componentes direcionais fornecem iluminação adicional de fontes de luz direcionais (distantes). A iluminação ambiente afeta todas as superfícies da cena igualmente, independentemente da orientação. Para uma determinada superfície, é um produto da cor ambiente da superfície e a cor e a intensidade da luz ambiente na cena. A iluminação direcional afeta cada superfície na cena de maneira diferente, com base na orientação da superfície em relação a direção da fonte de luz. É um produto da cor difusa e a orientação da superfície e a cor, intensidade e direção das fontes de luz. As superfícies que estão voltadas diretamente para a fonte de luz recebem a contribuição máxima e superfícies que estão diretamente voltadas para o lado oposto, não recebem nenhuma contribuição. No modelo de iluminação de Lambert, o componente ambiente e um ou mais componentes direcionais são combinados para determinar a contribuição de cor difusa total para cada ponto no objeto.
Antes de começar, verifique se a janela Propriedades e a Caixa de Ferramentas estão sendo exibidas.
Crie um sombreador DGSL com o qual trabalhar. Para obter informações sobre como adicionar um sombreador DGSL ao seu projeto, consulte a seção de Introdução em Designer de Sombreador.
Desconectar o nó Ponto de Cor do nó Cor Final. Escolha o terminal RGB do nó Ponto de Cor e, em seguida, escolha Quebrar Links. Deixe o terminal Alfa conectado.
Adicione um nó Lambert ao grafo. Na Caixa de Ferramentas, em Utilitário, selecione Lambert e mova-o para a superfície de design. O nó Lambert calcula a contribuição de cor difusa total do pixel, com base em parâmetros de iluminação difusa e ambiente.
Conecte o nó Ponto de Cor ao nó Lambert. No modo de Seleção, mova o terminal RGB do nó Ponto de Cor para o terminal Cor Difusa do nó Lambert. Essa conexão fornece o nó Lambert com a cor difusa interpolada do pixel.
Conecte o valor de cor calculado à cor final. Mova o terminal de Saída do nó Lambert para o terminal RGB do nó Cor Final.
A ilustração a seguir mostra o grafo de sombreador concluído e uma visualização do sombreador aplicado a um modelo de bule.
Observação
Para demonstrar melhor o efeito do sombreador nesta ilustração, foi especificada uma cor laranja usando o parâmetro MaterialDiffuse do sombreador. Um jogo ou um aplicativo pode usar esse parâmetro para fornecer um valor de cor exclusivo para cada objeto. Para mais informações sobre os parâmetros materiais, veja Designer do Sombreador.
A ilustração a seguir mostra o sombreador que é descrito neste documento, aplicado a um modelo 3D.
Criar sombreadores Phong básicos
Você também pode usar o Designer do Sombreador e o DGSL (Directed Graph Shader Language) para criar um sombreador de iluminação que implementa o modelo de iluminação Phong clássico.
O modelo de iluminação de Phong amplia o modelo de iluminação de Lambert para incluir o realce especular, que simula as propriedades de reflexão de uma superfície. O componente especular fornece iluminação adicional das mesmas fontes de luz direcionais que são usadas no modelo de iluminação Lambert, mas sua contribuição para a cor final é processada de forma diferente. O realce especular afeta cada superfície na cena de forma diferente, com base na relação entre a direção da exibição, a direção das fontes de luz e a orientação da superfície. É um produto da cor especular, do potencial de reflexão e da orientação da superfície e a cor, intensidade e direção das fontes de luz. As superfícies que refletem a fonte de luz diretamente no visualizador recebem a contribuição especular máxima e as superfícies que refletem a fonte de luz distante do visualizador não recebem nenhuma contribuição. No modelo de iluminação de Phong, um ou mais componentes especulares são combinados para determinar a cor e a intensidade do realce especular para cada ponto no objeto e, em seguida, são adicionados ao resultado do modelo de iluminação de Lambert para produzir a cor final do pixel.
Para obter mais informações sobre o modelo de iluminação de Lambert, confira Como criar um sombreador Lambert básico.
Antes de começar, verifique se a janela Propriedades e a Caixa de Ferramentas estão sendo exibidas.
Criar um sombreador Lambert, conforme descrito em Como criar um sombreador Lambert básico.
Desconecte o nó Lambert do nó Cor Final. Escolha o terminal RGB do nó Lambert e, em seguida, escolha Quebrar Links. Isso abre o espaço para o nó que será adicionado na próxima etapa.
Adicione um nó Adicionar ao grafo. Na Caixa de Ferramentas, em Matemática, selecione Adicionar e mova-a para a superfície de design.
Adicione um nó Especular ao gráfico. Na Caixa de Ferramentas, em Utilitário, selecione Especular e mova-o para a superfície de design.
Adicione a contribuição especular. Mova o terminal de Saída do nó Especular para o terminal X do nó Adicionar e, em seguida, mova o terminal de Saída do nó Lambert para o terminal Y do nó Adicionar. Essas conexões combinam as contribuições de cor difusa e especular totais para o pixel.
Conecte o valor de cor calculado à cor final. Mova o terminal de Saída do nó Adicionar para o terminal RGB do nó Cor Final.
A ilustração a seguir mostra o grafo de sombreador concluído e uma visualização do sombreador aplicado a um modelo de bule.
Observação
Para demonstrar melhor o efeito do sombreador nesta ilustração, foi especificada uma cor laranja usando o parâmetro MaterialDiffuse do sombreador e foi especificado um acabamento de aparência metálica usando os parâmetros MaterialSpecular e MaterialSpecularPower. Para mais informações sobre os parâmetros materiais, veja Designer do Sombreador.
Determinadas formas podem fornecer melhores visualizações para alguns sombreadores. Para saber mais sobre a visualização de sombreadores, consulte Designer do Sombreador.
A ilustração a seguir mostra o sombreador que é descrito neste documento, aplicado a um modelo 3D. A propriedade MaterialSpecular foi definida como (1,00, 0,50, 0,20, 0,00) e sua propriedade MaterialSpecularPower foi definida como 16.
Observação
A propriedade MaterialSpecular determina o acabamento aparente do material da superfície. Uma superfície brilhante como vidro ou plástico tende a apresentar uma cor especular com uma tonalidade clara de branco. Uma superfície metálica tende a apresentar uma cor especular próxima de sua cor difusa. Uma superfície de acabamento acetinado tende a apresentar uma cor especular com um tom de cinza escuro.
A propriedade MaterialSpecularPower determina a intensidade dos realces especulares. Alta potência especular simula realces mais opacos e localizados. A potência especular muito baixa simula realces intensos e abrangentes que podem saturar e ocultar a cor da superfície inteira.
Criar um sombreador de textura básica
Use o Designer do Sombreador e a DGSL (Directed Graph Shader Language) para criar um sombreador de textura única. Esse sombreador define a cor final diretamente para os valores RGB e alfa, cujas amostras são obtidas da textura.
Você pode implementar um sombreador de textura única básico ao gravar os valores de cor e valores alfa de uma amostra de textura diretamente na cor de saída final.
Antes de começar, verifique se a janela Propriedades e a Caixa de Ferramentas estão sendo exibidas.
Crie um sombreador DGSL com o qual trabalhar. Para obter informações sobre como adicionar um sombreador DGSL ao seu projeto, consulte a seção de Introdução em Designer de Sombreador.
Exclua o nó Ponto de Cor. No modo de Seleção, selecione o nó Cor do Ponto e, em seguida, na barra de menus, escolha Editar>Excluir. Isso abre o espaço para o nó que será adicionado na próxima etapa.
Adicione um nó Amostra de Textura ao grafo. Na Caixa de Ferramentas, em Textura, selecione Amostra de Textura e mova-a para a superfície de design.
Adicione um nó Coordenada de Textura ao grafo. Na Caixa de Ferramentas, em Textura, selecione Coordenada de Textura e mova-a para a superfície de design.
Escolha uma textura para aplicar. No modo de Seleção, selecione o nó Amostra de Textura e, em seguida, na janela Propriedades, especifique a textura que você deseja usar através da propriedade Filename.
Torne a textura publicamente acessível. Selecione o nó Amostra de Textura e, em seguida, na janela Propriedades, defina a propriedade Acesso como Público. Agora é possível definir a textura de outra ferramenta, como o Editor de Modelo.
Conecte as coordenadas de textura à amostra de textura. No modo de Seleção, mova o terminal de Saída do nó Coordenada de Textura para o terminal UV do nó Amostra de Textura. Essa conexão retira uma amostra de textura nas coordenadas especificadas.
Conecte a amostra de textura à cor final. Mova o terminal RGB do nó Amostra de Textura para o terminal RGB do nó Cor Final e, em seguida, mova o terminal Alfa do nó Amostra de Textura para o terminal Alfa do nó Cor Final.
A ilustração a seguir mostra o grafo de sombreador concluído e uma visualização do sombreador aplicado a um cubo.
Observação
Nesta ilustração foi usado um plano como a forma de visualização e foi especificada uma textura para demonstrar melhor o efeito do sombreador.
Determinadas formas podem fornecer melhores visualizações para alguns sombreadores. Para obter mais informações sobre como visualizar sombreadores no Designer de Sombreador, consulte Designer de Sombreador
Criar um sombreador de textura em escala de cinza
Use o Designer do Sombreador e a DGSL (Directed Graph Shader Language) para criar um sombreador de textura em escala de cinza. Esse sombreador modifica o valor de cor RGB da amostra de textura e, em seguida, usa-o junto com o valor alfa inalterado para definir a cor final.
Você pode implementar um sombreador de textura em escala de cinza, modificando o valor de cor de uma amostra de textura antes de gravá-lo na cor de saída final.
Antes de começar, verifique se a janela Propriedades e a Caixa de Ferramentas estão sendo exibidas.
Crie um sombreador de textura básico, conforme a descrição em Como criar um sombreador de textura básico.
Desconecte o terminal RGB do nó Amostra de Textura do terminal RGB do nó Cor Final. No modo de Seleção, escolha o terminal RGB do nó Amostra de Textura e, em seguida, escolha Quebrar Links. Isso abre o espaço para o nó que será adicionado na próxima etapa.
Adicione um nó Remover Saturação ao grafo. Na Caixa de Ferramentas, em Filtros, selecione Remover Saturação e mova-o para a superfície de design.
Calcule o valor de escala de cinza usando o nó Remover Saturação. No modo de Seleção, mova o terminal RGB do nó Amostra de Textura para o terminal RGB do nó Remover Saturação.
Observação
Por padrão, o nó Remover Saturação remove totalmente a saturação da cor de entrada e usa os pesos de luminância padrão para a conversão em escala de cinza. Você pode alterar como o nó Remover Saturação se comporta, alterando o valor da propriedade Luminância ou removendo apenas parcialmente a saturação da cor de entrada. Para remover parcialmente a saturação da cor de entrada, forneça um valor escalar no intervalo [0,1) para o terminal Porcentagem do nó Remover Saturação.
Conecte o valor de cor em escala de cinza à cor final. Mova o terminal de Saída do nó Remover Saturação para o terminal RGB do nó Cor Final.
A ilustração a seguir mostra o grafo de sombreador concluído e uma visualização do sombreador aplicado a um cubo.
Nesta ilustração foi usado um plano como a forma de visualização e foi especificada uma textura para demonstrar melhor o efeito do sombreador. Determinadas formas podem fornecer melhores visualizações para alguns sombreadores. Para saber mais sobre a visualização de sombreadores, consulte Designer do Sombreador.
Criar um sombreador de gradiente com base na geometria
Use o Designer do Sombreador e a Directed Graph Shader Language para criar um sombreador de gradiente com base na geometria. Esse sombreador ajusta a escala de um valor de cor RGB constante pela altura de cada ponto de um objeto no espaço de mundo.
Você pode implementar um sombreador com base na geometria, incorporando a posição do pixel ao sombreador. Em linguagens de sombreamento, um pixel contém mais informações do que apenas a cor e o local em uma tela 2D. Um pixel, conhecido como um fragmento em alguns sistemas, é uma coleção de valores que descrevem a superfície que corresponde a um pixel. O sombreador descrito neste documento utiliza a altura de cada pixel de um objeto 3D no espaço de mundo para afetar a cor de saída final do fragmento.
Antes de começar, verifique se a janela Propriedades e a Caixa de Ferramentas estão sendo exibidas.
Crie um sombreador DGSL com o qual trabalhar. Para obter informações sobre como adicionar um sombreador DGSL ao seu projeto, consulte a seção de Introdução em Sobre o Designer de Sombreador.
Desconectar o nó Ponto de Cor do nó Cor Final. Escolha o terminal RGB do nó Ponto de Cor e, em seguida, escolha Quebrar Links. Isso abre o espaço para o nó que será adicionado na próxima etapa.
Adicione um nó Multiplicar ao grafo. Na Caixa de Ferramentas, em Matemática, selecione Multiplicar e mova-a para a superfície de design.
Adicionar um nó Vetor de Máscara ao grafo. Na Caixa de Ferramentas, em Utilitário, selecione Vetor de Máscara e mova-o para a superfície de design.
Especifique os valores de máscara para o nó Vetor de Máscara. No modo de Seleção, selecione o nó Vetor de Máscara e, em seguida, na janela Propriedades, defina a propriedade Verde / Y como Verdadeiro e, em seguida, defina as propriedades Vermelho / X, Azul / Z e Alfa / W como Falso. Neste exemplo, as propriedades Vermelho / X, Verde / Y e Azul / Z correspondem aos componentes x, y e z do nó Posição do Mundo e Alfa / W não é usada. Como somente Verde / Y está definido como Verdadeiro, apenas o componente y do vetor de entrada permanecerá depois que ele for mascarado.
Adicione um nó Posição do Mundo ao grafo. Na Caixa de Ferramentas, em Constantes, selecione Posição do Mundo e mova para a superfície de design.
Mascarar a posição do espaço de mundo do fragmento. No modo de Seleção, mova o terminal de Saída do nó Posição do Mundo para o terminal Vetor do nó Vetor de Máscara. Essa conexão mascara a posição do fragmento para ignorar os componentes x e z.
Multiplique a constante de cor RGB pela posição de espaço de mundo mascarada. Mova o terminal RGB do nó Ponto de Cor para o terminal Y do nó Multiplicar e, em seguida, mova o terminal de Saída do nó Vetor de Máscara para o terminal X do nó Multiplicar. Essa conexão ajusta a escala do valor de cor pela altura do pixel no espaço de mundo.
Conecte o valor de cor ajustado à cor final. Mova o terminal de Saída do nó Multiplicar para o terminal RGB do nó Cor Final.
A ilustração a seguir mostra o grafo de sombreador concluído e uma visualização do sombreador aplicado a uma esfera.
Observação
Nesta ilustração é especificada uma cor laranja para demonstrar melhor o efeito do sombreador, mas como a forma de visualização não tem posição no espaço de mundo, o sombreador não pode ser visualizado totalmente no Designer de Sombreador. O sombreador deve ser visualizado em uma cena real para demonstrar o efeito completo.
Determinadas formas podem fornecer melhores visualizações para alguns sombreadores. Para saber mais sobre a visualização de sombreadores, consulte Designer do Sombreador.
A ilustração a seguir mostra o sombreador que é descrito neste documento, aplicado a uma cena 3D que é demonstrada em Como modelar um terreno 3D. A intensidade da cor aumenta com a altura do ponto no mundo.
Para obter mais informações de como aplicar um sombreador a um modelo 3D, confira Como aplicar um sombreador a um modelo 3D.
Conteúdo relacionado
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de