viewports e interacción con el mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3d.pdfpero opentk...
TRANSCRIPT
![Page 1: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/1.jpg)
Viewports e Interacción con el Mouse
CG 2014.
![Page 2: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/2.jpg)
Introducción
Los vértices sufren transformaciones para pasar del mundo a la pantalla.
Estas transformaciones, las especificamos mediante matrices.
![Page 3: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/3.jpg)
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).
![Page 4: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/4.jpg)
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. (+, -, *, /)
![Page 5: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/5.jpg)
En OpenTKMatrix4 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”:
![Page 6: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/6.jpg)
Ventana (En 2D)
![Page 7: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/7.jpg)
Ventana (En 3D)
![Page 8: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/8.jpg)
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).
![Page 9: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/9.jpg)
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);
![Page 10: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/10.jpg)
Viewport
Coordenadas de la ventana (mi glControl), según OpenGL
x
y
(x,y)
h
w
![Page 11: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/11.jpg)
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.
![Page 12: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/12.jpg)
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?
○
![Page 13: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/13.jpg)
Ejemplo: ex Laboratorio 3
![Page 14: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/14.jpg)
¿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.
![Page 15: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/15.jpg)
Pseudocódigo
void On_Paint(){ ... SetearViewport(viewport1); SetearVentana(projMatrix1); figura.Dibujar(); SetearViewport(viewport2); SetearVentana(projMatrix2); figura.Dibujar(); ...}
![Page 16: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/16.jpg)
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...;
![Page 17: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/17.jpg)
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();
};
![Page 18: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/18.jpg)
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...
![Page 19: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/19.jpg)
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.
![Page 20: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/20.jpg)
OpenGL vs Windows
x
yx
y
Usan el eje Y distinto!
![Page 21: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/21.jpg)
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.○ http://myweb.lmu.edu/dondi/share/cg/unproject-
explained.pdf
![Page 22: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/22.jpg)
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?
![Page 23: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/23.jpg)
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.
![Page 24: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/24.jpg)
Unproject
● De eso se encarga(ba) la funcióngluUnproject(...);
● 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.
![Page 25: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/25.jpg)
UnprojectVector3 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();
![Page 26: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/26.jpg)
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;
![Page 27: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/27.jpg)
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.");
}
![Page 28: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/28.jpg)
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();
![Page 29: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/29.jpg)
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.
![Page 30: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/30.jpg)
Pantalla vs. Ventana
![Page 31: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/31.jpg)
Unproject
● ¿Cómo determinamos las coordenadas de este segmento de línea (o rayo)?
● Utilizamos:○ zwin = 0.0, para el plano near;○ zwin = 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.
![Page 32: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/32.jpg)
Secuencia de pasos
● Dada una posición (xpant, ypant):○ Invertir la coordenada ypant.○ Obtener los valores de las matrices de modelView,
Projection y el Viewport utilizado.○ Llamar 2 veces al Unproject(...),
■ una vez con: (xpant, ypant, 0.0)■ y la segunda con (xpant, ypant, 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)
![Page 33: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/33.jpg)
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).
![Page 34: Viewports e Interacción con el Mousecs.uns.edu.ar/cg/practicos/viewports_ y_click_3D.pdfPero OpenTK provee clases y estructuras para trabajar con matrices y vectores. Estas clases](https://reader036.vdocuments.net/reader036/viewer/2022081620/610ebf9b9b8f6c4dcb49e00a/html5/thumbnails/34.jpg)
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 nearu = 1, el plano far.