The Book of Shaders by Patricio Gonzalez Vivo & Jen Lowe

日本語 - 中文版 - 한국어 - Español - Portugues - Français - Italiano - Deutsch - Русский - English


Uniforms

Até agora, vimos como a GPU lida um grande número de threads em paralelo, cada uma sendo responsável por atribuir a cor a uma porção da imagem.Apesar de cada thread paralela não saber da existência das outras, precisamos ser capazes de enviá-las algumas entradas (inputs) da CPU. Devido à arquitetura das placas de vídeo, essas entradas serão iguais (uniform) para todas as threads e necessariamente determinadas como somente leitura. Em outras palavras, cada thread recebe os mesmos dados, os quais se podem ler mas não podem se alterar.

Essas entradas são chamamadas de uniform e podem ser de tipos diferentes, como: float, vec2, vec3, vec4, mat2, mat3, mat4, sampler2D e samplerCube. Uniformes são definidas com o tipo correspondente no começo do código, logo após atribuir a precisão padrão de pontos flutuantes,

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;  // Canvas size (width,height)
uniform vec2 u_mouse;       // mouse position in screen pixels
uniform float u_time;       // Time in seconds since load

Imagine os uniforms como pequenas pontes entre a CPU e a GPU. Os nomes variam dependendo da implementação, mas nessa série de exemplos estarei sempre usando: u_time (tempo em segundos desde que o shader foi iniciado), u_resolution (tamanho da tela onde o shader está sendo desenhado) and u_mouse (posição em pixels do mouse dentro da tela). Estarei seguindo a convenção ao colocar u_ antes do nome da uniform para evidenciar a natureza desta variável mas você encontrará outros tipos de nomenclatura para uniforms. Por exemplo ShaderToy.com utiliza os mesmos uniforms mas com os seguintes nomes:

uniform vec3 iResolution;   // viewport resolution (in pixels)
uniform vec4 iMouse;        // mouse pixel coords. xy: current, zw: click
uniform float iTime;        // shader playback time (in seconds)

Chega de conversa, vamos ver os uniforms em ação. No código abaixo, usamos u_time - o número de segundos desde que o shader começou a ser executado - junto com uma função de seno para animar a transição da quantidade de vermelho na tela.

Como você pode ver, GLSL tem mais surpresas. A GPU tem funções angulares, trigonométricas e exponenciais aceleradas pelo hardware. Algumas dessas funções são: sin(), cos(), tan(), asin(), acos(), atan(), pow(), exp(), log(), sqrt(), abs(), sign(), floor(), ceil(), fract(), mod(), min(), max() e clamp().

Agora é novamente a hora de experimentar com o código acima.

gl_FragCoord

Da mesma maneira que GLSL nos dá um output padrão, vec4 gl_FragColor, ele também nos dá um input padrão, vec4 gl_FragCoord, que possui as coordenadas de um pixel ou screen fragment com que a thread ativa está processando. Com vec4 gl_FragCoord podemos saber onde a thread está trabalhando dentro da tela. Neste caso, não chamaremos isso de uniform porque seu valor será diferente para cada thread, logo gl_FragCoord é chamada de varying.

No código acima nós normalizamos as coordenadas do fragmento ao dividi-las pela resolução total da tela. Fazendo isso, os valores serão entre 0.0 e 1.0, o que facilita mapear os valores de X e Y para os canais RED e GREEN.

No mundo dos shaders, não temos muitos recursos para depurar bugs além de atribuir uma cor marcante às variáveis e tentar entender o que está acontecendo com as mesmas. Você descobrirá que, às vezes, programar em GLSL é bem similar a construir navios dentro de garrafas. É igualmente difícil, bonito e gratificante.

Agora é a hora de tentar e desafiar a nossa compreensão desse código.

Após completar estes exercícios, você talvez se pergunte onde mais você pode aplicar seu novo superpoder de shader. No próximo capítulo veremos como fazer as nossas próprias ferramentas de shader em three.js, Processing, e openFrameworks.