Entradas

Sprint 4 - Proyecto Final

Imagen
Descripción del Proyecto Para el proyecto final se propuso hacer un fruit ninja en WebGL en 3D. Para soportar 3D quiero modificar la mecánica del juego. En la versión que planeo crear el jugador se encuentra en un salón. El jugador se puede mover al rededor del salón como si estuviese en un first-person shooter. El objetivo del jugador es prevenir que los objetos (frutas) que estén cayendo del techo toquen el suelo. Para lograr esto el jugador debe desplazarse al rededor del salón e ir pegándole (click) a los objetos que están cayendo. Como en la versión original, el jugador solo puede dejar caer 3 veces un objeto al piso. Así mismo, existen objetos que al destruirse causan que el jugador pierda automáticamente (bombas). Estado Actual Luego de haber agregado la mecánica básica del juego en el Sprint 3, en el Sprint 4 me dedique a proveer un mecanismo de puntajes y de perdida al juego. Adicionalmente, me dedique a pulir la implementación con detalles como sombras, y a volv
Publicar un comentario
Leer más

Sprint 3 - Proyecto Final

Imagen
Descripción del Proyecto Para el proyecto final se propuso hacer un fruit ninja en WebGL en 3D. Para soportar 3D quiero modificar la mecánica del juego. En la versión que planeo crear el jugador se encuentra en un salón. El jugador se puede mover al rededor del salón como si estuviese en un first-person shooter. El objetivo del jugador es prevenir que los objetos (frutas) que estén cayendo del techo toquen el suelo. Para lograr esto el jugador debe desplazarse al rededor del salón e ir pegándole (click) a los objetos que están cayendo. Como en la versión original, el jugador solo puede dejar caer 3 veces un objeto al piso. Así mismo, existen objetos que al destruirse causan que el jugador pierda automáticamente (bombas). Estado Actual Luego de haber agregado la habitación y el movimiento de la cámara con mouse + AWSD en el Sprint 2, para el Sprint 3 me dedique a agregar la mecánica básica del juego. Esto implica generar frutas de forma aleatoria que caigan del techo, agre
Publicar un comentario
Leer más

Sprint 2 - Proyecto Final

Imagen
Descripción del Proyecto Para el proyecto final se propuso hacer un fruit ninja en WebGL en 3D. Para soportar 3D quiero modificar la mecánica del juego. En la versión que planeo crear el jugador se encuentra en un salón. El jugador se puede mover al rededor del salón como si estuviese en un first-person shooter. El objetivo del jugador es prevenir que los objetos (frutas) que estén cayendo del techo toquen el suelo. Para lograr esto el jugador debe desplazarse al rededor del salón e ir pegándole (click) a los objetos que están cayendo. Como en la versión original, el jugador solo puede dejar caer 3 veces un objeto al piso. Así mismo, existen objetos que al destruirse causan que el jugador pierda automáticamente (bombas). Estado Actual Luego de haber creado una serie de objetos y clases útiles para acelerar el desarrollo del proyecto final en el Sprint 1, en el Sprint 2 me dedique a lograr mover la cámara como si se estuviese en un first person shooter. El código se encuent
Publicar un comentario
Leer más

Profundización - HistoPyramid & PointBuilder

Imagen
Se explicará la parte correspondiente a la implementación del algoritmo HistoPyramid de este ejemplo . Para observar el código comodamente se pueden dirigir a este repositorio . El ejemplo permite modificar la imagen resultante mediante la parametrización de un gran número de variables. Se recomienda que jueguen con el tablero de control antes de seguir leyendo para ver que es posible hacer con este ejemplo. Para este ejemplo, lo que hace posible que el ray tracing funcione a una buena velocidad es el hecho que se utiliza HistoPyramid con marching cubes para sacar de una textura 2D que contiene realmente una imagen 3D, solo los puntos de interés para dibujar rápidamente el contorno de una superficie. El contorno que se dibuja luce así con las opciones iniciales: Algoritmo HistoPyramid - PointBuilder Antes de adentrarnos en cómo funciona HistoPyramid en el código de este ejemplo, vamos a decir en general de que trata este algoritmo. Tradicionalmente, la GPU se ha uti
Publicar un comentario
Leer más

Sprint 1 - Proyecto Final

Descripción del Proyecto Para el proyecto final  propongo hacer un fruit ninja en WebGL en 3D. Para soportar 3D quiero modificar la mecánica del juego. En la versión que planeo crear el jugador se encuentra en un salón. El jugador se puede mover al rededor del salón como si estuviese en un first-person shooter. El objetivo del jugador es prevenir que los objetos (frutas) que estén cayendo del techo toquen el suelo. Para lograr esto el jugador debe desplazarse al rededor del salón e ir pegándole (click) a los objetos que están cayendo. Como en la versión original, el jugador solo puede dejar caer 3 veces un objeto al piso. Así mismo, existen objetos que al destruirse causan que el jugador pierda automáticamente (bombas). Estado actual Se trabajó en crear una serie de objetos y clases útiles para acelerar el desarrollo del proyecto final. Estas se encuentran en un repositorio. https://github.com/adelavegaf/webgl-final-proyect Tiempo de desarrollo Se ha dispuesto alrededo
Publicar un comentario
Leer más

Ray Tracer

Imagen
Se trabajará sobre este ejemplo . La idea es mejorar la legibilidad del código y agregarle algo de funcionalidad. La versión adaptada del ejemplo se encuentra aquí . Para ver la nueva funcionalidad, se le debe dar click al botón que dice Triangle. Teniendo esto en cuenta,  y que el ejemplo hace extenso uso de un fragment shader dinámico para generar los objetos, el esfuerzo se centró en mejorar la legibilidad de estos fragment shaders incorporando string templates (feature de JavaScript ES6). También se incorporaron otros features, como utilizar const y let en vez de vars. Por ejemplo, estos fragment shaders pasaron de ser escritos así: A ser escritos así: Nótese que ya es innecesario unir strings con + para incorporar variables o para unir varias lineas. Ahora, la funcionalidad que se le agregó al código fue crear un nuevo objeto que genera sombras en la escena. El objeto que se creo fue un triángulo. Como los demás objetos de este ejemplo, el triángulo se puede d
Publicar un comentario
Leer más

Sombras

Imagen
Para esta ocasión, se le va a agregar sombras a la animación hecha del carro en el parque. Partimos de lo hecho en el ejemplo anterior. El resultado final se puede encontrar en codepen . Se recomienda ver el código por Github y no por el codepen ya que todo se mezclo en un solo archivo. Para agregarle sombras al ejemplo se utilizo un shadow map. Básicamente, la idea es hacer un primer pasado por la escena a dibujar para calcular la distancia minima que hay desde el objeto que emite luz, hacia todas las direcciones donde esta luz se proyecta. Luego, se hace una segunda pasada por la escena donde sí se dibujan los objetos. Al dibujar los objetos verificamos si la distancia entre la posición del vértice actual y el objeto que emite luz es menor o igual a la distancia minima reportada. Si es menor o igual, significa que este vértice no necesita sombra, de lo contrario, sí necesita. Para implementar la primera pasada creamos un nuevo frame buffer y dibujamos sobre este la escena en
Publicar un comentario
Leer más