LIT- Quarta semana de Agosto de 2016

Fomos visitar a costureira na segunda para fazer alguns ajustes para finalizar a roupa. Tiramos fotos do modelo quase pronto para utilizar no poster. Redefinimos alguns aspectos da roupa e logo no final dessa semana é para concluir a roupa. A parte de prototipagem necessita a visitação do nosso programador na costureira.

Montamos o nosso cartaz na segunda e ajustamos as telas do app, definimos nomes de funções e conversamos com o Diogo Mattana sobre sound design.

LIT- Terceira semana de Agosto de 2016

Na terceira semana de agosto tivemos outra orientação com o professor Marcus, apresentamos mais detalhes sobre o projeto e eles discutiu a relação do protótipo e como seria as funções reais da nossa jaqueta. Aprofundamos nas outras atividades que temos que fazer do projeto, como o vídeo e o app.

Na sexta apresentei rapidamente algumas novas ideias para a logo do nosso projeto.

Sorriso de uma criança – quarta semana de agosto

Começamos o trabalho de refinar os trechos com quadros-chave que havíamos feito.
Devido a insatisfação com alguns enquadramentos escolhidos anteriormente, começamos a discutir outras possibilidades de enquadramento, até que tivemos uma orientação com a professora Fabiane, em que ela nos orientou a ter um roteiro definido, para então fazer as mudanças nos trechos do animatic com os quais estávamos insatisfeitas.
Reescrevemos o roteiro, trabalhamos no poster e finalizamos ele, e fizemos testes de cores na animação.

Lista de coisas a fazer para resolver o atual problema:
1- reescrever roteiro
2- regravar as cenas de forma tosca para ter referência de movimentos, enquadramento e tempo das cenas
3- arrumar animatic a partir da gravação

VERT – Terceira Semana de Agosto

Essa semana trabalhamos mais no layout, gerando algumas alternativas para a Home e já exploramos algumas funções de mouseover e popups.

Wireframe atualizado:

14102005_1072509919499816_1194626024_n
Layout Versão 01:

14163549_1075147122569429_55920219_o

 

Layout Versão 02:

14139369_1075198219230986_1414532719_o

Layout Versão 03:

14139356_1075198489230959_540198079_o

 

Box de informação de produto (Mouseover com popup):
14088712_1075248679225940_568967850_n

14101641_1075248435892631_1686911212_n

14101982_1075248542559287_475648372_n

Fizemos também mais uma alternativa para a Logo e trabalhamos no cartaz para a sabatina de semana que vem:
14139084_1287690341241258_972772385_o

Angels: Doom of Eternity – Geração de mapas dos anjos e demônios

Na segunda semana de agosto além da criação de UVs foram gerados os mapas dos cinco anjos e cinco demônios que serão os dez personagens jogáveis do jogo Angels: Doom of Eternity.

Angels: Doom of Eternity – Segunda semana de agosto

Na segunda semana de agosto também foram gerados os mapas dos cinco anjos e cinco demônios que serão os dez personagens jogáveis do jogo.

Sobre a geração de mapas

A geração de mapas, conforme explicado anteriormente, é a etapa que consiste em projetar os detalhes da malha de alta definição na nova malha de baixa definição, malha essa que que agora está pronta para receber os detalhes em forma de mapas 2D. Existem vários tipos de mapas que podem ser aplicados sobre a malha tridimensional a fim de gerar diferentes efeitos, como por exemplo: cor, volume, transparência e emissão de luz. Neste projeto, optamos por gerar inicialmente os mapas de normal, “ambient occlusion” e cor.

Normal

Em questão de geometria, normal é um vetor perpendicular à face do polígono. Em outras palavras, podemos dizer que a normal é a propriedade que um polígono têm de refletir a luz em uma determinada direção, no entanto, no ambiente 3D essa direção nem sempre é perpendicular, ela pode variar de acordo com a propriedade atribuída à face.

image00

Imagem 01 – n1 e n2 são os vetores que representam a normal, Domínio público, https://commons.wikimedia.org/w/index.php?curid=2005567

image06

Imagem 2 – Uma malha ondulada reflete a luz de diferentes formas pois é composta por uma série de polígonos, cada um com sua própria normal.

By Nicoguaro – Own work, CC BY 4.0, https://commons.wikimedia.org/w/index.php?curid=46926592

Propriedades da normal em um ambiente 3D

Fazendo uma analogia, podemos considerar que um objeto real possui infinitos polígonos, e é pela maneira que esses polígonos refletem a luz que identificamos a sua forma através de nossa visão, pois, é através das sombras percebemos as diferenças de profundidade. Um objeto virtual, no entanto, nem sempre possui muitos polígonos, porém o computador permite simular um comportamento diferente para a normal em relação à superfície de um polígono. Assim, podemos comparar duas propriedades em especial, a normal “real” cuja a reflexão é perpendicular a face, e a normal “suavizada”, cuja a normal varia em uma malha conforme o ângulo dos polígonos vizinhos causando a falsa percepção de que o objeto possui mais polígonos do que ele realmente possui. Para visualizar o efeito, observe a imagem a seguir, ambos os objetos possuem a mesma topologia, no entanto, o da esquerda possui normais perpendiculares às faces, enquanto o da direita possui normais suavizadas que variam ao longo do polígono.

image05

Imagem 3 – Objetos com diferentes propriedades de normal

Portanto, há diferentes maneiras de emular a reflexão da luz sobre um objeto em um ambiente tridimensional virtual por meio das propriedades atribuídas a cada polígono de um objeto. E, além dos dois exemplos citados, perpendicular e uniformemente variado, há a possibilidade de inserir informações que permitam à um polígono variar sua normal ao longo de sua área de qualquer forma, seja regular ou irregular, através do uso de um mapa de normal, ou “normalmap”. Assim, é possível criar a ilusão de detalhes existentes na malha de alta definição na malha de baixa definição por meio das informações de cor contidas no mapa de normal.

Uma característica interessante dos mapas de normal é o aspecto de suas cores. O mapas têm essa característica pois as corares do padrão RGB estão relacionadas com as coordenadas XYZ, e é assim que as cores são usadas para determinar o ângulo de reflexão da luz em cada ponto do polígono. Vale dizer que há dois padrões de mapas de normal, “tangent space” e “object space”. Nesta etapa usamos apenas o padrão “tangent space” que é mais indicado para objetos que se deformam como no caso dos personagens, já o outro padrão, é mais indicado para objetos estáticos.

image03

Imagem 4 – Exemplo de um mapa de normal no padrão “tangent space”

Outros mapas

Vale dizer que além do mapa de normal, que dá a ilusão de detalhes sobre a malha, há outros tipos de mapas que podem ser usados para causar efeitos semelhantes, mas não explicarei suas funções, pois em nosso projeto, a principio usaremos apenas os mapas de normal e cor.

A a pintura de um objeto 3D pode ser criada manualmente pintando-se diretamente sobre a UV ou sobre a malha 3D, mesmo. Mas, há outras técnicas que possibilitam um bom resultado através da combinação de diferentes tipos de mapa. Dessa forma, além do mapa de normal, são gerados os mapas de “ambient occlusion”, “cavity” e “color”.

O mapa de cor, ou “color map” extrai as cores pintadas sobre a malha original de alta definição e as imprime em um mapa conforme a UV do objeto de baixa poligonagem. Da mesma forma, o mapa de cavidade, ou “cavity map” imprime em um mapa as arestas que o objeto possui. E, o mapa de oclusão, ou “occlusion map” nada mais é do que um mapa contendo as sombras projetadas sobre a malha a partir de uma luz, normalmente localizada acima do objeto. Essas sombras, assim como o mapa de cavidade, evidenciam os detalhes do objeto, e são combinados com o mapa de cor para ser aplicado em uma única imagem sobre a malha, chamamos esse novo mapa de “diffusemap”. Vale dizer que dependendo do software o diffusemap pode ser extraído de uma única vez sem precisar ser combinado manualmente.

image02

Imagem 5 – Exemplo de Occlusion Map

image04

Imagem 6 – Exemplo de Colormap

diffusemap

Imagem 7 – Exemplo de diffusemap – mescla entre colormap e ambiente occlusion

Processo operacional

Para fazer essa transferência de informações, ou “bake”, podemos usar diferentes softwares. Em nosso caso, optamos por usar o TopoGun 2.0. Um software usado especialmente para fazer retopologia, e que, justamente por servir para este fim, possui um excelente desempenho para trabalhar com malhas de alta definição e, de quebra faz todo o tipo de “bake”. Apesar de não usarmos ele para fazer a retopologia, é uma mão na roda importar a malha de baixa poligonagem, ou “low poly” e usar como referência a malha de alta definição, ou”high poly”.

Então, o processo é simples, basta carregar ambas as malhas no programa, escolher os mapas desejados, a definição e a qualidade das imagens iniciar a geração dos mapas. O processo leva em torno de 5 minutos para cada modelo.

Um detalhe importante. Nesta etapa, o modelo de alta definição usado não é o modelo original, mas sim o modelo soldado com a função Dynamesh em resolução 2048, conforme mostrado no post referente à retopologia. Isso porque o “Bake” funciona por meio da projeção de raios no espaço e, se houver qualquer buraco na malha, o processo pode resultar em erro.

image01

Imagem 8 – Geração de mapas no TopoGun 2.0

Referência interessante sobre normal, bump e displacement maps:

http://blog.digitaltutors.com/bump-normal-and-displacement-maps

Personagens retopologizados e com os mapas de normal e occlusion aplicados:

Angel Channeler 3498 faces https://skfb.ly/RGxy

Angel Doc 3478 faces https://skfb.ly/RGxS

Angel Leader 3457 faces https://skfb.ly/RGyp

Angel Peon 3478 faces https://skfb.ly/RGyu

Angel Soldier 3688 faces https://skfb.ly/RGAv

Demon Channeler 2938 faces https://skfb.ly/RGAP

Demon Doc 3158 faces https://skfb.ly/RGBB

Demon Leader 2826 faces https://skfb.ly/RGBI

Demon Peon 2862 faces https://skfb.ly/RGBN

Demon Soldier 2962 faces https://skfb.ly/RGCv

Angels: Doom of Eternity – Criação de UVmap dos anjos e demônios

Na segunda semana de agosto foram criadas as UVs dos cinco anjos e cinco demônios que serão os dez personagens jogáveis do jogo.

Sobre a criação de UVmap

Esta é uma etapa que dá seguimento à etapa explicada no post anterior, a retopologia. Quando fazemos a retopologia, neste projeto, é diminuido drasticamente o número de polígonos do modelo tridimensional, ou seja, o modelo passa de 5 milhões de polígonos para apenas 3,4 mil polígonos. Essa retopologia é importante pois facilita a deformação do objeto para a animação e maximiza o processamento da cena de jogo. Mas quando se reduz a topologia muitos detalhes se perdem, e é aí que entra uma outra técnica, a projeção dos detalhes da topologia de alta definição sobre a nova topologia, de baixa definição, por meio de mapas em formato de imagem.

Para isso, é preciso primeiramente criar as UVs dos objetos, mas o que seria uma UV? De acordo com Zephyris (2016) as letras “U” e “V” representam os eixos 2D de um objeto 3D “XYZ” planificado. Em outras palavras, mapa de UV seria a “casca” planificada de um objeto 3D, ou, o couro de um animal esticado em forma de um tapete. Mas por que é mesmo que fazemos isso? Fazemos porque os detalhes de textura são aplicados sobre o objeto tridimensional em forma de imagem, e, imagem neste caso é 2D!

image01

By Zephyris at en.wikipedia, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=7202834

Mas, o que é preciso para se fazer uma UV? Assim como é preciso cortar o couro do animal para transformá-lo em um tapete, é também preciso cortar o objeto 3D para abrir a malha. E, para isso deve-se ter alguns cuidados:

1 – Esconder os cortes

O corte que define a abertura da UV é também uma emenda da imagem que será posteriormente projetada sobre o objeto. E, caso alguma falha ocorra, essa emenda pode ficar evidente, portanto, um dos cuidado é fazer o corte no local mais escondido possível. Falhas são mais comuns do que se imagina, elas podem o correr na hora de gerar a textura, na hora de aplicar a mesma sobre o objeto, e na hora de visualizar o objeto no software (os também conhecidos como erros de redraw), seja durante a edição ou, o que é pio, na hora em que o jogo está funcionando.

image04

Imagem 1 – Falha criada propositalmente para demonstrar um possível erro na emenda

2 – Prover legibilidade

Quando se cria um mapa de UV é importante que esse mapa tenha boa leitura, ou seja, o mapa 2D deve ser fácil de compreender e relacionar com o objeto 3D. Essa compreensão é importante principalmente quando a textura é pintada ou retocada manualmente através do Adobe Photoshop, por exemplo, como ainda é comum nos dias de hoje. Para facilitar a visualização da UV é indicado separa o modelo em partes, ou ilhas. Dessa forma, separam se os braços, as mãos cabeça,pernas, etc.

image05

Imagem 2 – UV criada automaticamente com a função UVmaster do ZBrush.

image02

Imagem 3 – UV cortada e posicionada manualmente a fim de se obter boa legibilidade.

3 – Evitar compressão

Outro cuidado importante é cortar a UV de modo que haja a menor contração possível. Mas, como assim? O ideal talvez seria que fada polígono fosse planificado individualmente, assim, não haveria nenhuma deformação da UV em relação ao polígono da malha. Mas, não é ideal que tenhamos muitos cortes, então buscamos cortar em pontos estratégicos, porém quando abrimos um objeto 3D é muito comum que os polígonos se ajustem para se adequarem ao formato 2D, então, alguns polígonos podem esticar e outros comprimir. Assim sendo, o corte também deve ser feito de maneira que se minimizem as distorções.

image03

Imagem 4 – As áreas em vermelho demonstra a compressão da malha.

image07

Imagem 5 – Uma UV regular com menor distorção.

Processo operacional de criação de UVmap

Há muitas formas de se criar a UV, são processos automáticos, manuais e mistos. Os processos automáticos normalmente não levam em consideração, por exemplo, o que foi apresentado no quesito número um, porém tem a vantagem de ser rápido e prático. Há métodos semiautomáticos, onde é possível determinar áreas que vão atrair ou repelir os cortes ou separar o objeto em grupos que serão abridos separadamente em forma de ilhas, esses são métodos mistos, são mais rápidos e normalmente apresentam resultado melhor em relação automático, se levarmos em conta os quesitos apresentados anteriormente. Neste projeto, optamos por um processo mais manual do que automático. Confira a seguir o passo-a-passo composto por dua etapas:

1 – Corte de UV

Quando a retopologia é feita a UV é criada de forma “bagunçada” (vide imagem 6), então o que precisamos fazer é determinar os pontos de corte para posteriormente abrirmos a malha. Então, a primeira coisa a se fazer é soldar todos os cortes existentes selecionando-se todas as arestas e aplicando a função “sew UV edges” no Maya. Depois, o passo é criar os cortes corretos selecionando-se as arestas adequadas e aplica-se a função “cut UV edges”
image06

Imagem 6 – UV antes de ser submetida ao processo de corte e abertura.

2 – abertura da UV

Depois de cortadas as aplica-se a função “unflod 3D” abrir a malha. Esta função já posiciona as ilhas no layout porém, para melhorar a legibilidade e maximizar a ocupação do espaço pode-se mudar a posição das mesmas. Por fim, basta exportar o novo arquivo em .obj para seguir para a próxima etapa, a geração de materiais.

image00

Imagem 7 – UV criada com a função “unfold 3D” e reposicionada manualmente.

Treelhas – Quarta semana de agosto.

Essa semana, pode-se dizer que corremos atrás do prejuízo. Desenvolvemos mais a ideia e fizemos análise de similares antes da primeira orientação da semana. Na orientação, descobrimos qual seria o próximo passo, que vai ser as “entrevistas com o publico-alvo”, que vai ser no formato “Fantasia Direcionada”. Antes da segunda orientação trabalhamos no painel semântico para a criação da identidade visual, e a própria identidade visual. A paleta de cores já foi decidida, e a logo está na parte de geração de alternativas, e serão analisadas para a escolha final. A segunda orientação foi mais focada no poster a ser entregue na próxima semana e uma dúvida em relação ao nome do aplicativo para a logo. O poster também já está em processo de execução.