Explicação passo a passo: Criando uma bola de bilhar realística em 3D
Essa explicação passo a passo demonstra como criar uma bola de bilhar realística em 3d utilizando o Shader Designer e o Image Editor em Visual Studio.A aparência 3-D de bola de bilhar é obtida combinando várias técnicas do sombreador com os recursos de textura apropriados.
Este documento demonstra estas atividades:
Criando a aparência básica de uma bola de bilhar usando a forma e textura.
Adicionando a profundidade usando o modelo de iluminação Lamberto.
Aprimorar a aparência básica usando realces especulares.
Criando uma noção de espaço refletindo o ambiente.
Pré-requisitos
Você precisa dos seguintes componentes e habilidades de concluir esta explicação passo a passo:
Uma ferramenta para montar texturas em um mapa do cubo, como a Ferramenta de Textura do DirectX incluída no DirectX SDK de junho de 2010.
Familiaridade com o Editor de Imagem no Visual Studio.
Familiaridade com o Shader Designer no Visual Studio.
Criando a aparência básica com a forma e textura
Na computação gráfica, os elementos mais básicos da aparência são a forma e a cor.Em uma simulação em computador, é comum usar um modelo 3-D para representar a forma de um objeto do mundo real.O detalhe de cores é aplicado na superfície do modelo usando um mapa de textura.
Normalmente, você pode precisar pedir a um artista para criar um modelo 3-D que você pode usar, mas como uma bola de bilhar é uma forma comum (uma esfera), o designer do Shader já possui um modelo apropriado incorporado.
A esfera é a maneira padrão de exibição no Shader Designer; se você estiver atualmente usando uma forma diferente para visualizar seu sombreador, mude de volta para esfera.
Para visualizar o sombreador usando uma esfera
- Na barra de ferramentas Designer de Sombreador, escolha Visualizar com esfera.
Na próxima etapa, você criará um programa de sombreamento que aplica uma textura ao modelo, mas primeiro você tem que criar uma textura que você pode usar.Essa explicação passo a passo demonstra como criar textura usando o Image Editor, que é uma parte de Visual Studio, mas você pode usar qualquer editor de imagem que pode salvar a textura em um formato adequado.
Certifique-se de que a janela Propriedades e Caixa de Ferramentas são exibidos.
Para criar uma textura de bola de bilhar usando o Editor de Imagem
Crie uma textura para trabalhar com o.Para obter informações sobre como adicionar uma textura ao seu projeto, consulte a seção obtendo iniciada em Editor de imagem.
Defina o tamanho da imagem para que sua largura seja duas vezes na sua altura; isso é necessário por causa da maneira que uma textura é mapeada na superfície de esférica bola de bilhar.Para redimensionar a imagem, na janela Propriedades , especifique os novos valores para as propriedades Largura e Altura .Por exemplo, definir a largura e altura de 512 a 256.
Desenhar uma textura para a bola de bilhar, mantendo em mente como uma textura é mapeada em uma esfera.
A textura deve se parecer com isso:
.png "A textura da bola de bilhar")
Um alternativa recomendada é diminuir os requisitos de armazenamento dessa textura.Você pode fazer isto reduzindo a largura de textura para corresponder a sua altura.Isso compacta a textura ao longo de sua largura, mas devido à maneira que a textura é mapeada para esfera, ela será expandida quando a bola de bilhar for renderizada.Após redimensionar, a textura deve ser semelhante a isso:
.png "A textura de bilhar compactada em um quadrado")
Agora você pode criar um sombreador que aplique a textura ao modelo.
Para criar um sombreador básico de textura
Crie um shader de DGSL para trabalhar com o.Para obter informações sobre como adicionar um shader de DGSL ao seu projeto, consulte a seção obtendo iniciada em Designer de sombreador.
Por padrão, um gráfico do sombreador tem esta aparência:
.png "O gráfico de sombreador padrão")
Modifique o sombreador padrão para que ele aplique o valor de um exemplo de textura ao pixel atual.O elemento gráfico do sombreador deve ser assim:
.png "Um gráfico de sombreador que se aplica a textura a um objeto")
Aplicar a textura que você criou no procedimento anterior configurando as propriedades de textura.Defina o valor da propriedade de Textura do nó de Exemplo de Cubemap como Textura2 e, depois, especifique o arquivo de textura por meio da propriedade Nome do arquivo do grupo de propriedades de Texture2.
Para obter mais informações sobre como aplicar uma textura em seu sombreador, consulte Como: criar um sombreador textura básica.
Sua bola de bilhar agora deve ser semelhante a isto:
.png "Um Close-up da bola de bilhar texturizado")
Criando a profundidade com o modelo de iluminação Lamberto
Até agora, você criou uma bola de bilhar facilmente reconhecível.No entanto, ele aparece plano e desinteressante - mais como uma imagem dos desenhos animados de uma bola de bilhar do que uma réplica convincente.A aparência plana resulta do sombreador simplista, que se comporta como se cada pixel na superfície da bola de bilhar recebesse a mesma quantidade de luz.
No mundo real, a luz aparece mais brilhante em superfícies que enfrentam diretamente uma fonte de luz e aparece menos brilhante em superfícies que estão em um ângulo oblíquo em relação à fonte de luz.Isso ocorre porque a energia nos raios de luz é distribuída pela menor área de superfície quando a superfície encara diretamente a fonte de luz.Como a superfície sai do foco, a mesma quantidade de energia é distribuída por uma superfície de área cada vez maior.Uma superfície que esteja longe de uma fonte de luz não recebe nenhuma energia, resultando em uma aparência completamente escura.Essa variação no brilho através da superfície de um objeto é uma importante indicação visual que ajuda a indicar a forma de um objeto; sem ele, o objeto parece plano.
Na computação gráfica, aproximações simplificadas de modelos de iluminação de complexos, interações de iluminação do mundo real - são usadas para replicar a aparência de iluminação do mundo real.O modelo de iluminação Lambert varia a quantidade de luz refletida de forma difusa na superfície de um objeto conforme descrito no parágrafo anterior.Você pode adicionar o modelo de iluminação de Lambert ao seu sombreador para dar à bola de bilhar uma aparência 3D mais convincente.
Para adicionar iluminação Lambert ao seu sombreador
Modifique o sombreador para modular o valor de exemplo de textura pelo valor de iluminação Lambert.O gráfico do seu sombreador deve ser assim:
.png "O gráfico de sombreador com iluminação Lambert adicionado")
Opcionalmente, você pode ajustar como iluminação se comporta configurando a propriedade de MaterialDiffuse de gráfico do shader.Para acessar propriedades de gráfico do shader, escolha uma área vazia na superfície de design e em seguida, localize a propriedade que você deseja acessar na janela de Propriedades .
Para obter mais informações sobre como aplicar iluminação Lamberto em seu sombreador, consulte Como: criar um sombreador Lambert básica.
Com iluminação de Lambert aplicada, sua bola de bilhar deve ficar semelhante a isto:
.png "Um Close-up da bola de bilhar texturizados e aceso")
Aprimorar a aparência básica com realces especulares
O modelo de iluminação Lambert fornece a sensação de forma e de dimensão que estava faltando no sombreador só de textura.No entanto, a bola de bilhar ainda tem uma aparência um pouco fosca.
Uma bola de bilhar real geralmente possui um acabamento lustroso que reflete uma parte da luz que bate nela.Parte dessa luz refletida resulta em realces especulares que simulam as propriedades reflexivas de uma superfície.Dependendo das propriedades da finalização, os destaques podem ser localizados ou amplos, intensos ou sutis.Essas reflexos especulares são modelados usando a relação entre uma fonte de luz, a orientação da superfície e a posição da câmera — ou seja, o realce é mais intenso quando a orientação da superfície reflete a fonte de luz diretamente na câmera, e é menos intenso quando o reflexo é menos direto.
O modelo de iluminação Phong amplia o modelo de iluminação Lambert para incluir realces especulares, conforme descrito no parágrafo anterior.Você pode adicionar o modelo de iluminação Phong ao seu sombreador para dar à bola de bilhar um botão simulado que resulta em uma aparência mais interessante.
Para adicionar realces especulares ao seu sombreador
Modifique o sombreador para incluir a contribuição especular usando combinação aditiva.O gráfico do seu sombreador deve ser assim:
.png "O gráfico de sombreador com iluminação especular adicionado")
Opcionalmente, você pode ajustar a maneira que o realce specular se comporta configurando as propriedades specular (MaterialSpecular e MaterialSpecularPower) do gráfico do shader.Para acessar propriedades de gráfico do shader, escolha uma área vazia na superfície de design, e na janela de Propriedades , atendam a propriedade que você deseja acessar.
Para obter mais informações sobre como aplicar realces especulares em seu sombreador, consulte Como: criar um sombreador básica do Phong.
Com o realce especular aplicado, sua bola de bilhar deve ficar semelhante a isto:
.png "Adicionado um Close-up de bola de bilhar com especulares")
Criando uma noção de espaço refletindo o ambiente
Com realce especular aplicado, sua bola de bilhar parece consideravelmente convincente.Tem a forma correta, o trabalho de pintura correta e o acabamento correto.No entanto, ainda há mais uma técnica que fará sua bola de bilhar se parecer mais com parte do seu ambiente.
Se você revise uma bola de bilhar real de perto, você pode ver que sua superfície brilhante não exibe apenas reflexos especulares, mas também reflete uma fraca imagem do mundo em torno dele.Você pode simular esta reflexão usando uma imagem de ambiente como uma textura e combinando com a própria textura de modelo para determinar a cor final de cada pixel.Dependendo do tipo de finalização que você deseja, é possível combinar mais ou menos da textura de reflexão juntamente com o restante do sombreador.Por exemplo, um sombreador que simula uma superfície altamente reflexiva como um espelho pode usar somente a textura de reflexo, mas um sombreador que simula um reflexo mais sutil como a encontrada em uma bola de bilhar pode combinar apenas uma pequena parte do valor da textura de reflexão juntamente com o restante do cálculo do sombreador.
É claro que você não pode aplicar a imagem refletida ao modelo da mesma maneira que aplica o mapa de textura.Se você fez, o reflexo do mundo moverá com a bola de bilhar como se a reflexão estivesse colada a ele.Como um reflexo pode vir de qualquer direção, você precisa de uma maneira de fornecer um valor de mapa de reflexão para qualquer ângulo e uma forma de manter o mapa de reflexão orientado de acordo com o mundo.Para satisfazer esses requisitos você pode usar um tipo especial de textura mapa–chamada um cubo mapa-––que fornece seis texturas organizadas para formar os lados de um cubo.De dentro deste cubo, você pode apontar em qualquer direção para localizar um valor de textura.Se as texturas de cada lado do cubo contêm imagens do ambiente, você pode simular qualquer reflexão pela amostragem do local correto sobre a superfície do cubo.Mantendo o cubo alinhado com o mundo, você terá um reflexo exato do ambiente.Para determinar onde o cubo deve ser provado, você calcula apenas a reflexão do vetor da câmera fora da superfície do objeto, e em seguida usá-o como a textura 3d coordena.O uso de mapas do cubo dessa maneira é uma técnica comum conhecida como mapeamento de ambiente.
O mapeamento de ambiente fornece uma aproximação eficiente de reflexos reais, como descrito nos parágrafos anteriores.Você pode misturar reflexos mapeadas do ambiente em seu sombreador para dar à bola de bilhar um botão simulado que faz a bola de bilhar parecer mais aterrada na cena.
A primeira etapa é criar uma textura do mapa do cubo.Em muitos tipos de aplicativos, o conteúdo do mapa em cubo não tem que ser perfeito para ser eficaz, especialmente quando a reflexão é sutil ou não ocupa um espaço proeminente na tela.Por exemplo, vários jogos usam mapas de cubo pré-computados para o mapeamento de ambiente e apenas usam o mais próximo de cada objeto refletivo, embora isso significa que o reflexo não está correto.Mesmo uma boa aproximação é geralmente boa o suficiente para um efeito convincente.
Para criar texturas para um mapa de ambiente usando o editor de imagem
Crie uma textura para trabalhar com o.Para obter informações sobre como adicionar uma textura ao seu projeto, consulte a seção obtendo iniciada em Editor de imagem.
Defina o tamanho da imagem de modo que a largura é igual a sua altura, e é uma potência de dois em tamanho; isso é necessário por causa da maneira que um mapa do cubo será indexado.Para redimensionar a imagem, na janela Propriedades , especifique os novos valores para as propriedades Largura e Altura .Por exemplo, definir o valor das propriedades de Largura e de Altura a 256.
Use uma cor sólida para preencher a textura.Essa textura será a parte inferior do mapa do cubo, que corresponde à superfície da mesa de bilhar.Manter a cor que você usou em mente para a próxima textura.
Crie uma segunda textura que é o mesmo tamanho que a primeira.Esta textura será repetida nos quatro lados do mapa do cubo, que corresponde à superfície e aos lados de uma mesa de bilhar, e à área em torno da mesa de bilhar.Certificar-se de desenhar a superfície da tabela de bilhar nesta textura usando a mesma cor da textura inferior.A textura deve se parecer com isso:
.png "A textura para os lados do cubemap")
Lembre-se de que um mapa de reflexão não tem que ser fotorrealista para ser mais eficiente; por exemplo, o mapa do cubo usado para criar as imagens este artigo contém apenas quatro bolsos em vez de seis.
Crie uma terceira textura que é o mesmo tamanho que o outro.Essa textura será a parte superior do mapa do cubo, que corresponde ao teto acima da mesa de bilhar.Para tornar essa parte de reflexão mais interessante, você pode desenhar uma luz de sobrecarga para reforçar o realce especular que você adicionou ao sombreador no procedimento anterior.A textura deve se parecer com isso:
.png "A textura na parte superior do cubemap")
Agora que criou texturas individuais para as laterais do mapa de cubo, você pode usar uma ferramenta para montá-las em um mapa de cubo que possa ser armazenado em uma única textura .dds.Você pode usar qualquer programa que você deseja criar o mapa do cubo como pode salvar o mapa do cubo no formato de textura de .dds.Essa explicação passo a passo demonstra como criar textura usando a ferramenta de textura de DirectX que é uma parte do DirectX SDK de junho de 2010 .
Para montar um mapa do cubo usando a ferramenta de textura do DirectX
Na Ferramenta de Textura DirectX, no menu principal, escolher Arquivo, Nova Textura.A caixa de diálogo Nova textura aparece.
No grupo Tipo de Textura, escolher Textura do Cubemap.
No grupo de Dimensões, digitar o valor correto para a Largura e a Altura, e, em seguida, escolher OK.Um novo documento de textura aparece.Por padrão, a textura mostrada primeiro no documento de textura corresponde à face do cubo Positivo X.
Carregar a textura que você criou para o lado do cubo de textura na face do cubo.No menu principal, escolha Arquivo e Abrir nesta Face de Mapa de Cubo. Em seguida, selecione a textura criada para a lateral do cubo e clique em Abrir.
Repita a etapa 4 para as faces de cubo X Negativo, Z Positivo e Z Negativo .Para fazer isso, você deve exibir a face que deseja carregar.Para exibir uma face diferente do mapa do cubo, no menu principal, escolha Exibição, Face do Mapa do Cubo, e selecione a face que você deseja exibir.
Para a face do cubo Y Positivo, carregar a textura que você criou para a parte superior do cubo de textura.
Para a face do cubo Y Negativo, carregar a textura que você criou para a parte inferior do cubo de textura.
Salve a textura.
Você pode imaginar o layout do mapa do cubo como este:
.png "O layout do mapa de cubo do ambiente")
A imagem na parte superior é a face do cubo Y positivo (+Y); no meio, da esquerda para a direita, são as faces do cubo – X, +Z, +X, e –Z; na parte inferior, é a face do cubo –Y.
Agora você pode modificar o sombreador para mesclar o exemplo de mapa de cubo ao restante do sombreador.
Para adicionar um mapeamento de ambiente ao seu sombreador
Modifique o sombreador para incluir a contribuição de mapeamento de ambiente usando combinação aditiva.O gráfico do seu sombreador deve ser assim:
.png "Um Close-up de ambos os nós Refletivo tipo de sombreador")
Observe que você pode usar um nó de Adicione Multiplicar- para simplificar o gráfico do shader.
Aqui está uma visão mais detalhada dos nós do sombreador que implementam o mapeamento de ambiente:
.png "O gráfico de sombreador com mapeamento de ambiente adicionado")
Aplicar a textura que você criou no procedimento anterior configurando as propriedades de textura do mapa do cubo.Defina o valor da propriedade de Textura do nó de Exemplo de Cubemap como Textura2 e, depois, especifique o arquivo de textura por meio da propriedade Nome do arquivo do grupo de propriedades de Texture2.
Opcionalmente, você pode ajustar a reflectividade de bola de bilhar configurando a propriedade de Saída do nó de Constante .Para acessar propriedades do nó, selecione e na janela de Propriedades , atendam a propriedade que você deseja acessar.
Com o mapeamento do ambiente aplicado, sua bola de bilhar deve ficar semelhante a isto:
.png "Um Close-up do ambiente mapeado bola de bilhar")
Nesta imagem final, observe como efeitos que você adicionou vêm juntos criar uma bola de bilhar muito de forma convincente.A forma, a textura e iluminação criam a aparência básica de um objeto 3D, e os realces especulares e reflexos fazem a bola de bilhar ficar mais interessante, e são como parte do seu ambiente.
Consulte também
Tarefas
Como: aplicar um sombreador para um modelo 3D