Computação Gráfica. GLSL - Programação de Shaders Toon Mapping; Texturas

Transcrição

1 Computação Gráfica GLSL - Programação de Shaders Toon Mapping; Texturas António nio Ramires Fernandes - Multimédia

2 GLSL - Programação de Shaders Resumo Toon Shading Coordenadas de Textura Lattice Stripes Texturas Stripes Planeta Terra DI-UM Multimédia 2

3 GLSL - Toon Shading O efeito de Cartoon pode ser aproximado de uma forma simples criando um shader com um número limitado de cores. Pretende-se preservar a contribuição especular. Cor escura para zonas fronteira Número reduzido de cores para os restantes casos DI-UM Multimédia 3

4 GLSL - Toon Shading Versão I: Ponto de partida - Luz dir. por pixel Aplicar cor mais clara se contribuição especular > 0 Aplicar restantes cores dependendo da cor obtida (sem contribuição especular) DI-UM Multimédia 4

5 GLSL - Toon Shading Versão I: Ponto de partida - Fragment Shader - Luz dir. por pixel... vec4 c0 = vec4(0.2); // zonas fronteira vec4 c1 = vec4(0.0,0.2,0.6,1.0); // zonas escuras vec4 c2 = vec4(0.0,0.4,0.8,1.0); // zonas claras aux = length(vec3(color)); if (contribspec > 0.0) color = vec4(0.8, 0.8, 0.8,1.0); // zonas especulares else if (aux < 0.5) color = c0; else if (aux < 0.8) color = c1; else color = c2; gl_fragcolor = color; DI-UM Multimédia 5

6 GLSL - Toon Shading Utilização de variáveis Uniform para as cores e thresholds no fragment shader uniform vec4 cs,c0,c1,c2; uniform float t1,t2; void main(void) {... aux = length(vec3(color)); if (contribspec > 0.0) color = cs; // zonas especulares else if (aux < t1) color = c0; else if (aux < t2) color = c1; else color = c2; } gl_fragcolor = color; DI-UM Multimédia 6

7 GLSL - Toon Shading Código para a aplicação OpenGL: GLint loc; loc = glgetuniformlocationarb(p, "cs"); gluniform4farb(loc, 0.8,0.8,0.8,1.0); loc = glgetuniformlocationarb(p, "c0"); gluniform4farb(loc, 0.2,0.2,0.2,1.0); loc = glgetuniformlocationarb(p, "c1"); gluniform4farb(loc, 0.0,0.2,0.6,1.0); loc = glgetuniformlocationarb(p, "c2"); gluniform4farb(loc, 0.0,0.4,0.8,1.0); loc = glgetuniformlocationarb(p, "t1"); gluniform1farb(loc, 0.5); loc = glgetuniformlocationarb(p, "t2"); gluniform1farb(loc, 0.8); DI-UM Multimédia 7

8 GLSL - Toon Shading Versão II - Através da análise das normais Calcula-se o coseno entre a direcção do olhar e a normal. Em função do resultado aplica-se a cor: Se cos > 0.98 cor especular Se 0.98 <=cos > 0.5 cor clara Se cor <= 0.5 cor escura DI-UM Multimédia 8

9 GLSL - Toon Shading Versão II - Através da análise das normais // Vertex Shader varying vec3 Normal; void main(void) { // Fragment Shader } Normal = gl_normalmatrix * gl_normal; Normal = normalize(normal); gl_position = ftransform(); Author: Philip Rideout, 3Dlabs varying vec3 Normal; void main (void){ } vec3 color = vec3(0.0,0.25,1.0); vec3 n = normalize(normal); float f = dot(vec3(0,0,1),n); if (abs(f) < 0.5) color = vec3(0.0); if (abs(f) > 0.98) color = vec3(0.75,0.75,1.0; gl_fragcolor = vec4(color, 1.0); DI-UM Multimédia 9

10 GLSL - Programação de Shaders Resumo Toon Shading Coordenadas de Textura Lattice Stripes Texturas Stripes Planeta Terra DI-UM Multimédia 10

11 GLSL - Coordenadas de Textura As coordenadas de textura podem ser utilizadas para obter alguns efeitos, sem aplicação de texturas. Atributos acessíveis no Vertex Shader. attribute vec4 gl_multitexcoord0; attribute vec4 gl_multitexcoord1; attribute vec4 gl_multitexcoord2; attribute vec4 gl_multitexcoord3; attribute vec4 gl_multitexcoord4; attribute vec4 gl_multitexcoord5; attribute vec4 gl_multitexcoord6; attribute vec4 gl_multitexcoord7; uniform mat4 gl_texturematrix[gl_maxtexturecoords]; DI-UM Multimédia 11

12 GLSL - Coordenadas de Textura O Vertex Shader utiliza a variável varying vec4 gl_texcoord[]; para comunicar com o fragment shader. Por exemplo, num vertex shader pode-se escrever: gl_texcoord[0] = gl_multitexcoord0; para definir a coordenada de textura do vértice. O fragment shader ao aceder a gl_texcoord[0] estará a aceder à coordenada de textura interpolada para o fragmento actual. DI-UM Multimédia 12

13 GLSL - Coordenadas de Textura Lattice Shader Utilização do comando discard para não desenhar certos pixels. Ambas as coordenadas (s,t) são inicialmente escaladas para obter mais tiras horizontais e verticais. Os fragmentos com coordenadas de textura não inteiras (dentro de uma certa tolerância) são eliminados. DI-UM Multimédia 13

14 GLSL - Coordenadas de Textura Lattice Shader Vertex Shader void main(void) { gl_texcoord[0]= gl_multitexcoord0; gl_position = ftransform(); } Fragment Shader uniform vec2 Scale; uniform vec2 Threshold; uniform vec3 SurfaceColor; void main (void) { float ss = fract(gl_texcoord[0].s * Scale.s); float tt = fract(gl_texcoord[0].t * Scale.t); if ((ss > Threshold.s) && (tt > Threshold.t)) discard; } gl_fragcolor = vec4 (SurfaceColor, 1.0); Author: Randi Rost, 3Dlabs (simplificado) DI-UM Multimédia 14

15 GLSL - Coordenadas de Textura Stripes Shader Utilização da coordenada de textura t para definir tiras de cores alternadas A coordenada t é inicialmente escalada para obter mais tiras. DI-UM Multimédia 15

16 GLSL - Coordenadas de Textura Stripes Shaders Vertex Shader void main(void) { gl_texcoord[0]= gl_multitexcoord0; gl_position = ftransform(); } Fragment Shader uniform vec3 StripeC; uniform vec3 BackC; uniform float Scale; void main(void) { float scaled_t = fract(gl_texcoord[0].t * Scale); float fract1 = fract(scaled_t); if (fract1 > 0.5) fract1 = 1.0; else fract1 = 0.0; } vec3 finalcolor = mix(backcr, StripeC,fract1); gl_fragcolor = vec4 (finalcolor, 1.0); DI-UM Multimédia 16

17 GLSL - Coordenadas de Textura Stripes Shader A imagem apresenta aliasing devido ao uso de uma função binária de intensidade. binário transições mais suaves DI-UM Multimédia 17

18 GLSL - Coordenadas de Textura Stripes Fragment Shader II void main(void) { float scaled_t = fract(gl_texcoord[0].t * Scale); if (scaled_t < 0.025) fract1 = *fract1; else if (scaled_t > 0.975) fract1 = (fract )*20.0; else if (scaled_t > && scaled_t < 0.525) fract1 = (fract )*20.0; else if (scaled_t > 0.5) fract1 = 1.0; else fract1 = 0.0; } vec3 finalcolor = mix(backcolor, StripeColor,fract1); gl_fragcolor = vec4 (finalcolor, 1.0); DI-UM Multimédia 18

19 GLSL - Coordenadas de Textura Stripes Shader simples suave DI-UM Multimédia 19

20 GLSL - Programação de Shaders Resumo Toon Shading Coordenadas de Textura Lattice Stripes Texturas Stripes Planeta Terra DI-UM Multimédia 20

21 GLSL - Texturas Acesso aos valores de texturas a partir de GLSL. Em OpenGL iniciam-se as texturas da mesma forma que utilizando a funcionalidade fixa. A aplicação OpenGL só tem de efectuar um passo adicional: passar ao shader o(s) índice(s) da(s) unidade(s) de textura(s) DI-UM Multimédia 21

22 GLSL - Texturas Código OpenGL ilgenimages(1,images); glgentextures(1,texnames); glbindtexture(gl_texture_1d, texnames[0]); gltexparameteri(gl_texture_1d, GL_TEXTURE_WRAP_S, GL_REPEAT); gltexparameteri(gl_texture_1d, GL_TEXTURE_MAG_FILTER, GL_LINEAR); gltexparameteri(gl_texture_1d, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glteximage1d(gl_texture_1d, 0, GL_RGB, ilgetinteger(il_image_width), 0, GL_RGB, GL_UNSIGNED_BYTE, ilgetdata()); GLint loc; loc = glgetuniformlocationarb(p, "Scale"); gluniform1farb(loc, 10.0); loc = glgetuniformlocationarb(p, "tex"); gluniform1iarb(loc, 0); Indice da unidade de textura (0-7) DI-UM Multimédia 22

23 GLSL - Texturas: Stripes Stripes shader com cor em textura Neste caso vamos aplicar uma textura 1D: O valor da coordenada de textura t do objecto, depois de escalado é utilizado para aceder à textura 1D. DI-UM Multimédia 23

24 GLSL - Texturas: Stripes Fragment Shader uniform float Scale; uniform sampler1d tex; void main(void) { float scaled_t = gl_texcoord[0].t * Scale; vec3 finalcolor = vec3(texture1d(tex,scaled_t)); } gl_fragcolor = vec4 (finalcolor, 1.0); DI-UM Multimédia 24

25 GLSL - Texturas: Stripes Desta forma o fragment shader fica mais simples mas perde-se a liberdade de alterar as cores em run-time, excepto se a textura for substituída. Uma outra alternativa é codificar a função de intensidade numa textura, e usar o valor do texel para efectuar a mistura de cores. As cores continuam a ser passadas como variáveis Uniform, logo controláveis a partir da aplicação OpenGL. DI-UM Multimédia 25

26 GLSL - Texturas: Stripes Fragment Shader uniform vec3 StripeColor; uniform vec3 BackColor; uniform float Scale; uniform sampler1d tex; void main(void) { float scaled_t = fract(gl_texcoord[0].t * Scale); } float fract1 = length(vec3(texture1d(tex,scaled_t))); vec3 finalcolor = mix(backcolor, StripeColor, fract1); gl_fragcolor = vec4 (finalcolor, 1.0); DI-UM Multimédia 26

27 GLSL - Programação de Shaders Resumo Toon Shading Coordenadas de Textura Lattice Stripes Texturas Stripes Planeta Terra DI-UM Multimédia 27

28 GLSL - Texturas: Terra 1º Passo: Colocar uma textura numa esfera. + = DI-UM Multimédia 28

29 GLSL - Texturas: Terra 1º Passo: Shaders Vertex Shader void main() { gl_texcoord[0] = gl_multitexcoord0; gl_position = ftransform(); } Fragment Shader uniform sampler2d earth; void main() { gl_fragcolor = texture2d(earth,gl_texcoord[0].st); } DI-UM Multimédia 29

30 GLSL - Texturas: Terra 2º Passo: Adicionar Iluminação Calcular a intensidade da luz I = N.L Sendo N a normal da superfície e L a direcção da luz Modular a cor da textura com a intensidade da luz C = T*I Adicionar a intensidade especular C = C + max( HV.N, 0) shininess DI-UM Multimédia 30

31 GLSL - Texturas: Terra 2º Passo: Vertex Shader varying vec3 normal, lightdir, ecpos; void main() { lightdir = normalize(gl_lightsource[0].position.xyz); normal = normalize(gl_normalmatrix * gl_normal); ecpos = vec3(gl_modelviewmatrix * gl_vertex) ; } gl_texcoord[0] = gl_multitexcoord0; gl_position = ftransform(); DI-UM Multimédia 31

32 GLSL - Texturas: Terra 2º Passo: Fragment Shader uniform sampler2d earth; varying vec3 normal, lightdir, ecpos; void main() { float intensity,spec; vec3 n,hv,ec; n = normalize(normal); intensity = dot(lightdir,n); if (intensity > 0.0) { ec = normalize(-ecpos); hv = normalize(ec+lightdir); spec = pow(max(dot(hv,n),0.0),128); } } gl_fragcolor = texture2d(earth,gl_texcoord[0].st) * intensity + spec; DI-UM Multimédia 32

33 GLSL - Texturas: Terra 3º Passo: Adicionar Textura para a "noite" A noite será utilizada sempre que a intensidade seja negativa. DI-UM Multimédia 33

34 GLSL - Texturas: Terra 3º Passo: Fragment Shader uniform sampler2d earth,night; varying vec3 normal, lightdir, ecpos; void main() { vec4 spec,color; float intensity,shininess;... (Cálculo da intensidade e componente especular) if (intensity > 0.0) color = texture2d(earth,gl_texcoord[0].st) * intensity + spec; else if (intensity < 0.0) color = texture2d(night,gl_texcoord[0].st); } gl_fragcolor = color ; DI-UM Multimédia 34

35 GLSL - Texturas: Terra 4º Passo: Suavizar transição entre o dia e a noite DI-UM Multimédia 35

36 GLSL - Texturas: Terra 4º Passo: Fragment Shader void main() {...(Cálculo da intensidade e componente especular) earthcolor = texture2d(earth,gl_texcoord[0].st) * intensity + spec; nightcolor = texture2d(night,gl_texcoord[0].st); if (intensity > threshold) color = earthcolor; else if (intensity < -threshold) color = nightcolor; else color = mix(nightcolor, earthcolor,(intensity +0.1) * 5.0); } gl_fragcolor = color ;//+ color; DI-UM Multimédia 36

37 GLSL - Texturas: Terra 5º Passo: Só permitir reflexões especulares no mar DI-UM Multimédia 37

38 GLSL - Texturas: Terra 5º Passo: Fragment Shader uniform sampler2d earth,night,gloss; void main() {... g = texture2d(gloss,gl_texcoord[0].st).g; earthcolor = texture2d(earth,gl_texcoord[0].st) * intensity + spec * g; nightcolor = texture2d(night,gl_texcoord[0].st); if (intensity > threshold) color = earthcolor; else if (intensity < -threshold) color = nightcolor; else color = mix(nightcolor, earthcolor,(intensity +0.1) * 5.0); } gl_fragcolor = color ;//+ color; DI-UM Multimédia 38

39 GLSL - Texturas: Terra 6º Passo: Nuvens DI-UM Multimédia 39

40 GLSL - Texturas: Terra 6º Passo: Nuvens Tanto as nuvens como o mapa de reflexão especular ocupam somente um canal de cor: combinar numa única textura + = DI-UM Multimédia 40

41 GLSL - Texturas: Terra 6º Passo: Nuvens O acesso às componentes da textura faz-se da seguinte forma vec2 cgcolor = texture2d(cloudgloss,gl_texcoord[0].st).xy; cloud = cgcolor.r; gloss = cgcolor.g; Uniform sampler2d DI-UM Multimédia 41

42 GLSL - Texturas: Terra 6º Passo: Nuvens As nuvens devem inibir o aparecimento de luzes á noite. nightcolor = texture2d(night,gl_texcoord[0].st) * (1.0-cloud) ; DI-UM Multimédia 42

43 GLSL - Texturas: Terra 6º Passo A opacidade das nuvens deve afectar a combinação entre a cor do planeta e as nuvens. earthcolor = (texture2d(earth,gl_texcoord[0].st) * intensity + spec*gloss) * (1.0 - cloud) + cloud*intensity; Intensidade da terra depende da opacidade das nuvens Adicionar as nuvens tendo em conta a intensidade da luz e a opacidade das nuvens DI-UM Multimédia 43

44 GLSL - Texturas: Terra Fragment Shader completo uniform sampler2d earth,night,cloudgloss; varying vec3 normal, lightdir, ecpos; void main() { vec4 color,earthcolor,nightcolor; float intensity,spec,cloud,gloss, threshold=0.1; vec3 n,hv,ec; vec2 cgcolor; n = normalize(normal); intensity = dot(lightdir,n); if (intensity > 0.0) { ec = normalize(-ecpos); hv = normalize(ec+lightdir); spec = pow(max(dot(hv,n),0.0),gl_frontmaterial.shininess); } DI-UM Multimédia 44

45 GLSL - Texturas: Terra Fragment Shader completo (2) cgcolor = texture2d(cloudgloss,gl_texcoord[0].st).xy; cloud = cgcolor.r; gloss = cgcolor.g; earthcolor = (texture2d(earth,gl_texcoord[0].st) * intensity + spec*gloss) * (1.0 - cloud) + cloud*intensity; nightcolor = texture2d(night,gl_texcoord[0].st)* (1.0-cloud) ; if (intensity > threshold) color = earthcolor; else if (intensity < -threshold) color = nightcolor; else color = mix(nightcolor, earthcolor,(intensity +0.1) * 5.0); } gl_fragcolor = color; DI-UM Multimédia 45

46 Referências OpenGL 2.0 Specification, GLSL Specification, "OpenGL Shading Language", Randi Rost, Addison Wesley Texturas para Planeta Terra DI-UM Multimédia 46