Cubo deformable - 3. Seleccionar y mover vertices

Objetivos
  • Incluir un frame buffer de vértices seleccionables.
  • Determinar qué vertice esta siendo seleccionado
  • Arrastrarlo editando el mesh

  • Renderizado para selección

    Seleccionar un objeto en un espacio 3D es un tema tan elaborado que necesita el apoyo de otra renderización similar de la misma escena. Es necsario pintar los objetos que se van a seleccionar con un único color y acto seguido volverla a pintar normalmente.


    ¿Como se pinta en la pantalla alternativa? Es necesario inicializar un Frame buffer, Render Buffer y una textura para guardar todos los datos pintados. El apoyo se sacó de ésta aplicación [1].


    #Nota: lo más importante es incilalizar la textura con null de imagen.
    #Nota: Ningun frame buffer va a ser retornado para pintar, sino que es necesario conectarla o desconectarla si se quiere pintar en la pantalla normal.



    Para lograr un renderizado distinto de los mismos datos, el fragment shader debe tener un boolean que determina si se esta pintando en el buffer. En ese caso todo el glFragmentColor va a ser pintado de solo un color (y único respecto al resto de objetos) para que toda el area que ocupa sea comparable con el resto de la escena.

    Determinar objeto seleccionado

    Como cada objeto está ahora con un atirbuto comparable, es posible determinar cual esta siendo seleccionado. En ese orden de ideas es necesario conocer todos los objetos, sus IDs, colores y colores de seleccion. Cuando se hace clic se recorren todos los objetos comparando dicho color de selección retornando el respectivo id en caso que se encuentre. Para resaltar el seleccionado, se altera el componente alpha del color durante mousedown .

    Mover el punto seleccionado

    Como desde las últimas sesiones ya podemos arrastrar un punto, lo unico que faltaba para deformar el mesh a nuestra manera era definir qué punto se quiería mover.
    Ahora bien en la sesión anterior se podía modificar el punto pero solo en un plano z = z 0. Para acabar esta restricción se determinó moverlo en el plano normal al vector eyeray a la altura que se encuentre el punto a mover. Surge el problema matemático de encontrar el plano normal a un vector en donde se encontrara dicho punto. En ese orden de ideas solo era necesario despejar la constante d sustituyendo en la ecuación del rayo.
    El código quedaría así

    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á


    A continuación se añade la interacción de arrastrar cualquier vertice. Se puede ver tambien la renderización alternativa de selección. Estan disponibles en la vista persectiva u ortogonal.

    See the Pen PF 3: Picking w FrameBuffer offscreen by David Mayorga (@damayor) on CodePen.

    Bibliografia:
    1. WebGL Beginner's Guide - Chapter 8
    2. Universidad Veracruzana - Intersección enter una recta y un plano en 3D

    Comentarios

    Entradas populares