Programação de Shaders GLSL

Visão Geral

Um guia completo para escrever shaders de GPU usando GLSL (OpenGL Shading Language). Aprenda sintaxe, uniforms, variáveis varying e conceitos matemáticos chave como swizzling e operações vetoriais para efeitos visuais.

Quando Usar Esta Habilidade

• Use ao criar efeitos visuais personalizados em WebGL, Three.js ou engines de jogos.
• Use ao otimizar o desempenho de renderização gráfica.
• Use ao implementar efeitos de pós-processamento (desfoque, bloom, correção de cor).
• Use ao gerar proceduralmente texturas ou geometria na GPU.

Guia Passo a Passo

1. Estrutura: Vértice vs. Fragmento

Entenda o pipeline:

• Vertex Shader: Transforma coordenadas 3D para espaço de tela 2D (gl_Position).
• Fragment Shader: Colore pixels individuais (gl_FragColor).

// Vertex Shader (basic)
attribute vec3 position;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

// Fragment Shader (basic)
uniform vec3 color;

void main() {
    gl_FragColor = vec4(color, 1.0);
}

2. Uniforms e Varyings

• uniform: Dados constantes para todos os vértices/fragmentos (passados da CPU).
• varying: Dados interpolados do vertex shader para o fragment shader.

// Passing UV coordinates
varying vec2 vUv;

// In Vertex Shader
void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

// In Fragment Shader
void main() {
    // Gradient based on UV
    gl_FragColor = vec4(vUv.x, vUv.y, 1.0, 1.0);
}

3. Swizzling & Matemática Vetorial

Acesse componentes de vetores livremente: vec4 color = vec4(1.0, 0.5, 0.0, 1.0);

• color.rgb -> vec3(1.0, 0.5, 0.0)
• color.zyx -> vec3(0.0, 0.5, 1.0) (reordenação)

Exemplos

Exemplo 1: Raymarching Simples (Esfera SDF)

float sdSphere(vec3 p, float s) {
    return length(p) - s;
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
    vec3 ro = vec3(0.0, 0.0, -3.0); // Ray Origin
    vec3 rd = normalize(vec3(uv, 1.0)); // Ray Direction
    
    float t = 0.0;
    for(int i = 0; i < 64; i++) {
        vec3 p = ro + rd * t;
        float d = sdSphere(p, 1.0); // Sphere radius 1.0
        if(d < 0.001) break;
        t += d;
    }
    
    vec3 col = vec3(0.0);
    if(t < 10.0) {
        vec3 p = ro + rd * t;
        vec3 normal = normalize(p);
        col = normal * 0.5 + 0.5; // Color by normal
    }
    
    fragColor = vec4(col, 1.0);
}

Melhores Práticas

• ✅ Faça: Use mix() para interpolação linear em vez de matemática manual.
• ✅ Faça: Use step() e smoothstep() para limiarização e bordas suaves (evite branches if).
• ✅ Faça: Empacote dados em vetores (vec4) para minimizar o acesso à memória.
• ❌ Não Faça: Use branching pesado (if-else) dentro de loops, se possível; isso prejudica o paralelismo da GPU.
• ❌ Não Faça: Calcule valores constantes dentro do shader; pré-calcule-os na CPU (uniforms).

Solução de Problemas

Problema: Shader compila, mas a tela está preta. Solução: Verifique se gl_Position.w está correto (geralmente 1.0). Verifique se os uniforms estão realmente sendo definidos pela aplicação host. Verifique se as coordenadas UV estão dentro de [0, 1].

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
• Não trate a saída como um substituto para validação específica do ambiente, testes ou revisão especializada.
• Pare e peça esclarecimentos se os inputs necessários, permissões, limites de segurança ou critérios de sucesso estiverem ausentes.