Explorando “Charcoal Rendering”

Luis Valente

Departamento de Informática – PUC-Rio

Abstract

Este trabalho explora uma aplicação de renderização não-fotorealista, que é simulação de desenho a carvão. Para isso, uma técnica original [Majumder e Gopi 2002] é analisada e implementada na GPU, sendo apresentados aspectos de implementação, variações da técnica e resultados.

Palavras-chave: npr, renderização não-fotorealista, charcoal rendering, gpu

Contato do autorlvalente@inf.puc-rio.br

1. Introdução

A facilidade atual para se escrever programas que funcionem na placa gráfica tem consequências interessantes, como a oportunidade de se desenvolver aplicações para tentar obter uma visualização não-convencional, diferente da tradicional que visa a conseguir a imagem mais “real” possível.

Essa linha alternativa de visualização é categorizada como visualização não-fotorealista [NPR 2007], e inclui técnicas como simulação de desenhos em quadrinhos (cartoon rendering), simulação de técnicas de pintura artística [http://mrl.nyu.edu/projects/npr/painterly], entre outras.

Este trabalho discute uma técnica não-fotorealista para simular o desenho a carvão, com o objetivo de implementá-la na placa gráfica. A Figura 1 ilustra exemplos desse tipo de desenho.

Figura 1: Exemplos de desenhos a carvão [Majumder e Gopi 2002]

Analisando a Figura 1, pode-se observar algumas características:

• Os desenhos muitas vezes são monocromáticos;

• Possuem baixo dynamic range. Isso quer dizer que a variação de tons de cores é baixa, devido ao material utilizado (carvão) para se desenhar. Dessa forma, os artistas costumam usar grandes variações de constraste, para evidenciar formas;

• Em algumas figuras, observa-se que o traço é fraco em determinadas silhuetas, deixando-as implícitas. Segundo [Majumder e Gopi 2002], esse tipo de recurso artístico recebe o nome de efeito closure, e é usado pelo artista para deixar o observador interpretar o contorno de maneira mais subjetiva. Na Figura 1, isso está mais evidenciado no desenho do cachorro, em suas patas e focinho.

A técnica discutida neste trabalho foi proposta originalmente em [Majumder e Gopi 2002]. Este trabalho demonstra uma implementação da técnica, com algumas extensões e comentários. A Seção 2 faz uma análise dos conceitos relacionados com a técnica original, e apresenta uma breve descrição de seu funcionamento. A Seção 3 apresenta a implementação e suas etapas. A Seção 4 demonstra algumas variações e resultados. Finalmente, as conclusões são apresentadas na Seção 5.

2. Trabalhos Relacionados

Esta Seção descreve alguns conceitos definidos em [Majumder e Gopi 2002], e dá uma visão geral da técnica proposta por esses autores.

2.1. Conceitos

Em [Majumder e Gopi 2002], são definidos alguns conceitos importantes para a implementação e entendimento da técnica.

2.1.1. Iluminação

O algoritmo possui uma etapa onde é realizado um cálculo de iluminação. Nesse cálculo, é considerada apenas a contribuição de luz difusa (as outras componentes são ignoradas).

As informações de cores (materiais) e texturas do modelo original são ignoradas nesse algoritmo. Assim, o algoritmo considera que o modelo possui material difuso igual a branco puro (RGB = 1.0, 1.0, 1.0). Esse também é o valor da componente difusa das fontes de luz.

O resultado do cálculo é uma intensidade, que é atribuída como “cor” ao modelo, gerando um modelo com tons de cinza.

2.1.2. Operador de melhoria de constraste

O operador de melhoria de contraste (CEO, de Constrast Enhancement Operator) é uma função que é usada para se aumentar a percepção de constraste em um modelo 3D ou textura. Esse operador é usado para “cores” em tons de cinza.

Dessa forma, um CEO é uma função que para uma dada intensidade de cor a, 0.0 ≤ a ≤ 1.0, é retornado um valor b, 0.0 ≤ b ≤ 1.0. O exemplo de CEO usado no artigo é b = am, para m > 1.0. A variável m recebe o nome de expoente de contraste.

2.1.3. Textura com contraste melhorado

Uma textura com contraste melhorado (CET, de Contrast Enhanced Texture) é uma textura que foi processada com um CEO. No algoritmo, essa textura é usada para ajudar a simular o efeito granulado do desenho a carvão. Esse tipo de textura é criada em uma etapa de pré-processamento, na CPU.

Para o algoritmo proposto, essas texturas são geradas proceduralmente. Inicialmente, uma textura é criada como uma textura de tons de cinza, com valores alteatórios (noise). Assim, no início desse processamento a textura é uma imagem com todos os pixels brancos, e então pixels pretos são espalhados na imagem. A Figura 2 ilustra uma textura de noise.

Figura 2: Textura de noise com densidade 60

A aplicação do CEO dá-se da seguinte forma: em cada pixel preto gerado para a textura, esse operador é aplicado de modo a reposicionar esse pixel no eixo T da textura. Em outras palavras, para cada pixel de coordenadas (s, t), valores entre 0.0 e 1.0, o valor t é recalculado de acordo com um CEO, por exemplo:t' = tm, onde m é um expoente de constraste pré-definido (m > 1.0). A Figura 3 ilustra diferentes CETs.

Figura 3: Três CETs com densidade 60. Esquerda: m = 1.3. Meio: m = 5.5. Direita: m = 15.0

O último passo nesse pré-processamento consiste em aplicar um filtro na imagem para borrá-la, de modo a suavizá-la.

Usando-se uma CET gerada com um expoente de contraste maior, é possível criar desenhos (na renderização) com menor concentração de granulados.

2.1.4. Modelo com contraste melhorado

Um modelo com contraste melhorado (CEM, de Contrast Enhanced Model) é o resultado de se aplicar um CEO em um modelo 3D.

As cores (originais e resultantes) desse modelo 3D são em tons de cinza.

A Figura 4 exibe um exemplo de modelo com contraste melhorado.

Figura 4: Modelo com iluminação difusa (esquerda) e com contraste melhorado (direita) [Majumder e Gopi

2002]

2.2. Descrição da técnica

O algoritmo proposto em [Majumder e Gopi 2002] possui estas etapas:

• Pré-processamento de texturas;• Cálculo de iluminação difusa no modelo 3D;• Aplicar o CEO no modelo 3D;• Aplicar a CET (gerada em pré-

processamento) no modelo 3D, para obter o efeito de granulado no desenho;

• Criar o efeito de um “borrão” no desenho (opcional);

• Criar o efeito do “papel”. Esse efeito é usado para “simular” o papel onde o/a artista faz o desenho.

Este trabalho implementa a primeira etapa do original em CPU, enquanto as outras são executadas na GPU.

Na primeira etapa, a textura usada para se simular o granulado no desenho (CET) é criada aplicando-se o CEO. Essa etapa ocorre apenas uma vez no programa.

Na segunda etapa é realizado o cálculo do coeficiente de luz difusa que incide no modelo 3D. A proposta de [Majumder e Gopi 2002] não informa o número de fontes de luz usadas. O algoritmo considera apenas a componente difusa da fonte de luz, igonorando as demais. Assume-se que a cor de luz

difusa e a cor do modelo correspondem ao branco puro (RGB = 1.0, 1.0, 1.0).

Na terceira etapa, a cor obtida na etapa anterior é usada como entrada para um CEO, de modo a aumentar o contraste do modelo 3D, gerando um CEM.

Na quarta etapa, a textura pré-processada é modulada com as cores do CEM, de modo a simular o efeito de granulado. Em [Majumder e Gopi 2002], os autores descrevem que para se indexar nessa textura, os tons de cinza do CEM são usados como coordenadas de textura. Entretanto, no texto original não está muito claro como as coordenadas de textura são geradas (e usadas) a partir desses valores. A solução usada neste trabalho será descrita na Seção 3.3.

O efeito de “borrão” (smudging effect) é descrito como um recurso usado pelo artista (passar o dedo no papel, borrando o desenho) para simular transições suavizadas entre tons de cinza. Os autores em [Majumder e Gopi 2002] propõem misturar a cor obtida até o momento (após aplicação da CET, no CEM) com a cor original do CEM (modulando-a), para alcançar esse efeito. Na prática, esse “efeito” faz com que os desenhos fiquem um pouco mais escurecidos. A aplicação desse efeito não é obrigatória.

Finalmente, na última etapa é criado o efeito do “papel” usado pelo/a artista para desenhar. Esse efeito corresponde a uma textura aplicada em um quadrilátero que é desenhado em 2D, para ocupar toda a extensão da tela.

Com base nessa descrição, conclui-se que os seguintes parâmetros são determinantes para a aparência final da imagem:

• Densidade de grãos da CET;• Expoente de contraste usado na geração da

CET;• Expoente de constraste aplicado no modelo

3D;• Quantidade e posição das fontes de luz;• Coordenadas usadas para se acessar a CET, ao

aplicá-la no modelo 3D;• Uso ou não do efeito “borrão”;• “Papel” usado para o “desenho”.

A Figura 5 apresenta alguns resultados obtidos pelos autores.

Figura 5: Alguns resultados de [Majumder e Gopi 2002]

3. Implementação

Esta Seção descreve detalhes da implementação realizada neste trabalho.

A implementação foi realizada utilizando-se OpenGL, GLSL, uma placa de vídeo nVidia GeForce 7600 GT e o framework Guff [Valente 2005]. São usados apenas um programa de vértice e um programa de fragmento, visto que os efeitos desejados podem ser conseguidos em um único passo.

Algumas características da implementação:

• São usadas duas fontes de luz, direcionais;• Realce do efeito closure, usando-se um fator

de saturação de cores (descrito na Seção 3.3);• O wrap mode para texturas é GL_REPEAT nos

dois eixos;• Os filtros (redução, ampliação) para textura

usados são (GL_LINEAR, GL_LINEAR). Em alguns testes, observou-se que o filtro GL_LINEAR_MIPMAP_LINEAR tende a borrar o efeito granulado obtido pela aplicação da CET.

3.1. Pré-processamento

Durante a fase de pré-processamento, são criadas duas texturas. A primeira corresponde à CET. Essa textura foi criada distribuindo-se pixels pretos aleatoriamente pela imagem, de acordo com uma determinada densidade de grãos. Para cada pixel, é aplicado um CEO. No final do processo, a imagem é borrada com um filtro gaussiano.

A segunda textura criada é uma textura de noise simples. Essa textura é usada para simular o acesso a números aleatórios. Existem dois motivos para se usá-la: o artigo original não é muito claro sobre como usar as cores do CEM para indexar na CET. Dessa forma, uma das componentes da coordenada será “aleatória”. O outro motivo é que as funções de noise da GLSL retornam sempre o valor zero (no hardware utilizado), tornando-as inviáveis para se simular números “aleatórios”.

3.2. Programa de vértices

O programa de vértices recebe da aplicação as “posições” das duas fontes de luz, em eye-space. O cálculo de iluminação é realizado nesse espaço, pelo programa de fragmentos. Por isso, o programa de vértices possui variáveis varying para armazenar os vetores de fonte de luz, e a normal do vértice (convertida para eye-space). Esses valores serão interpolados para o programa de fragmentos.

O programa de vértices também calcula a coordenada de textura que será usada para se aplicar a textura do “papel”. O “papel” é um quadrilátero desenhado com uma projeção ortográfica 2D, de modo a ocupar a tela inteira. Assim, são geradas coordenadas de textura entre 0.0 e 1.0. Essas coordenadas também

serão interpoladas e repassadas para o programa de fragmentos.

O trecho de código a seguir corresponde ao conteúdo do programa de vértices.

// “posição” da fonte de luz em// eye-space. uniform vec3 inputLight1;uniform vec3 inputLight2;

// direção da luz e normal do vértice// em eye-space, a serem interpoladasvarying vec3 lightDir1; varying vec3 lightDir2; varying vec3 normal;

// coordenada para se aplicar a textura// do papelvarying vec2 paperCoord;

void main(){

// posição transformada e projetadagl_Position = ftransform();

// direção da luz em eye-spacelightDir1 = inputLight1;lightDir2 = inputLight2;

// normal em eye spacenormal = gl_NormalMatrix * gl_Normal;

// Calcular coordenadas de textura do// papel [0, 1]paperCoord.st = (gl_Position.xy / gl_Position.w) * 0.5 + 0.5;

}

3.3. Programa de fragmentos

O programa de fragmentos possui como entradas as variáveis interpoladas do programa de vértices, e também algumas variáveis uniform:

• Três texturas. Uma corresponde a uma textura de noise (colorida, em RGB), para simular números aleatórios. Uma outra corresponde à CET, e a última corresponde à textura do papel;

• O valor desejado para o expoente de contraste do modelo, usado para calcular a cor do CEM;

• Um fator de saturação de cor, para realçar o efeito closure (isso não está especificado no algoritmo original);

• Um valor inteiro que indica se o efeito de “borrão” será criado (valor diferente de zero) ou não (valor zero).

O valor padrão para o fator de saturação de cor é 1.0, que indica que não há saturação. Por exemplo, para saturar a cor em 20%, esse valor seria igual a 1.2.

O trecho de código a seguir demonstra a parte inicial do programa de fragmentos.

// texturas usadas no programauniform sampler2D noiseTexture;uniform sampler2D contrastTexture;uniform sampler2D paperTexture;

// expoente de contrasteuniform float contrastExp;

// saturaçãouniform float saturationFactor;

// usar borrão ou nãouniform int smudge;

// interpolados do vertex programvarying vec3 normal;varying vec3 lightDir;varying vec2 paperCoord;

// função para calcular a contribuição// difusafloat calcDiffuse (vec3 normal, vec3 lightDir){

// normalizar vetoresvec3 L = normalize (lightDir);vec3 N = normalize (normal);

// calcular componente difusa [0,1]return max (dot (L, N), 0.0);}

A função calcDiffuse é responsável por calcular a intensidade de luz difusa, assumindo que é uma fonte de luz direcional e que os materiais difusos (objeto e luz) correpondem a um branco puro (1.0, 1.0, 1.0).

O programa principal inicia-se calculando a intensidade de luz difusa e aplicando o CEO em seguida. O CEO calculado é guardado para posterior uso, e então aplica-se o fator de saturação no CEO. O resultado dessa operação é usado para gerar o CEM, como demonstra o trecho de código a seguir.

void main(){

// calcular contribuição difusafloat diffuse1 = calcDiffuse (normal, lightDir);

float diffuse2 = calcDiffuse (normal, lightDir);

// aplicar operador de contrastefloat ceo = pow (diffuse1 + diffuse2, contrastExp);

float origCeo = ceo;ceo *= saturationFactor; clamp (ceo, 0.0, 1.0);

// cor do constrast enhanced model (CEM)vec4 cem = vec4 (ceo, ceo, ceo, 1.0);

A seguir, é feito um acesso à CET. Como uma das componentes da coordenadas de textura (t), usa-se o valor obtido pelo CEO (original). Para a componente s escolhe-se um valor “aleatório”, obtido a partir da

textura de noise. Após obter o valor de cor da textura, faz-se uma modulação desse valor com a cor do modelo:

// pode-se usar a própria coordenada do// papel como índice para a textura de// noisevec4 random = texture2D (noiseTexture, paperCoord);

// acessando a textura de contraste,// computando-se a coordenada de texturavec2 cetCoord;cetCoord.s = (random.r+random.g+random.b)/3.0;

cetCoord.t = origCeo;

vec4 cetColor = texture2D (contrastTexture, cetCoord);

// combinando a cor da textura (como no// GL_MODULATE)vec4 texturedModelColor = cetColor * cem;

O efeito “borrão” é obtido modulando-se a cor obtida até o momento com a cor do CEM:

if (smudge != 0) texturedModelColor *= cem;

Finalmente, cria-se o efeito do papel:

vec4 paperColor = 1.0 - texture2D (paperTexture, paperCoord);

// cor finalgl_FragColor = texturedModelColor - paperColor;

A Figura 6 exibe um resultado obtido por esse programa (sem “borrão”).

Figura 6: Resultado sem “borrão”

A Figura 7 representa um resultado com o efeito “borrão” aplicado.

Figura 7: Resultado com “borrão”

A Figura 8 apresenta como seria um resultado caso o CEO saturado fosse utilizado como componente t da coordenada de textura.

Figura 8: CEO saturado como componente t da coordenada de textura

4. Sand Rendering

Um dos experimentos realizados neste trabalho foi tentar utilizar um pouco da textura original (quando existir) de um modelo 3D, para o cálculo da cor final. Nesse experimento, foram usados modelos Quake 2.

A cor original da textura foi convertida para um tom sépia, e misturada à cor obtida originalmente. Essa variação foi batizada de “sand rendering” porque nos experimentos foram usados modelos 3D de personagens, que no final ficaram com um aspecto de “boneco de areia”.

Para que isso funcione, o programa de vértices precisa repassar a coordenadas de textura original do modelo para o programa de fragmentos. Isso pode ser feito acrescentando-se a seguinte linha ao programa:

// Coordenada de textura original// do modelogl_TexCoord[0].st = gl_MultiTexCoord0.st;

Já o programa de fragmentos precisa de mais alterações: acesso à textura original para obtenção da cor, para poder convertê-la, e depois misturá-la à cor obtida pela implementação do desenho a carvão. O trecho de código seguinte demonstra esse processo.

// Determinar cor do modelo com o papel// (original)vec4 color = texturedModelColor – paperColor;

// cor da textura originalvec4 orig = texture2D (origTexture, vec2

(gl_TexCoord[0]));

float luminance = dot (vec4(0.1125, 0.0154, 0.0721,1.0), orig);

orig = vec4 (luminance*1.2, luminance, luminance*0.8, 1.0);

// misturando a textura originalgl_FragColor = mix (color, orig, 0.6);

A Figura 9 exibe um resultado dessa variação, usando um modelo Quake 2. A variável origTexture representa a textura original do modelo.

Figura 9: “Sand rendering”

5. Conclusões

As técnicas de renderização não-fotorealistas permitem explorar outras abordagens de visualização não-convencionais. Podem ser usadas, por exemplo, para simular desenhos artísticos, que foi o caso deste trabalho.

Este trabalho analisou uma técnica para simular desenho a carvão. Foi realizada uma implementação da técnica original, com algumas adaptações. A primeira adaptação (fator de saturação) permite realçar um dos efeitos artísticos observados (closure). A segunda adaptação (“Sand rendering”) pode vir a permitir que a técnica seja aplicada com outros materiais granulados, como areia. Entretanto, para esse caso seria necessário uma pesquisa mais detalhada nessa direção.

Existem diversos parâmetros nessa técnica que podem ser variados para se simular “estilos” diferentes de desenho a carvão.

Por exemplo, desenhos mais escuros (com traço mais forte) podem ser obtidos com uma destas abordagens (ou combinação delas):

• Aumentar a densidade de grãos da CET;• Diminuir o expoente de contraste do modelo;• Usar o efeito “borrão”.

Para realçar o efeito closure:

• Diminuir a densidade de grãos da CET;• Aumentar o expoente de contraste do modelo;• Aumentar o fator de saturação.

É importante lembrar também que o posicionamento das fontes de luz exerce grande influência no efeito final obtido.

Neste trabalho, foi usada a função rand(), disponível na biblioteca da linguagem C++, para se gerar as texturas (CET, e noise). Essas texturas poderiam ser melhoradas ao se aplicar geradores de números aleatórios melhores. Assim, poderiam ser obtidos resultados sutilmente diferentes.

Outras sugestões para futuros trabalhos poderiam ser explorar outras funções para melhoria de contraste (CEO), e tentar simular traços e sombreamentos um pouco mais irregulares.

As Figuras 10, 11 e 12 (ao final do artigo) ilustram renderizações de outros modelos com a técnica implementada.

Agradecimentos

Agradeço à Micheli Knechtel por disponibilizar alguns modelos 3ds para este trabalho. Os modelos Quake 2 foram obtidos no site PlanetQuake [http:/www.planetquake.com].

Referências

VALENTE, L., 2005. Guff: Um sistema para desenvolvimento de jogos. Dissertação de Mestrado. Universidade Federal Fluminense, Instituto de Computação, Niterói.

MAJUMDER, A. E GOPI, M., 2002. “Hardware accelerated real time charcoal rendering”. Em: Proceedings of the 2nd international symposium on Non-photorealistic animation and rendering, ACM Press, New York, 59-66.

NPR 2007. Non-Photorealistic Rendering. Disponível em: http://mrl.nyu.edu/projects/npr. Acessado em 31/10/2007.

Figura 10: Mais resultados

Figura 11: Detalhe de um dos modelos

Figura 12: Outros resultados