Texturización con OpenGL

La texturización es una técnica ampliamente utilizada en el diseño de objetos 2D y 3D. Es, por tanto, muy útil a la hora del realizar el blending de objetos virtuales sobre una imagen real y perfectamente integrados en ella, que se realiza en la mayoría de las aplicaciones de Realidad Aumentada. Por este motivo, dedicaré un post a comentar los aspectos esenciales del proceso de texturización con primitivas OpenGL. Toda la información está extraída de un fantástico manual de José María Buades, el cual os recomiendo para completar lo aquí apuntado.

Gracias a la texturización el número de polígonos para representar un objeto se ve reducido enormemente. La texturización consiste en "pegar" un póster (una imagen) a una primitiva (un polígono) que sustituye (o complementa) el color de la primitiva. Si deseamos renderizar una pared de ladrillos, necesitamos un polígono para cada ladrillo, además de otros tantos para renderizar el espacio que hay entre estos, en cambio con texturas podemos renderizar una pared entera con solo un polígono y una textura que se repite a lo largo del polígono.

ejemplo de textura

proceso de texturización

En este caso la textura es 2D, pero puede ser de una dimensión o tres dimensiones (textura 3D). Además la textura puede contener una, dos, tres (R, G, B) o cuatro (R, G, B, A) componentes por texel (equivalente al pixel de una imagen). Lo más usual es tener una textura de dos dimensiones con tres componentes RGB.

Para OpenGL las texturas 1D, 2D o 3D son arrays uni, bi o tri-dimensionales respectivamente, que le pasaremos mediante una dirección de memoria. OpenGL no ofrece ningún mecanismo para llevar la textura desde un fichero hasta memoria, si deseamos cargar una textura debemos ser nosotros quienes usando alguna librería o el API correspondiente del SO cargue la imagen. Posteriormente debemos pasarla a un formato aceptado por OpenGL y finalmente se la entregamos a OpenGL como un puntero a memoria.

Pasos en la texturización

1. Crear un objeto textura y especificar la textura para este objeto
2. Indicar como como se aplica la textura a cada vértice
3. Habilitar el mapeo de texturas
4. Dibujar la escena, indicando las coordenadas de la textura y las coordenadas geométricas (vértices)
5. Objetos textura

Los objetos textura son la encapsulación de una textura, al objeto textura le identifica un entero sin signo. Los objetos textura son creados y destruidos, pero no se comparten entre los distintos contextos de OpenGL (distintas ventanas). Las funciones relacionadas con los objetos texturas son las siguientes:

Para crear objetos textura:
void glGenTextures(GLsizei n, GLuint *textureNames): Solicitamos n objetos textura, el nombre o identificador de estos objetos son devueltos en textureNames que previamente le habremos reservado espacio.

Para eliminar objetos textura:
void glDeleteTextures(GLsizei n, GLuint *textures): Solicitamos que los n objetos textura especificados en textures sean borrados.

Para usar un objeto textura:
void glBindTexture(GLenum target, GLuint textureName): Selecciona la textura textureName como textura activa para el target especificado (GL_TEXTURE_1D, GL_TEXTURE_2D, GL_TEXTURE_3D). Con esta función marcamos el objeto textura como el objeto activo, tener un objeto textura como objeto activo tiene dos funcionalidades, indicar que textura se utiliza y sobre que textura modificamos los parámetros de texturización, estos parámetros los veremos más adelante

Para especificar la textura disponemos de tres funciones, una para cada dimensión, veremos la función para 2D glTexImage2D y es extensible lo mismo para 1D y 3D.

void glTexImage2D(GLenum target, GLint level, GLint internalFormat, GLsizi width, GLsizei height, GLint border, GLenum format, GLenum type, const GLvoid *texels)

• target debe ser GL_TEXTURE2D.
• level nivel de detalle, se usa cuando aplicamos técnicas de mipmapping, en nuestro caso cero.
• internalFormat podemos elegir entre una variedad, generalmente GL_RGB. Hace referencia al tipo de textura que deseamos.
• width, height y border indican el tamaño que debe ser (2n+b)x(2m+b). Normalmente el borde (b) es cero, un tamaño posible es 64x128. Si no especificamos un tamaño correcto la textura no se muestra.
• format generalmente GL_RGB o GL_EXT_BGR.
• type tipo en el que esta almacenada la textura, puede ser GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT, GL_UNSIGNED_SHORT, GL_INT, GL_UNSIGNED_INT, GL_FLOAT, GL_BITMAP. 
• texels array que contiene la textura, de izquierda a derecha y de abajo a arriba.

Especificamos cual es la textura para el objeto textura activo. Es conveniente por cuestiones de rendimiento que por cada textura que utilicemos tengamos un objeto textura y mantener los objetos textura durante toda la aplicación, en lugar de crearlo y destruirlo cada vez que se usa la textura, o tener un solo objeto textura y modificar la textura que se utiliza.

Habilitar texturas

Ya hemos visto como crear texturas, especificar cual es la textura que contiene el objeto. Para habilitar o deshabilitar la texturización lo indicamos con la instrucción glEnable() pasando como parámetro el tipo de textura GL_TEXTURE_1D, GL_TEXTURE_2D o GL_TEXTURE_3D. En caso de que este habilitada más de uno se aplicará el tipo de mayor dimensión.

Dibujar la primitiva

Cuando renderizamos la primitiva, debemos asignar una coordenada textura a cada vértice. Podemos especificar la coordenada o dejar a OpenGL que la genere automáticamente a partir de un método seleccionado.

Para especificarla nosotros mismos lo hacemos con la función glTexCoord*(). A cada pixel se le asigna un texel interpolando las coordenadas textura de los vértices de la misma forma que se hacia para el color. Recordar que la coordenada de la textura igual que el color, la normal u otros parámetros se especifican antes de indicar el vértice, una vez indicado no se puede modificar.

Las coordenadas de la textura (s, t) varían de 0 a 1. Por ejemplo un textura de 128x64 su rango viene dado por [0,1]x[0x1], los números mayores a 1 representan que la textura se repite, p.e:

glBegin(GL_QUADS);

glColor3f(1.0, 1.0, 1.0);glTexCoord2f(0.0, 0.0);// s = 0 t = 0
glVertex3f(-1.0, -2.0, 0.0);
glTexCoord2f(0.0, 3.0);// s = 0 t = 3
glVertex3f(-1.0, 2.0, 0.0);
glTexCoord2f(2.0, 3.0);// s = 2 t = 3
glVertex3f(1.0, 2.0, 0.0);
glTexCoord2f(2.0, 0.0);// s = 2 t = 0
glVertex3f(1.0, -2.0, 0.0);

glEnd();

Este ejemplo extiende la textura en el cuadrado repitiéndola 3 veces verticalmente y 2 veces horizontalmente. Otra posibilidad es que asigne el ultimo texel de la textura cuando la coordenada sale del rango [0, 1]. La selección entre un método u otro se hace con la función siguiente:

void glTexParameter{if}(GLenum target, GLenum pname, TYPE param): Indica como se trata la textura, target puede valer GL_TEXTURE_1D, GL_TEXTURE_2D o GL_TEXTURE_3D.

En función de pname tiene un significado u otro, aquí solo queda explicado lo referente a la extensión de la textura.

Parametro	Valores posibles	Significado
GL_TEXTURE_WRAP_S	GL_CLAMP, GL_CLAMP_TO_EDGE, GL_REPEAT	GL_CLAMP utiliza el color de borde en las coordenadas fuera del rango [0, 1]
GL_TEXTURE_WRAP_T	GL_CLAMP, GL_CLAMP_TO_EDGE, GL_REPEAT	GL_CLAMP_TO_EDGE ignora el color de borde y usa el texel más próximo del rango [0, 1]
GL_TEXTURE_WRAP_R	GL_CLAMP, GL_CLAMP_TO_EDGE, GL_REPEAT	GL_REPEAT repite la textura, usa como coordenada el modulo 1 de la coordenada especificada
GL_TEXTURE_BORDER_COLOR	Un array RGB	Especifica el color del borde

Aplicar texturas

Una textura es un póster que adherimos al polígono, este póster los podemos combinar con el color del polígono, lo que nos abre un abanico de posibilidades. Podemos elegir entre cuatro modos de combinar el color del polígono con el color de la textura. La asignación del método para combinar el color y la textura se realiza con la función glTexEnv* :

void glTexEnv{if}{v}(GLenum target, GLenum pname, TYPE param): Indica cual es la función de texturización, target debe valer GL_TEXTURE_ENV.

Si pname vale GL_TEXTURE_ENV_MODE param puede valer GL_DECAL, GL_REPLACE, GL_MODULATE o GL_BLEND, para especificar como se mezcla el color del polígono con la textura. Si pname vale GL_TEXTURE_ENV_COLOR param es un array de cuatro puntos flotantes representando las componentes R, G, B, A. Estos valores solo se usan si se ha especificado el modo GL_BLEND.

Para simplificar veremos por encima que es cada modo cuando la textura es RGB, a continuación veremos una tabla donde se puede ver las fórmulas de combinación para cada modo, estos dependen de las componentes que especifica la textura.

GL_DECAL, GL_REPLACE : Usa el color de la textura, ignora el color del polígono.
GL_MODULATE : Usa el color de la textura multiplicado por el color del polígono, es útil para renderizar con iluminación las texturas. Con la iluminación activa, se renderiza el polígono en color blanco, que multiplicado por la textura, nos servirá como escalar de la cantidad de iluminado que esta.
GL_BLEND : Mezcla el color del polígono y el color especificado en GL_TEXTURE_ENV_COLOR, en las proporciones definidas por la textura.

Formato Textura	GL_REPLACE	GL_MODULATE	GL_DECAL	GL_BLEND
GL_ALPHA	C = CfA = At	C = Cf A = Af·At	undefined	C = Cf A = Af·At
GL_LUMINANCE	C = LtA = Af	C = Cf·Lt A = Af	undefined	C = Cf·(1 - Lt) + Cc·Lt A = Af
GL_LUMINANCE_ALPHA	C = ItA = At	C = Cf·Lt A = Af·At	undefined	C = Cf·(1 - Lt) + Cc·Lt A = Af·At
GL_INTENSITY	C = ItA = It	C = Cf·It A = Af·It	undefined	C = Cf·(1 - It) + Cc·It A = Af·(1 - It) + Ac·It
GL_RGB	C = CtA = Af	C = Cf·Ct A = Af	C = Ct A = Af	C = Cf·(1 - Ct) + Cc·CtA = Af
GL_RGBA	C = CtA = At	C = Cf·Ct A = Af·At	C = Cf·(1 - At) + Ct·At A = Af·At	C = Cf·(1 - Ct) + Cc·CtA = Af·At

Este es el resultado de un buen texturizado

ejemplo de imagen texturizada

Ubicando mi proyecto: Publicidad y Realidad Aumentada

Numerosísimos son los ejemplos de utilidad y aplicación de la Realidad Aumentada que en la actualidad existen en el campo de la Publicidad. Igualmente, y en consecuencia si se tiene en cuenta la aplicación de estas innovadoras tecnologías en otros muchos campos, existen numerosas propuestas técnicas desarrolladas y/o en continuo desarrollo que posibilitan la creación de aplicaciones y la explotación de todas las posibilidades que la Realidad Aumentada ofrece. En este post citaré algunas aplicaciones representativas que me han llevado a descubrir la necesidad de proponer una solución técnica a las necesidades de detección y localización de objetos planos en una imagen real sin la existencia de marcadores y el “blending” de una imagen virtual 2D sobre estos que se proponen en este proyecto.  

London National Gallery

AR London National Gallery

Los principales museos del mundo están apuntándose al uso de la Realidad Aumentada para publicitarse y para potenciar la iteración de los visitantes con sus colecciones. La London National Gallery   hizo una campaña publicitaria en Trafalgar Square para publicitarse. En ella,  apuntando con un dispositivo móvil hacia la fachada del museo aparecía un anuncio publicitario sobre sus nuevas aplicaciones, apuntando hacia una de las estatuas de la plaza aparecía un vídeo explicativo, o en las escaleras de la Galería aparecía un dragón. Este es un buen ejemplo de detección y localización en exteriores y sin marcadores.


Catálogo IKEA
No por archiconocido y renombrado se puede dejar de nombrar un clásico en el mundo de la publicidad con realidad aumentada. Desde hace algunos años, la marca IKEA  permite al cliente visualizar sus productos y colocarlos en su ubicación final, perfectamente alineados con el entorno real. Este es un buen ejemplo de utilización de marcadores en ambiente interior. La solución que se propone en este proyecto puede evitar el uso de marcadores para conseguir las mismas prestaciones.

AR en el catálogo de IKEA

Edificio N Building

AR en edificio N Building

N building es un edificio comercial que está situado cerca de Tachikawa (Tokio). Su principal característica son sus paredes, forradas de códigos QR permiten dar información a sus visitantes sobre los establecimientos que allí se encuentran y sobre sus productos y servicios. Mediante la descarga de una aplicación para Smartphones, es posible enfocar su cámara sobre el edificio y obtener abundante información sobre los establecimientos presentes. Éstos pueden publicitarse y, además, según la época del año mostrar algún otro tipo de información; por ejemplo, un árbol de navidad en diciembre.

Este es otro buen ejemplo de utilización de marcadores en ambiente exterior. Al igual que en el ejemplo anterior, la solución propuesta puede evitar el uso de marcadores para conseguir las mismas prestaciones.

Mi proyecto de Realidad Aumentada y Publicidad

El primer post de presentación de ARexperience ya comentaba el inicio de este blog como consecuencia de mis trabajos en el mundo de la Realidad Aumentada para aplicaciones de Publicidad, dentro de  un proyecto relacionado con mis estudios de ingeniería electrónica en la Universitat Politècnica de Catalunya (UPC): "DETECCION Y LOCALIZACION DE PLANOS  PARA APLICACIONES DE REALIDAD AUMENTADA EN PUBLICIDAD". Inicio ahora una secuencia de entradas en las que comentaré los pormenores de este proyecto y sus resultados. Espero que los encontréis interesantes y sean de vuestro agrado. Como siempre, comentad por favor todo lo que consideréis que pueda aportar. Vuestra participación siempre es importante. Gracias!!

Detección planar en exteriores

La Realidad Aumentada es una tecnología incipiente en el mundo de la publicidad. La posibilidad de detectar un patrón en una secuencia de video o en la realidad observada a través de una cámara permite la inclusión de anuncios virtuales sobre imágenes reales. Datos, logotipos, fotografías e incluso secuencias de vídeo son añadidas sobre la realidad, perfectamente alineadas con ésta para generar novedosos anuncios publicitarios que parecen cobrar vida. La Realidad Aumentada permite personalizar, dotar de movimiento y sonido, medir los resultados y conseguir la interactuación de las personas con los anuncios; en definitiva, permite llamar la atención de potenciales clientes.

Son ya numerosas las aplicaciones de Realidad Aumentada que conectan el mundo real con el mundo virtual a partir de la detección de patrones. Las más prestigiosas marcas utilizan estas tecnologías en sus campañas publicitarias: IKEA, Adidas, Ford, BMW, Lego, FOX, Paramount, Ray Ban, Mac-Donalds  y un sinfín de marcas están utilizado la Realidad Aumentada para llegar mejor a sus clientes potenciales.

Sin embargo, nuevas tecnologías permiten los mismos objetivos sin la necesidad de llenar de patrones el campo de visión de la cámara. Muy al contrario, la posibilidad de detectar directamente objetos, edificios, etc, y situar sobre ellos anuncios virtuales abre un amplio mundo de posibilidades para el mundo publicitario. El reto: la detección y localización de objetos en una imagen real sin la necesidad de marcadores.

Y es aquí en donde se enmarca este proyecto. Se plantea en él la posibilidad de añadir información virtual sobre objetos planos detectados y localizados en una imagen real sin necesidad de marcadores, tanto en ámbitos interiores como exteriores. Más concretamente, este proyecto desarrolla un algoritmo de “Blending” de imágenes virtuales 2D sobre las paredes planas de un objeto detectado, por ejemplo un edificio, sin la necesidad de existencia de marcadores.

Si bien es cierto que los campos de aplicación de las técnicas propuestas en este proyecto pueden ser muchos, industria, diseño, medicina, arquitectura, educación y formación, ocio, etc, el proyecto se enmarca dentro del mundo de la publicidad simplemente para poder concretar algunos aspectos. El siguiente vídeo muestra un ejemplo de Realidad Aumentada en l presentación del nuevo Volkswagen Beetle; impresionante:



 Los objetivos iniciales que nos marcamos son:

1. Detección de planos en imágenes interiores y exteriores
2. Localización de estos planos
3. Calibración de la cámara y obtención de sus parámetros intrínsecos
4. Blending de imágenes virtuales sobre los planos
5. Implementación en tiempo real
6. Integración en un sistema de realidad Aumentada.