Cartoon Rendering - PUC-Rio

Jeronimo Silvério Venetillo
9924305
Introdução
Cartoon Rendering
Cartoon Rendering é um dos métodos estudados na área de renderização não
fotorealísta. Renderização não fotorealísta é o nome dado à técnica de retratar modelos
onde o resultado final não tem o compromisso de estar próximo à realidade, e sim de
explorar estilos de desenho.
As principais características do cartoon rendering são as silhuetas e arestas, que
são destacadas do resto do desenho. Geralmente elas possuem cores que se destacam da
cor original do desenho, e as silhuetas são mais espessas que as arestas. Além disso, são
usados poucos tons de cores ( normalmente dois ) para simular iluminação.
Enquanto a renderização comum tem sua base em leis físicas de iluminação, esta
técnica se baseia na percepção humana e procura realçar pontos importantes para o
entendimento do desenho.
Objetivo
O objetivo deste projeto é estudar maneiras de fazer este tipo de renderização em
tempo real. Serão abordados neste trabalho os métodos de implementação das técnicas de
detecção de silhueta, detecção de arestas vivas e iluminação.
Silhueta
Desenhos animados são bi-dimensionais em sua essência e o cartoon rendering
explora algumas técnicas de desenho para mostrar um mundo bim-dimensional com
profundidade. Uma dessas propriedades é a silhueta, que delimita os modelos e torna
evidente quais deles estão em primeiro plano e quais não estão. Modelos em primeiro
plano têm suas silhuetas completas, ou seja, não cortadas por nenhuma outra silhueta.
Figura 1-a: Figura sem nenhuma delimitaçao,
onde informações como forma e posição nao
ficam evidentes.
Figura 1-b: Tendo a silhueta, ficam evidentes as
informações sobre numero de objetos, delimitação de suas
formas e ordem espacial.
Page 1 of 15

Jeronimo Silvério Venetillo
9924305
Em um modelo poliédrico é chamado silhueta o conjunto de arestas que formam o
contorno de um objeto, para um dado observador. As arestas que compõem este conjunto
são compartilhadas por uma face que aponta para o observador (frontface) e uma face que
aponta a direção oposta ao observador (backface).
Para fazer a detecção de silhueta, apresentaremos os seguintes metodos:
• Força Bruta
Para cada aresta, calculamos o produto escalar entre as normais das faces vizinhas
a aresta e multiplicamos os dois resultados. Caso tenhamos um número menor que
zero, esta aresta é uma silhueta.
• Utilização de estrutura de dados que explore vizinhança entre arestas.
Tendo a informação de quais os vertices que compõe o modelo, podemos em preprocessamento,
criar uma estrutura topologica que contenha para cada aresta, quais os
vertices e faces associados a ela, além de quais arestas são suas vizinhas. Com isso,
aplicamos o método força bruta até encontrarmos uma aresta que faça parte da
silhueta, depois percorreremos apenas as arestas vizinhas a ela para descobrir toda a
silhueta ( válido para modelos convexos ).
• Descontinuidade no Z-Buffer ( processamento de imagem ), aplicando textura
projetiva. ( Philippe Decaudin - Research Report INRIA #2919 )
Silhuetas correspondem a uma descontinuidade de ordem zero no z-buffer.
Aplicando um filtro de detecção de contorno, conseguimos extrair uma imagem que
vale um em todos os lugares, exceto onde uma descontinuidade foi encontrada.
Multiplicamos esta imagem pela imagem original para ter uma imagem com silhueta.
• Environment Map
Criamos um environment map com as bordas pretas, para que as faces com as
normais perpendiculares ao observador fiquem com a cor preta. ( Bruce Gooch &
Amy Ashurst Gooch – SIGGRAPH 99 )
• Edge-Buffer ( John W. Buchanan – EA Canada )
Ver apendice A.
• CullFace e PolygonOffeset ( Bruce Gooch & Amy Ashurst Gooch – SIGGRAPH
99 )
Esta técnica utiliza o hardware para encontrar as silhuetas. Desenhamos o modelo
normal com o polygonOffset ativado. Ativamos o frontFace culling, selecionamos o
modo de desenho de backFace com linhas, trocamos a função de depth test para
LEQUAL e desenhamos novamente o modelo.
Arestas Vivas
O conjunto de arestas é um outro elemento que ajuda a percepção de
profundidade num desenho. Elas indicam mudanças abruptas na direção normal das faces
do modelo.
Page 2 of 15

Jeronimo Silvério Venetillo
9924305
Figure 1: O mesmo modelo com e sem a informação de suas arestas. Enquanto a silhueta so nos
fornece a delimitação dos objetos ( relação objeto – mundo ), as arestas nos fornecem mais de seus
conteudos ( relação objeto – objeto ).
Arestas vivas são arestas onde o ângulo existente entre as duas faces adjacentes é
menor que um limite minimo ou maior que um limite maximo.
Para fazermos a detecção de arestas vivas, temos os seguintes métodos:
• Descontinuidade do mapa de normais ( processamento de imagem ). Usando
textura projetiva. ( Philippe Decaudin - Research Report INRIA #2919 )
Mesmo método aplicado para encontrar silhuetas, porém a análise é feita no mapa
de normais, e não no mapa de profundidade.
• Como as arestas vivas independem do observador, elas podem ser detectadas em
tempo de pre-processamento. Usando o pre-processamento, temos os seguintes
metodos:
o Edge-Buffer ( John W. Buchanan – EA Canada )
Ver Apendice A.
o PolygonOffset e DrawLines
Esta técnica utiliza o hardware para desenhar as arestas. Desenhamos o
modelo com o polygonOffset ativado, mudamos a função do depth test
para LEQUAL e renderizamos as linhas calculadas em pré-processamento.
Cartoon Shading ( Cel-Shading )
Esta técnica, ao contrario das outras duas, tem como objetivo dar um aspecto bidimensional
ao desenho. Mudamos o modelo de iluminação tradicional ( Phong ) para um
modelo mais simplificado, onde uma única cor sólida é usada para descrever um material.
Com isso, perde-se a noção de profundidade que a iluminação tradicional nos dá.
Para continuarmos tendo a percepção de que existem partes do modelo iluminadas
e partes não-iluminadas, a cor que define o material é escurecida para que simule a parte
do modelo que está em “sombra”.
Para calcularmos estas cores, seguimos a seguinte equação:
CSombra = GlobalAmbiente x MaterialAmbiente + LuzAmbiente x MaterialAmbiente
CIluminada = CSombra + LuzDifusa x MaterialDifusa
Page 3 of 15

Jeronimo Silvério Venetillo
9924305
Para calcularmos qual das duas cores será atribuída a um determinado vértice,
fazemos o produto escalar entre a normal do vértice e o vetor normalizado que vai do
vertice a fonte de luz. Caso este valor seja maior que um determinado valor ( 0.5 por
exemplo ) este vertice está iluminado e usarmos como cor CIluminada caso contrário este
vértice está em sombra, e usaremos CSombra.
Em termos de implementação, foi criado em pre-processamento uma textura 1D
com um dos extremos tendo o valor CSombra e o outro extremo tendo o valor CIluminado, e
uma pequena região de transição, para que a quebra entre a região iluminada e a região
escura não fosse muito abrupta. As coordenadas de textura de cada vértice são calculadas
como o máximo entre zero e o produto escalar entre a normal do vértice e o vetor
normalizado que vai do vértice à fonte de luz.
Figure 2
Figura da direita – Iluminação convencional X Cartoon Shade – Figura da esquerda
São destacadas as perdas de informação que se tem com o cartoon Shade e também a mudança mais abrupta dos tons.
Implementação
As implementações foram feitas na plataforma Windows, usando recursos de
OpenGL e desenvolvidas usando Microsoft Visual Studio .NET.
• 1ª Implementação
A idéia orginal da implementação era criar uma biblioteca genérica que pudesse
renderizar cenas no estilo cartoon. Para isso escolhemos os algoritmos de CullFace e
PolygonOffset para silhueta, PolygonOffset e DrawLines para arestas e o método de
textura 1D para o cartoon Shade. Nesta implementação foram criadas três classes:
- Cartoon: Contém métodos de inicialização da biblioteca e métodos de controle
de renderização, como se os modelos terão ou não silhueta, arestas, etc.
- CartoonShade: Cria a textura do cartoonShade, faz a gerencia desta textura junto
ao OpenGL e fornece informações sobre as coordenadas de textura.
- CartoonMesh: Malha que será desenhada no estilo cartoon. Criada a partir da
informação sobre vértices, normais e numero de triangulos. Existem métodos que dão
Page 4 of 15

Jeronimo Silvério Venetillo
9924305
opções de como a malha será desenhada, métodos de carregamento, descarregamento e
desenho.
Com este tipo de implementação, temos muita flexibilidade na criação de cenas,
já que cada malha pode ter sua propria opção de desenho e a malha que será desenhada
em cartoon é independente do resto da cena.
Figure 3
Modelo em cartoon ( jipe ) junto com um modelo “real” ( sofá ).
• 2ª Implementação
Depois de implementar a biblioteca, notamos que da maneira que estávamos
fazendo a transformação de um modelo real em cartoon, poderíamos também construir
uma estratégia de rendering.
Foi criada então a classe cartoonStrategy, que é uma estratégia de rendering para a
VIS ( grafo de cena – TecGraf ).
Desta maneira, o criador da cena perde um pouco a sua flexibilidade na criação, já
que agora as informações não estão associadas a cada malha, mas sim à estrategia.
Porém, as informações que precisavam ser fornecidas já são inerentes à cena, logo tudo
que é preciso para desenhar a cena em cartoon é chamar a estratégia de renderização
apropriada, da mesma maneira que a estratégia de renderização comum era chamada.
Resultados
O grande problema apresentado por este tipo de renderização é o desempenho.
Para fazer a renderização completa da cena, faz-se o desenho do modelo com cartoon
Shade, e para isso, necessitamos da posição da luz em relação ao objeto, o que nos leva a
fazer contas para transformar a posição da luz em seu espaço local para o espaço do
objeto. A partir disso, recalcula-se o vetor com as coordenadas de textura. O segundo
passo é desenhar a silhueta, que faz com que o modelo seja mais uma vez passado para o
pipeline de renderização, desta vez com culling de frontFace e modo de desenho de
linhas. O terceiro passo é desenhar as arestas, que foram calculadas em preprocessamento.
Apesar da terceira passada ser geralmente uma passada com um número bem
reduzido de vértices em relação ao modelo original, continuamos tendo uma estrategia de
Page 5 of 15

Jeronimo Silvério Venetillo
9924305
três passadas de rendering, e duas delas sendo desenhadas com linhas, o que não tem um
desempenho muito bom no OpenGL.
Em termos de resultados visuais, o cartoon rendering melhora a compreensão de
alguns modelos, principalmente naqueles em que o nível de detalhes é muito grande, e
tira a sensação de estar vendo um “modelo plástico”. O ganho visual para modelos com
textura não foi muito grande.
Screenshots
Temos à esquerda os modelos desenhados da forma convencional, e a direita
desenhados em cartoon.
Page 6 of 15

Jeronimo Silvério Venetillo
9924305
Page 7 of 15

Jeronimo Silvério Venetillo
9924305
Page 8 of 15

Jeronimo Silvério Venetillo
9924305
Conclusão
A técnica de cartoon rendering se mostrou muito positiva em termos de resultados
visuais. Enquanto na maneira de renderização convencional o espectador nota erros, seja
pela plásticidade dos modelos ou pela “perfeição” da cena, na renderização por cartoon o
observador não se sente enganado pela visualização, pois ele “sabe” que não está vendo
algo “real”.
Em termos de desempenho, esta técnica ainda se mostra ruim ao considerarmos
modelos muito grandes. Algumas otimizações foram feitas em relação aos cálculos em
CPU ( passar a posição global da luz para o modelo e só transformar para o espaço local
se ele ou a luz tiverem mudado e só recalcular o vetor de coordenadas de textura caso
isso ocorresse ), mas nada que impactasse numa grande mudança de desempenho.
Page 9 of 15

Jeronimo Silvério Venetillo
9924305
Apendice A
Edge-Buffer
A idéia do edge buffer é guardar em uma tabela as informações de arestas e a qual
tipo de face ela esta associada. Para o poligono abaixo, teriamos a seguinte tabela
antes da renderização:
V – Another Vertex
B – Backface
F – Frontface
Esta tabela nos dá apenas a informação da estrutura do objeto. Durante a
renderização por poligonos, faremos uma operacao XOR com o byte B caso a face do
poligono seja uma backface ou uma operacao XOR com o byte F caso a face do
poligono seja uma frontface.
Caso a face F(1,2,3) seja desenhada primeiro, teriamos como tabela.
Vertex VFB VFB VFB VFB
1 210 310 400 500
2 310 500 x00 x00
3 400 500 x00 x00
4 500 x00 x00 x00
5 x00 x00 x00 x00
Depois a face F(1,3,4)
Vertex VFB VFB VFB VFB
1 210 300 410 500
2 310 500 x00 x00
3 410 500 x00 x00
4 500 x00 x00 x00
5 x00 x00 x00 x00
Vertex VFB VFB VFB VFB
1 200 300 400 500
2 300 500 x00 x00
3 400 500 x00 x00
4 500 x00 x00 x00
5 x00 x00 x00 x00
Page 10 of 15

Jeronimo Silvério Venetillo
9924305
Depois a face F(1,4,5)
Vertex VFB VFB VFB VFB
1 210 300 411 501
2 310 500 x00 x00
3 410 500 x00 x00
4 501 x00 x00 x00
5 x00 x00 x00 x00
Todas outras faces...
Vertex VFB VFB VFB VFB
1 211 300 411 500
2 311 500 x00 x00
3 411 500 x00 x00
4 500 x00 x00 x00
5 x00 x00 x00 x00
A silhueta é formada pelas arestas em negrito. Ou seja, as arestas que terminam o
procedimento com os bits Front e Back acesos. Agora fazemos uma segunda passada
de rendering para desenharmos as arestas detectadas.
Para podermos renderizar a silhueta de uma caixa aberta usando esta técnica,
teriamos a seguinte tabela:
O que geraria a seguinte silhueta:
Vertex VFB VFB VFB
1 211 410 501
2 311 800 x00
3 400 711 x00
4 610 x00 x00
5 601 800 x00
6 711 x00 x00
7 800 x00 x00
8 x00 x00 x00
Page 11 of 15

Jeronimo Silvério Venetillo
9924305
Caso consideremos todas as arestas que FB != 00, que são as arestas onde não
existem duas faces apontando para a mesma direção, termos uma silhueta de objetos
abertos.
Vertex VFB VFB VFB
1 211 410 501
2 311 800 x00
3 400 711 x00
4 610 x00 x00
5 601 800 x00
6 711 x00 x00
7 800 x00 x00
8 x00 x00 x00
Para permitir que as arestas também sejam desenhadas, cria-se mais um bit que é
setado em pre-processamento, e sempre que este bit for igual a 1, a aresta é desenhada.
Page 12 of 15

Jeronimo Silvério Venetillo
9924305
Apendice B
Manual do Usuário
Os programas suportam somente modelos 3ds.
- Implementacao 1 - Lib
Para iniciar o programa:
cartoonLib.exe [modelo1 path_texturas1] [modelo2 path_texturas2] ...
Caso nenhum modelo seja passado como parametro, modelos default serao carregados
Comandos:
Camera VGL -> Verificar documentacao em:
http://www.tecgraf.puc-rio.br/~fabraham/vgl/manualusuario.html
'm' Troca o modelo caso haja mais de um modelo carregado.
'4' Move fonte de luz para direita
'6' Move fonte de luz para esquerda
'8' Move fonte de luz para frente
'5' Move fonte de luz para tras
'9' Move fonte de luz para cima
'3' Move fonte de luz para baixo
't' Habilita/desabilita textura
'b' Habilita/desabilita borda ( silhueta )
'c' Habilita/desabilita arestas
'l' Habilita/desabilita iluminacao ( cartoon Shade )
esc -> Sai
Page 13 of 15

Jeronimo Silvério Venetillo
9924305
- Implementacao 2 - Strategy
Para iniciar o programa
cartoonStrategy.exe [modelo1 path_texturas1] [modelo2 path_texturas2] ...
Caso nenhum modelo seja passado como parametro, modelos default serao carregados
Comandos:
Camera VGL -> Verificar documentacao em:
http://www.tecgraf.puc-rio.br/~fabraham/vgl/manualusuario.html
'k' Habilita/desabilita estrategia de cartoon
'.' Aumenta Intensidade da fonte de luz (efeito nos modelos reais)
',' Diminui Intensidade da fonte de luz (efeito nos modelos reais)
'm' Troca o modelo caso haja mais de um modelo carregado.
'4' Move fonte de luz para direita
'6' Move fonte de luz para esquerda
'8' Move fonte de luz para frente
'5' Move fonte de luz para tras
'9' Move fonte de luz para cima
'3' Move fonte de luz para baixo
't' Habilita/desabilita textura
'b' Habilita/desabilita borda ( silhueta )
'c' Habilita/desabilita arestas
'l' Habilita/desabilita iluminacao e cartoon Shade.
esc Sai
Page 14 of 15

Jeronimo Silvério Venetillo
9924305
Referencias
• Johan Claes, Fabian Di Fiore, Gert Vansichem, Frank Van Reeth – Fast 3D
Cartoon Rendering with Improved Quality by Exploiting Graphics
Hardware – Image and Vision Computing – 2001
• Philippe Decaudin – Cartoon-Looking Rendering of 3D-Scenes – INRIA#2919
– Junho/1996
• Adam Lake, Carl Marshall, Mark Harris’, Marc Blackstein – Stylized Rendering
Techniques for Scalable Real-Time 3D Animation – Proceedings of NPAR –
2000
• Non-Photorealistic Rendering – SIGGRAPH 99 Course 17
• Lee Markosian, Michael A. Kowalski, Samuel J. Trychin, Lubomir D. Bourdev,
Daniel Goldstein, John F. Hughes – Real-Time Nonphotorealistic Rendering –
Computer Graphics (Proceedings of SIGGRAPH '97) – Agosto/1997
• John W. Buchanan, Mario C. Souza – The edge buffer: A data structure for
easy silhouette rendering – Proceedings of NPAR – 2000
• Carl S. Marshall – Non-Photorealistic Rendering (NPR) Real-time 3D Cartoon
Animation – Game Developers Conference – 2000
• Aaron Hertzmann – Introduction to 3D Non-Photorealistic Rendering:
Silhouettes and Outlines – SIGGRAPH '99 Course on Non-Photorealistic
Rendering – Agosto/1999
• Jeff Lander – Under the Shade of the Rendering Tree – Game Developer
Magazine – fevereiro/2000
• Jeff Lander – Shades of Disney: Opaquing a 3D World – Game Developer
Magazine – março/2000
Page 15 of 15