Los gráficos en Android, la clase Drawable, Canvas, Paint, Path, Suraceview, Glsurfaceview, introducción a OpenGL Es

2. PROGRAMACIÓN MULTIMEDIA
Y
DISPOSITIVOS MÓVILES

4. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
MULTIMEDIA

5. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
GRÁFICOS

6. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
SURFACEVIEW
CANVAS
VIEW

7. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
VISTAS PERSONALIZADAS
public class Actividad116 extends ActionBarActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
VistaPropia grafico = new VistaPropia(this);
setContentView(grafico);
}
private class VistaPropia extends View {
public VistaPropia (Context context) { super(context); }
@Override
protected void onDraw(Canvas canvas) {
CÓDIGO A EJECUTAR
}
}
}

8. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWABLE

9. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWABLE
La clase Drawable es una abstracción
que representa “algo que puede ser
dibujado”. Esta clase se extiende
para definir gran variedad de objetos
gráficos más específicos.

10. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
NinePatchDrawable
AnimationDrawable
TransitionDrawable
GradientDrawable
StateListDrawable
LayerDrawable
DRAWABLE: EXTENSIONES
ShapeDrawable
BitmapDrawable

11. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
Drawable.Callback.
setLevel(int)
setState(int[])
getPadding(Rect)
getIntrinsicWidth()
DRAWABLE: MÉTODOS
getIntrinsicHeight()
SetBounds(x1,y1,x2,y2)

12. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
CANVAS: TAMAÑO MATRIZ
int getWidth()
int getHeight()

13. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
BitmapDrawable

14. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWABLE: BITMAPDRAWABLE
Se añaden gráficos incluidos en la
carpeta res/drawable del proyecto.
El SDK de Android soporta los
formatos PNG, JPG y GIF.

15. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWABLE: BITMAPDRAWABLE
private Drawable imagen;
Resources res = context.getResources();
imagen = res.getDrawable(R.drawable.imagen);
imagen.setBounds(30,30,200,200);
imagen.draw(canvas);

16. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
GrandientDrawable

17. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWABLE: GRANDIENTDRAWABLE
Este tipo de objetos gráficos es
utilizado con frecuencia como fondo
de botones o de pantalla. El
parámetro angle indica la dirección
del degradado. Solo se permiten los
ángulos 0, 90, 180 y 270

18. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWABLE: GRANDIENTDRAWABLE
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#FFFFFF"
android:endColor="#0000FF"
android:angle="270" />
</shape>

19. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWABLE: GRANDIENTDRAWABLE
setBackgroundResource(R.drawable.degradado);

20. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWABLE: GRANDIENTDRAWABLE
android:background="@drawable/degradado"

21. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TransitionDrawable

22. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWABLE: TRANSITIONDRAWABLED
Un TransitionDrawable es una
extensión de LayerDrawables que
permite un efecto de fundido
entre la primera y la segunda capa.

23. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWABLE: TRANSITIONDRAWABLED
Para iniciar la transición hay que llamar
a startTransition(int tiempo). Para volver
a visualizar la primera capa hay que
llamar a resetTransition().

24. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWABLE: TRANSITIONDRAWABLED
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ImageView image = new ImageView(this);
setContentView(image);
TransitionDrawable transition = (TransitionDrawable)
getResources().getDrawable(R.drawable.transicion);
image.setImageDrawable(transition);
transition.startTransition(2000);
}

25. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ShapeDrawable

26. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWABLE: SHAPEDRAWABLE
Permite crear un gráfico
dinámicamente mediante
primitivas vectoriales a partir de
formas básicas. Un ShapeDrawable
es una extensión de Drawable.

27. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWABLE: TRANSITIONDRAWABLED
private ShapeDrawable imagen;
imagen = new ShapeDrawable(new OvalShape());
imagen.getPaint().setColor(0xff0000ff);
imagen.setBounds(10, 10, 310, 60);
imagen.draw(canvas);

28. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
AnimationDrawable

29. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWABLE: ANIMATIONDRAWABLE
Animación sencilla creada a partir
de una sucesión de fotogramas.

30. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWABLE: ANIMATIONDRAWABLE
<animation-list
xmlns:android= "http://schemas.android.com/apk/res/android"
android:oneshot= "false">
<item android:drawable="@drawable/imagen1"
android:duration="200" />
<item android:drawable="@drawable/imagen2"
android:duration="200" />
<item android:drawable="@drawable/imagen3"
android:duration="200" />
</animation-list>

31. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWABLE: ANIMATIONDRAWABLE
AnimationDrawable animacion;
@Override public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
animacion=(AnimationDrawable)getResources().getDrawable(R.drawable.animacion);
ImageView vista = new ImageView(this);
vista.setImageDrawable(animacion);
vista.setOnClickListener(new OnClickListener() {
public void onClick(View view) {
animacion.start();
}
});
setContentView(vista);
}

32. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
CANVAS

33. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
CANVAS
La clase Canvas representa una
superficie donde dibujar. Dispone de
una serie de métodos que permiten
representar líneas, círculos, texto…

34. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
CANVAS
Para dibujar en un Canvas
necesitaremos un pincel (Paint)
donde definiremos el color, grosor
de trazo, transparencia,…

35. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
CANVAS
También podremos definir una matriz
de 3x3 (Matrix) que nos permitirá
transformar coordenadas aplicando
una translación, escala o rotación.

36. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
IMÁGENES
RELLENOS
TEXTO
CANVAS
LINEAS Y ARCOS
FIGURAS GEOMÉTRICAS

37. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
drawPoints(float[] pts, Paint pincel)
drawPoint(float x, float y, Paint pincel)
drawRect(RectF rect, Paint pincel)
CANVAS: FIGURAS GEOMÉTRICAS
drawOval(RectF ovalo, Paint pincel)
drawCircle(float cx, float cy, float radio, Paint pincel)

38. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
drawPath(Path trazo, Paint pincel)
drawArc(RectF ovalo,floatiniAngulo,floatangulo,booleanusarCentro,Paint pincel)
CANVAS: LINEAS Y ARCOS
drawLines(float[] puntos, Paint pincel)
drawLine(float iniX, float iniY, float finX, float finY, Paint pincel)

39. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
drawPosText(String texto,float[]posicion,Paintpincel)
CANVAS: TEXTO
drawTextOnPath(Stringtexto,Pathtrazo,floatdesplazamHor,floatdesplazamVert,Paintpincel)
drawText(String texto, float x, float y, Paint pincel)

40. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
drawPaint(Paint pincel)
CANVAS: RELLENOS
drawARGB(int alfa, int rojo, int verde, int azul)
drawColor(int color)

41. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
CANVAS: IMÁGENES
drawBitmap(Bitmap bitmap, Matrix matriz, Paint pincel)

42. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
boolean clipPath(Path trazo)
CANVAS: DEFINICIÓN DE CLIP
boolean clipRegion(Region region)
boolean clipRect(RectF rectangulo)
Solo se dibujará en el área indicada

43. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
skew(float despazX, float despazY)
rotate(float grados, float centroX, float centroY)
scale(float escalaX, float escalaY)
translate(float despazX, float despazY)
concat(Matrix matriz)
CANVAS: MATRIZ DE TRANSFORMACIÓN
Matrix getMatrix()
setMatrix(Matrix matriz)

44. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PAINT

45. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PAINT
La mayoría de los métodos de la
clase Canvas utilizan un parámetro
de tipo Paint. Esta clase nos permite
definir el color, estilo o grosor del
trazado de un gráfico vectorial.

46. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PAINT: COLOR
Color android representa los colores
utilizando enteros de 32 bits,
divididos en cuatro campos de 8
bits: alfa, rojo, verde y azul (ARGB).
setColor(int Color); Nos permite
especificar el color

47. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
0x7F00FF00
Color.argb (127,0,255,0)
Color.BLUE
PAINT: COLOR

48. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
setShadowLayer(float radio, float dx, float dy, int color)
setStyle( Paint.Style estilo)
setStrokeWidth(float grosor)
PAINT: TRAZADO

49. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
setUnerlineText(boolean subrayado)
setTextSkewX (float inclinaciónX)
setTextScaleX(float escalaX)
setTypeface(Typeface fuente)
setTextSize(float tamaño)
setTextAlign(Paint.Align justif)
PAINT: TEXTO

50. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PATH

51. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PATH
La clase Path permite definir un trazado
a partir de segmentos de línea y curvas.
Una vez definido puede ser dibujado con
canvas.drawPath(Path, Paint). Un Path
también puede ser utilizado para dibujar
un texto sobre el trazado marcado.

52. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
close()
reset()
offset(float dx, float dy)
addCircle(floatx, float y, float radius,Path.Directiondir)
addRect(float left, float top, float right, float
bottom, Path.Direction dir)
PATH : MÉTODOS
lineTo(float x, float y)
moveTo(float x, float y)

53. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
SURFACEVIEW

54. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
SURFACEVIEW
Proporciona una superficie de dibujo
dedicado incrustado dentro de una
jerarquía de vistas. Proporciona un
modo más directo de renderizar los
objetos en pantalla.

55. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
surfaceDestroyed
surfaceChanged
surfaceCreated
SURFACEVIEW: SURFACEHOLDER.CALLBACK

56. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
SURFACEVIEW
CREAR
SURFACEVIEW
OBTENER
SURFACEHOLDER
INSTALAR
SURFACEHOLDER
CALLBACK

57. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
MÁS CONSUMO
MÁ RÁPIDO
VARIOS HILOS
SURFACEVIEW

58. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
GLSURFACEVIEW

59. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
OPENGL ES

60. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
GLSURFACEVIEW: OPENGL
OpenGL® (Open Graphics Library), es una
especificación estándar multiplataforma que
define una API, que nos permite producir y
manipular gráficos 2D y 3D para dibujar
escenas complejas a partir de primitivas
geométricas simples.

61. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
GLSURFACEVIEW: OPENGL

62. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
GLSURFACEVIEW: OPENGL ES
OpenGL® ES (OpenGL for Embedded
Systems) es una variante de la API OpenGL,
diseñada para sistemas integrados (tiempos
de cálculo más cortos), como los dispositivos
móviles o videoconsolas, y es la soportada
por Android.

63. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ES INDEPENDIENTE DEL HARDWARE
PERMITE PROGRAMAR GRÁFICOS 3D COMPLETOS
MULTIPLATAFORMA Y MULTILENGUAJE
INCORPORADA CON LA API DE ANDROID
DA HERRAMIENTAS PARA REALIZAR TRANSFORMACIONES
GLSURFACEVIEW: OPENGL ES
CARACTERÍSTICAS
PERMITE DIBUJAR FIGURAS GEOMÉTRICAS BÁSICAS
DISTRIBUCIÓN LIBRE

64. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
GLSurfaceView.Renderer
GLSurfaceView
GLSURFACEVIEW
Clase que proporciona una vista o View, para
la representación y manipulación de objetos
mediante el uso de la API OpenGL
Interfaz que implementa los métodos para
construir los gráficos en la vista
proporcionada por la clase GLSurfaceView

65. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
GLSURFACEVIEW: PROCESO
DECLARAMOS
GLSURFACEVIEW
IMPLEMENTAMOS
LA INTERFAZ
RENDERER
INPORTAMOS
PACKAGES
OBJETO GRÁFICO
DEFINIMOS
CONSTRUCTOR
FORMA GRÁFICA
IMPLEMENTAMOS LOS MÉTODOS QUE
CONSTRUIRAN LOS OBJETOS

66. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
onDrawFrame
onSurfaceChanged
onSurfaceCreated
GLSURFACEVIEW: MÉTODOS

67. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
GLSURFACEVIEW: MÉTODOS
onSurfaceCreated
Se llama en cuanto la superficie se crea y
está lista para ser utilizada.
PARÁMETROS
EGLConfig config
GL10 gl

68. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
GLSURFACEVIEW: MÉTODOS
onSurfaceCreated: MÉTODOS PÚBLICOS
glHint: TIPO DE CÁLCULOS DE PERSPECTIVA
glDepthFunc: TIPO DE ANÁLISIS DE PROFUNDIDAD
glDisable: DESACTIVA PROPIEDADES
glEnable:HABILITA PROPIEDADES
glClearDepthf: BUFER DE PROFUNDIDAD
glShadeModel: TIPO DE SOMBREADO
glClearColor: COLOR DE FONDO

69. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
Int alto
Int ancho
GLSURFACEVIEW: MÉTODOS
onSurfaceChanged
Llamado tras crear la superficie y siempre
que cambie el tamaño de la superficie.
PARÁMETROS
GL10 gl

70. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
GLSURFACEVIEW: MÉTODOS
onSurfaceChanged: MÉTODOS PÚBLICOS
glMatrixMode: SELECCIONA UNA MATRIZ MODELO-VISTA
gluPerspective:DETERMINA MATRÍZ DE PERSPECTIVA
glLoadIdentity: CAMBIA O REINICIA MATRIZ DE PROYECCIÓN
glMatrixMode: SELECCIONA MATRIZ DE PERSPECTIVA
glViewport: ESTABLECE EL ESPACIO VISUAL

71. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
GLSURFACEVIEW: MÉTODOS
onDrawFrame
Método responsable de dibujar o redibujar
el marco actual.
PARÁMETROS
GL10 gl

72. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
GLSURFACEVIEW: MÉTODOS
onDrawFrame: MÉTODOS PÚBLICOS
glLoadIdentity(): RESTABLECE LA MATRIZ MODELO-VISTA
glRotatef: GENERA UN MOVIMIENTO DE ROTACIÓN
glTranslatef: GENERA UN MOVIMIENTO DE TRANSLACIÓN
glClear: LIMPIA BUFFER DE COLOR Y PROFUNDIDAD

73. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS

74. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAW (GL10 gl)
CONSTRUCTOR
PRIMITIVAS: ELEMENTOS

75. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
RENDER
POLIGONOS
CARAS
BORDES
VÉRTICES
PRIMITIVAS: CONCEPTOS

76. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
VÉRTICES
Un vértice es el bloque de construcción más
pequeño del modelo 3D. Un vértice es un
punto en el que dos o más aristas.

77. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
VÉRTICES: DEFINICIÓN
Los vértices los definimos en Android
como una array de floats que ponemos en
una buffer de bytes para mejorar el
rendimiento.

78. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
VÉRTICES: LOCALIZACIÓN (2D)
V1(-1,1) V2(1,1)
V4(1,-1)V2(-1,-1)
V3(0,1)
V1(-1,1) V1(1,-1)

79. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
VÉRTICES: LOCALIZACIÓN (2D)
private float vertices[] = {
-1.0f, 1.0f, 0.0f, // Arriba Izquierda
-1.0f, -1.0f, 0.0f, // Abajo Izquierda
1.0f, -1.0f, 0.0f, // Abajo derecha
1.0f, 1.0f, 0.0f, // Arriba derecha
};

80. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
VÉRTICES: CONVERSIÓN
La conversión es necesaria para que
coincidan los datos que nosotros
enviamos en Java y la forma en que los
manipula el intérprete C de OpenGL ES

81. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
VÉRTICES: CONVERSIÓN
ByteBuffer vbb = ByteBuffer.allocateDirect(vertices.length * 4);
vbb.order(ByteOrder.nativeOrder());
FloatBuffer vertexBuffer = vbb.asFloatBuffer();
vertexBuffer.put(vertices);
vertexBuffer.position(0);
UN FLOAT SON 4 BYTES

82. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
VÉRTICES: TRAZADO
ACTIVA ESCRITURA
VERTES BUFFER
LOCALIZACIÓN, FORMATO DEL ARRAY
Y COORDENADAS DE RENDERIZADO
DESACTIVA ESCRITURA
VERTES BUFFER
TRAZADO DE LA FORMA

83. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
VÉRTICES: TRAZADO
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);
RENDERIZADO DE PRIMITIVA
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

84. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
BORDES
Línea entre dos vértices. Son líneas
fronterizas de caras y polígonos.

85. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
CARAS
La cara es un triángulo. La cara es una
superficie entre los tres vértices de las
esquinas y tres bordes circundantes.

86. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
CARAS: POSICIÓN
En la ordenación de las caras es importante
hacerlo en la dirección correcta, ya que está
va a posicionar la que será cara frontal y de
qué lado estará la cara posterior.

87. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
CARAS: POSICIÓN
gl.glCullFace: INDICA EL ORDEN EN QUE SE MOSTRARÁN
gl.glEnable: DETERMINA SI UNA CARA ES VISIBLE O NO
gl.glFrontFace: DEFINE CARA FRONTAL

88. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
POLIGONO
Figura generada con el cerrado de las caras,
regulado por el orden de cierre (por la
izquierda por defecto)

89. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
POLIGONO: LOCALIZACIÓN (2D)

90. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
POLIGONO: LOCALIZACIÓN (2D)
private short[] indices = { 0, 1, 2, 0, 2, 3 };

91. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
RENDER
Momento de ejecución y trazado en pantalla, a
partir del buffer o de los elementos

92. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
RENDER
glDrawElements(int mode, int count, int type, Buffer indices)
glDrawArrays(int mode, int first, int count)

93. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
RENDER
gl.glDrawElements(GL10.GL_TRIANGLES, indices.length,
GL10.GL_UNSIGNED_SHORT, indexBuffer);

94. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PRIMITIVAS: CONCEPTOS
RENDER
GL_POINT GL_LINE_STRIP GL_LINE_LOOP GL_LINES
GL_TRIANGLES GL_TRIANGLE_STRIP GL_TRIANGLE_FAN

95. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSFORMACIONES

96. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSFORMACIONES
Define y gestiona el desplazamiento de los
polígonos. Todas las transformaciones
consisten en movimientos de los vértices
de la matriz que contiene la primitiva.

97. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSFORMACIONES: SISTEMA DE COORDENADAS
OpenGL utiliza un sistema de coordenadas
denominado de mano Izquierda.
Considerándose las rotación en sentido
antihorario como rotaciones positivas.

98. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSFORMACIONES: SISTEMA DE COORDENADAS

99. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSFORMACIONES: TIPOS
OPERACIONES CON MATRIZ
DEFORMACIÓN
ESCALADO
ROTACIÓN
TRANSLACIÓN

100. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSFORMACIONES: TRANSLACIÓN
glTranslatef(float x, float y, float z)

101. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSFORMACIONES: ROTACIÓN
glRotatef(float angle, float x, float y, float z)

102. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSFORMACIONES: ROTACIÓN
gl.glRotatef(90f, 1.0f, 0.0f, 0.0f);
gl.glRotatef(90f, 0.0f, 1.0f, 0.0f);
gl.glRotatef(90f, 0.0f, 0.0f, 1.0f);

103. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSFORMACIONES: ROTACIÓN
gl.glRotatef(90f, -1.0f, 0.0f, 0.0f);
gl.glRotatef(90f, 0.0f, -1.0f, 0.0f);
gl.glRotatef(90f, 0.0f, 0.0f, -1.0f);

104. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSFORMACIONES: ROTACIÓN
gl.glRotatef(90f, 1.0f, 0.0f, 0.0f);
gl.glRotatef(90f, 0.0f, 1.0f, 0.0f);
gl.glRotatef(90f, 0.0f, 0.0f, 1.0f);
gl.glRotatef(90f, 0.0f, 0.0f, -1.0f);
gl.glRotatef(90f, 0.0f, -1.0f, 0.0f);
gl.glRotatef(90f, -1.0f, 0.0f, 0.0f);

105. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSFORMACIONES: ROTACIÓN/TRANSLACIÓN
TRANSLACIÓN Y ROTACIÓN
ROTACIÓN Y TRANSLACIÓN

106. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSFORMACIONES: ESCALADO
glScalef(float x, float y, float z)

107. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSFORMACIONES: ESCALADO/TRANSLACIÓN
ESCALADO Y TRANSLACIÓN
TRANSLACIÓN Y ESCALDADO

108. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSFORMACIONES: OPERACIONES CON MATRIZ
glPopMatrix(): VUELVE A LA MATRIZ ANTERIOR
glPushMatrix(): HACE UNA COPIA EN LA PILA DE LA MATRIZ ACTUAL
glLoadIdentity(): REEMPLAZA MATRIZ ANTERIOR POR UNA NUEVA

109. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
COLOR

110. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
COLOR INTERPOLADO
COLOR PLANO
COLOR

111. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
COLOR : COLOR PLANO
glColor4f(float red, float green, float blue, float alpha)

112. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
DRAWCONSTRUCTOR
CARGAR ARRAY
ADAPTAR BUFFER ACTIVAR ARRAY COLOR
CREAR BUFFER
PONER COLOR
DESACTIVAR BUFFER

113. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
COLOR : COLOR INTERPOLADO
CONSTRUCTOR
private FloatBuffer colorBuffer;
private float[] colors = {
1.0f, 0.0f, 0.0f, 1.0f,
0.0f, 1.0f, 0.0f, 1.0f,
0.0f, 0.0f, 1.0f, 1.0f };
ByteBuffer cbb = ByteBuffer.allocateDirect(colors.length * 4);
cbb.order(ByteOrder.nativeOrder());
colorBuffer = cbb.asFloatBuffer();
colorBuffer.put(colors);
colorBuffer.position(0);

114. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
COLOR : COLOR INTERPOLADO
DRAW
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
gl.glColorPointer(4, GL10.GL_FLOAT, 0, colorBuffer);
DIBUJA FORMA
gl.glDisableClientState(GL10.GL_COLOR_ARRAY);

115. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
MOVIMIENTO

116. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
public void onDrawFrame(GL10 gl) {
gl.glLoadIdentity();
gl.glTranslatef(1.5f, 0.0f, -6.0f);
gl.glRotatef(anguloCuadrado, 1.0f, 0.0f, 0.0f);
cuadrado.draw(gl);
anguloCuadrado += velocidadCuadrado;
}
MOVIMIENTO

117. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
VOLUMEN

118. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
VOLUMEN
VÉRTICES: LOCALIZACIÓN (3D)
Y
Z
X
Y(1,1,1)
Y
Z
X
Y(1,0,1)

119. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
VOLUMEN
VÉRTICES: LOCALIZACIÓN (3D)

120. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
VOLUMEN
POLIGONO: LOCALIZACIÓN (3D)

121. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURA

122. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS
Las texturas son imágenes que aplicadas a
objetos de un modelo de OpenGL hace
que el modelo sea mucho más real sin
aumentar el número de polígonos.

123. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
SE CREA EL ÍNDICE DE TEXTURAS
ASIGNA MAPA DE BITS A UN ARRAY TRANSFORMACIÓN A BYTEBUFFER
SE CREA EL BUFFER DE TEXTURAS
APLICA PARAMETROS
APLICA TEXTURA A LA FORMA
DEFINE COORDENADAS TEXTURA CARGA DEL BITMAP EN TEXTURA

124. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
DEFINICIÓN DE ELEMENTOS
private FloatBuffer textBuffer;
private int[] textureIDs = new int[1];
private Bitmap bitmap;

125. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
COORDENADAS DE TEXTURAS
float[] textCoords = {
0.0f, 1.0f,
1.0f, 1.0f,
0.0f, 0.0f,
1.0f, 0.0f
};

126. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
COORDENADAS DE TEXTURAS: MAPEO UV
El mapeado UV es la forma en que se
posicionan los píxeles del mapa de bits en
los vértices de nuestra malla.

127. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
COORDENADAS DE TEXTURAS: MAPEO UV
Las coordenadas UV son 0,0 en la parte
superior izquierda y 1,1 es la parte inferior
derecha.

128. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
COORDENADAS DE TEXTURAS: MAPEO UV

129. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
COORDENADAS DE TEXTURAS: MAPEO UV

130. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
ASIGNACIÓN DE MAPA DE BITS A ARRAY
private int[] imageFileIDs = {
R.drawable.textura4d,
};
Por motivos de hardware es necesario
que la altura y anchura sean potencia de 2
(1, 2, 4, 8, 16, 32, 64 ...)

131. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
TRANSFORMACIÓN A BYTEBUFFER
ByteBuffer tbb = ByteBuffer.allocateDirect(textCoords.length * 4 * numFaces);
tbb.order(ByteOrder.nativeOrder());
textBuffer = tbb.asFloatBuffer();
for (int face = 0; face < numFaces; face++) {
textBuffer.put(textCoords);
}
textBuffer.position(0);
bitmap = BitmapFactory.decodeStream
(context.getResources().openRawResource(imageFileIDs[0]));
}

132. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
CARGAR BITMAP Y APLICAR PARÁMETROS
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
cubo.cargaTextura(gl);
}

133. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
CARGAR BITMAP Y APLICAR PARÁMETROS
public void cargaTextura(GL10 gl) {
gl.glGenTextures(1, textureIDs, 0);
gl.glBindTexture(GL10.GL_TEXTURE_2D, textureIDs[0]);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER,
GL10.GL_LINEAR);
gl.glTexParameterf(GL10.GL_TEXTURE_2D,
GL10.GL_TEXTURE_WRAP_S,GL10.GL_CLAMP_TO_EDGE);
GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
bitmap.recycle();
}

134. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
CARGAR BITMAP Y APLICAR PARÁMETROS: MANEJADOR (HANDLER) DE TEXTURAS
gl.glGenTextures(1, textureIDs, 0);
NÚMERO DE TEXTURAS
OFFSET
ÍNDICE DE TEXTURAS

135. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
CARGAR BITMAP Y APLICAR PARÁMETROS: ELIMINADOR DE TEXTURAS
gl.glDeleteTextures(1, textureIDs, 0);
NÚMERO DE TEXTURAS
OFFSET
ÍNDICE DE TEXTURAS

136. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
CARGAR BITMAP Y APLICAR PARÁMETROS: GENERADOR DE TEXTURAS
gl.glBindTexture(GL10.GL_TEXTURE_2D, textureIDs[0]);
ARRAY DE TEXTURAS
CALIDAD DE MAPA MIP

137. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
CARGAR BITMAP Y APLICAR PARÁMETROS: GENERADOR DE TEXTURAS
GL10.GL_TEXTURE_3D
GL10.GL_TEXTURE_2D
GL10.GL_TEXTURE_1D

138. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
CARGAR BITMAP Y APLICAR PARÁMETROS: GENERADOR DE TEXTURAS
El trazado de mapas MIP (“multum in parvo”
que significa “mucho en poco espacio”), es
una técnica de creación de texturas que puede
mejorar tanto el rendimiento como la calidad
visual de una escena.

139. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
CARGAR BITMAP Y APLICAR PARÁMETROS: GENERADOR DE TEXTURAS
Se carga una serie de imágenes de distinto
tamaño, así OpenGL se encarga de
seleccionar la más apropiada para cada
representación. Esto se hace a través de
una serie de filtros.

140. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
CARGAR BITMAP Y APLICAR PARÁMETROS: GENERADOR DE TEXTURAS

141. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
CARGAR BITMAP Y APLICAR PARÁMETROS: AJUSTE DE PARÁMETROS - FILTRADO

142. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
CARGAR BITMAP Y APLICAR PARÁMETROS: AJUSTE DE PARÁMETROS - FILTRADO
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAX_FILTER, GL10.GL_LINEAR);
GL_NEAREST GL_LINEAR

143. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
CARGAR BITMAP Y APLICAR PARÁMETROS: AJUSTE DE PARÁMETROS - ENVOLTURA
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_CLAMP_TO_EDGE);
WRAP_S: GL_CLAMP_TO_EDGE
WRAP_T: GL_CLAMP_TO_EDGE
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_CLAMP_TO_EDGE);
WRAP_S: GL_REPEAT
WRAP_T: GL_CLAMP_TO_EDGE
WRAP_S: GL_CLAMP_TO_EDGE
WRAP_T: GL_REPEAT
WRAP_S: GL_REPEAT
WRAP_T: GL_REPEAT

144. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
CARGAR BITMAP Y APLICAR PARÁMETROS: AJUSTE DE PARÁMETROS - ENVOLTURA
WRAP_S: GL_CLAMP_TO_EDGE
WRAP_T: GL_CLAMP_TO_EDGE
WRAP_S: GL_REPEAT
WRAP_T: GL_CLAMP_TO_EDGE
WRAP_S: GL_CLAMP_TO_EDGE
WRAP_T: GL_REPEAT
WRAP_S: GL_REPEAT
WRAP_T: GL_REPEAT

145. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
CARGAR BITMAP Y APLICAR PARÁMETROS: APLICA MAPA DE BITS A TEXTURA
GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
TIPO DE DESTINO
BORDE
NIVEL

146. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TEXTURAS: CONSTRUCCIÓN
CARGAR BITMAP Y APLICAR PARÁMETROS: APLICA TEXTURA A LA FORMA
public void draw(GL10 gl) {
gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, textBuffer);
for (int face = 0; face < numFaces; face++) {
DIBUJA FORMA
}
gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);

147. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN

148. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN
La iluminación define la forma en que las
fuentes de luz interactúan con los objetos y los
materiales con los que se crean. El sombreado
determina específicamente el color del píxel
basado en la iluminación y el material.

149. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN
La iluminación utilizada en OpenGL ES nos
permite colocar varias luces de diferentes
tipos alrededor de nuestra escena. Podemos
encenderlos o apagarlos a voluntad,
especificando dirección, intensidad, colores…

150. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN: TIPOS
ESPECULAR
DIFUSA
AMBIENTE

151. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
AMBIENTE DIFUSA ESPECULAR
SIN SUAVIZADO
CON SUAVIZADO
ILUMINACIÓN: TIPOS

152. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
Nivel básico de iluminación que parece
penetrar toda una escena. No parece venir de
ninguna fuente de luz en particular.
ILUMINACIÓN: TIPOS
AMBIENTE

153. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
La iluminación provienen de una fuente puntal
e identificable. Al incidir sobre el objeto, parte
de la misma se reflejará en una sola dirección.
La iluminación del objeto dependerá de su
forma y de la relación de posición cámara-
objeto-fuente de luz.
ILUMINACIÓN: TIPOS
DIFUSA

154. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
Los rayos inciden de manera paralela al
objeto. Si el objeto es brillante, producirá
zonas donde la luz se refleja más
intensamente, si es mate, la luz se reflejará en
todas direcciones.
ILUMINACIÓN: TIPOS
ESPECULAR

155. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN: FUENTES
FOCAL
PUNTUAL
DIRECCIONAL

156. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
Fuente de luz muy lejana cuyos rayos
inciden en el objeto de manera paralela
ILUMINACIÓN: FUENTES
DIRECCIONAL

157. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
La luz proveniente de un punto concreto
que ilumina en todas direcciones.
ILUMINACIÓN: FUENTES
PUNTUAL

158. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
Luz emitida por un foco que ilumina en una
única dirección y con un determinado ángulo
ILUMINACIÓN: FUENTES
FOCAL

159. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN: SOMBREADO
SOMBREADO PHONG
SOMBREADO SUAVE O GOURAUD
SOMBREADO PLANO

160. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN: SOMBREADO
S. PLANO S. GOURAUD S. PHONG

161. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
Evalúa el color del primer vértice y asigna
el mismo a todos los puntos del polígono.
ILUMINACIÓN: FUENTES
SOMBREADO PLANO

162. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
Evalúa el color de los vértices del
polígono e implementa una interpolación
de colores para el resto de los puntos.
ILUMINACIÓN: FUENTES
SOMBREADO GOURAUD

163. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
Esta técnica utiliza una interpolación
bilineal para calcular la normal de cada
uno de los puntos del polígono.
ILUMINACIÓN: FUENTES
SOMBREADO PHONG

164. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
CONSTRUCCIÓN

165. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN: CONSTRUCCIÓN
SE CREAN BUFFER DE PROPIEDADES
ASIGNA PROPIEDADES A FUENTES CONFIGURA MATERIALES
DEFINES FUENTES DE LUZ
CONFIGURA MODELADO DE LUZ
ACTIVA FUENTES E ILUMINACIÓN
TRANSFORMACIÓN A BYTEBUFFER CONFIGURA SOMBRAS

166. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN: CONSTRUCCIÓN
DEFINE FUENTES DE LUZ
GL10.GL_LIGHT2
GL10.GL_LIGHT1GL10.GL_LIGHT0
GL10.GL_LIGHT3
GL10.GL_LIGHT4 GL10.GL_LIGHT5
GL10.GL_LIGHT6 GL10.GL_LIGHT7

167. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN: FUENTES
DEFINE FUENTES DE LUZ
public final static int SOL = GL10.GL_LIGHT0;
public final static int FOCO1 = GL10.GL_LIGHT1;
public final static int FOCO2 = GL10.GL_LIGHT2;

168. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN: FUENTES
CREACIÓN DE BUFFER DE PROPIEDADES
float[] solPosi = {0.0f, 0.0f, 0.0f, 1.0f};
float[] foco1Posi = {-15.0f, 15.0f, 0.0f, 1.0f};
float[] foco2Posi = {-10.0f, -4.0f, 1.0f, 1.0f};
float[] blanco = {1.0f, 1.0f, 1.0f, 1.0f};
float[] azulSuave = {0.0f, 0.0f, .2f, 1.0f};
float[] cian = {0.0f, 1.0f, 1.0f, 1.0f};
float[] amarillo = {1.0f, 1.0f, 0.0f, 1.0f};
float[] magenta = {1.0f, 0.0f, 1.0f, 1.0f};
float[] magentaSuave = {.75f, 0.0f, .25f, 1.0f};
float[] cianSuave = {0.0f, .5f, .5f, 1.0f};

169. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN: CONSTRUCCIÓN
ASIGAN PROPIEDADES A FUENTES
GL_DIFFUSE
GL_AMBIENT
GL_SPOT_CUTOFF
GL_SPECULAR GL_CONSTANT_ATTENUATION
GL_POSITION GL_LINEAR_ATTENUATION
GL_SPOT_DIRECTION GL_QUADRATIC_ATTENUATION
GL_SPOT_EXPONENT

170. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN: FUENTES
ASIGAN PROPIEDADES A FUENTES
gl.glLightfv(FOCO1, GL10.GL_POSITION, hacerFloatBuffer(foco1Posi));
gl.glLightfv(FOCO1, GL10.GL_DIFFUSE, hacerFloatBuffer(azulSuave));
gl.glLightfv(FOCO1, GL10.GL_SPECULAR, hacerFloatBuffer(cianSuave));
TRANSFORMA A BYTTEBUFFER

171. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN: FUENTES
TRANSFORMACIÓN A BYTEBUFFER
protected static FloatBuffer hacerFloatBuffer(float[] arr) {
ByteBuffer bb = ByteBuffer.allocateDirect(arr.length * 4);
bb.order(ByteOrder.nativeOrder());
FloatBuffer fb = bb.asFloatBuffer();
fb.put(arr);
fb.position(0);
return fb;
}

172. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN: FUENTES
CONFIGURA MATERIALES
gl.glMaterialfv(GL10.GL_FRONT_AND_BACK, GL10.GL_DIFFUSE, hacerFloatBuffer(cian));
gl.glMaterialfv(GL10.GL_FRONT_AND_BACK, GL10.GL_SPECULAR, hacerFloatBuffer(blanco));
gl.glMaterialf(GL10.GL_FRONT_AND_BACK, GL10.GL_SHININESS, 25);
TRANSFORMA A BYTTEBUFFER

173. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN: FUENTES
CONFIGURA SOMBRAS
gl.glShadeModel(GL10.GL_SMOOTH);
GL_SMOOTH
GL_FLAT

174. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN: FUENTES
CONFIGURA MODELADO DE LUZ
gl.glLightModelf(GL10.GL_LIGHT_MODEL_TWO_SIDE, 0.0f);
GL_LIGHT_MODEL_TWO_SIDE
GL_LIGHT_MODEL_TWO_AMBIENT

175. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
ILUMINACIÓN: FUENTES
ACTIVA FUENTES E ILUMINACIÓN
gl.glEnable(FOCO1);
gl.glEnable(GL10.GL_LIGHTING);

176. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSPARENCIA

177. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSPARENCIA
MASKING
BLENDING

178. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSPARENCIA: BLENDING
El proceso de blending es utilizado para
crear objetos con efectos de transparencia
haciendo uso del canal alpha.

179. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSPARENCIA: BLENDING
Este efecto se consigue combinando un
primer plano translúcido, con un color de
fondo para crear una mezcla intermedia.

180. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSPARENCIA: BLENDING
SELECCIONA FUNCIÓN DE TRANSPARENCIA
ACTIVA EL ESTADO DE BLENDING

181. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSPARENCIA: BLENDING
ACTIVA ESTADO DE BLENDING
gl.glEnable (GL10.GL_BLEND);

182. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSPARENCIA: BLENDING
SELECCIONA FUNCIÓN DE TRANSPARENCIA
gl.glBlendFunc (GL10 origen, GL10 destino);
FACTOR BLENDING DE LA FUENTE
FACTOR BLENDING DEL DESTINO

183. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
GL_SRC_ALPHA_SATURATE
TRANSPARENCIA: BLENDING
SELECCIONA FUNCIÓN DE TRANSPARENCIA: FACTOR BLENDING
GL_DST_COLOR
GL_ZERO
GL_SRC_COLOR
GL_ONE_MINUS_DST_COLOR GL_ONE_MINUS_SRC_COLOR
GL_SRC_ALPHA GL_ONE_MINUS_SRC_ALPHA
GL_DST_ALPHA GL_ONE_MINUS_DST_ALPHA
GL_ONE

184. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSPARENCIA: MASKING
Esta técnica consiste en dar un efecto de
transparencia a determinadas partes de
una imagen, técnica muy utilizada dentro
del mundo de los videojuegos.

185. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSPARENCIA: MASKING
En esta técnica se utilizan dos imágenes
diferentes, una de ellas llamada imagen
fuente, almacena la imagen que se desea
mostrar y recortar, y la otra llamada máscara,
con dos colores, negro para las partes de la
fuente que se desea ver y blanca para las
partes que se desean recortar.

186. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSPARENCIA: MASKING

187. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSPARENCIA: MASKING

188. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSPARENCIA: MASKING

189. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSPARENCIA: MASKING
PINTA DESTINO CON COLOR NEGRO
ACTIVA EFECTO BLENDING PINTA FIGURA CON IMAGE FUENTE
SE PINTA FIGURA CON MÁSCARA
COPIA IMAGEN IGNORANDO NEGRO

190. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
TRANSPARENCIA: MASKING
gl.glEnable (GL10.GL_BLEND);
gl.glBlendFunc (GL10.GL_DST_COLOR, GL10.GL_ZERO);
fuente.dibuja (gl);
gl.glBlendFunc (GL10.GL_ONE, GL10.GL_ONE);
mascara.dibuja (gl);

191. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MULTIMEDIA
© J.D.CABRERA
PROGRAMACIÓN MULTIMEDIA
Y
DISPOSITIVOS MÓVILES