El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Renderizado Multi-paso

Siguiente ►
►

El renderizado multi-paso es una técnica avanzada en OpenGL que permite realizar múltiples pasadas de renderizado para lograr efectos visuales complejos. Esta técnica es fundamental en la creación de gráficos de alta calidad y se utiliza en una variedad de aplicaciones, desde videojuegos hasta simulaciones científicas.

Conceptos Clave

  1. Renderizado en múltiples pasadas: Consiste en renderizar la escena varias veces, cada vez aplicando diferentes efectos o procesamientos.
  2. Framebuffers: Utilizados para almacenar los resultados de cada pasada de renderizado.
  3. Shaders: Programas que se ejecutan en la GPU para procesar vértices y fragmentos. En el renderizado multi-paso, se utilizan diferentes shaders para cada pasada.
  4. Post-procesamiento: Aplicación de efectos visuales después de que la escena ha sido renderizada.

Ejemplo Práctico: Renderizado Multi-paso

Vamos a crear un ejemplo práctico donde aplicamos un efecto de desenfoque (blur) a una escena renderizada. Este proceso se realizará en dos pasadas:

  1. Primera pasada: Renderizamos la escena normal.
  2. Segunda pasada: Aplicamos el efecto de desenfoque utilizando el resultado de la primera pasada.

Paso 1: Configuración del Framebuffer

Primero, necesitamos configurar un framebuffer para almacenar el resultado de la primera pasada.

// Crear un framebuffer
GLuint framebuffer;
glGenFramebuffers(1, &framebuffer);
glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);

// Crear una textura para almacenar el color
GLuint textureColorbuffer;
glGenTextures(1, &textureColorbuffer);
glBindTexture(GL_TEXTURE_2D, textureColorbuffer);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, SCR_WIDTH, SCR_HEIGHT, 0, GL_RGB, GL_UNSIGNED_BYTE, NULL);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, textureColorbuffer, 0);

// Crear un renderbuffer para el depth and stencil buffer
GLuint rbo;
glGenRenderbuffers(1, &rbo);
glBindRenderbuffer(GL_RENDERBUFFER, rbo);
glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH24_STENCIL8, SCR_WIDTH, SCR_HEIGHT);
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_STENCIL_ATTACHMENT, GL_RENDERBUFFER, rbo);

// Comprobar si el framebuffer está completo
if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)
    std::cout << "Framebuffer no está completo!" << std::endl;
glBindFramebuffer(GL_FRAMEBUFFER, 0);

Paso 2: Primera Pasada - Renderizado de la Escena

En la primera pasada, renderizamos la escena normal y almacenamos el resultado en el framebuffer.

// Bind al framebuffer y renderizar la escena como de costumbre
glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);
glEnable(GL_DEPTH_TEST); // Habilitar el depth testing

// Renderizar la escena
renderScene();

// Unbind el framebuffer
glBindFramebuffer(GL_FRAMEBUFFER, 0);

Paso 3: Segunda Pasada - Aplicación del Efecto de Desenfoque

En la segunda pasada, utilizamos el resultado de la primera pasada y aplicamos un shader de desenfoque.

// Deshabilitar el depth test para la segunda pasada
glDisable(GL_DEPTH_TEST);

// Bind la textura del framebuffer
glBindTexture(GL_TEXTURE_2D, textureColorbuffer);

// Usar el shader de desenfoque
blurShader.use();
glBindVertexArray(quadVAO);
glDrawArrays(GL_TRIANGLES, 0, 6);

Shader de Desenfoque

El shader de desenfoque aplica un filtro de convolución para desenfocar la imagen.

Vertex Shader:

#version 330 core
layout (location = 0) in vec2 aPos;
layout (location = 1) in vec2 aTexCoords;

out vec2 TexCoords;

void main()
{
    TexCoords = aTexCoords;
    gl_Position = vec4(aPos, 0.0, 1.0);
}

Fragment Shader:

#version 330 core
out vec4 FragColor;

in vec2 TexCoords;

uniform sampler2D screenTexture;

void main()
{
    float offset = 1.0 / 300.0; // Ajustar el valor según la resolución
    vec3 result = vec3(0.0);
    for(int x = -1; x <= 1; x++)
    {
        for(int y = -1; y <= 1; y++)
        {
            vec2 offset = vec2(float(x), float(y)) * offset;
            result += texture(screenTexture, TexCoords + offset).rgb;
        }
    }
    result /= 9.0;
    FragColor = vec4(result, 1.0);
}

Ejercicio Práctico

Ejercicio 1: Implementar un Efecto de Sobel

  1. Objetivo: Implementar un efecto de detección de bordes utilizando el operador de Sobel en una segunda pasada de renderizado.
  2. Instrucciones:
    • Configura un framebuffer para la primera pasada.
    • Renderiza la escena normal en la primera pasada.
    • En la segunda pasada, aplica un shader de Sobel para detectar bordes.

Shader de Sobel:

Vertex Shader:

#version 330 core
layout (location = 0) in vec2 aPos;
layout (location = 1) in vec2 aTexCoords;

out vec2 TexCoords;

void main()
{
    TexCoords = aTexCoords;
    gl_Position = vec4(aPos, 0.0, 1.0);
}

Fragment Shader:

#version 330 core
out vec4 FragColor;

in vec2 TexCoords;

uniform sampler2D screenTexture;

void main()
{
    float offset = 1.0 / 300.0; // Ajustar el valor según la resolución
    vec3 result = vec3(0.0);
    float kernel[9] = float[](
        -1, -1, -1,
        -1,  8, -1,
        -1, -1, -1
    );
    int index = 0;
    for(int x = -1; x <= 1; x++)
    {
        for(int y = -1; y <= 1; y++)
        {
            vec2 offset = vec2(float(x), float(y)) * offset;
            result += texture(screenTexture, TexCoords + offset).rgb * kernel[index++];
        }
    }
    FragColor = vec4(result, 1.0);
}

Solución

  1. Configurar el framebuffer: Similar al ejemplo de desenfoque.
  2. Renderizar la escena en la primera pasada: Similar al ejemplo de desenfoque.
  3. Aplicar el shader de Sobel en la segunda pasada: Utilizar el shader de Sobel proporcionado.

Conclusión

El renderizado multi-paso es una técnica poderosa que permite aplicar efectos visuales complejos mediante múltiples pasadas de renderizado. En este módulo, hemos aprendido a configurar framebuffers, renderizar escenas en múltiples pasadas y aplicar efectos de post-procesamiento utilizando shaders. Con estas habilidades, puedes crear gráficos avanzados y efectos visuales impresionantes en tus aplicaciones OpenGL.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados