Viewports e Interacción con el Mouse CG 2014.

Transcripción

1 Viewports e Interacción con el Mouse CG 2014.

2 Introducción Los vértices sufren transformaciones para pasar del mundo a la pantalla. Estas transformaciones, las especificamos mediante matrices.

3 Ventana del mundo Luego de modelar los objetos y la escena 2D (mediante transformaciones, con más matrices!!) Debemos seleccionar qué área de este mundo queremos mostrar. Esto lo hacemos especificando una matriz de proyección. Esta matriz también va a determinar la forma en la que veremos la escena (proyección).

4 En OpenGL Para especificar esa matriz de proyección, se utiliza(ba): glortho(left, right, bottom, top, near, far); gluperspective(fovy, aspect, near, far); Ahora, nosotros debemos ocuparnos de crear la matriz. Pero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases poseen operadores sobrecargados para que podamos utilizarlos más fácilmente. (+, -, *, /)

5 En OpenTK Matrix4 projmat; projmat = Matrix4.CreateOrthographicOffCenter( left, right, bottom, top, znear, zfar); projmat = Matrix4.CreatePerspective( fovy, aspect, znear, zfar); Con esto creamos una matriz. Resta hacer que nuestro shader (de vértices) las utilice. Usar variables uniform :

6 Ventana (En 2D)

7 Ventana (En 3D)

8 Viewport La última de las transformaciones es la de Viewport. La transformación de viewport especifica en qué región de la pantalla será dibujada la escena. (en nuestro caso, en qué región del GLControl) Al trabajar sobre la pantalla, las coordenadas son números enteros (pixels). (A diferencia de las coordenadas de la ventana, que son números reales).

9 En OpenGL En OpenGL especificamos la información del viewport mediante: glviewport(x, y, width, height); OpenTK sobrecarga este método: GL.Viewport(x, y, width, height); GL.Viewport(rectangle); GL.Viewport(point, size); GL.Viewport(size);

10 Viewport Coordenadas de la ventana (mi glcontrol), según OpenGL y w h (x,y) x

11 Relación de aspecto Relación de aspecto = ancho / alto Si la región del mundo que queremos dibujar tiene una relación de aspecto distinta a la del viewport, veremos nuestra escena deformada.

12 Relación de aspecto Podemos: Calcular las dimensiones del viewport en función de la relación de aspecto de la ventana. Ajustar la ventana en función de las dimensiones del viewport. Que diferencia hay?

13 Ejemplo: ex Laboratorio 3

14 Cómo lo logramos? Tenemos que dibujar la misma figura 2 veces: Primero: Una ventana 2D que abarque a toda la figura. Un viewport a la izquierda. Luego: Una ventana que abarque sólo una parte de la figura (zoom). Un viewport a la derecha.

15 Pseudocódigo void On_Paint(){... SetearViewport(viewport1); SetearVentana(projMatrix1); figura.dibujar(); } SetearViewport(viewport2); SetearVentana(projMatrix2); figura.dibujar();...

16 Pseudocódigo Podemos utilizar dos variables de tipo Rectangle (System.Drawing) para guardar información de los viewports. Y dos variables de tipo OpenTK.Matrix4 para las matrices de proyección. Rectangle viewport1 = new...; Rectangle viewport2 = new...; Matrix4 projmat1 = Matrix4.CreateOrthog..; Matrix4 projmat2 = Matrix4.CreateOrthog...;

17 Pseudocódigo Dónde actualizamos los valores de los viewports? void glcontrol1_resize(..){ }; //Sacar las cuentas en función de glcontrol1.width //glcontrol1.height y el aspectratio de la ventana viewport1.x =...; // 2D viewport1.y =...; viewport1.width =...; viewport1.height =...; viewport2.x =...;... glcontrol1.invalidate();

18 Interacción con el mouse Aparte de la interacción mediante controles (botones, sliders, checkboxes, etc), podemos interactuar con el glcontrol utilizando el mouse. Qué interacciones serán posibles? Manejar la cámara. Seleccionar un área para hacer zoom. Seleccionar un objeto de la escena. (Picker). Etc...

19 Interacción con el Mouse El componente GLControl (al igual que todos los componentes de Windows) tiene el evento Click(...) que se dispara cuando se realiza un click de mouse sobre el componente.

20 OpenGL vs Windows y x x y Usan el eje Y distinto!

21 Picker 3D Existen varias formas de implementar un picker 3D: Utilizando el buffer de stencil. Utilizando el buffer de profundidad. Revertir las transformaciones.(unproject) Veremos la última, que es la más elegante, aunque presenta sus ventajas y desventajas.

22 Picker 3D - El problema Cuanto windows nos reporta (mediante un evento) que se realizó un click en la posición (x, y) del glcontrol, A qué posición de la escena 3D corresponde? En qué espacio de coordenadas vemos la información del framebuffer?

23 Unproject Los vértices se fueron transformando, hasta llegar a coordenadas de pantalla. Ahora quiero el camino inverso, es decir, a partir de una posición en pantalla, determinar a qué posición en el mundo corresponde.

24 Unproject De eso se encarga(ba) la función gluunproject(...); Esta función no está disponible en OpenTK. La tenemos que implementar! Consultar la documentación de esta función, para comprender bien el significado de los parámetros.

25 Unproject Vector3 UnProject(Vector3 win, Matrix4 mviewmat, Matrix4 projmat, Rectangle viewport) { Vector3 resul = Vector3.Zero; Vector4 _in = Vector4.Zero; Vector4 _out = Vector4.Zero; Matrix4 onematrix; //Combinamos las dos matrices y las invertimos. onematrix = Matrix4.Multiply(mViewMat, projmat); onematrix.invert();

26 Unproject (cont.) _in.x = win.x; _in.y = win.y; _in.z = win.z; _in.w = 1.0f; //Map x and y from window coordinates. _in.x = (_in.x - viewport.x) / viewport.width; _in.y = (_in.y - viewport.y) / viewport.height; //Map to range -1 to 1. _in.x = _in.x * 2-1; _in.y = _in.y * 2-1; _in.z = _in.z * 2-1;

27 Unproject (cont.) //Antitransformamos. _out = Vector4.Transform(_in, onematrix); if ((_out.w > float.epsilon) { (_out.w < -float.epsilon)) _out.x = _out.x / _out.w; _out.y = _out.y / _out.w; _out.z = _out.z / _out.w; }else{ throw new Exception("UnProject: No pudo antitransformar."); }

28 Unproject (cont.) resul.x = _out.x; resul.y = _out.y; resul.z = _out.z; }; return resul; Este método lo vamos a utilizar en el manejador del evento Click();

29 Unproject La posición en coordenadas de ventana, (window) tiene 3 componentes (x, y, z). La ventana es tridimensional. Nosotros solamente tenemos las coordenadas bidimensionales (x, y), que nos reporta el componente. Un punto en la pantalla, corresponde a toda una línea en la ventana 3D.

30 Pantalla vs. Ventana

31 Unproject Cómo determinamos las coordenadas de este segmento de línea (o rayo)? Utilizamos: z win = 0.0, para el plano near; z win = 1.0, para el plano far. Entonces debemos llamar dos veces a esta función, una para calcular la posición en el plano near, y otra en el far.

32 Secuencia de pasos Dada una posición (x pant, y pant ): Invertir la coordenada y pant. Obtener los valores de las matrices de modelview, Projection y el Viewport utilizado. Llamar 2 veces al Unproject(...), una vez con: (x pant, y pant, 0.0) y la segunda con (x pant, y pant, 1.0) Con los dos puntos obtenidos, tenemos la ecuación de la recta. Recorrer cada objeto de la escena y ver si intersecta a alguno (usar Bounding Box)

33 Observaciones Si en la matriz modelview, utilizamos solamente la de view (model = Identidad): La ecuación de la recta, estará en coordenadas del mundo. Al comparar la recta con cada objeto, pasar las coordenadas de los mismos a coordendas del mundo. Si usamos la view y la model (de cada obj): La ecuación de la recta estará en coord. del objeto (comparación directa) Pero, hay que repetir el proceso por cada objeto (cada uno tiene su matriz de modelado).

34 Observaciones Desventajas: Intersección de los objetos con una recta (se puede utilizar bounding-box) Si hay varios objetos que intersectan el rayo Cuál elegimos? Podemos parametrizar la recta como: L(u) = nearpoint + u * (farpoint - nearpoint); u en el intervalo [0..1] u = 0, el plano near u = 1, el plano far.