Java Open GL

1. Java Open GL Taller práctico

2. Objetivos de aprendizaje • Conocer las clases de Java que sirven de interfaz para acceder a la funcionalidad de OpenGL • Crear una aplicación mínima que utilice JOGL. • Posición de cámara y dibujo de una figura básica • Dibujo de figuras empleando GLU • Iluminación • Texturas • Movimiento

3. Espacios y puntos de visión • Una coordenada z positiva sale hacia la pantalla, una coordenada z negativa va hacia dentro de la pantalla. La posición de la camara está determinada por un punto, otro punto al cual se dirige la vision y un vector que define el punto hacia donde se dirije la vista en el cielo (tambien un angulo de vision pero ese se revisará posteriormente).

4. Integración de clases OpenGL publicclassMyJoglCanvasextendsGLCanvasimplementsGLEventListener {publicMyJoglCanvas(intwidth,intheight, GLCapabilitiescapabilities){}publicvoidinit(GLAutoDrawabledrawable) {}publicvoidreshape(GLAutoDrawabledrawable,intx,inty,int, width,intheight) {}publicvoiddisplayChanged(GLAutoDrawabledrawable, booleanmodeChanged, booleandeviceChanged) {}publicvoiddisplay(GLAutoDrawabledrawable) {}}

5. Implementar métodos de GLEventListener • El constructor especifica el tamaño inicial (size) de la ventana así como también el mínimo de capacidades (capabilities) requeridas para OpenGL. • El método init() se invoca por el evento AWT tan pronto como la ventana esté lista; se pueden hacer algunas configuraciones globales aquí. • Toda vez que se redimensione el canvas, se invocará reshape() • Ingoraremos completamente el método displayChanged. Este se usa cuando se manejan múltiples escenarios. • Finalmente display(), se invoca cada vez que se re-dibuja la escena. Aquí es donde se desarrolla todo el dibujo.

6. Ventana en blanco • publicclassMyJoglCanvasextendsGLCanvasimplementsGLEventListener {. . . • publicMyJoglCanvas(intwidth, intheight, GLCapabilitiescapabilities) {super(capabilities);setSize(width, height);} . . . } // En main se define el modo de video GLCapabilitiescapabilities = new GLCapabilities();capabilities.setRedBits(8);capabilities.setBlueBits(8);capabilities.setGreenBits(8);capabilities.setAlphaBits(8);

7. Inicialización del Canvas (GLCanvas) • publicclassMyJoglCanvasextendsGLCanvasimplementsGLEventListener { • . . . • publicvoidinit(GLAutoDrawabledrawable) { GL gl = drawable.getGL();drawable.setGL(new DebugGL(gl)); // Configuracion global.gl.glEnable(GL.GL_DEPTH_TEST);gl.glDepthFunc(GL.GL_LEQUAL);gl.glShadeModel(GL.GL_SMOOTH);gl.glHint(GL.GL_PERSPECTIVE_CORRECTION_HINT, GL.GL_NICEST);gl.glClearColor(0f, 0f, 0f, 1f); // Iniciar animadoranimator = new FPSAnimator(this, 60);animator.start();} . . . }

8. Métodos y configuraciones de inicialización • Las primeras dos habilitan los buffers Z (siemprenecesariospara el dibujo en 3D) con la ultimaconfiguración (dibujar un rectangulo, unalineaserá visible). • Se selecciona un modelo de sombra (GL_SMOOTH), y hace la correcciónnecesaria (GL_NICEST). • El color de borradoes el color: negro (Black) sin sertraslucido (alpha es 1), especificadopara RGBA comonumerosflotantes.

9. Redimension y despliegue • publicclassMyJoglCanvasextendsGLCanvasimplementsGLEventListener {. . . • publicvoidreshape(GLAutoDrawabledrawable, int x, int y, • intwidth, intheight) { • GL gl = drawable.getGL();gl.glViewport(0, 0, width, height);} • // El metododisplay se invocará en cada ciclo de animación • publicvoiddisplay(GLAutoDrawabledrawable) { GL gl = drawable.getGL();gl.glClear(GL.GL_COLOR_BUFFER_BIT | GL.GL_DEPTH_BUFFER_BIT); • . . .} . . . }

10. Colocación de cámara • publicclassMyJoglCanvasextendsGLCanvasimplementsGLEventListener {. . . • publicvoidinit(GLAutoDrawabledrawable) {glu = new GLU();}publicvoiddisplay(GLAutoDrawabledrawable) {setCamera(gl, glu, 100);} • privatevoidsetCamera(GL gl, GLU glu, floatdistance) {// Cambiar a matriz de proyeccion.gl.glMatrixMode(GL.GL_PROJECTION);gl.glLoadIdentity();// Perspectiva.floatwidthHeightRatio = (float) getWidth() / (float) getHeight();glu.gluPerspective(45, widthHeightRatio, 1, 1000);glu.gluLookAt(0, 0, distance, 0, 0, 0, 0, 1, 0);// Regresar a la matriz de modelo de vistagl.glMatrixMode(GL.GL_MODELVIEW);gl.glLoadIdentity();} • }

11. Parámetros de cámara y punto de visión • OpenGL calcula las coordenadas utilizando matrices. Para la cámara, cambiamos a la matriz PROJECTION, y para todo lo demás usamos la matrizMODELVIEW. • El método glLoadIdentity(), reinicializa todas las configuraciones de matriz previas que se hayan hecho. • GLU se hace cargo de la propia perspectiva. Se especifica un ángulo de 45° con respecto a la proporción de ancho y alto de la ventana.

12. Dirección de la vista gluLookAt() • El método gluLookAt(), toma tres grupos de coordenadas 3D: • (0,0,distance): Donde estamos parados (“eye”) • Aquí solo se modifica la coordenada Z • (0,0,0) : Hacia donde dirigimos la vista (“at”) • Directamente al centro de las coordenadas del sistema • (0,1,0) : Hacia donde apunta nuestra cabeza en el cielo (“up”) • Directamente erguidos, sobre la coordenada Y.

13. Despliegue de un triangulo • publicclassMyJoglCanvasextendsGLCanvasimplementsGLEventListener {. . . • publicvoiddisplay(GLAutoDrawabledrawable) { • setCamera(gl, glu, 100); • // Definir el triangulo. gl.glColor3f(0.9f, 0.5f, 0.2f);gl.glBegin(GL.GL_TRIANGLE_FAN); gl.glVertex3f(-20, -20, 0); gl.glVertex3f(+20, -20, 0); gl.glVertex3f(0, 20, 0);gl.glEnd(); • } • }

14. Despliegue de una esfera • publicclassMyJoglCanvasextendsGLCanvasimplementsGLEventListener {. . . • publicvoiddisplay(GLAutoDrawabledrawable) { • setCamera(gl, glu, 100); • // Dibujar una esfera (estilos elegibles: FILL, LINE, POINT). gl.glColor3f(0.3f, 0.5f, 1f);GLUquadricearth = glu.gluNewQuadric();glu.gluQuadricDrawStyle(earth, GLU.GLU_FILL);glu.gluQuadricNormals(earth, GLU.GLU_FLAT);glu.gluQuadricOrientation(earth, GLU.GLU_OUTSIDE); final floatradius = 6.378f; final intslices = 16; final intstacks = 16;glu.gluSphere(earth, radius, slices, stacks);glu.gluDeleteQuadric(earth);} • }

15. Iuminación • publicclassMyJoglCanvasextendsGLCanvasimplementsGLEventListener {. . . • publicvoiddisplay(GLAutoDrawabledrawable) {// Preparar los parametros de luz.float SHINE_ALL_DIRECTIONS = 1;float[] lightPos = {-30, 0, 0, SHINE_ALL_DIRECTIONS};float[] lightColorAmbient = {0.2f, 0.2f, 0.2f, 1f};float[] lightColorSpecular = {0.8f, 0.8f, 0.8f, 1f};// Establecer los parametros de luz.gl.glLightfv(GL.GL_LIGHT1, GL.GL_POSITION, lightPos, 0);gl.glLightfv(GL.GL_LIGHT1, GL.GL_AMBIENT, lightColorAmbient, 0);gl.glLightfv(GL.GL_LIGHT1, GL.GL_SPECULAR, lightColorSpecular, 0);// Habilizariluminacion en GL.gl.glEnable(GL.GL_LIGHT1);gl.glEnable(GL.GL_LIGHTING);// Establecer las propiedades de los materiales.float[] rgba = {0.3f, 0.5f, 1f};gl.glMaterialfv(GL.GL_FRONT, GL.GL_AMBIENT, rgba, 0);gl.glMaterialfv(GL.GL_FRONT, GL.GL_SPECULAR, rgba, 0);gl.glMaterialf(GL.GL_FRONT, GL.GL_SHININESS, 0.5f);// Dibujar la esfera (possiblestyles: FILL, LINE, POINT).GLUquadricearth = glu.gluNewQuadric();... • } • }

16. Parámetros para iluminación • La iluminación es donde se intercambia todo el modelo de color. Se especifica la forma de una superficie y como reacciona a la luz en su espectro RGB y añadimos las fuentes de luz con su propio espectro RGB (también como en el mundo real). • Existen dos tipos de luz, AMBIENT y ESPECULAR, y nuestra superficie de material reaccionará en esta luz. • La luz ambiental (AMBIENT) está en todas partes, sin una fuente particular. Típicamente se utiliza una intensidad de 0.2 (valores entre 0 y 1). • La luz ESPECULAR, es la que proviene de una lámpara y que se refleja en las superficies. Esta es la que da típico efecto 3D. Normalmente se utiliza una intensidad de 0.8 (valores entre 0 y 1).

17. Posición y color de la luz • Primero, se definen los parámetros de la luz: la posición de la luz en el ejemplo en las coordenadas (-30,0,0), ligeramente a la izquierda, con un cuarto elemento establecido en uno. Esto es necesario para iluminar en todas las direcciones. • Siguiendo, se establece el valor RGBA de la luz AMBIENT y ESPECULAR. El valor alphaes siempre 1, significa opacidad completa (“sin efecto de cristal”)

18. Encendiendo cada luz y todo el sistema • Las siguientes tres líneas, asociamos éstos parámetros a una luz específica, denominada LIGHT1, especificando los parámetros a establecer, los arreglos apropiados y un índice donde iniciar en el arreglo. Finalmente se habilita la luz LIGHT1 y lo más importante, habilitar la iluminación “LIGHTING”. • Cabe mencionar, que si no se cambia la luz entre frames, se puede colocar todo en el método init() en lugar del método display(). Esto podría brindar un poco más de eficiencia.

19. Características del material • Además de definir las luces, es necesario también que se especifique como reaccionará el material a la luz en el espectro RGB: lo que solía ser el color. Tomamos el mismo color azul como anteriormente y se agrega un valor alfa de uno (completamente opaco); entonces se especifica la reacción tanto de la luz ambiente como la especular. • La última característica antes de dibujar es el grado de brillantez o SHININESS, el cual especifica que tan fuerte es la reflexión en la superficie (0..100). En el ejemplo se establece a 0.5, lo cual indica que no hay mucho efecto.

20. Texturas • Una textura brinda una forma mucho más real, agregando un patrón mucho más agradable. • Se requieren dos pasos: primero, necesitamos cargar la textura desde el archivo PNG y ensamblarlo en una forma que JOGL lo pueda manejar. Segundo, justo antes de realizar un dibujo, se le tiene que indicar a JOGL que la siguiente figura o forma a dibujar debe usar la textura (“asociar o “bind”, la textura al contexto GL”)

21. Carga de Texturas • Se utiliza TextureIO,TextureData y Texture para leer, procesar y almacenar la textura. • publicclassMyJoglCanvasextendsGLCanvasimplementsGLEventListener {. . . • publicvoidinit(GLAutoDrawabledrawable) {// Cargar los archivos de textura try {InputStreamstream = getClass().getResourceAsStream("earth.png");TextureData data = TextureIO.newTextureData(stream, false, "png");earthTexture = TextureIO.newTexture(data); • } catch (IOExceptionexc) {exc.printStackTrace();System.exit(1); }} • }

22. Aplicación de texturas • publicclassMyJoglCanvasextendsGLCanvasimplementsGLEventListener {. . . • publicvoiddisplay(GLAutoDrawabledrawable) {// Establecer las propiedades del material. • float[] rgba = {1f, 1f, 1f};gl.glMaterialfv(GL.GL_FRONT, GL.GL_AMBIENT, rgba, 0);gl.glMaterialfv(GL.GL_FRONT, GL.GL_SPECULAR, rgba, 0);gl.glMaterialf(GL.GL_FRONT, GL.GL_SHININESS, 0.5f);// Aplicar texturaearthTexture.enable();earthTexture.bind();// Dibujar esfera.GLUquadricearth = glu.gluNewQuadric();glu.gluQuadricTexture(earth, true);} • . . . • }

23. Movimiento publicclassMyJoglCanvasextendsGLCanvasimplementsGLEventListener {. . . publicvoiddisplay(GLAutoDrawabledrawable) { // Guardar el estado anterior.gl.glPushMatrix(); // Calcular la posicion del satelite.satelliteAngle = (satelliteAngle + 1f) % 360f; final floatdistance = 10.000f; final float x = (float) Math.sin(Math.toRadians(satelliteAngle)) * distance; final float y = (float) Math.cos(Math.toRadians(satelliteAngle)) * distance; final float z = 0;gl.glTranslatef(x, y, z);gl.glRotatef(satelliteAngle, 0, 0, -1);gl.glRotatef(45f, 0, 1, 0); // Establece el color plata y deshabilita el texturizado.gl.glDisable(GL.GL_TEXTURE_2D); float[] ambiColor = {0.3f, 0.3f, 0.3f, 1f};float[] specColor = {0.8f, 0.8f, 0.8f, 1f};gl.glMaterialfv(GL.GL_FRONT, GL.GL_AMBIENT, ambiColor, 0);gl.glMaterialfv(GL.GL_FRONT, GL.GL_SPECULAR, specColor, 0);gl.glMaterialf(GL.GL_FRONT, GL.GL_SHININESS, 90f);

24. Movimiento . . . // Drawsatellitebody. final floatcylinderRadius = 1f; final floatcylinderHeight = 2f;GLUquadricbody = glu.gluNewQuadric();glu.gluQuadricTexture(body, false);glu.gluQuadricDrawStyle(body, GLU.GLU_FILL);glu.gluQuadricNormals(body, GLU.GLU_FLAT);glu.gluQuadricOrientation(body, GLU.GLU_OUTSIDE);gl.glTranslatef(0, 0, -cylinderHeight / 2);glu.gluDisk(body, 0, cylinderRadius, cylinderSlices, 2);glu.gluCylinder(body, cylinderRadius, cylinderRadius, cylinderHeight, slices, stacks);gl.glTranslatef(0, 0, cylinderHeight);glu.gluDisk(body, 0, cylinderRadius, cylinderSlices, 2);glu.gluDeleteQuadric(body);gl.glTranslatef(0, 0, -cylinderHeight / 2); } … }