Cubo deformable en WebGL
Como hemos visto en los últimas sesiones el objetivo general trata de proveer una herramienta desarrollada únicamente en WebGL que permita deformar un cubo en todas sus expresiones. Por ejemplo escalando una cara en el plano en que se encuentra o extruyendola a través de su eje normal. Por otro lado que se puedan mover y transformar cada uno de sus vértices por separado.
Para la entrega definitva se realizaron los siguentes adiciones:
De este modo no es dificl pintarla entonces con triangulos con (gl.TRIANGLES).
#Nota: a pesar que el piso tiene un color uniforme y no necesita colores de selección, toca tener en cuenta que si se usa con el mismo shader, es necesario asignarle dichos atributos por cada vértice. De lo contrario como no tiene todos las entradas que pide, no lo va a pintar. De lo contrario otro lado sería necesario usar otro shader para pintarlo.
desactivando el menú secundario del clic derecho.
Versión definitva
Tambien se deberia realizar la extrusión sin importar la posicion de sus vertices. Precisamente en en la dirección de su respectiva normal. Para ello solo es necsario calcular los vectores de sus dos diagonales y calcular el producto cruz.
El repositorio se puede encontrar acá y en Codepen si se desea editar. El seguimiento de todo el trabajo realizado y su duración se encuentra en este sprint .Acá se encuentra la versión en desarrollo.
Lo alcanzado hasta ahora
Los distintos temas que hemos abordado en las anteriores publicaciones incluyen:- Primera entrega
- Relación del canvas con espacio del mundo.
- Interaccion del mouse arrastrado para animar el cubo trasnformado.
- Manejo de vistas de la camara en perspectiva y ortogonal
- Editar los las dimensiones del cubo escalando o extruyendo una cara
- Segunda entrega
- Modelar y mover la camara
- Seleccionar un punto en el espacio desde cualquier posición de la cámara
- Tercera entrega
- Renderizar el frame de objetos seleccionables
- Seleccioanr cualquier vértice.
- Mover el vertice en cualquier plano.
- Objetivos finales
- Pintar un piso que provea la visisón de perspectiva en un espacio 3D
- Pintar tanto vertices como lineas o triángulos
- Extruir de acuerdo al punto seleccionado en el espacio
- Adecuar la página interactiva
Para la entrega definitva se realizaron los siguentes adiciones:
Renderización de vértices más visibles
Como ya se tienen la imagen de las aristas o vértices por separado, a partir de los mismos buffers de ubicaciones y colores, pintar tanto los puntos como las aristas. Lo único necesario despues de pintar los puntos, pintar las lineas. Solo es necsesario cambiar el arreglo de índices, su cantidad y el tipo de prmitiva pintada (gl.LINES).
De este modo no es dificl pintarla entonces con triangulos con (gl.TRIANGLES).
Renderización de una base en perspectiva
Para brindar una sensación de un espacio en 3D se pintó un cuadrado en modo malla que actuara como base. [1]. Similar el método de pintar los colores de selección, tiene en cuenta un boolean uniforme para el shader. En caso que el bool wireframe sea verdadero, todos los fragmentos (de la base) serán del mismo color. Se pinta como en la anterior sección, asisgnando los buffers propios y llamando al gl.drawElements de nuevo.
#Nota: a pesar que el piso tiene un color uniforme y no necesita colores de selección, toca tener en cuenta que si se usa con el mismo shader, es necesario asignarle dichos atributos por cada vértice. De lo contrario como no tiene todos las entradas que pide, no lo va a pintar. De lo contrario otro lado sería necesario usar otro shader para pintarlo.
Parametrización del zoom
Recuerdemos que la segunda iteración definió la posición de la cámara los ángulos angleX, angleY y zoomZ. Fue necesario incertar un slider que cambiarr el valor de dicho zoomZ
Selección de la cámara
Para evitar intercambiar la función de mover la cámara con las otras funciones, el movimeitno con la cámara se usa con el clic derecho. Solo fue necsario fue cambiar la condición por:
Versión definitva
¿Qué faltó?
El proyecto puede tener alcances indefinidos. En el sprint se pueden encontrar tareas de trabajo potenciales. No obstante lo más importante es por el momento permitir escalar/extruir cualquier cara ya que la única deformable es actualmente, la cara Frontal. Para ello se debe hacer un frame de selección para las 6 caras.Tambien se deberia realizar la extrusión sin importar la posicion de sus vertices. Precisamente en en la dirección de su respectiva normal. Para ello solo es necsario calcular los vectores de sus dos diagonales y calcular el producto cruz.
El repositorio se puede encontrar acá y en Codepen si se desea editar. El seguimiento de todo el trabajo realizado y su duración se encuentra en este sprint .Acá se encuentra la versión en desarrollo.
¡Gracias!
Comentarios
Publicar un comentario