Transformaciones y Procesador de vértices

Transformaciones y Procesador de vértices

Modelos 3D – Vértices / triángulos
Triángulos
Vértice X,Y,Z
Matríces
• Hablamos de transformaciones lineales
representables con matrices de 4 x4
Transformaciones típicas
• Modelado
– Trasladar (X, Y, Z)
– Rotar(ángulo, EjeX, EjeY, EjeZ)
– Escalar(X, Y, Z)
Mt
Mr
Me
• Vista
– Es una combinación de traslaciones y rotaciones
Mv= T * R * T
• Proyección
– Perspectiva, Ortográfica
Mp
Sistemas de Coordenadas
• Matríz de Modelado
– De Coord. Modelado -> Coord. de Mundo
• Matríz de Vista
– De Coord. de Mundo -> Coord. De Camara
• Matríz de Proyección
– De Coord de Cámara -> Coord de Pantalla
(clipping)
Matríces de Modelado
Sistema de coordenadas
de modelado
Sistema de coordenadas
de mundo
Transformaciones
De Modelado
Modelo
IMPORTANTE: Hay 4 instancias del modelo “tetera”
cada instancia requiere una matríz de modelado distinta
Matríz de Vista
Sistema de
coordenadas
de vista
(origen de cámara)
Sistema de
coordenadas
de mundo
Matríz de Vista
Sistema de
coordenadas
de mundo
Sistema de
coordenadas
de vista
(origen de cámara)
Librería gl-matrix.js (glmatrix.net)
Funciones matemáticas para el manejo de Matrices y
Vectores. Hay dos versiones disponibles 1.x y 2.x
Formato general de las funciones sobre matrices
mat4.<operación>(output, input ,param. de operación)
var m1 = mat4.create(); // m1=identidad
mat4.translate(m1, m1, [0, 0, -10]); // trasladar -10 en Z
mat4.rotate(m1, m1, Math.PI/2, [0, 1, 0]); // Rotar 90 grados
mat4.scale(m1, m1, [2, 2, 2]); // escalar 200%
mat4.scale=(m2,m1,[5,5,5]);
//
//
m1= Mtras * Mrot * Mesc
m2= Mesc * m1
mat2
mat3
mat4
Vec2
Vec3
vec4
Cálculo de Matríz de Vista
mat4.lookAt(outputMat,
cameraPosition, // posición de la cámara en el mundo
cameraTarget, // punto al cual mira la cámara en el mundo
upVector
// si Z es arriba, comunmente glm::vec3(0,0,1)
);
Vista en Pantalla
Matríz de Proyección
2D
Transformación
De Proyección
X,Y,Z
X,Y
Concatenación de transformaciones
Mt= Mt1 * Mr2 * Me3
V´=Mt * V
Espacio Modelado
Me3
Escalar x 2
Espacio de Mundo
Mr2
Rotar 45º
Mt1
Trasladar
X + 10
Concatenación de transformaciones
Espacio Modelado
Espacio de Mundo
Me3
Mr2
Mt1
Secuencia de transformaciones
Paso 1) Escalar (2,2,2)
Paso 2) Rotar (45,0,0,1)
Paso 3) Trasladar (10,0,0)
duplicar escala
45º respecto de Z
trasladar 10 en X
Concatenación de transformaciones
Espacio Modelado
Espacio de Mundo
Me3
Mr2
Mt1
Código JS (atención!!! El último paso se hace primero)
m1=mat4.create()
mat4.translate(m1,m1, [trX,trY,trZ]])
mat4.rotate(m1,m1,ang, (ejeX,ejeY,ejeZ))
mat4.scale(m1, m1,(escX,escY,escZ))
dibujarModelo(M);
m1=Identidad
m1=Mt1*I
m1=Mt1*Mr2*I
m1=Mt1*Mr2*Me3*I
Caso práctico – Escena 3D
llanta
cubierta
tuerca
chasis
eje
Espacio de modelado – objetos simples
Ejemplo – Objetos compuestos
Varias instancias de tuercas con diferentes
transformaciones de modelado
Objeto “Rueda” : Llanta + Cubierta
+ 8 Tuercas
Ejemplo – Objetos compuestos
Objeto “Tren”:
Eje + 2 Ruedas
Ejemplo – Objetos compuestos
Objeto “Auto”: Chasis + 2 Trenes
Ejemplo – Árbol de escena (scenegraph)
M1
Auto
M2
M3
Tren
delantero
Chasis
M4
Tren
trasero
M5
Rueda
Simples
Eje
Compuestos
M8
Cubierta
M7
Tuerca
M6
Llanta
MT=M1*M3*M4*M6
Ejemplo – dibujar objetos simples
1 dibujarCubierta(m){
// dibujar la superficie
}
2 dibujarLlanta(m) {
// dibujar la superficie
}
3 dibujarTuerca(m) {
// dibujar la superficie
}
4 dibujarChasis(m) {
// dibujar la superficie
}
5 DibujaEje(m) {
// dibujar la superficie
}
2
5
3
1
4
Ejemplo – dibujar Rueda
dibujarRueda(m4){
var m6=mat4.clone(m4) // copio por valor de m4 a m6
mat4.scale(m6,m6,[1.5 ,1.5 ,1.5]); m6=Mesc*m6
dibujarLlanta(m6);
var m8=mat4.create() // m8 = identidad, luego m8=Mesc*M4
mat4.scale(m8,m4,[2.0, 2.0, 2.0]); // escala x2
dibujarCubierta(m8);
for (i=0;i<8;i++){
var m7=mat4.create();
mat4.rotate(m7,m4, i*45, [0.0, 1.0, 0.0]);
// el ángulo depende de i
mat4.translate(m7, m7,[3.0, 0.0, 0.0]);
dibujarTuerca(m7); // m7= Mtras*Mrot*m4
}
}
Ejemplo – dibujar Tren
dibujarTren(m3){
var m5=mat4.clone(m3)
dibujarEje(m5); // m5=m3
var m4=mat4.create();
mat4.translate(m4,m3,[0.0, 40.0, 0.0]);
dibujarRueda(m4); // rueda derecha
// m4=Mtras*m3
var m4=mat4.create();
mat4.translate(m4,m3, [0.0, -40.0, 0.0]);
mat4.rotate(m4, m4, 180.0, [0.0, 0.0, 1.0]);
dibujarRueda(m4); // rueda izquierda
// m4= Mtras*Mrot*m3
}
IMPORTANTE: los ángulos en realidad deben expresarse en radianes, ej: Math.PI/2
Ejemplo – dibujar Auto
dibujarAuto(m1){
var m2=m1;
dibujarChasis(m2);
var angulo=velAngular * tiempo;
var m3=mat4.create();
mat4.translate(m3,m1,[100.0, 0.0, 0.0]);
mat4.rotate(m3,m3,angulo,[0.0, 1.0, 0.0]);
dibujarTren(m3); // tren trasero
var m3=mat4.create();
mat4.translate(m3,m1,[-100.0, 0.0, 0.0]);
mat4.rotate( m3,m3, angulo,[0.0, 1.0, 0.0]);
dibujarTren(m3); // tren delantero
}
Ejemplo – dibujar Auto
dibujarAuto{
dibujarChasis
dibujarTren{
dibujarEje
dibujarRueda{
… Idem …
}
dibujarRueda{
dibujarLlanta
dibujarCubierta
dibujarTuerca1
….
dibujarTuerca8
}
}
dibujarTren{
… Idem …
}
}
Auto
Tren
delantero
Cubierta
Auto
Rueda
Tren
Rueda
Eje
Tuerca
Llanta
Ejemplo – Escena 3D
El procesador de Vértices
Matríz de ModeladoVistaProyección Mat(4x4)
GPU – Vertex Unit
Programa de Vértices (GLSL)
Vértice 3D
Prog1 {
X, Y, Z
Vértice
transformado
X’, Y’, Z’
Vértice = MatrízMVP * Vértice
}