GUI en OpenGL (AntTweakBar)

AntTweakBar es una librería diseñada para crear interfaces gráficas de usuario (GUI) en aplicaciones gráficas, funciona tanto en OpenGL como en Microsoft DirectX, es bastante fácil de usar y muy potente, sobre OpenGL se puede usar en conjunto con las librerías de manejo de ventanas más utilizadas, como: GLFW (la que usamos en esta serie de tutoriales OpenGL moderno), la clásica GLUT y su versión más moderna FREEGLUT, SDL, entre otras.

Instalación de AntTWeakBar

Para Windows el archivo descargado contiene las .dll y los .lib requeridos, además del archivo de encabezado AntTWeakBar.h, para los usuarios de Linux la carpeta src contiene el archivo Make para la generación de la librería, esta carpeta también contiene un proyecto Visual Studio 12 que podemos utilizar para recompilar la librería, los podemos abrir sin problemas en VS 15.

Copiamos las carpetas include y lib a el directorio donde tenemos todas las librerías OpenGL, esto solo para ser organizados, en nuestro caso C:\Developer\opengl\ATB, seguido creamos la variable de entorno ATB_DIR y hacemos que apunte a la carpeta antes mencionada, necesitamos también agregar la carpeta C:\Developer\opengl\ATB\lib al PATH.

Integrar AntTweakBar con GLFW

Para inicializar la biblioteca utilizamos la función TwInit(TW_OPENGL_CORE, NULL); si deseamos usar el OpenGL Core Profile o TwInit(TW_OPENGL, NULL); en caso contrario.

glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 2);
glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

window = glfwCreateWindow(width, height, "AntTweakBar Test", nullptr, nullptr);
glfwMakeContextCurrent(window);

TwInit(TW_OPENGL_CORE, NULL);

Requerimos utilizar la función TwWindowSize(fWidth, fHeight); para indicar el tamaño inicial de la ventana, si no lo hacemos se produce un error.

Creación de un Tweak Bar

Un Tweak Bar es una ventana en la que podemos crear los elementos que componen la GUI que deseamos generar, podemos tener una o varias de ellas, la creamos del siguiente modo: TwBar* bar = TwNewBar("Tweak Bar");

Lo siguiente que requerimos es llamar al método TwDraw() este es el encargado de dibujar el Tweak Bar, ubicamos la llamada a esta función en el código de actualización del render.

while (!glfwWindowShouldClose(window))
{
    glClearColor(0, 0, 0, 0);
    glClear(GL_COLOR_BUFFER_BIT);

    TwDraw();

    glfwSwapBuffers(window);
    glfwPollEvents();
}

En este punto el Tweak Bar se muestra en pantalla pero no reacciona a los eventos del ratón, teclado u otros, lo siguiente que haremos será indicarle a la biblioteca como responder a estos eventos.

glfwSetCursorPosCallback(window, onMouseMotion);
glfwSetMouseButtonCallback(window, onMouseButton);
glfwSetKeyCallback(window, onKeyPress);
glfwSetWindowSizeCallback(window, onResizeWindow);

//...//

void onResizeWindow(GLFWwindow* window, int width, int height) {
    TwWindowSize(width, height);
}

void onKeyPress(GLFWwindow* window, int key, int scancode, int action, int mods){
    if(action == GLFW_PRESS) TwKeyPressed(key, TW_KMOD_NONE);
}

void onMouseButton(GLFWwindow * window, int button, int action, int mods)
{
    auto a = action == GLFW_PRESS ? TW_MOUSE_PRESSED : TW_MOUSE_RELEASED;
    auto b = TW_MOUSE_LEFT;

    TwMouseButton(a, b);
}

void onMouseMotion(GLFWwindow * window, double xpos, double ypos)
{
    TwMouseMotion(px(static_cast<int>(xpos)), px(static_cast<int>(ypos)));
}

Si ejecutamos veremos que podemos cambiar el tamaño de la ventana, usar los botones, escribir, etc.

Agregar Controles al Tweak Bar

Podemos agregar varios tipos de controles, usaremos las funciones TwAddVarRW() para agregar controles de lectura y escritura y la función TwAddVarRO() para agregar controles de solo lectura.

TwBar* bar = TwNewBar("Tweak Bar");

double speed = 8.10;
TwAddVarRW(bar, "velocidad", TW_TYPE_DOUBLE, &speed,
    " label='Velocidad Rotacion' min=0 max=20 step=0.1 keyIncr=s keyDecr=S help='Aumenta o disminuye la velocidad de rotacion' ");

double acel = 10.25;
TwAddVarRO(bar, "acelaracion", TW_TYPE_DOUBLE, &acel, " label='Aceleracion' help='Aumenta o disminuye la velocidad de rotacion' ");

El primer parámetro indica el Tweak Bar donde insertaremos el control, el siguiente es el nombre para el control, seguido del tipo de variable TW_TYPE_DOUBLE, indicamos la dirección de memoria de la variable que almacenará el nuevo valor establecido por el usuario, al final una cadena de texto que define algunas propiedades del control, como: label para la etiqueta, min y max para establecer un valor máximo y mínimo, keyIncr y KeyDecr indican las teclas usadas para incrementar y disminuir el valor y help que define el texto de ayuda que aparece al pulsar el botón [ ? ].


Para finalizar vemos algunos de los tipos de controles que podemos añadir, el uso de la función es similar para cada uno de los tipos de controles, solo variamos al indicar su tipo, la variable donde se almacenará y debemos tener en cuenta que un control puede tener propiedades diferentes.

TwAddVarRW(bar, "wire", TW_TYPE_BOOL32, &wire," label='Bool variable'  ");

TwAddVarRW(bar, "color1", TW_TYPE_COLOR3F, &color, " label='Color de Fondo' ");

TwAddVarRW(bar, "color2", TW_TYPE_COLOR32, &color2, " label='RGBA 32 bits color' alpha ");

TwAddVarRW(bar, "LightDir", TW_TYPE_DIR3F, &g_LightDirection,
    " label='Light direction' opened=true help='Change the light direction.' ");

TwAddVarRW(bar, "ObjRotation", TW_TYPE_QUAT4F, &g_Rotation,
    " label='Object rotation' opened=true help='Change the object orientation.' ");

Vemos cómo podemos crear controles para establecer valores booleanos, cambiar color en formato RGB y RGBA, se puede cambiar el modo a HSV, creamos controles para establecer la dirección y rotación de un objeto.

En este ejemplo usamos la variable color para cambiar el color de con que se limpia la pantalla.


Aún existen muchos tipos de controles que podemos agregar a la GUI, la carpeta samples contiene muchos ejemplos que podemos ver para saber más sobre los diversos tipos de controles con los que contamos.

GitHub: GUI AntTweakBar en GLFW