Proyecto WebGL




http://jsbedoya-proyecto.herokuapp.com/
Controles:
Saltar: Espacio
Mover cámara en el plano XZ: WASD
Mover cámara en Y: Flechas Arriba Abajo
Rotar Cámara: Flechas Izquierda Derecha
https://github.com/juansb827/webgl-FlappyBird

Entrega 2

En esta entrega el enfoque principal fue diseñar un sistema que permita mover objetos y
detectar la detección de colisiones entre estos.

Para esto se requiere que el sistema haga lo siguiente.
  • Crear un objeto SceneObject (pájaro o chimenea por ahora) con su respectiva hitbox,
    este tipo objeto sólo se usa para detectar colisiones, para guardar la información para
    pintar un objeto (vértices, índices, normal etc..)  se usa una clase llamada Mesh. 
  • Mover un SceneObject (y su hitbox)
  • Detectar si las hitboxes de dos SceneObject colisionan.
Con el fin de reducir el número de bugs al diseñar el sistema, decidí utilizar la metodología TDD (Test Driven Development). Es decir para cada funcionalidad se realizó primero el test, luego se escribió el código para la funcionalidad y se hicieron los cambios necesarios hasta que el test fuera aprobado.

Las pruebas se realizaron utilizando Mocha y ChaiJS




Las pruebas se encuentran en test/test.js y ejecutan con npm test
Planeación
Tarea
Tiempo
Diseño de Sistema
0.5
Pruebas Unitarias
4
Implementación del Sistema
9
Total
13.5

Entrega 3
En esta entrega se agrego sky box usando un cube map, a este skybox  se le aplican las transformaciones de la cámara como a los demas objetos pero con una diferencia, se eliminan primero las translaciones. De esta manera el skybox siempre va verse a la misma distancia asi la camara se mueva.

Se agregaron sonidos cada vez que se suma un punto, o se acaba la partida.

Se crearon diferentes programas:
  • Shader Sin Textura
  • Shaders Textura
  • Shaders para con Cubemap
Adicionalmente se mejoro la estructura del código para que se pueda volver al estado inicial facilmente.


Tarea
Tiempo
Skybox
4.5
Creación de diferentes Shaders
3
Sonidos
1
Mejor manejo del estado del juego
2
Total
10.5







Comentarios

Publicar un comentario

Entradas populares de este blog

Sombras en WebGL

 Sombras en WebGl El ejemplo esta organizado en varios archivos por lo tanto no fue posible subirlo a FiddleJS, por esta razón se desplegó en heroku.  https://jsbedoya-sombras.herokuapp.com/ Antes de iniciar con las sombras es necesario tener luz en la escena. Por esta razón inicialmente el fragment shader debe calcular el color basado en el angulo de la cara del objeto con respecto a la fuente de luz. Esto se hace calculando el producto punto la normal de la cara del objeto y el vector normalizado que apunta a la fuente de luz.  Para agregar el efecto de sombra es necesario modificar el fragment shader de tal forma que la intensidad del color se calcule de acuerdo a la posición con respecto a la fuente de luz.  Si el objeto esta cubierto por otro objeto, su color sera el mínimo, es decir solo la luz ambiente. Si no esta cubierto por otro objeto, la intensidad de color se calcula normalmente. Para calcular esta posición con respecto a la ...
Leer más

Ejemplo Basico Processing

Imagen
El ejemplo a continuación fue tomado de Ejemplo Processing Después  de instalar Processing, se crea un nuevo SketchBook en este se coloca el código del ejemplo y se presiona ejecutar Aunque este es un ejemplo de Processing, puede ser visualizado en el navegador gracias a P5.js.Para esto es necesario importar la libreria de JavaScript P5.js y ajustar ajustar el código del ejemplo a Javascript y a los metodos especificos de P5.js El codigo ajustado a P5.js fue tomado de Ejemplo P5.js La principal diferencia de Processing con WebGl, es su alto nivel, como se puede ver en el ejemplo, para crear una elipse, simplemente llamamos el método ellipse() con los atributos necesarios y Processing realizara por nosotros todo el trabajo. Además para realizar una animación, basta con aumentar o disminuir las variables necesarias en el método draw(),  ya que Processing lo llama automáticamente para pintar cada "Frame" de la animación.
Leer más

Objeto siguiendo una curva

Imagen
Objeto siguiendo una curva de Bezier Se quiere que un objeto sigue un camino el cual esta determinado por una curva de Bezier. Primero iniciamos dibujando un camino básico  e intentamos mover nuestro objeto atravesar de el. Para esto diseñamos un método el cual traslada nuestro objeto a través de los puntos de un camino. El camino estará compuesto de 3 , puntos, y usando la primitiva LINE_STRIP ,  podremos dibujar 2 lineas. El método tiene las siguientes variables:  currentPoint = Ultimo punto desde donde el objeto se empezo a mover nextPoint     = Siguiente punto a donde se quiere mover el objeto  difX             = Diferencia en X entre nextPoint y currentPoint  difY             = Diferencia en Y entre nextPoint y currentPoint  forward       = "true" si el objeto se esta moviendo hacia el final de la curva "false si se est...
Leer más