Criando Efeitos Fotorealistas e NoFotorealistas Para Jogos

Bruno Evangelista1 bpevangelista@gmail.com Alessandro Silva1 alessandro.ribeiro.silva@gmail.com

Universidade Federal de Minas Gerais, Brasil 1

1.

Introduo

Ns ltimos anos a indstria tm buscado criar jogos com um alto nvel de realismo. O objetivo muitas vezes criar um nvel de realismo to grande, que os jogos no possam ser diferenciados do mundo real, proporcionando assim uma maior imerso do jogador. Um dos grandes fatores que contribui para o aumento no realismo nos jogos foi introduo dos hardwares grficos programveis (GPU Graphics Processing Unit), que tornou possvel programar o fluxo de renderizao dos jogos. A flexibilidade de se programar a GPU tornou possvel adicionar aos jogos efeitos visuais que antes s eram vistos em filmes. Por outro lado, devido ao grande aumento no realismo nos jogos algumas vertentes da indstria comearam a investir no no-fotorealismo, utilizando tcnicas como renderizao de cartoons em ambientes tridimensionais. Neste trabalho sero apresentadas algumas das principais tcnicas foto-realistas e nofotorealistas que tm sido amplamente utilizadas nos jogos nos ltimos anos. Para cada uma das tcnicas abordadas sero apresentados a sua base terica, aplicao e resultados obtidos. Na Seo 2 apresentada uma viso geral do pipeline de renderizao programvel. Na Seo 3 so apresentadas algumas linguagens de shaders existentes e uma viso geral sobre efeitos. A Seo 4 mostra o processo de construo de um efeito para realizar o clculo da iluminao de Phong por pixel. A Seo 5 mostra como utilizar texturas dentro de um shader e como gerar essas texturas proceduralmente. Na Seo 6 so apresentadas tcnicas que podem ser utilizadas para renderizar superfcies detalhadas em tempo real. A Seo 7 mostra o processo de construo de efeitos de ps-processamento utilizando shaders, esses efeitos so divididos entre transformaes radiomtricas e filtros. Por fim, a Seo 8 apresenta efeitos mais elaborados.

2.

Shaders e Pipeline de Renderizao

Shaders so pequenos programas que so executados no hardware grfico programvel (GPU: Graphics Processing Unit), e permitem modificar alguns estgios do pipeline de renderizao. Antes da introduo dos shaders, as APIs grficas como DirectX e OpenGL, possuam um pipeline de renderizao completamente fixo. Isso fazia com que todos os jogos utilizassem um mesmo processo de renderizao, sendo possvel apenas modificar parmetros do mesmo. Por exemplo, para iluminar uma cena, era possvel escolher o tipo de fontes de luz (direcional, holofote e omnidirecional), e configurar os seus parmetros. No entanto, o nmero de fontes de luz disponvel era bastante limitado e definido pela API, alm disso, no era possvel criar novas fontes de luzes, nem modificar o algoritmo de iluminao que era utilizado. A flexibilidade de se programar a GPU tornou possvel adicionar aos jogos efeitos visuais que

antes s eram vistos em filmes. Esses efeitos geralmente eram criados utilizando ferramentas como RenderMan [Hanrahan 90], que apesar de possuir uma linguagem de shaders no tira proveito dos hardwares grficos programveis e no pode ser utilizada para aplicaes de tempo real. A Figura 1 exibe os vrios estgios de um pipeline de renderizao.

Figura 1: Pipeline de renderizao. A entrada principal do pipeline da Figura 1 so os vrtices da malha do modelo, onde cada vrtice pode conter informaes de posio, cor, normal, coordenada de textura, dentre outros. Vrios estgios do pipeline tm acesso a outros recursos de memria, como constantes passadas pela aplicao e texturas. A sada final do pipeline uma imagem na forma de uma matriz de pixels, que exibida ao usurio. Os estgios "Vertex Processing", "Geometry Processing" e "Fragment Processing" so os estgios do pipeline de renderizao que so atualmente programveis.

2.1. Processamento de Vrtices

O estgio de processamento de vrtices responsvel em transformar os vrtices da malha do modelo para que eles possam ser utilizados no estgio de rasterizao [Foley 97], e posteriormente no processamento de pixels. A Figura 2 exibe o estgio de processamento de vrtices, e algumas das etapas que eram realizadas pelo pipeline de renderizao fixo. Com a introduo do pipeline programvel fica a critrio do usurio decidir qual processamento deve ser feito para cada vrtice.

Figura 2: Estgio de processamento de vrtices.

No pipeline fixo de renderizao este estgio era utilizado para transformar os vrtices e calcular a iluminao dos mesmos. Utilizando o pipeline programvel possvel realizar novas tarefas, como: deformao de slidos, animao esqueletal, movimentao de partculas, dentre vrias outras. A entrada do processamento de vrtices so os dados dos vrtices da malha do modelo, e a sada a posio final do vrtice (no espao de projeo) e outros dados definidos pelo usurio. Os dados de sada sero utilizados posteriormente como entrada para o processamento de pixels. Por exemplo, possvel adicionar sada de cada vrtice o seu vetor normal. Esta normal ser interpolada e utilizada como entrada para o processamento de pixels, que poder utiliz-la para fazer um clculo de iluminao diferente para cada pixel. A sada do processamento de vrtices utilizada como entrada no processamento de geometrias [Blythe 06]. O processamento de geometrias, no ser abordado neste trabalho, mas em termos gerais ele pode ser utilizado para modificar as geometrias existentes, ou criar novas geometrias em tempo real. A sada do processamento de geometrias utilizada como entrada no estgio de rasterizao.

2.2. Rasterizao
A rasterizao responsvel em transformar os dados dos vrtices em fragmentos. Um fragmento um conjunto de informaes relacionadas a um pixel, como: cor, profundidade, coordenada de textura e outros. Apesar de fragmento ser um termo mais correto, geralmente o termo pixel utilizado para se referir a um fragmento. A Figura 3 exibe o estgio de rasterizao, este um estgio fixo do pipeline que no pode ser programado.

Figura3: Estgio de rasterizao. Na etapa de rasterizao as primitivas que possuem vrtices fora do volume de viso so recortadas, e apenas a parte dentro do volume de viso mantida. Em seguida as primitivas, geralmente tringulos, so rasterizadas e transformadas em um conjunto de fragmentos, que so escalados para a dimenso da tela. Os dados dos vrtices das primitivas so interpolados para cada fragmento gerado. Os fragmentos gerados pela rasterizao so utilizados como entrada para o processamento de pixels.

2.3. Processamento de Pixels/Fragmentos

O estgio de processamento de pixels responsvel em gerar a cor final de cada pixel, a partir dos dados recebidos do estgio de rasterizao.

Figura 4: Estgio de processamento de pixels. No pipeline fixo de renderizao este estgio era utilizado para amostrar texturas e gerar a cor final de cada pixel. Utilizando o pipeline programvel possvel realizar diversas novas tarefas, como: iluminao por pixel, iluminao global (HDR), gerao de texturas procedurais, normal mapping, alm de efeitos de ps-processamento sobre a imagem gerada, como: motion blur, bloom e outros. Os pixels de sada do processamento de pixels esto prontos para serem gravados no framebuffer (matriz de pixels). Antes dos pixels serem gravados no framebuffer, eles devem passar por um ltimo estgio, chamado Output Merger. Neste estgio os pixels recebidos podem ser descartados por serem oclusos por outros pixels, por serem transparentes ou por no colaborarem para a cor final do pixel da imagem. Com isso, apenas alguns pixels iro ser efetivamente gravados no framebuffer. Ao final de todo esse processamento o framebuffer contm a imagem final resultante do processamento de renderizao.

3.

Linguagens de Shaders

Para desenvolvermos shaders precisamos utilizar uma linguagem prpria para a programao dos shaders. A escolha da linguagem de shaders a ser utilizada est muitas vezes ligada escolha da API grfica utilizada. Por exemplo, utilizando o DirectX podemos utilizar as linguagens de shader HLSL (Microsoft) ou Cg (nVidia). Existem ainda outras linguagens de shaders que podem ser utilizadas para renderizao offline, como o RenderMan. Atualmente as principais linguagens de shaders utilizadas para renderizao em tempo real, so: HLSL (High Level Shading Language) Microsoft. Utilizada no DirectX e XNA GLSL (OpenGL Shading Language) 3D Labs. Utilizada no OpenGL Cg (C for Graphics) nVidia. Pode ser utilizada no DirectX e OpenGL De maneira geral, as linguagens de shaders utilizadas no DirectX e OpenGL so bem similares. Essas linguagens so compostas por um pequeno conjunto de funes, como operaes matemticas, acessos a texturas, controle de fluxo e outros. Os tipos de dados utilizados so similares aos tipos padres existentes no C++, alm de vetores e matrizes. Por exemplo, possvel criar um vetor de variveis do tipo float de vrios tamanhos, como: float2, float3 e float4. E tambm possvel criar matrizes, como: float2x2, float3x3 e float4x4. O cdigo final do shader gerado geralmente similar a uma equao matemtica, construda utilizando as funes presentes na linguagem de shaders utilizada.

3.1. Efeitos
Efeitos so entidades que podem encapsular vrios shaders diferentes, alm de configuraes dos estados do pipeline fixos necessrias para a execuo do mesmo. Em cada efeito possvel criar uma ou mais tcnicas, que so utilizadas na renderizao das malhas. Cada tcnica criada deve definir quais shaders sero utilizados para o processamento de vrtices, geometria e pixels. Isso permite, por exemplo, que duas tcnicas diferentes possam utilizar um mesmo processamento de vrtices, mas possuam diferentes processamentos de pixels. A tcnica a ser utilizada na renderizao de um objeto pode ser escolhida em tempo de execuo de acordo, por exemplo, com os recursos do hardware grfico do usurio.

4.

Equao de iluminao de Phong

Existem vrios equaes de iluminao na literatura [Mller 99], que permitem calcular a intensidade final de luz em um ponto de uma superfcie. A equao de iluminao Phong [Mller 99], foi uma das equaes mais utilizadas para esse propsito, tendo sido utilizada no pipeline fixo de vrias APIs grficas como DirectX e OpenGL. Sendo que geralmente a iluminao era calculada para cada vrtice da malha de um objeto, e o resultado era interpolado por toda a superfcie do objeto. A equao de Phong no considera as propriedades fsicas das superfcies, ou trata de maneira real a iterao entre a luz e as superfcies, gerando um resultado aproximado com pouco realismo, mas rpido de ser calculado. A equao proposta por Phong apresentada na Equao 1.

Equao 1: Equao de iluminao de Phong [Mller 99]. Segundo a Equao 1, a intensidade total de luz refletida em um ponto da superfcie igual intensidade da componente de luz ambiente da cena, somada as intensidades das componentes de luz difusa e especular para cada fonte de luz. A luz ambiente a luz que no emitida diretamente de uma fonte de luz, mas est espalhada no ambiente. Por isso, considera-se que sua intensidade contribui igualmente para todos os objetos da cena, e pode ser representada atravs de uma constante. A componente de luz difusa calculada para cada fonte de luz, e representada pela luz que incide em um ponto na superfcie e refletida igualmente em todas as direes sobre a superfcie. A Figura 5 ilustra a reflexo difusa da luz.

Figura 5: Reflexo difusa da luz.

A Intensidade da reflexo difusa da luz em um ponto da superfcie calculada utilizando a lei de reflexo de Lambert, e apresentada na Equao 2.

Equao 2: Clculo da intensidade de reflexo difusa em um ponto da superfcie. Na Equao 2, a intensidade de luz difusa refletida em um ponto dada pelo coeficiente de reflexo difusa da superfcie Kd, pela intensidade da componente difusa da luz Ld, e pelo ngulo entre o vetor de luz incidente e a normal da superfcie. A ltima componente da equao de Phong a componente especular. A reflexo especular aquela que incide em um ponto da superfcie e reflete como um espelho perfeito, onde o ngulo de incidncia e reflexo da luz so iguais. Desta maneira a intensidade de luz especular, depende da posio pela qual o ponto da superfcie observado. A Figura 6 ilustra a reflexo especular da luz.

Figura 6: Reflexo especular da luz. A Intensidade da reflexo especular da luz em um ponto da superfcie calculada utilizando a lei de reflexo de Snell, e apresentada na Equao 3.

Equao 3: Clculo da intensidade de reflexo especular em um ponto da superfcie. Na Equao 3, a intensidade de luz especular refletida em um ponto dada pelo coeficiente de reflexo especular da superfcie Ks, pela intensidade da componente especular da luz Ls, e pelo ngulo entre o vetor de luz refletida e o vetor de viso do ponto. Note que nas APIs grficas o clculo de iluminao especular geralmente utiliza o halfway vector [Blinn 77], ao invs de calcular o vetor real de reflexo da luz. A Figura 7 apresenta o clculo das componentes de luz ambiente, difusa e especular para uma esfera. E a Figura 8 apresenta o resultado final da combinao das trs componentes.

(a)

(b)

(c)

Figura 7: (a) Clculo da componente ambiente da luz. (b) Clculo da componente difusa da luz. (c) Clculo da componente especular da luz.

Figura 8: Resultado final da equao de iluminao de Phong. Combinao das trs componentes apresentadas na Figura 7.

4.1. Criando efeito

Nesta seo criaremos um efeito de iluminao por pixel utilizando a equao de Phong apresentada na Seo 2.1, que ser utilizado na renderizao dos objetos de uma cena. A Tabela 1 apresenta algumas das funes de linguagem HLSL, utilizadas na construo do efeito. dot mul normalize reflect saturate Calcula o produto escalar entre dois vetores. Realiza multiplicao entre vetores e matrizes. Normaliza um vetor. Reflete um vetor incidente a uma normal. Satura os valores entre 0.0 e 1.0 Tabela 1: Funes do HLSL utilizadas no efeito criado.

Quando criamos um efeito primeira coisa que precisamos declarar so os dados que sero recebidos da aplicao, esses dados so declarados como variveis globais no efeito. O cdigo a seguir apresenta as variveis utilizadas pelo efeito.

As matrizes utilizadas pelo efeito so as matrizes de mundo, viso e projeo. Note que algumas combinaes dessas matrizes, como matWV (Mundo * Viso) e matWVP (Mundo * Viso * Projeo), tambm so declaradas para no precisarem ser calculadas no efeito. Em seguida declaramos a cor da componente ambiente de luz da cena, a posio e cor de uma fonte de luz omnidirecional e as propriedades do material da superfcie. Todas essas informaes so utilizadas no clculo de iluminao. Devemos declarar tambm uma estrutura com os dados dos vrtices da malha do modelo que sero enviados ao processamento de vrtices. E uma outra estrutura, que define os dados de sada do processamento de vrtice, que sero utilizados como entrada do processamento de pixels. O cdigo a seguir apresenta as estruturas criadas.

A estrutura a2v define os dados de entrada do processamento de vrtices, e a estrutura v2f define os dados de sada do processamento de vrtice. Os dados de entrada so a posio do vrtice e seu vetor normal, e os dados de sada so a posio final do vrtice e os vetores de normal, luz e viso.

Aps declararmos as variveis e estruturas utilizadas pelo efeito podemos criar o cdigo do processamento de vrtices e pixels. A seguir apresentado o cdigo da funo de processamento de vrtices criada. Observe que a entrada da funo a estrutura a2v, e a sada estrutura v2f.

No processamento de vrtices a posio final do vrtice calculada, e a matriz transformada de acordo com as matrizes de mundo e viso. Em seguida so calculados os vetores que apontam do vrtice para a luz e para o observador da cena. Repare que no final do processamento todos esses vetores se encontram no espao de viso. O cdigo a seguir apresenta a funo utilizada para o processamento de pixels. A seguir apresentado o cdigo da funo de processamento de pixels.

No processamento de pixels, a equao de Phong apresentada na Seo 2.1 calculada para cada pixel e a cor final do pixel gerada. Por fim, precisamos criar uma tcnica que defina qual

processamento de vrtice e pixel iremos utilizar. A seguir apresentado o cdigo da tcnica para iluminao criada.

5.

Texturas

Uma das primeiras formas de acrescentar detalhes em uma renderizao sem acrescentar geometrias atravs da utilizao de texturas. Geralmente uma textura uma imagem 2D composta por texels (texture elements) que aplicada sobre um tringulo. Esta definio restringe uma gama de aplicaes interessantes que podemos fazer, por este motivo textura para este tutorial deve ser vista por uma viso mais geral: uma funo que mapeia uma coordenada n-dimensional a uma informao de 4 componentes que pode representar uma cor. Podemos ver na Equao 4 um exemplo da funo textura T.

Equao 4: Funo textura. Uma textura no shader acessada atravs de um sampler. Mas somente funes especficas como tex1D, tex2D ou tex3D podem ser utilizadas. O trecho de cdigo abaixo um exemplo de como configurar um sampler e como acessa-lo.

A textura definida pelo tipo texture, mas para utilizar a mesma deve-se configurar um sampler para a mesma a fim de configurar o modo como os texels sero acessados e filtrados. O espao de coordenadas de textura geralmente desvinculado do espao do objeto ou modelo 3D utilizado na aplicao, por isso necessrio definir uma forma de mapeamento. Este mapeamento pode ser feito de forma analtica (mapear esferas, cubos, cilindros, etc...) ou pode ser feito por um artista com o auxilio de uma ferramenta de modelagem. Na Figura 9 possvel observar um exemplo de textura 2D com o espao de endereamento a partir das coordenadas s e t. Este endereo que deve ser passado como atributo adicional ao vrtice do modelo 3D para que o mesmo possa colar a imagem sobre a superfcie do objeto 3D a ser renderizado. Por fim, quando as cores dos pixels so calculadas que se faz efetivamente o acesso textura.

Figura 9: Mapeamento de textura. a) funo textura T que recebe as coordenadas s e t e endeream uma determinada cor; b) objeto3D que possui um dado mapeamento para o espao de T; c) imagem final que utiliza os texels de a para atribuir cor aos pixels. A Figura 10 mostra um exemplo de 2 configuraes de sampler para a mesma textura sobre uma imagem de alta frequncia (variao brusca de branco para preto). Note o filtro age de maneira diferente sobre os texels, importante saber escolher a configurao certa destes filtros, pois a mesma afetar o desempenho da renderizao.

a b Figura 10: Exemplo da configurao de samplers. a) no utilizando nenhum filtro; b) utilizando filtro linear.

5.1. Multi-texturizao
Vrias texturas diferentes podem ser utilizadas dentro do shader e tambm vrios elementos de uma mesma textura podem ser utilizados. Com base nisto possvel implementar a tcnica de multitexturizao. Para implementar multitexturizao com shaders necessrio definir uma funo de combinao das cores das vrias texturas utilizadas. Como pode ser visto na Equao 5, a multitexturizao pode ser definida como uma combinao das cores de vrias texturas.

Equao 5: Equao multitexturizao. A Equao 6 mostra uma relao de recorrncia que pode representar um tipo de combinao de multitexturizao que utiliza o canal alpha da textura como fator de combinao.

Equao 6: Relao de recorrncia para descrio de uma combinao de multitexturizao. MT a multi-textura, T a textura e as operaes so realizadas sobre valores em RGB em uma dada coordenada de acesso. Este tipo de combinao pode ser utilizado para renderizao de terrenos, onde podem existir vrias texturas aplicadas simultaneamente a uma determinada regio do mapa. Como exemplo, na Figura 11, uma textura de terreno(tex1) combinada com a textura da estrada(tex2) e logo depois este resultado combinado com a rea no acessvel do mapa(tex3).

Figura 11: Diagrama da aplicao da recorrncia de multitexturizao sobre 3 texturas para composio de uma imagem de terreno.

Ao voltarmos na Equao 6, possvel notar que a operao de recorrncia uma combinao convexa da textura n com a textura n-1 ponderada pelo fator do canal alpha, por isto possvel implementar esta relao no shader utilizando a funo de interpolao linear (lerp). O cdigo do processador de pixels mostrado abaixo.

5.2. Gerao Procedural

As texturas podem ser obtidas a partir de fotografias, desenhos ou de forma sinttica. Estas geradas de forma sintticas so conhecidas como texturas procedurais. As texturas procedurais so aquelas que o processo de sntese da textura pode ser descrito de forma algortmica. Ao utilizar shaders possvel implementar estas texturas de forma dinmica, ou seja, no necessrio armazenar uma imagem, pois as cores da mesma podem ser geradas on-the-fly. Um exemplo simples a gerao de uma textura que segue o padro de uma onda quadrada, onde so utilizadas funes do shader para compor esta onda. No algoritmo de pixel abaixo possvel notar que utilizada a funo step e fmod.

O comportamento das funes step e fmod exemplificado na Figura 12.

step( s, a ) fmod( s , a ) Figura 12: Comportamento das funes step e fmod para um dado parmetro a. Como pode ser visto no algoritmo acima, existe um parmetro externo chamado freq que multiplicado ao valor da coordenada no eixo s da textura, por esta razo possvel controlar a frequncia de repeties da transio da onda quadrada apenas alterando este valor. A

Figura 13 mostra o exemplo da renderizao de uma imagem com este padro para os parmetros: 1, 5, 15 e 30.

15 30 Figura 13: Renderizao de textura de onda quadrada com frequncias variadas. Utilizar texturas procedurais interessante, pois permite a implementao de controle paramtrico, o que faz um mesmo algoritmo ser capaz de gerar diversas texturas diferentes e como necessrio armazenar somente a configurao de parmetros utilizados para sintetizar uma determinada textura, fornece tambm uma forma eficiente de compactao. Porem, ao utilizar este tipo de textura diretamente sobre o shader, pode ocorrer os serrilhados na renderizao, pois os filtros que antes eram aplicados nas texturas normais agora devem ser implementados tambm dentro da funo de gerao procedural. Outro ponto importante o desempenho do shader que pode ser degradado com a implementao de algoritmos complexos. Por fim, o ltimo problema a falta de controle sobre os detalhes gerados, que apesar de no estarem presentes no exemplo simples que foi dado, ocorre em diversos modelos de gerao procedural de texturas.

6. Renderizao de superfcies detalhadas

Um dos fatores que determina o seu nvel de realismo de um ambiente virtual o nvel de detalhe dos objetos presentes nesse ambiente. Objetos do mundo real podem ser representados computacionalmente de vrias formas diferentes, sendo que a representao mais utilizada por aplicativos de computao grfica a representao B-rep (Boundary Representation). Nessa representao, um objeto representado por sua borda (sua superfcie mais externa). Essa superfcie dividida em um grande nmero de primitivas geomtricas, geralmente tringulos, visando acelerar os clculos necessrios durante o processo de renderizao. Dessa forma para armazenar um objeto do mundo real basta armazenar um arranjo de tringulos que formam a superfcie desse objeto. Nesse tipo de

representao, o nvel de detalhe dos objetos est diretamente relacionado ao nmero de tringulos utilizados para representar a superfcie do mesmo. Quando maior o nmero de tringulos, mais subdividida a superfcie e mais detalhes podem ser armazenados. Para representarmos com preciso a superfcie de objetos do mundo real pode ser necessrio trabalhar com um grande nmero de tringulos, que s vezes possui um nmero to grande que no possa ser armazenado e processado em tempo real. A Figura 14 apresenta a renderizao de um objeto do mundo real obtido a partir de um scanner 3D.

Figura 14: Lucy (Stanford University). O modelo computacional utilizado na renderizao da Figura 14 possui 116 milhes de tringulos e necessita de 325 MB de memria para ser armazenado. Para esse modelo poder ser renderizado em tempo real, seria necessrio armazenar um grande volume de dados na GPU e processar todos esses dados pelo menos 24 vezes em um segundo. Tentando solucionar o problema de desenhar superfcies extremamente detalhadas em tempo real, surgiram vrias tcnicas que tentam simular a renderizao de uma superfcie extremamente detalhada, sem a necessidade de se trabalhar com a superfcie real dos objetos. Algumas dessas tcnicas so: Bump Mapping [Blinn 78], Normal Mapping [Peercy 97], Parallax Mapping [Kaneko 01], Relief Mapping [Policarpo 05, Policarpo 06], Parallax Occlusion Mapping [Tatarckuk 06], Cone Step Mapping [Dummer 06] e Sphere Tracing [Donnelly 05]. A Figura 15 ilustra a aplicao de uma das primeiras tcnicas propostas para simular detalhes na superfcie, chamada Normal Mapping [Peercy 97].

Figura 15: Comparao entre renderizao de superfcies. (Esquerda) Mapeamento de textura. (Direita) Normal mapping. Das tcnicas existentes para simular a renderizao de malhas detalhadas as mais recentes, como Relief Mapping, Parallax Occlusion Mapping, Cone Step Mapping e Sphere Tracing utilizam como base um algoritmo de ray-tracing. Nesses trabalhos o algoritmo de ray-tracing executado no processamento de cada pixel gerado durante a renderizao do objeto. Com isso possvel gerar imagens com uma alta qualidade visual, ao custo de um maior tempo de processamento. A Figura 16 ilustra a renderizao de uma superfcie utilizando a tcnica de Cone Step Mapping (esquerda), e a renderizao da superfcie real (direita).

Figura 16: (Esquerda) Detalhes simulados utilizando a tcnica de Cone Step Mapping. (Direita) Superfcie Real.

6.1. Bump Mapping e Normal Mapping

As tcnicas de Bump Mapping e Normal Mapping so utilizadas para simular detalhes nas superfcies dos objetos sem alterar a malha dos mesmos. Essas tcnicas se baseiam na premissa que o calculo de iluminao em cada ponto da superfcie dependente do vetor normal da superfcie naquele ponto. Com isso, para simular detalhes na superfcie do objeto, basta aplicar perturbaes sobre a normal do mesmo. A Figura 17 ilustra uma superfcie lisa e suas normais sendo perturbadas por uma funo de perturbao.

Figura 17: Perturbao das normais de uma superfcie. A tcnica de Bump Mapping aplica perturbaes nas normais do objeto baseado em uma funo matemtica ou em um mapa de curva de nvel. Para aplicar a perturbao baseada em um mapa de curva de nvel, para cada pixel necessrio ler a sua altura e a dos seus vizinhos do mapa de curva de nvel e a partir disso calcular a nova normal para este ponto. Uma alternativa mais eficiente seria armazenar a normal perturbada para cada ponto da superfcie, no precisando assim calcular a mesma, essa tcnica chamada de Normal Mapping. A Figura 18 mostra um mapa de curva de nvel e um mapa de normais que podem ser utilizados respectivamente pelas tcnicas de Bump Mapping e Normal Mapping.

Figura 18: (Esquerda) Mapa de curva de nvel. (Direita) Mapa de normais. Quando utilizamos as tcnicas de Bump Mapping ou Normal Mapping geralmente se opta por realizar todos os clculos no espao da tangente. O espao da tangente uma base formada pelos vetores tangente, bitangente e normal para cada ponto da superfcie. Quando se trabalha no espao da tangente no estamos mais considerando a curvatura da superfcie do objeto ou sua orientao. Isso permite, por exemplo, que um mapa de normais gerado possa ser utilizado em qualquer parte da superfcie do objeto. A Figura 19 exibe os vetores do espao da tangente calculados para diferentes pontos em uma esfera e um torus.

Figura 19: Calculo da base da tangente para diferentes pontos na superfcie dos objetos. Para se aplicar tcnica de Normal Mapping, primeiramente devemos calcular a base da tangente no processamento de vrtice da superfcie. E em seguida calcular a orientao dos vetores de viso e iluminao no sistema de coordenadas da tangente. No processamento de fragmentos, para cada fragmento devemos ler sua nova normal do mapa de normais da superfcie, e em seguida, calcular a iluminao utilizando a normal lida e os vetores de viso e iluminao, calculados no processamento de vrtices. Lembre que os atributos dos vrtices calculados no processamento de vrtices so interpolados para todos os fragmentos gerados durante o processo de rasterizao. A seguir apresentado o trecho do cdigo de processamento de vrtices, responsvel em gerar a base da tangente e calcular as coordenadas dos vetores de viso e iluminao no espao da tangente.

A seguir apresentado o cdigo do processamento de pixels. O mtodo phongShading executa o algoritmo de iluminao padro de Phong. A Figura 20 apresenta o resultado da aplicao da tcnica de Normal Mapping a um torus.

Figura 20: Aplicao da tcnica de Normal Mapping. (Esquerda) Texturizao e Normal Mapping. (Direita) Somente texturizao.

7. Ps-processamento
As tcnicas abordadas at agora so aplicadas diretamente sobre os tringulos dos modelos 3D renderizados. Existem outros tipos de efeitos especiais que podem ser aplicados sobre a imagem obtida a partir da renderizao, eles so chamados de efeitos de ps-processamento. Os shaders para ps-processamento geralmente utilizam uma ou mais texturas (imagens) como entrada para realar ou extrair caractersticas das mesmas com o objetivo de gerar uma ou mais texturas. Esta definio est intimamente ligada com a rea de processamento digital de imagens (PDI), s que as imagens so representadas por texturas. As tcnicas apresentadas neste tutorial sero: transformaes radiomtricas, filtros e composies. A Figura 21 mostra uma possvel viso do funcionamento dos shaders de ps-processamento, considerando uma ou mais texturas de entrada e escrevendo o resultado em outras texturas. A gerncia de texturas deve ser realizada dentro do jogo, pois necessrio utilizar a caracterstica de renderizao com escrita em textura da API em questo (OpenGL, DirectX ou XNA). Como estamos utilizando o FXComposer, o mesmo j implementa este controle, temos apenas determinar (no shader) quais texturas devem ser criadas ou escritas.

Figura 21: Funcionamento do shader de ps-processamento que recebe um conjunto de texturas como entrada e pode escrever em outro conjunto de texturas. O cdigo abaixo tem um exemplo da configurao para renderizao com escrita em textura que realizado.

Na Figura 22 mostrado um exemplo de renderizao composta do efeito de bloom, onde existe apenas uma textura de entrada e esta utilizada para compor a imagem final como efeito.

Figura 22: Esquerda: textura de entrada; Direita: textura que foi processada com o efeito de Bloom.

O desempenho do jogo pode ser fortemente influenciado pela utilizao destas tcnicas, pois os algoritmos so aplicados sobre os pixels da tela, ou seja, a carga de processamento grfico est concentrada no fragment shader. Muitos dos algoritmos que sero apresentados geralmente no so aplicados de forma isolada, pois os mesmos podem fazer parte de um processo elaborado de renderizao de determinados efeitos.

7.1. Transformaes radiomtricas

As transformaes radiomtricas so operaes realizadas sobre as cores da imagem atravs de um mapeamento direto, onde geralmente afetam o histograma da imagem. Estas transformaes podem ser utilizadas para realar caractersticas relacionadas com a distribuio de cores e podem ser implementadas atravs de operaes aritmticas ou tabelas de mapeamento (LUT LookUp Table). possvel implementar efeitos de transio da textura da renderizao atual para uma determinada cor, controlar o seu brilho e contraste ou mesmo extrair os tons de cinza para utilizar como base para outro efeito. Para realizar operaes de brilho e contraste basta efetuar operaes aritmticas como soma e multiplicao sobre os valores RGB da textura. A Equao 7 mostra um exemplo de operao de brilho e contraste.

Equao 7: Equaes de contraste e brilho. Na Figura 23 possui os grficos de mapeamento de cores considerando apenas um canal de cor. A imagem original uma reta, quando aplicamos a operao de contraste, a mesma inclinada sobre o centro (0.5,0.5) e por fim no brilho a reta apenas deslocada para cima ou para baixo.

Figura 23: Exemplo das operaes de contraste e brilho sobre o mapeamento de cores. Os algoritmos para extrao de tons de cinza esto relacionados ao espao de cor utilizado, pois outros espaos de cor (no o RGB Red Green Blue) podem representar a intensidade de cinza como um componente separado, que o caso dos espaos HSV (Hue, Saturation, Value) e YIQ. O espao de cor HSV definido como um cone invertido, onde o ngulo (Hue) em sua base define uma cor, a distancia do centro at a borda define a saturao (Saturation) e a profundidade a intensidade (Value). O mesmo pode ser visualizado pela Figura 24.

Figura 24: Representao do espao de cor HSV em formato de cone. Retirada de: http://en.wikipedia.org/wiki/Image:HSV_cone.png O mtodo de converso do espao RGB para o HSV elaborado e pode ser encontrado em [Foley 97], mas como estamos interessados em obter somente o valor de V para ser o nosso tom de cinza, possvel utilizar qualquer das duas equaes da Equao 8.

Equao 8: Duas frmulas para extrao do tom de cinza. Outro espao de cor, o YIQ, o mesmo utilizado no sistema de transmisso de televiso NSTC (National Television Systems Comittee). Onde o Y representa a variao de intensidade do preto para o branco, o I representa a variao do vermelho para o ciano e o Q a variao de magenta para o verde. Este espao de cor separa a informao de intensidade baseada na percepo do sistema visual humano, ou seja, os resultados visuais podem ser melhores que utilizar uma converso direta para o espao de cor HSV. A Figura 25 mostra o mapeamento de cores IQ em um espao bidimensional. Uma caracterstica interessante do espao de cor YIQ que o mesmo separa a informao de cor da informao monocromtica, o que permitiu a transmisso de um mesmo sinal para televisores coloridos ou no. A converso do espao RGB para o YIQ pode ser feita diretamente apenas aplicando uma multiplicao de matrizes, que pode ser observada na Equao 9.

Equao 9: Matrizes para converso do espao RBG para o YIQ e vice-versa.

Figura 25: Representao dos componentes I e Q espao de cor YIQ. Retirada de: http://en.wikipedia.org/wiki/Image:YIQ_50%25Y_color_space.png

A extrao de tons de cinza pode apresentar um bom resultado, mas possvel acrescentar uma melhora ao combinar uma cor a intensidade calculada. A Figura 26 mostra o resultado dos algoritmos de extrao de tons de cinza.

Figura 26: Tom de cinza utilizando o HSV; Imagem original; Tom de cinza utilizando YIQ. .

7.2. Filtros
Os filtros so operaes realizadas atravs da aplicao de mscaras (matriz de valores) sobre pixels. Geralmente so utilizados para extrao ou realce de caractersticas relacionadas informao que est presente na imagem com uma certa granularidade (definida pela rea de cobertura da mscara). Diversos exemplos podem ser encontrados em Digital Image Processing - Gonzalez, Woods. A implementao de filtros utilizando shaders possvel porque os mesmos podem acessar vrios texels de uma mesma textura. A Figura 27 mostra o exemplo da aplicao de um filtro de dimenso 3x3, onde para cada textel/pixel de destino so lidos 9 outros textels da entrada.

Figura 27: Exemplo de aplicao de um filtro de 3x3 genrico.

As mscaras no costumam serem grandes, mesmo porque a complexidade de aplicao de um filtro determinada pela dimenso da mscara utilizada. Como o acesso textura uma operao cara, quanto menos dimenso do filtro melhor ser seu desempenho. Os filtros podem ser utilizados para modificao de uma imagem, afetando a mesma no domnio da frequncia, para implementar as operaes de passa baixa e passa alta. Um exemplo de filtro de passa baixa bastante conhecido o filtro da mdia, tambm conhecido como filtro de blur.

7.2.1. Blur
O filtro de blur utilizado para suavizar a imagem, ou seja, remover as frequncias altas entre cores vizinhas. Por este motivo tambm conhecido como um filtro de passa baixa. Como a imagem aps a aplicao deste aparenta estar embaada, ento esta pode ser aplicada quando a viso do personagem estiver prejudicada. Uma aplicao simples deste filtro realizar a soma de todos os elementos dentro da mascara e dar o mesmo peso para todos os elementos, um exemplo pode ser visto na Figura 28.

Figura 28: Filtro de blur em uma matriz de 3x3. Outra forma de aplicar este filtro utilizando pesos diferentes para os elementos dentro da matriz de forma a realar a cor de uma dada regio dentro do filtro. Geralmente utilizada a distribuio Gaussiana para este fim. No caso do filtro de blur, existe uma otimizao possvel para reduzir a complexidade de sua aplicao. Se a imagem for filtrada em um nico eixo e sobre este resultado ser filtrada novamente no eixo perpendicular o resultado semelhante aplicao do filtro quadrado. A Figura 29 mostra o processo de blur que funciona em dois passos. No primeiro o filtro aplicado somente em um eixo e no segundo ele reaplicado s que agora no eixo

perpendicular. Este mtodo interessante, pois gera um bom resultado alm de diminuir a complexidade do algoritmo de O(n2) para O(n).

Figura 29: Diagrama do algoritmo otimizado de blur.

Uma caracterstica interessante do blur que a aplicao consecutiva deste filtro intensifica a suavizao obtida, ou seja, ao invs de aumentar o nmero de acessos dentro do shader, pode se reaplicar o mesmo algoritmo com uma matriz pequena para atingir uma suavizao considervel. A Figura 30 mostra o fluxo de execuo do shader de blur de dois passos a partir da textura do framebuffer, onde na rea roxa o mesmo algoritmo de dois passos executado vrias vezes. No final a imagem gerada mostrada como resultado da aplicao do filtro.

Figura 30: Algoritmo de blur com repetio.

8. Outros Efeitos
Vrios efeitos que podem ser utilizados em jogos no se restringem somente aplicao isolada de uma nica tcnica ou algoritmo. Alguns so combinaes de diversos algoritmos, como exemplos tm o Bloom e o Cartoon Rendering. interessante ressaltar tambm que um efeito pode ser composto por uma parte de renderizao da geometria (tringulos) com posterior acrscimo de alguma caracterstica por ps-processamento. Nesta caso a estrutura de controle pode ficar complexa e necessitar de

vrias texturas, por esta razo necessrio planejar a arquitetura de execuo do efeito com cuidado.

8.1. Bloom
O efeito de bloom procura simular a expanso da luz ou reflexo que percebemos. O algoritmo aplicado sobre uma imagem com da resoluo da imagem e no final realizada uma composio ponderada com o framebuffer. O algoritmo pode ser dividido em trs passos. No primeiro deve se gerar uma textura com do tamanho do framebuffer que possua informaes sobre os locais que devem ser expandidos. Para isto pode se renderizar os objetos que emitem ou refletem luz ou pode se aplicar uma funo de limiar sobre a renderizao original. A textura com os tons claros deve ser suavizada no segundo passo, onde no nosso exemplo se utilizou filtro de blur. Por fim, no ultimo passo, a imagem suavizada deve ser combinada com o framebuffer. A Figura 31 mostra este fluxo de execuo.

Figura 31: Algoritmo de Bloom.

8.2. Renderizao de cartoon

Em oposio a tcnicas que buscam o realismo esto as tcnicas de NPR (Non-Photorealistic Rendering) como o sketch, gooch shading ou cartoon. As tcnicas de renderizao de cartoon buscam dar a impresso da cena ser desenhada por um artista. Geralmente so utilizadas em desenhos tcnicos ou jogos. A principal caracterstica destas tcnicas a aparncia uniforme das cores sobre a superfcie dos objetos. A Figura 32 mostra um exemplo da renderizao de um modelo 3D com clculo de iluminao comum, logo aps o resultado de uma tcnica de cartoon com configurao de 1 tom e 3 tons.

Figura 32: Exemplo de renderizao de cartoon com aplicao de quantizao de 1 tom e de 3 tons.

Para implementar a limitao de tons realizada uma quantizao sobre o resultado da aplicao da iluminao. Um exemplo de quantizao pode ser observado na Figura 33, onde os tons do modelo de iluminao so mapeados para valores especficos, no caso do exemplo foram mapeados em 0.7 e 1.0.

Figura 33: Exemplo de quantizao do modelo de iluminao e representao do mapeamento de cores. Note que o na Figura 32 tambm so utilizadas bordas nos objetos, para realizar a deteco de bordas dos modelos pode-se utilizar um filtro ou realizar um processamento na geometria. O algoritmo de renderizao de cartoon pode ser dividido em trs passos. No primeiro passo so extrados os mapas de normais e profundidade e calculado o modelo de iluminao quantizado. No segundo passo so calculadas as bordas dos objetos utilizando os mapas de normais e profundidades com um filtro diferencial. No ltimo passo a textura com os tons quantizados combinada com a textura que contem as bordas dos objetos gerando a imagem final. Este processo pode ser visualizado na Figura 34.

Figura 34: Diagrama do processo de cartoon rendering.

9. Concluso
Neste trabalho foram apresentadas diversas tcnicas para a criao de efeitos fotorealistas e no-fotorealistas pra jogos. Dentre as vrias tcnicas apresentadas nesse trabalho, podemos destacar: Construo de um shader de iluminao por pixel (Seo 4) Multi-texturizao e gerao de texturas procedurais (Seo 5) Renderizao de superfcies detalhadas (Seo 6) Efeitos de ps-processamento de cena (Seo 7) Bloom e Cartoon Rendering (Seo 8) Todos os efeitos apresentados foram criados com shaders, e a linguagem de shaders utilizada foi a HLSL. Esses efeitos podem ser utilizados em aplicaes de tempo real, como jogos, simuladores e ambientes virtuais. Alm disso, como os efeitos so implementados na GPU a integrao desses efeitos em ambientes virtuais existentes pode ser muito simples. Com a rpida evoluo das GPUs a mesma deve se tornar completamente programvel nos prximos anos, o que tornar possvel que mais efeitos sejam criados e utilizados em aplicaes de tempo real, em especial jogos!

10. Referncias
[Blinn 77] Blinn, J., Models of light reflection for computer synthesized pictures, Proceedings of the 4th annual conference on Computer graphics and interactive techniques, p.192-198, 1977. [Blinn 78] BLINN, J. F. 1978. Simulation of wrinkled surfaces. In Proceedings of the 5th annual conference on Computer graphics and interactive techniques, ACM Press, 286292. [Blythe 06] Blythe, D., The Direct3D 10 system. In proceedings of SIGGRAPH 2006, 724-734. [Cook 84] COOK, R. L. 1984. Shade trees. In Proceedings of the 11th annual conference on Computer graphics and interactive techniques, ACM Press, 223231. [Donnelly 05] Donnelly, W. 2005. GPU Gems 2. Addison-Wesley, March, ch. Per-Pixel Displacement Mapping with Distance Functions, 123--136. [Dummer 06] DUMMER, J. Cone Step Mapping: An Iterative Ray-Heightfield Intersection Algorithm. [S.l.], 2006. [Foley 97] Foley, J., van Dam, A., Feiner, S., and Hughes, J. Computer Graphics: Principles and Practice, 2nd edition. Addison Wesley, 1997. [Hanrahan 90] HANRAHAN, P., and LAWSON, J. 1990. A language for shading and lighting calculations. In proceedings of SIGGRAPH 90, 289-298. [Kaneko 01] KANEKO, T., TAKAHEI, T., INAMI, M., KAWAKAMI, N., YANAGIDA, Y., MAEDA, T., AND TACHI, S. 2001. Detailed shape representation with parallax mapping. In Proceedings of the ICAT 2001, 205208. [Mller 99] Mller, T., and Haines, E., Real-Time Rendering. AK Peters, 1999. [Peercy 97] PEERCY, M., AIREY, J., AND CABRAL, B. 1997. Efficient bump mapping hardware. In SIGGRAPH 97, 303306. [Policarpo 05] POLICARPO, F.; OLIVEIRA, M. M.; COMBA, J. L. D. Real-time relief mapping on arbitrary polygonal surfaces. I3D, 2005. [Policarpo 06] Policarpo, F., Oliveira, M. M. 2006. Relief Mapping of Non-Height-Field Surface Details. In ACM SIGGRAPH Symposium on Interactive 3D Graphics and Games Proceedings, ACM Press, pp. 55-52. [Tatarckuk 06] TATARCHUK, N. Dynamic parallax occlusion mapping with approximate soft shadows. In: SI3D 06: Proceedings of the 2006 symposium on Interactive 3D graphics and games. New York, NY, USA: ACM Press, 2006. p. 6369. ISBN 1-59593-295-X.