SlideShare une entreprise Scribd logo
1  sur  53
Télécharger pour lire hors ligne
Gráficos 3D para iPhone con
       OpenGL ES
          Manuel R. Freire
          Interactive Fan
© Electronic Arts, Inc.     © ngmoco, Inc.    © ngmoco, Inc.
© Digital Chocolate, Inc.         © Firemint    © Chillingo Ltd.
  © Electronic Arts, Inc.   © Digital Legends           © SGN
Índice

•   Introducción a OpenGL ES para iPhone

•   Operaciones básicas

•   El mundo 3D

•   Texturas

•   Shaders (sólo OpenGL ES 2.0)
Introducción a OpenGL ES para
            iPhone
OpenGL ES

•   OpenGL for Embedded Systems

•   API de gráficos 3D de bajo nivel

•   Permite especificar la geometría y propiedades de objetos
    (color, iluminación, texturas)

•   Subconjunto de OpenGL
Versiones de OpenGL ES

              Hardware      Dispositivos   OpenGL


                               iPhone
  OpenGL ES
              Función fija    iPhone 3G       1.5
     1.1                     iPod touch


  OpenGL ES   Programable
                            iPhone 3G S      2.0
     2.0       (shaders)
Un mundo de vértices

•   Los objetos se definen mediante conjuntos de vértices

•   Cada vértice puede tener asociada información de color y
    textura

•   Los vértices se agrupan en primitivas: triángulos, puntos,
    líneas, tiras de triángulos, etc.
Primitivas
     Primitiva                      Descripción
                                Conjunto de puntos
   GL_POINTS
                              (N vértices → N puntos)
                         Conjunto de segmentos conectados
  GL_LINE_STRIP
                           (N vértices → N-1 segmentos)
                      Conjunto cíclico de segmentos conectados
  GL_LINE_LOOP
                            (N vértices → N segmentos)
                       Conjunto de segmentos desconectados
    GL_LINES
                          (N vértices → N/2 segmentos)
                                 Tira de triángulos
GL_TRIANGLE_STRIP
                           (N vértices → N-2 triángulos)
                               Abanico de triángulos
GL_TRIANGLE_FAN
                           (N vértices → N-2 triángulos)
                              Conjunto de triángulos
  GL_TRIANGLES
                           (N vértices → N/3 triángulos)
Ejemplo: Cuadrado
                      v3 = (0, 1, 0)        v2 = (1, 1, 0)



                                                              T1: (v0, v2, v3)
                                                              T2: (v0, v1, v2)



                      v0 = (0, 0, 0)         v1 = (1, 0, 0)



•       4 vértices
•       Primitivas:
    ➡     Opción 1: dos triángulos
    ➡     Opción 2: abanico de triángulos
    ➡     Opción 3: tira de triángulos
Anatomía de una aplicación 3D
            (simplificada)
                Plantilla “OpenGL ES Application” de XCode
1.    Inicializar OpenGL ES
        1.1.   Crear un contexto OpenGL ES (EAGLContext)
        1.2.   Asociar el contexto a una vista (EAGLView)
2.    Bucle (cada frame):
        2.1.   Actualizar estado de la aplicación
        2.2.   Dibujar
Operaciones básicas
Borrar la pantalla
•   Pinta todo el buffer de un único color

•   Se hace (al menos) al inicio de cada frame
Borrar la pantalla
•   Pinta todo el buffer de un único color

•   Se hace (al menos) al inicio de cada frame

glClearColor(0.0f, 1.0f, 0.0f, 1.0f);
Borrar la pantalla
•   Pinta todo el buffer de un único color

•   Se hace (al menos) al inicio de cada frame

glClearColor(0.0f, 1.0f, 0.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
Dibujar primitivas
•   Los vértices se almacenan en un array y se dibujan con
    glDrawArrays
Dibujar primitivas
•     Los vértices se almacenan en un array y se dibujan con
      glDrawArrays
    glEnableClientState(GL_VERTEX_ARRAY);
Dibujar primitivas
•        Los vértices se almacenan en un array y se dibujan con
         glDrawArrays
    glEnableClientState(GL_VERTEX_ARRAY);
    const GLfloat vertices[] = {
               -0.5f, -0.5f,
               0.5f,    -0.5f,
               -0.5f,    0.5f,
               0.5f,     0.5f,
    };
    glVertexPointer(2, GL_FLOAT, 0, vertices);
Dibujar primitivas
•        Los vértices se almacenan en un array y se dibujan con
         glDrawArrays
    glEnableClientState(GL_VERTEX_ARRAY);
    const GLfloat vertices[] = {
               -0.5f, -0.5f,
               0.5f,    -0.5f,
               -0.5f,    0.5f,
               0.5f,     0.5f,
    };
    glVertexPointer(2, GL_FLOAT, 0, vertices);
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
Seleccionar un color
•   El color se define en RGBA

•   Por defecto, las operaciones que utilizan color utilizan el
    último color seleccionado
Seleccionar un color
•   El color se define en RGBA

•   Por defecto, las operaciones que utilizan color utilizan el
    último color seleccionado
glColor4f(1.0f, 1.0f, 1.0f, 1.0f);
Seleccionar un color
•   El color se define en RGBA

•   Por defecto, las operaciones que utilizan color utilizan el
    último color seleccionado
glColor4f(1.0f, 1.0f, 1.0f, 1.0f);
                                                      1
dibujaObjeto1();
Seleccionar un color
•   El color se define en RGBA

•   Por defecto, las operaciones que utilizan color utilizan el
    último color seleccionado
glColor4f(1.0f, 1.0f, 1.0f, 1.0f);
                                                      1
dibujaObjeto1();
glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
Seleccionar un color
•   El color se define en RGBA

•   Por defecto, las operaciones que utilizan color utilizan el
    último color seleccionado
glColor4f(1.0f, 1.0f, 1.0f, 1.0f);
                                                      1
dibujaObjeto1();
glColor4f(1.0f, 0.0f, 0.0f, 1.0f);                    2
dibujaObjeto2();
Seleccionar un color
•   El color se define en RGBA

•   Por defecto, las operaciones que utilizan color utilizan el
    último color seleccionado
glColor4f(1.0f, 1.0f, 1.0f, 1.0f);
                                                      1
dibujaObjeto1();
glColor4f(1.0f, 0.0f, 0.0f, 1.0f);                    2
dibujaObjeto2();
dibujaObjeto3();                                      3
El mundo 3D
El mundo 3D en OpenGL
•   OpenGL representa el mundo 3D a través de matrices a las
    que se aplican transformaciones (multiplicaciones)

•   Dos matrices fundamentales:
    ‣   Modelo-vista (GL_MODELVIEW)

    ‣   Proyección (GL_PROJECTION)

•   Las transformaciones se aplican sobre la matriz activa
Analogía cámara fotográfica


•   Elección de la posición de la cámara
                                                Matriz modelo-vista
•   Elección de la disposición de los objetos

•   Elección de la lente                        Matriz de proyección
La matriz modelo-vista
•   Define la posición y orientación de los objetos

•   Tres operaciones: traslación, rotación y escalado




      Traslación             Rotación                Escalado
Ejemplo: Traslación
          void glTranslatef(GLfloat x, GLfloat y, GLfloat z)
          void glTranslatex(GLfixed x, GLfixed y, GLfixed z)


glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(10.0f, 20.0f, 0.0f);
dibujaObjeto();     /* posición: (10.0, 20.0, 0.0) */
Ejemplo: Rotación
  void glRotatef(GLfloat angle, GLfloat x, GLfloat y, GLfloat z)
  void glRotatex(GLfixed angle, GLfixed x, GLfixed y, GLfixed z)


glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glRotatef(90.0f, 0.0f, 0.0f, 1.0f);
dibujaObjeto();     /* objeto girado 90º respecto a Z */
Ejemplo: Escalado
              void glScalef(GLfloat x, GLfloat y, GLfloat z)
              void glScalex(GLfixed x, GLfixed y, GLfixed z)

glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(10.0f, 10.0f, -10.0f);
glScalef(2.0f, 2.0f, 2.0f);
dibujaObjeto1();    /* objeto x2 en (10.0, 10.0, -10.0) */


glLoadIdentity();
glScalef(2.0f, 2.0f, 2.0f);
glTranslatef(10.0f, 10.0f, -10.0f);
dibujaObjeto2();    /* OJO: objeto x2 en (20.0, 20.0, -20.0) */
Ejemplo: Múltiples objetos
                                    void glPushMatrix()
                                    void glPopMatrix()

glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(0.0f, 0.0f, -10.0f);


glPushMatrix();
glTranslatef(5.0f, 5.0f, 0.0f);
dibujaObjeto1();    /* posición: (5.0, 5.0, -10.0) */
glPopMatrix();


glPushMatrix();
dibujaObjeto2();    /* posición: (0.0, 0.0, -10.0) */
glPopMatrix();
La matriz de proyección
•   Determina cómo se va a proyectar la geometría 3D sobre la pantalla 2D

•   Planos de corte (clipping)




                  Ortográfica                 Perspectiva
Ejemplo: Ortográfica
   void glOrthof(GLfloat left, GLfloat right, GLfloat bottom, GLfloat top, GLfloat
                                 near, GLfloat far)
   void glOrthox(GLfixed left, GLfixed right, GLfixed bottom, GLfixed top, GLfixed
                                 near, GLfixed far)


glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrthof(-1.0f, 1.0f, -1.5f, 1.5f, -1.0f, 1.0f);
Ejemplo: Perspectiva
      void glFrustumf(GLfloat left, GLfloat right, GLfloat bottom, GLfloat top,
                                 GLfloat near, GLfloat far)
      void glFrustumx(GLfixed left, GLfixed right, GLfixed bottom, GLfixed top,
                                 GLfixed near, GLfixed far)

glMatrixMode(GL_PROJECTION);
glLoadIdentity();
float aspect = width / height;
float fov = 50.0f;
float near = 0.5f;
float far = 20.0f;
float top = near * tan(fov * PI / 360.0f);
float bottom = -top;
float left = bottom * aspect;
float right = top * aspect;
glFrustumf(left, right, bottom, top, near far);
Anatomía de una aplicación 3D
             (actualizada)
1.    Inicializar OpenGL ES
         1.1.      Crear un contexto OpenGL ES (EAGLContext)
         1.2.      Asociar el contexto a una vista (EAGLView)
         1.3.      Inicializar la matriz de proyección con glOrtho o glFrustum
2.    Bucle (cada frame):
         2.1.      Actualizar estado de la aplicación
         2.2.      Dibujar utilizando OpenGL
                   -        Borrar la pantalla con glClear
                   -        Situar la cámara transformando la matriz modelo-vista
                   -        Para cada objeto:
                               Situar el objeto transformando la matriz modelo-vista
                               Dibujar las primitivas del objeto
Texturas
Texturas


•   Imágenes 2D que se dibujan sobre las primitivas

•   Son un aspecto crítico en aplicaciones 3D para iPhone por su
    tamaño en memoria y tiempo de carga
Cargar una textura
1.      Cargar la imagen con CGBitmapContextCreate (ver clase Texture2D, ejemplo “Crash Landing”)

2.      Definir los parámetros de filtrado

3.      Crear un objeto textura en OpenGL con glTexImage2D

     img = cargarImagen(“imagen.png”);
     GLuint texName;
     glGenTextures(1, &texName);
     glBindTexture(GL_TEXTURE_2D, texName);
     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
     glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, imgWidth, imgHeight, 0, GL_RGBA,
                        GL_UNSIGNED_BYTE, img);
     free(img);
Utilizar una textura
1.   Activar las texturas con glEnable(GL_TEXTURE_2D)

2.   Definir las coordenadas de la textura, que afectan a cómo se acopla la textura a los vértices

3.   Dibujar la primitiva
Utilizar una textura
1.      Activar las texturas con glEnable(GL_TEXTURE_2D)

2.      Definir las coordenadas de la textura, que afectan a cómo se acopla la textura a los vértices

3.      Dibujar la primitiva

     glEnable(GL_TEXTURE_2D);      /* sólo una vez */
Utilizar una textura
1.      Activar las texturas con glEnable(GL_TEXTURE_2D)

2.      Definir las coordenadas de la textura, que afectan a cómo se acopla la textura a los vértices

3.      Dibujar la primitiva

     glEnable(GL_TEXTURE_2D);      /* sólo una vez */
     glBindTexture(GL_TEXTURE_2D, texName);
Utilizar una textura
1.      Activar las texturas con glEnable(GL_TEXTURE_2D)

2.      Definir las coordenadas de la textura, que afectan a cómo se acopla la textura a los vértices

3.      Dibujar la primitiva

     glEnable(GL_TEXTURE_2D);      /* sólo una vez */
     glBindTexture(GL_TEXTURE_2D, texName);
     glVertexPointer(3, GL_FLOAT, 0, vertices);
Utilizar una textura
1.        Activar las texturas con glEnable(GL_TEXTURE_2D)

2.        Definir las coordenadas de la textura, que afectan a cómo se acopla la textura a los vértices

3.        Dibujar la primitiva

     glEnable(GL_TEXTURE_2D);        /* sólo una vez */
     glBindTexture(GL_TEXTURE_2D, texName);
     glVertexPointer(3, GL_FLOAT, 0, vertices);
     GLfloat texCoordinates[] = {
                             0, 1.0f,
                             0, 0,
                             1.0f, 0,
                             1.0f, 1.0f
     };
     glTexCoordPointer(2, GL_FLOAT, 0, texCoordinates);
Utilizar una textura
1.        Activar las texturas con glEnable(GL_TEXTURE_2D)

2.        Definir las coordenadas de la textura, que afectan a cómo se acopla la textura a los vértices

3.        Dibujar la primitiva

     glEnable(GL_TEXTURE_2D);        /* sólo una vez */
     glBindTexture(GL_TEXTURE_2D, texName);
     glVertexPointer(3, GL_FLOAT, 0, vertices);
     GLfloat texCoordinates[] = {
                             0, 1.0f,
                             0, 0,
                             1.0f, 0,
                             1.0f, 1.0f
     };
     glTexCoordPointer(2, GL_FLOAT, 0, texCoordinates);
     glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
Shaders (OpenGL 2.0)
Shaders

•   Programas ejecutados por la GPU

•   OpenGL ES 2.0 incluye dos tipos:

    ‣   Vertex shaders: manipulan vértices

    ‣   Fragment shaders: manipulan píxeles

•   Se programan en OpenGL ES Shading Language
Vertex shaders
•   Procesan los vértices especificados con glDrawArrays

•   El shader está formado por el conjunto de operaciones que se
    aplicarán a cada vértice
•   Aplicaciones típicas:
    -    Deformación de superficies
    -    Suavizado de elementos articulados para animación de
         personajes
    -    Etc.
Fragment shaders
•   Procesan el color de los píxeles (pixel shaders)

•   Aplicaciones típicas:

    -   Bump mapping

    -   Reflejos

    -   Cartoon-shading

    -   Etc.
Creación de shaders
•        Se crea un nuevo objeto shader y se compila el código

•        También se puede cargar el shader precompilado (ShaderBinary)
    const char *shaderFiles[] = {
              “shader1.glsl”,
              “shader2.glsl”,
    };
    const int shaderFilesLength[] = {
              NULL,
              NULL,
    };
    uint shader = CreateShader(VERTEX_SHADER);     /* o FRAGMENT_SHADER */
    ShaderSource(shader, 2, shaderFiles, shaderFilesLength);
    CompileShader(shader);
Utilización de shaders
•     Los shaders se agrupan en una entidad común llamada programa

•     Una vez se ha creado el programa y añadido los shaders, se ejecuta con
      UseProgram
    uint program = CreateProgram();
    AttachShader(program, shader);
    LinkProgram(program);
    UseProgram(program);
Más información

•   OpenGL ES Programming for iPhone, iPhone Reference Library,
    http://developer.apple.com/iphone

•   OpenGL ES, http://www.khronos.org/opengles
•   T. Akenine-Möller, E. Haines and N. Hoffman, Real-Time
    Rendering, A. K. Peters Ltd., 3rd edition
¡Gracias!
     Manuel R. Freire
manuel@interactive-fan.com

Contenu connexe

Tendances

Zoom de una imagen
Zoom de una imagenZoom de una imagen
Zoom de una imagenlmarchenac01
 
Funciones de visual basic
Funciones de visual basicFunciones de visual basic
Funciones de visual basicBabyPerri
 
Control de trayectoria de manipulador robótico de
Control de trayectoria de manipulador robótico de Control de trayectoria de manipulador robótico de
Control de trayectoria de manipulador robótico de Juan Camarena
 
Taller 10 texto guía calculo 2 v 2010 parte 2
Taller 10 texto guía calculo 2 v 2010 parte 2Taller 10 texto guía calculo 2 v 2010 parte 2
Taller 10 texto guía calculo 2 v 2010 parte 2Orlando Correa
 
Segmentación de imagenes
Segmentación de imagenesSegmentación de imagenes
Segmentación de imagenesOmar Sanchez
 
Imagen e histograma
Imagen e histogramaImagen e histograma
Imagen e histogramaOmar Sanchez
 
Ejemplos Control por Modelo Inverso
Ejemplos Control por Modelo InversoEjemplos Control por Modelo Inverso
Ejemplos Control por Modelo InversoOmar Sanchez
 
Control Modelo de Referencia y Linealizacion po Realimentacion
Control Modelo de Referencia y Linealizacion po RealimentacionControl Modelo de Referencia y Linealizacion po Realimentacion
Control Modelo de Referencia y Linealizacion po RealimentacionOmar Sanchez
 
P iy va_2012-2_balotario de preguntas pc3
P iy va_2012-2_balotario de preguntas pc3P iy va_2012-2_balotario de preguntas pc3
P iy va_2012-2_balotario de preguntas pc3jcbenitezp
 
Distribucion de poblaciones
Distribucion de poblacionesDistribucion de poblaciones
Distribucion de poblacionesneliann_15
 
Paralelismo en lenguajes de alto nivel
Paralelismo en lenguajes de alto nivelParalelismo en lenguajes de alto nivel
Paralelismo en lenguajes de alto nivelLuis Belloch Gómez
 
Clases Abstractas Pc
Clases Abstractas PcClases Abstractas Pc
Clases Abstractas Pcguest28ee92
 
Introducción a Swift
Introducción a SwiftIntroducción a Swift
Introducción a Swiftbetabeers
 

Tendances (19)

Zoom de una imagen
Zoom de una imagenZoom de una imagen
Zoom de una imagen
 
Funciones de visual basic
Funciones de visual basicFunciones de visual basic
Funciones de visual basic
 
Crea robot con matlab
Crea robot con matlabCrea robot con matlab
Crea robot con matlab
 
Control de trayectoria de manipulador robótico de
Control de trayectoria de manipulador robótico de Control de trayectoria de manipulador robótico de
Control de trayectoria de manipulador robótico de
 
Parte2
Parte2Parte2
Parte2
 
Taller 10 texto guía calculo 2 v 2010 parte 2
Taller 10 texto guía calculo 2 v 2010 parte 2Taller 10 texto guía calculo 2 v 2010 parte 2
Taller 10 texto guía calculo 2 v 2010 parte 2
 
Segmentación de imagenes
Segmentación de imagenesSegmentación de imagenes
Segmentación de imagenes
 
Imagen e histograma
Imagen e histogramaImagen e histograma
Imagen e histograma
 
Ejemplos Control por Modelo Inverso
Ejemplos Control por Modelo InversoEjemplos Control por Modelo Inverso
Ejemplos Control por Modelo Inverso
 
Control Modelo de Referencia y Linealizacion po Realimentacion
Control Modelo de Referencia y Linealizacion po RealimentacionControl Modelo de Referencia y Linealizacion po Realimentacion
Control Modelo de Referencia y Linealizacion po Realimentacion
 
P iy va_2012-2_balotario de preguntas pc3
P iy va_2012-2_balotario de preguntas pc3P iy va_2012-2_balotario de preguntas pc3
P iy va_2012-2_balotario de preguntas pc3
 
Distribucion de poblaciones
Distribucion de poblacionesDistribucion de poblaciones
Distribucion de poblaciones
 
Paralela1
Paralela1Paralela1
Paralela1
 
Flexion vigas-1
Flexion vigas-1Flexion vigas-1
Flexion vigas-1
 
Java modografico
Java modograficoJava modografico
Java modografico
 
Paralelismo en lenguajes de alto nivel
Paralelismo en lenguajes de alto nivelParalelismo en lenguajes de alto nivel
Paralelismo en lenguajes de alto nivel
 
Clases Abstractas Pc
Clases Abstractas PcClases Abstractas Pc
Clases Abstractas Pc
 
BELLMAN FORD
BELLMAN FORDBELLMAN FORD
BELLMAN FORD
 
Introducción a Swift
Introducción a SwiftIntroducción a Swift
Introducción a Swift
 

En vedette

Agua del mar para la salud
Agua del mar para la saludAgua del mar para la salud
Agua del mar para la saludgregoriop
 
Vel ra co-nectar igualdad-modelo pedagogico-02-11-10
Vel ra  co-nectar igualdad-modelo pedagogico-02-11-10Vel ra  co-nectar igualdad-modelo pedagogico-02-11-10
Vel ra co-nectar igualdad-modelo pedagogico-02-11-101gringo
 
Primeres pases a linkedin aplicacions
Primeres pases a linkedin aplicacionsPrimeres pases a linkedin aplicacions
Primeres pases a linkedin aplicacionsFundació CATIC
 
Elaboración de Documentos Electrónicos
Elaboración de Documentos ElectrónicosElaboración de Documentos Electrónicos
Elaboración de Documentos ElectrónicosMartín Martínez
 
Openatrium manual de uso
Openatrium   manual de usoOpenatrium   manual de uso
Openatrium manual de usogaby
 
Viaje a San Carlos 2º A Huerto Paraná
Viaje a San Carlos 2º A Huerto ParanáViaje a San Carlos 2º A Huerto Paraná
Viaje a San Carlos 2º A Huerto Paranámmilitello
 
Lo + Destacado del Último Mes en Marketing 2.0 y Redes Sociales (Marzo 2014)
Lo + Destacado del Último Mes en Marketing 2.0 y Redes Sociales (Marzo 2014)Lo + Destacado del Último Mes en Marketing 2.0 y Redes Sociales (Marzo 2014)
Lo + Destacado del Último Mes en Marketing 2.0 y Redes Sociales (Marzo 2014)Juan Merodio
 
Diez indicios que el comprador está pensando decir
Diez indicios que el comprador está pensando decirDiez indicios que el comprador está pensando decir
Diez indicios que el comprador está pensando decirSergio Otero
 
Trabajo lengua yago
Trabajo lengua yagoTrabajo lengua yago
Trabajo lengua yagopernutote
 
Febrer 2011
Febrer 2011Febrer 2011
Febrer 2011Apinas
 
1.1. introducción curso
1.1. introducción curso1.1. introducción curso
1.1. introducción cursoIgnacio Jara
 
Electroterapia
ElectroterapiaElectroterapia
Electroterapiaviclandher
 
Construcción de Plataformas Agropecuarias de Valor por Zonas Homogéneas, Fra...
Construcción de Plataformas Agropecuarias  de Valor por Zonas Homogéneas, Fra...Construcción de Plataformas Agropecuarias  de Valor por Zonas Homogéneas, Fra...
Construcción de Plataformas Agropecuarias de Valor por Zonas Homogéneas, Fra...TELEMATICA S.A.
 

En vedette (20)

Webquest
WebquestWebquest
Webquest
 
Mermelada de noni con guayaba
Mermelada de noni con guayabaMermelada de noni con guayaba
Mermelada de noni con guayaba
 
La PROFECIA de Fatima
La PROFECIA de FatimaLa PROFECIA de Fatima
La PROFECIA de Fatima
 
Agua del mar para la salud
Agua del mar para la saludAgua del mar para la salud
Agua del mar para la salud
 
Vel ra co-nectar igualdad-modelo pedagogico-02-11-10
Vel ra  co-nectar igualdad-modelo pedagogico-02-11-10Vel ra  co-nectar igualdad-modelo pedagogico-02-11-10
Vel ra co-nectar igualdad-modelo pedagogico-02-11-10
 
Primeres pases a linkedin aplicacions
Primeres pases a linkedin aplicacionsPrimeres pases a linkedin aplicacions
Primeres pases a linkedin aplicacions
 
Quienes somos
Quienes somosQuienes somos
Quienes somos
 
Suegra2
Suegra2Suegra2
Suegra2
 
Elaboración de Documentos Electrónicos
Elaboración de Documentos ElectrónicosElaboración de Documentos Electrónicos
Elaboración de Documentos Electrónicos
 
Postmodernidad y Dios
Postmodernidad y DiosPostmodernidad y Dios
Postmodernidad y Dios
 
Openatrium manual de uso
Openatrium   manual de usoOpenatrium   manual de uso
Openatrium manual de uso
 
Viaje a San Carlos 2º A Huerto Paraná
Viaje a San Carlos 2º A Huerto ParanáViaje a San Carlos 2º A Huerto Paraná
Viaje a San Carlos 2º A Huerto Paraná
 
Lo + Destacado del Último Mes en Marketing 2.0 y Redes Sociales (Marzo 2014)
Lo + Destacado del Último Mes en Marketing 2.0 y Redes Sociales (Marzo 2014)Lo + Destacado del Último Mes en Marketing 2.0 y Redes Sociales (Marzo 2014)
Lo + Destacado del Último Mes en Marketing 2.0 y Redes Sociales (Marzo 2014)
 
Diez indicios que el comprador está pensando decir
Diez indicios que el comprador está pensando decirDiez indicios que el comprador está pensando decir
Diez indicios que el comprador está pensando decir
 
Trabajo lengua yago
Trabajo lengua yagoTrabajo lengua yago
Trabajo lengua yago
 
Febrer 2011
Febrer 2011Febrer 2011
Febrer 2011
 
1.1. introducción curso
1.1. introducción curso1.1. introducción curso
1.1. introducción curso
 
Dr juan carlos aldave transplante células madre
Dr juan carlos aldave   transplante células madreDr juan carlos aldave   transplante células madre
Dr juan carlos aldave transplante células madre
 
Electroterapia
ElectroterapiaElectroterapia
Electroterapia
 
Construcción de Plataformas Agropecuarias de Valor por Zonas Homogéneas, Fra...
Construcción de Plataformas Agropecuarias  de Valor por Zonas Homogéneas, Fra...Construcción de Plataformas Agropecuarias  de Valor por Zonas Homogéneas, Fra...
Construcción de Plataformas Agropecuarias de Valor por Zonas Homogéneas, Fra...
 

Similaire à Programación Open GL ES en iPhone e iPod touch

Similaire à Programación Open GL ES en iPhone e iPod touch (20)

Opengl
OpenglOpengl
Opengl
 
Introducción a las librerías PyGame y PyOpenGL
Introducción a las librerías PyGame y PyOpenGLIntroducción a las librerías PyGame y PyOpenGL
Introducción a las librerías PyGame y PyOpenGL
 
Estela y naye
Estela y nayeEstela y naye
Estela y naye
 
Mini introopengl
Mini introopenglMini introopengl
Mini introopengl
 
Intro opengl
Intro openglIntro opengl
Intro opengl
 
Iniciación a OpenGL
Iniciación a OpenGLIniciación a OpenGL
Iniciación a OpenGL
 
manual de practicas de opengl
manual de practicas de openglmanual de practicas de opengl
manual de practicas de opengl
 
Proyecto de reneya terminado
Proyecto de reneya terminadoProyecto de reneya terminado
Proyecto de reneya terminado
 
Proyecto de reneya terminado
Proyecto de reneya terminadoProyecto de reneya terminado
Proyecto de reneya terminado
 
Manual de prácticas rivera y ruiz
Manual de prácticas rivera y ruizManual de prácticas rivera y ruiz
Manual de prácticas rivera y ruiz
 
Manual
ManualManual
Manual
 
Manual de practicas de dev c++
Manual de practicas de dev c++Manual de practicas de dev c++
Manual de practicas de dev c++
 
Manual de actividades
Manual de actividadesManual de actividades
Manual de actividades
 
Manual de prácticas belmonte & ponce
Manual de prácticas belmonte & ponce Manual de prácticas belmonte & ponce
Manual de prácticas belmonte & ponce
 
03 open gl_perspectivas
03 open gl_perspectivas03 open gl_perspectivas
03 open gl_perspectivas
 
Renee opengl karla
Renee opengl karlaRenee opengl karla
Renee opengl karla
 
Primitivas
PrimitivasPrimitivas
Primitivas
 
Practicas OpenglC++
Practicas OpenglC++Practicas OpenglC++
Practicas OpenglC++
 
Practicas para slider Rene Dominguez
Practicas para slider Rene Dominguez Practicas para slider Rene Dominguez
Practicas para slider Rene Dominguez
 
Proyecto de rene
Proyecto de reneProyecto de rene
Proyecto de rene
 

Dernier

Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfangelinebocanegra1
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2montoyagabriela340
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...RaymondCode
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfcastrodanna185
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSLincangoKevin
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx Emialexsolar
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....Aaron Betancourt
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidaddanik1023m
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfymiranda2
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETGermán Küber
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...OLGAMILENAMONTAEZNIO
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.marianarodriguezc797
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfOBr.global
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxPaolaCarolinaCarvaja
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfodalistar77
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfJoseAlejandroPerezBa
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosLCristinaForchue
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfalejandrogomezescoto
 

Dernier (20)

Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdf
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdf
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx E
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidad
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docx
 
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier FolchBEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdf
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
 
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura SilvaBEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
 

Programación Open GL ES en iPhone e iPod touch

  • 1. Gráficos 3D para iPhone con OpenGL ES Manuel R. Freire Interactive Fan
  • 2. © Electronic Arts, Inc. © ngmoco, Inc. © ngmoco, Inc. © Digital Chocolate, Inc. © Firemint © Chillingo Ltd. © Electronic Arts, Inc. © Digital Legends © SGN
  • 3. Índice • Introducción a OpenGL ES para iPhone • Operaciones básicas • El mundo 3D • Texturas • Shaders (sólo OpenGL ES 2.0)
  • 4. Introducción a OpenGL ES para iPhone
  • 5. OpenGL ES • OpenGL for Embedded Systems • API de gráficos 3D de bajo nivel • Permite especificar la geometría y propiedades de objetos (color, iluminación, texturas) • Subconjunto de OpenGL
  • 6. Versiones de OpenGL ES Hardware Dispositivos OpenGL iPhone OpenGL ES Función fija iPhone 3G 1.5 1.1 iPod touch OpenGL ES Programable iPhone 3G S 2.0 2.0 (shaders)
  • 7. Un mundo de vértices • Los objetos se definen mediante conjuntos de vértices • Cada vértice puede tener asociada información de color y textura • Los vértices se agrupan en primitivas: triángulos, puntos, líneas, tiras de triángulos, etc.
  • 8. Primitivas Primitiva Descripción Conjunto de puntos GL_POINTS (N vértices → N puntos) Conjunto de segmentos conectados GL_LINE_STRIP (N vértices → N-1 segmentos) Conjunto cíclico de segmentos conectados GL_LINE_LOOP (N vértices → N segmentos) Conjunto de segmentos desconectados GL_LINES (N vértices → N/2 segmentos) Tira de triángulos GL_TRIANGLE_STRIP (N vértices → N-2 triángulos) Abanico de triángulos GL_TRIANGLE_FAN (N vértices → N-2 triángulos) Conjunto de triángulos GL_TRIANGLES (N vértices → N/3 triángulos)
  • 9. Ejemplo: Cuadrado v3 = (0, 1, 0) v2 = (1, 1, 0) T1: (v0, v2, v3) T2: (v0, v1, v2) v0 = (0, 0, 0) v1 = (1, 0, 0) • 4 vértices • Primitivas: ➡ Opción 1: dos triángulos ➡ Opción 2: abanico de triángulos ➡ Opción 3: tira de triángulos
  • 10. Anatomía de una aplicación 3D (simplificada) Plantilla “OpenGL ES Application” de XCode 1. Inicializar OpenGL ES 1.1. Crear un contexto OpenGL ES (EAGLContext) 1.2. Asociar el contexto a una vista (EAGLView) 2. Bucle (cada frame): 2.1. Actualizar estado de la aplicación 2.2. Dibujar
  • 12. Borrar la pantalla • Pinta todo el buffer de un único color • Se hace (al menos) al inicio de cada frame
  • 13. Borrar la pantalla • Pinta todo el buffer de un único color • Se hace (al menos) al inicio de cada frame glClearColor(0.0f, 1.0f, 0.0f, 1.0f);
  • 14. Borrar la pantalla • Pinta todo el buffer de un único color • Se hace (al menos) al inicio de cada frame glClearColor(0.0f, 1.0f, 0.0f, 1.0f); glClear(GL_COLOR_BUFFER_BIT);
  • 15. Dibujar primitivas • Los vértices se almacenan en un array y se dibujan con glDrawArrays
  • 16. Dibujar primitivas • Los vértices se almacenan en un array y se dibujan con glDrawArrays glEnableClientState(GL_VERTEX_ARRAY);
  • 17. Dibujar primitivas • Los vértices se almacenan en un array y se dibujan con glDrawArrays glEnableClientState(GL_VERTEX_ARRAY); const GLfloat vertices[] = { -0.5f, -0.5f, 0.5f, -0.5f, -0.5f, 0.5f, 0.5f, 0.5f, }; glVertexPointer(2, GL_FLOAT, 0, vertices);
  • 18. Dibujar primitivas • Los vértices se almacenan en un array y se dibujan con glDrawArrays glEnableClientState(GL_VERTEX_ARRAY); const GLfloat vertices[] = { -0.5f, -0.5f, 0.5f, -0.5f, -0.5f, 0.5f, 0.5f, 0.5f, }; glVertexPointer(2, GL_FLOAT, 0, vertices); glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
  • 19. Seleccionar un color • El color se define en RGBA • Por defecto, las operaciones que utilizan color utilizan el último color seleccionado
  • 20. Seleccionar un color • El color se define en RGBA • Por defecto, las operaciones que utilizan color utilizan el último color seleccionado glColor4f(1.0f, 1.0f, 1.0f, 1.0f);
  • 21. Seleccionar un color • El color se define en RGBA • Por defecto, las operaciones que utilizan color utilizan el último color seleccionado glColor4f(1.0f, 1.0f, 1.0f, 1.0f); 1 dibujaObjeto1();
  • 22. Seleccionar un color • El color se define en RGBA • Por defecto, las operaciones que utilizan color utilizan el último color seleccionado glColor4f(1.0f, 1.0f, 1.0f, 1.0f); 1 dibujaObjeto1(); glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
  • 23. Seleccionar un color • El color se define en RGBA • Por defecto, las operaciones que utilizan color utilizan el último color seleccionado glColor4f(1.0f, 1.0f, 1.0f, 1.0f); 1 dibujaObjeto1(); glColor4f(1.0f, 0.0f, 0.0f, 1.0f); 2 dibujaObjeto2();
  • 24. Seleccionar un color • El color se define en RGBA • Por defecto, las operaciones que utilizan color utilizan el último color seleccionado glColor4f(1.0f, 1.0f, 1.0f, 1.0f); 1 dibujaObjeto1(); glColor4f(1.0f, 0.0f, 0.0f, 1.0f); 2 dibujaObjeto2(); dibujaObjeto3(); 3
  • 26. El mundo 3D en OpenGL • OpenGL representa el mundo 3D a través de matrices a las que se aplican transformaciones (multiplicaciones) • Dos matrices fundamentales: ‣ Modelo-vista (GL_MODELVIEW) ‣ Proyección (GL_PROJECTION) • Las transformaciones se aplican sobre la matriz activa
  • 27. Analogía cámara fotográfica • Elección de la posición de la cámara Matriz modelo-vista • Elección de la disposición de los objetos • Elección de la lente Matriz de proyección
  • 28. La matriz modelo-vista • Define la posición y orientación de los objetos • Tres operaciones: traslación, rotación y escalado Traslación Rotación Escalado
  • 29. Ejemplo: Traslación void glTranslatef(GLfloat x, GLfloat y, GLfloat z) void glTranslatex(GLfixed x, GLfixed y, GLfixed z) glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(10.0f, 20.0f, 0.0f); dibujaObjeto(); /* posición: (10.0, 20.0, 0.0) */
  • 30. Ejemplo: Rotación void glRotatef(GLfloat angle, GLfloat x, GLfloat y, GLfloat z) void glRotatex(GLfixed angle, GLfixed x, GLfixed y, GLfixed z) glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glRotatef(90.0f, 0.0f, 0.0f, 1.0f); dibujaObjeto(); /* objeto girado 90º respecto a Z */
  • 31. Ejemplo: Escalado void glScalef(GLfloat x, GLfloat y, GLfloat z) void glScalex(GLfixed x, GLfixed y, GLfixed z) glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(10.0f, 10.0f, -10.0f); glScalef(2.0f, 2.0f, 2.0f); dibujaObjeto1(); /* objeto x2 en (10.0, 10.0, -10.0) */ glLoadIdentity(); glScalef(2.0f, 2.0f, 2.0f); glTranslatef(10.0f, 10.0f, -10.0f); dibujaObjeto2(); /* OJO: objeto x2 en (20.0, 20.0, -20.0) */
  • 32. Ejemplo: Múltiples objetos void glPushMatrix() void glPopMatrix() glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(0.0f, 0.0f, -10.0f); glPushMatrix(); glTranslatef(5.0f, 5.0f, 0.0f); dibujaObjeto1(); /* posición: (5.0, 5.0, -10.0) */ glPopMatrix(); glPushMatrix(); dibujaObjeto2(); /* posición: (0.0, 0.0, -10.0) */ glPopMatrix();
  • 33. La matriz de proyección • Determina cómo se va a proyectar la geometría 3D sobre la pantalla 2D • Planos de corte (clipping) Ortográfica Perspectiva
  • 34. Ejemplo: Ortográfica void glOrthof(GLfloat left, GLfloat right, GLfloat bottom, GLfloat top, GLfloat near, GLfloat far) void glOrthox(GLfixed left, GLfixed right, GLfixed bottom, GLfixed top, GLfixed near, GLfixed far) glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrthof(-1.0f, 1.0f, -1.5f, 1.5f, -1.0f, 1.0f);
  • 35. Ejemplo: Perspectiva void glFrustumf(GLfloat left, GLfloat right, GLfloat bottom, GLfloat top, GLfloat near, GLfloat far) void glFrustumx(GLfixed left, GLfixed right, GLfixed bottom, GLfixed top, GLfixed near, GLfixed far) glMatrixMode(GL_PROJECTION); glLoadIdentity(); float aspect = width / height; float fov = 50.0f; float near = 0.5f; float far = 20.0f; float top = near * tan(fov * PI / 360.0f); float bottom = -top; float left = bottom * aspect; float right = top * aspect; glFrustumf(left, right, bottom, top, near far);
  • 36. Anatomía de una aplicación 3D (actualizada) 1. Inicializar OpenGL ES 1.1. Crear un contexto OpenGL ES (EAGLContext) 1.2. Asociar el contexto a una vista (EAGLView) 1.3. Inicializar la matriz de proyección con glOrtho o glFrustum 2. Bucle (cada frame): 2.1. Actualizar estado de la aplicación 2.2. Dibujar utilizando OpenGL - Borrar la pantalla con glClear - Situar la cámara transformando la matriz modelo-vista - Para cada objeto: Situar el objeto transformando la matriz modelo-vista Dibujar las primitivas del objeto
  • 38. Texturas • Imágenes 2D que se dibujan sobre las primitivas • Son un aspecto crítico en aplicaciones 3D para iPhone por su tamaño en memoria y tiempo de carga
  • 39. Cargar una textura 1. Cargar la imagen con CGBitmapContextCreate (ver clase Texture2D, ejemplo “Crash Landing”) 2. Definir los parámetros de filtrado 3. Crear un objeto textura en OpenGL con glTexImage2D img = cargarImagen(“imagen.png”); GLuint texName; glGenTextures(1, &texName); glBindTexture(GL_TEXTURE_2D, texName); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, imgWidth, imgHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, img); free(img);
  • 40. Utilizar una textura 1. Activar las texturas con glEnable(GL_TEXTURE_2D) 2. Definir las coordenadas de la textura, que afectan a cómo se acopla la textura a los vértices 3. Dibujar la primitiva
  • 41. Utilizar una textura 1. Activar las texturas con glEnable(GL_TEXTURE_2D) 2. Definir las coordenadas de la textura, que afectan a cómo se acopla la textura a los vértices 3. Dibujar la primitiva glEnable(GL_TEXTURE_2D); /* sólo una vez */
  • 42. Utilizar una textura 1. Activar las texturas con glEnable(GL_TEXTURE_2D) 2. Definir las coordenadas de la textura, que afectan a cómo se acopla la textura a los vértices 3. Dibujar la primitiva glEnable(GL_TEXTURE_2D); /* sólo una vez */ glBindTexture(GL_TEXTURE_2D, texName);
  • 43. Utilizar una textura 1. Activar las texturas con glEnable(GL_TEXTURE_2D) 2. Definir las coordenadas de la textura, que afectan a cómo se acopla la textura a los vértices 3. Dibujar la primitiva glEnable(GL_TEXTURE_2D); /* sólo una vez */ glBindTexture(GL_TEXTURE_2D, texName); glVertexPointer(3, GL_FLOAT, 0, vertices);
  • 44. Utilizar una textura 1. Activar las texturas con glEnable(GL_TEXTURE_2D) 2. Definir las coordenadas de la textura, que afectan a cómo se acopla la textura a los vértices 3. Dibujar la primitiva glEnable(GL_TEXTURE_2D); /* sólo una vez */ glBindTexture(GL_TEXTURE_2D, texName); glVertexPointer(3, GL_FLOAT, 0, vertices); GLfloat texCoordinates[] = { 0, 1.0f, 0, 0, 1.0f, 0, 1.0f, 1.0f }; glTexCoordPointer(2, GL_FLOAT, 0, texCoordinates);
  • 45. Utilizar una textura 1. Activar las texturas con glEnable(GL_TEXTURE_2D) 2. Definir las coordenadas de la textura, que afectan a cómo se acopla la textura a los vértices 3. Dibujar la primitiva glEnable(GL_TEXTURE_2D); /* sólo una vez */ glBindTexture(GL_TEXTURE_2D, texName); glVertexPointer(3, GL_FLOAT, 0, vertices); GLfloat texCoordinates[] = { 0, 1.0f, 0, 0, 1.0f, 0, 1.0f, 1.0f }; glTexCoordPointer(2, GL_FLOAT, 0, texCoordinates); glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
  • 47. Shaders • Programas ejecutados por la GPU • OpenGL ES 2.0 incluye dos tipos: ‣ Vertex shaders: manipulan vértices ‣ Fragment shaders: manipulan píxeles • Se programan en OpenGL ES Shading Language
  • 48. Vertex shaders • Procesan los vértices especificados con glDrawArrays • El shader está formado por el conjunto de operaciones que se aplicarán a cada vértice • Aplicaciones típicas: - Deformación de superficies - Suavizado de elementos articulados para animación de personajes - Etc.
  • 49. Fragment shaders • Procesan el color de los píxeles (pixel shaders) • Aplicaciones típicas: - Bump mapping - Reflejos - Cartoon-shading - Etc.
  • 50. Creación de shaders • Se crea un nuevo objeto shader y se compila el código • También se puede cargar el shader precompilado (ShaderBinary) const char *shaderFiles[] = { “shader1.glsl”, “shader2.glsl”, }; const int shaderFilesLength[] = { NULL, NULL, }; uint shader = CreateShader(VERTEX_SHADER); /* o FRAGMENT_SHADER */ ShaderSource(shader, 2, shaderFiles, shaderFilesLength); CompileShader(shader);
  • 51. Utilización de shaders • Los shaders se agrupan en una entidad común llamada programa • Una vez se ha creado el programa y añadido los shaders, se ejecuta con UseProgram uint program = CreateProgram(); AttachShader(program, shader); LinkProgram(program); UseProgram(program);
  • 52. Más información • OpenGL ES Programming for iPhone, iPhone Reference Library, http://developer.apple.com/iphone • OpenGL ES, http://www.khronos.org/opengles • T. Akenine-Möller, E. Haines and N. Hoffman, Real-Time Rendering, A. K. Peters Ltd., 3rd edition
  • 53. ¡Gracias! Manuel R. Freire manuel@interactive-fan.com