Entradas

Proyecto WebGL

Imagen
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ó pr...
Publicar un comentario
Leer más

WebGL Wind

Imagen
WebglWind    https://github.com/mapbox/webgl-wind DEMO   Implementación usual ● Matriz de velocidad según posición ● Matriz de partículas  ● Mover cada partícula según la velocidad en su posición actual ● Reiniciar la posición de algunas aleatoriamente ● Desvanecer el frame actual ● Dibujar el siguiente Frame Problemas ● Soporta un número bajo de partículas  ( ~5k ) ● Procesamiento en la CPU   Solución ● Lógica en GPU ● Imagen para velocidad ● Textura para posición  Velocidad   ● Rojo: Componente X de la velocidad     ● Verde: Componente Y de la velocidad    Posición
Publicar un comentario
Leer más

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 ...
Publicar un comentario
Leer más

Luces en WebGL

Se agrega un buffer para cada figura, en este se guarda los valores de la normal de cada vertice. La normal en cada punto de una esfera es simplemente las coordenadas del vertice. La normal de las tapas del cilindro y el cono, apunta hacia Y positivo para la tapa superior y hacia Y negativo para la tapa inferior. Como el cilindro y el cono se pintan iterando el angulo theta de de 0 a 2PI, la normal de sus costados equivale a las coordenadas del circulo unitario, es decir X= cos ( Θ), Y = 0, Z = sin(Θ)  A las normales de los costados del cono adicionalmente se les agrega un componente en Y, proporcional a la inclinación del costado del cono. Se modifica el fragment shader para que calcule modifique la intensidad del color de acuerdo a el producto punto entre la normal del vertice  y el angulo en el cual apunta la luz.
Publicar un comentario
Leer más

Texturas en webgl

Ejemplo de texturas en WebGL Lo primero que se debe hacer es cambiar el vertex shader, en vez de colores se usaran texturas por lo tanto se cambie el atributo  vec3 vertColor; a vec2 v ec2 vertTexCoord;  También es necesario realizar cambios en el fragmentShader, el color ahora se debe calcular de acuerdo a la textura por lo tanto pasamos de tener   gl_FragColor = vec4(fragColor, 1.0);  a gl_FragColor = texture2D(sampler, fragTexCoord); Para generar los vertices del cilindro  se utilizan las funciónes que se explican  aca . Se unifica la funciones para las tres partes del cilindro, (2 tapas y seccion lateral) en una sola,   se eliminan los colores y se cambian por texturas. Para generar los vertices del cono, se utiliza la misma función pero se modifica para que uno de las tapas del cono tenga menor radio. Tanto el cono como el cilindro van de  Θ=0 a  Θ = 2pi, por lo tanto  para el mapeo de texturas se coloca ...
Publicar un comentario
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...
Publicar un comentario
Leer más

Ejemplo Cámaras

 Primera Persona Se coloca la cámara debajo de la punta inferior del primer octaedro y se deja apuntando hacia el X positivo. Tercera Persona Se coloca la cámara apuntando hacia el  primer octaedro  y se aleja  la cámara de este 10 unidades tanto para X como para Y. Long Shot  Se coloca la cámara apuntando hacia el origen y se mueve 50 unidades hacia el Z positivo. Superior Se coloca la cámara sobre el movil (Y= 30 ) y se deja apuntando hacia Y negativo
Publicar un comentario
Leer más