Frame Buffer Objects

Crea efectos de post-producción

By Romualdo Villalobos

Algunas veces los videojuegos, necesitan efectos para contar una mejor historia, por ejemplo que el mundo se vuelva blanco y negro para indicar que hay poca salud, o desenfocarlo para indicar que el jugador esta mareado. Este tipo de efectos se puede lograr usando Frame Buffer Objects (FBO).

Crear efectos de postproducción.

Espejos.

Refracción y efectos subacuáticos.

Etc...

1.

2.

3.

4.

¿Que más se puede hacer con FBOs?

​

En el pipeline de OpenGL, todo lo que dibujemos será renderizado en el Frame Buffer que viene inicializado por defecto al configurar la ventana, lo que dibujemos allí será lo que se verá finalmente en pantalla.

​

Idea General

​

...Sin embargo, podemos definir nuestros propios Frame Buffer Objects, para que OpenGL renderice hacia una textura personalizada que no se verá en pantalla.

Por esta razón la técnica también se conoce como off-screen rendering.

En realidad, el Frame Buffer Object no es un buffer, esto es, no es una estructura que almacene pixeles, bytes, etc, sino un contenedor de buffers/imágenes, conocidos como attachments.

FBO en detalle

​

​

Luego, podemos “attach” imágenes a los distintos slots disponibles en el FBO, estas imágenes pueden ser de dos tipos.

Texture 2D

Render Buffer

​

1.

2.

Si OpenGL estuviera implementado en JavaScript, el FBO estaría implementado más o menos así:

...Entonces,

Cuando llamamos las funciones de renderizado, OpenGL no renderiza imágenes en el Frame Buffer Object sino en las imágenes “attached” al FBO activo.

Tanto una textura como renderbuffer es un búfer, p. Ej. una matriz de bytes, enteros, píxeles o lo que sea. Sin embargo, un renderbuffer no se puede leer directamente. (OpenGL puede realizar varias optimizaciones internas gracias a esto)

Dado que los renderbuffers son de solo escritura, a menudo se usan como attachments para depth y stencil.

https://learnopengl.com/Advanced-OpenGL/Framebuffers

Texture 2D vs Render Buffer

​

​

Creando un FBO.

​

Renderizando la escena en las texturas (attachments) de un custom FBO.

​

(Hints) Dibujando la textura generada en un Quad que está sobre la escena.

​

(Ejercicio Opcional) Agregando post-processing effects a la textura mediante el fragment shader.

​

https://github.com/romualdo97/opengl_studies/blob/master/022_framebuffers/code_vs_v16_2019/001_framebuffers/main.cpp

​

https://github.com/romualdo97/opengl_studies/blob/master/snippets/frame-buffer-objects.cpp

​

Algo de código

​

​

1.

2.

3.

Default FBO (Which is shown in window)

Custom FBO

Scene

Attached Texture 2D

1. Bind Custom FBO.
2. Call draw().

Renders to the attached texture.

1. Bind Default FBO.
2. Render a quad in the scene.
3. Attach a vertex and fragment shader. to the Quad.

Scene with Quad

1. Pass the generated texture to the quad’s Fragment Shader.
2. Write the post-processing effect in the Fragment Shader.

​

Call draw().

Post Processing Diagram

​

Si desea renderizar toda su pantalla a una textura de un tamaño más pequeño o más grande, debe llamar a glViewport nuevamente (antes de renderizar a su framebuffer) con las nuevas dimensiones de su textura, de lo contrario, los comandos de renderización solo llenarán parte de la textura.

Notas importantes

1.

Frame Buffer Objects http://www.songho.ca/opengl/gl_fbo.html

Using FBOs to generate cool Post-Processing effects https://learnopengl.com/Advanced-OpenGL/Framebuffers

Mental image of what FBO is (using JavaScript) https://webglfundamentals.org/webgl/lessons/webgl-framebuffers.html

FBOs in WebGL https://webglfundamentals.org/webgl/lessons/webgl-framebuffers.html

OpenGL Pipeline http://www.songho.ca/opengl/gl_pipeline.html

​

Referencias

​