Cubo deformable - 2: Interacción desde cualquier vista
Objetivos de la semana
Mover la camara proveyendo una mejor interacción y visualizacion al deformar la malla.
Seleccionar y mover un vertice desde cualquier ángulo del observador con el mouse utilizando la metodología de raytracing
Mover únicamente un pixel empezando la defomración del mesh.
El avance del código se puede encontrar acá y en Codepen si se desea editar. El seguimiento del trabajo acumulado se encuentra en este sprint .
y el seguimiento de versiones en Github se encuentra acá
El enfoque de esta semana fue tratar el problema del manejo de una aplicacion interactiva 3D en una sola ventana 2D. Aprovechando que ya conocemos el funcionamiento, nos basamos en la herramienta de raytracig. [1] Es muy util cómo permiten rotar la camara con un clic. Si en una toma solo se podía mover en un plano, al rotar la cámara permite mover cualquier objeto en un plano cuya vista no era posible. Un cambio agregado es que se está realizando con la bibliotera de gl-matrix.js
Por otro lado se necesita que la selección de un elemento quede acorde a cualquier posición de la cámara. Para ello es necesario lanzar un rayo vector desde la cámara hacia al punto hecho con el clic. El lector ya debe prever que es necesario transformar las coordenadas del canvas a las coordenadas del mundo.
Ya con la dirección desde la cámara y su posición, se tiene una función del tipo
Es necesario saber con qué objeto se va a chocar y/o la información del plano de la superfice (y su respectiva normal) para saber la ubicación del punto exacto (el valor de t). Por el momento como la primera cara del cubo se encuentra en un z constante (z = 22) vamos a suponer que chocamos contra el plano
A continuación se presentan las 3 interacciones para realiar con el mouse. Estan disponibles en la vista persectiva u ortogonal.
El avance del código se puede encontrar acá y en Codepen si se desea editar. El seguimiento del trabajo acumulado se encuentra en este sprint .
y el seguimiento de versiones en Github se encuentra acá
El enfoque de esta semana fue tratar el problema del manejo de una aplicacion interactiva 3D en una sola ventana 2D. Aprovechando que ya conocemos el funcionamiento, nos basamos en la herramienta de raytracig. [1] Es muy util cómo permiten rotar la camara con un clic. Si en una toma solo se podía mover en un plano, al rotar la cámara permite mover cualquier objeto en un plano cuya vista no era posible. Un cambio agregado es que se está realizando con la bibliotera de gl-matrix.js
Por otro lado se necesita que la selección de un elemento quede acorde a cualquier posición de la cámara. Para ello es necesario lanzar un rayo vector desde la cámara hacia al punto hecho con el clic. El lector ya debe prever que es necesario transformar las coordenadas del canvas a las coordenadas del mundo.
Ya con la dirección desde la cámara y su posición, se tiene una función del tipo
Es necesario saber con qué objeto se va a chocar y/o la información del plano de la superfice (y su respectiva normal) para saber la ubicación del punto exacto (el valor de t). Por el momento como la primera cara del cubo se encuentra en un z constante (z = 22) vamos a suponer que chocamos contra el plano
Z = - zPlano 1
¿Como se determina la intersección entre un rayo (vector) y una superficie (plano)? Ya sabemos que podemos desbejar la ecuación paramétrica del vector en la ecuación del plano. Pero es necesaria una mejor opción para realizarlo en código. En este capitulo determinan una opción muyy valida para despejar la t que escalaría el rayo [2] teniendo la normal del plano y su constante de traslación, el origen del rayo y su vector de dirección.
A continuación se presentan las 3 interacciones para realiar con el mouse. Estan disponibles en la vista persectiva u ortogonal.
See the Pen PF 2: move Camera and select w ray tracing by David Mayorga (@damayor) on CodePen.
Comentarios
Publicar un comentario