# Gráficos de alto rendimiento en Android El principal objetivo de la sesión consiste en hacer una introducción a los componentes de la interfaz de Android que nos darán soporte para poder reproducir gráficos de alto rendimiento (vídeo o gráficos 3D). ## *Surface View* Para mostrar gráficos propios podríamos usar un componente que herede de `View`. Estos componentes funcionan bien si no necesitamos realizar repintados continuos o mostrar gráficos 3D. Sin embargo, en el caso de tener una aplicación con una gran carga gráfica, como puede ser un videojuego, un reproductor de vídeo, o una aplicación que muestre gráficos 3D, en lugar de `View` deberemos utilizar `SurfaceView`. Esta última clase nos proporciona una superficie en la que podemos dibujar desde un hilo en segundo plano, lo cual libera al hilo principal de la aplicación de la carga gráfica. Vamos a ver en primer lugar cómo crear subclases de `SurfaceView`, y las diferencias existentes con `View`. Para crear una vista con `SurfaceView` tendremos que crear una nueva subclase de dicha clase (en lugar de `View`). Pero en este caso no bastará con definir el método `onDraw`, ahora deberemos crearnos un hilo independiente y proporcionarle la superficie en la que dibujar (`SurfaceHolder`). Además, en nuestra subclase de `SurfaceView` también implementaremos la interfaz `SurfaceHolder.Callback` que nos permitirá estar al tanto de cuando la superficie se crea, cambia, o se destruye. Cuando la superficie sea creada pondremos en marcha nuestro hilo de dibujado, y lo pararemos cuando la superficie sea destruida. A continuación mostramos un ejemplo de dicha clase: ```java public class VistaSurface extends SurfaceView implements SurfaceHolder.Callback { HiloDibujo hilo = null; public VistaSurface(Context context) { super(context); SurfaceHolder holder = this.getHolder(); holder.addCallback(this); } public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { // La superficie ha cambiado (formato o dimensiones) } public void surfaceCreated(SurfaceHolder holder) { hilo = new HiloDibujo(holder, this); hilo.start(); } public void surfaceDestroyed(SurfaceHolder holder) { hilo.detener(); try { hilo.join(); } catch (InterruptedException e) { } } } ``` Como vemos, la clase `SurfaceView` simplemente se encarga de obtener la superficie y poner en marcha o parar el hilo de dibujado. En este caso la acción estará realmente en el hilo, que es donde especificaremos la forma en la que se debe dibujar el componente. Vamos a ver a continuación cómo podríamos implementar dicho hilo: ```java class HiloDibujo extends Thread { SurfaceHolder holder; VistaSurface vista; boolean continuar = true; public HiloDibujo(SurfaceHolder holder, VistaSurface vista) { this.holder = holder; this.vista = vista; continuar = true; } public void detener() { continuar = false; } @Override public void run() { while (continuar) { Canvas c = null; try { c = holder.lockCanvas(null); synchronized (holder) { // Dibujar aqui los graficos c.drawColor(Color.BLUE); } } finally { if (c != null) { holder.unlockCanvasAndPost(c); } } } } } ``` Podemos ver que en el bucle principal de nuestro hilo obtenermos el lienzo (`Canvas`) a partir de la superficie (`SurfaceHolder`) mediante el método `lockCanvas`. Esto deja el lienzo bloqueado para nuestro uso, por ese motivo es importante asegurarnos de que siempre se desbloquee. Para tal fin hemos puesto `unlockCanvasAndPost` dentro del bloque `finally`. Además debemos siempre dibujar de forma sincronizada con el objeto `SurfaceHolder`, para así evitar problemas de concurrencia en el acceso a su lienzo. Para aplicaciones como videojuegos 2D sencillos un código como el anterior puede ser suficiente (la clase `View` sería demasiado lenta para un videojuego). Sin embargo, lo realmente interesante es utilizar `SurfaceView` junto a OpenGL, para así poder mostrar gráficos 3D, o escalados, rotaciones y otras transformaciones sobre superficies 2D de forma eficiente. A continuación veremos un ejemplo de cómo utilizar OpenGL (concretamente OpenGL ES) vinculado a nuestra `SurfaceView`. Realmente la implementación de nuestra clase que hereda de `SurfaceView` no cambiará, simplemente modificaremos nuestro hilo, que es quien realmente realiza el dibujado. Toda la inicialización de OpenGL deberá realizarse dentro de nuestro hilo (en el método `run`), ya que sólo se puede acceder a las operaciones de dicha librería desde el mismo hilo en el que se inicializó. En caso de que intentásemos acceder desde otro hilo obtendríamos un error indicando que no existe ningún contexto activo de OpenGL. En este caso nuestro hilo podría contener el siguiente código: ```java public void run() { initEGL(); initGL(); Triangulo3D triangulo = new Triangulo3D(); float angulo = 0.0f; while(continuar) { gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT); // Dibujar gráficos aquí gl.glMatrixMode(GL10.GL_MODELVIEW); gl.glLoadIdentity(); gl.glTranslatef(0, 0, -5.0f); gl.glRotatef(angulo, 0, 1, 0); gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); triangulo.dibujar(gl); egl.eglSwapBuffers(display, surface); angulo += 1.0f; } } ``` En primer lugar debemos inicializar la interfaz EGL, que hace de vínculo entre la plataforma nativa y la librería OpenGL: ```java EGL10 egl; GL10 gl; EGLDisplay display; EGLSurface surface; EGLContext contexto; EGLConfig config; private void initEGL() { egl = (EGL10)EGLContext.getEGL(); display = egl.eglGetDisplay(EGL10.EGL_DEFAULT_DISPLAY); int [] version = new int[2]; egl.eglInitialize(display, version); int [] atributos = new int[] { EGL10.EGL_RED_SIZE, 5, EGL10.EGL_GREEN_SIZE, 6, EGL10.EGL_BLUE_SIZE, 5, EGL10.EGL_DEPTH_SIZE, 16, EGL10.EGL_NONE }; EGLConfig [] configs = new EGLConfig[1]; int [] numConfigs = new int[1]; egl.eglChooseConfig(display, atributos, configs, 1, numConfigs); config = configs[0]; surface = egl.eglCreateWindowSurface(display, config, holder, null); contexto = egl.eglCreateContext(display, config, EGL10.EGL_NO_CONTEXT, null); egl.eglMakeCurrent(display, surface, surface, contexto); gl = (GL10)contexto.getGL(); } ``` A continuación debemos proceder a la inicialización de la interfaz de la librería OpenGL: ```java private void initGL() { int width = vista.getWidth(); int height = vista.getHeight(); gl.glViewport(0, 0, width, height); gl.glMatrixMode(GL10.GL_PROJECTION); gl.glLoadIdentity(); float aspecto = (float)width/height; GLU.gluPerspective(gl, 45.0f, aspecto, 1.0f, 30.0f); gl.glClearColor(0.5f, 0.5f, 0.5f, 1); } ``` Una vez hecho esto, ya sólo nos queda ver cómo dibujar una malla 3D. Vamos a ver como ejemplo el dibujo de un triángulo: ```java public class Triangulo3D { FloatBuffer buffer; float[] vertices = { -1f, -1f, 0f, 1f, -1f, 0f, 0f, 1f, 0f }; public Triangulo3D() { ByteBuffer bufferTemporal = ByteBuffer .allocateDirect(vertices.length*4); bufferTemporal.order(ByteOrder.nativeOrder()); buffer = bufferTemporal.asFloatBuffer(); buffer.put(vertices); buffer.position(0); } public void dibujar(GL10 gl) { gl.glVertexPointer(3, GL10.GL_FLOAT, 0, buffer); gl.glDrawArrays(GL10.GL_TRIANGLES, 0, 3); } } ``` Para finalizar, es importante que cuando la superficie se destruya se haga una limpieza de los recursos utilizados por OpenGL: ```java private void cleanupGL() { egl.eglMakeCurrent(display, EGL10.EGL_NO_SURFACE, EGL10.EGL_NO_SURFACE, EGL10.EGL_NO_CONTEXT); egl.eglDestroySurface(display, surface); egl.eglDestroyContext(display, contexto); egl.eglTerminate(display); } ``` Podemos llamar a este método cuando el hilo se detenga (debemos asegurarnos que se haya detenido llamando a `join` previamente). A partir de Android 1.5 se incluye la clase `GLSurfaceView`, que ya incluye la inicialización del contexto GL y nos evita tener que hacer esto manualmente. Esto simplificará bastante el uso de la librería. Vamos a ver a continuación un ejemplo de cómo trabajar con dicha clase. En este caso ya no será necesario crear una subclase de `GLSurfaceView`, ya que la inicialización y gestión del hilo de OpenGL siempre es igual. Lo único que nos interesará cambiar es lo que se muestra en la escena. Para ello deberemos crear una subclase de `GLSurfaceViewRenderer` que nos obliga a definir los siguientes métodos: ```java public class MiRenderer implements GLSurfaceView.Renderer { Triangulo3D triangulo; float angulo; public MiRenderer() { triangulo = new Triangulo3D(); angulo = 0; } public void onSurfaceCreated(GL10 gl, EGLConfig config) { } public void onSurfaceChanged(GL10 gl, int w, int h) { // Al cambiar el tamaño cambia la proyección float aspecto = (float)w/h; gl.glViewport(0, 0, w, h); gl.glMatrixMode(GL10.GL_PROJECTION); gl.glLoadIdentity(); GLU.gluPerspective(gl, 45.0f, aspecto, 1.0f, 30.0f); } public void onDrawFrame(GL10 gl) { gl.glClearColor(0.5f, 0.5f, 0.5f, 1.0f); gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT); // Dibujar gráficos aquí gl.glMatrixMode(GL10.GL_MODELVIEW); gl.glLoadIdentity(); gl.glTranslatef(0, 0, -5.0f); gl.glRotatef(angulo, 0, 1, 0); gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); triangulo.dibujar(gl); angulo += 1.0f; } } ``` Podemos observar que será el método `onDrawFrame` en el que deberemos escribir el código para mostrar los gráficos. Con hacer esto será suficiente, y no tendremos que encargarnos de crear el hilo ni de inicializar ni destruir el contexto. Para mostrar estos gráficos en la vista deberemos proporcionar nuestro *renderer* al objeto `GLSurfaceView`: ```java vista = new GLSurfaceView(this); vista.setRenderer(new MiRenderer()); setContentView(vista); ``` Por último, será importante transmitir los eventos `onPause` y `onResume` de nuestra actividad a la vista de OpenGL, para así liberar a la aplicación de la carga gráfica cuando permanezca en segundo plano. El código completo de la actividad quedaría como se muestra a continuación: ```java public class MiActividad extends Activity { GLSurfaceView vista; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); vista = new GLSurfaceView(this); vista.setRenderer(new MiRenderer()); setContentView(vista); } @Override protected void onPause() { super.onPause(); vista.onPause(); } @Override protected void onResume() { super.onResume(); vista.onResume(); } } ``` ## Ejercicios Antes de empezar a crear los proyectos, debes descargarte las plantillas desde el repositorio `mastermoviles-multimedia-android` de *bitbucket*. En este repositorio se encuentran todas las plantillas que utilizaremos en los ejercicios Android de este módulo. ### Gráficos 3D En las plantillas de la sesión tenemos una aplicación `Graficos` en la que podemos ver un ejemplo completo de cómo utilizar `SurfaceView` tanto para gráficos 2D con el `Canvas` como para gráficos 3D con OpenGL, y también de cómo utilizar `GLSurfaceView`. * Si ejecutamos la aplicación veremos un triángulo rotando alrededor del eje Y. Observar el código fuente, y modificarlo para que el triángulo rote alrededor del eje X, en lugar de Y. * También podemos ver que hemos creado, además de la clase `Triangulo3D`, la clase `Cubo3D`. Modificar el código para que en lugar de mostrar el triángulo se muestre el cubo. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://mastermoviles.gitbook.io/graficos-y-multimedia/graficos-de-alto-rendimiento-en-android.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.