Blog Juan Bedoya

 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 ...

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.

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 ...

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...

 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

Hopalong Orbit Visualizer -  Fractales en Three.js Atractor de Barry Martin Estructura del Proyecto

Proceso 1 - Lo primero que hizo fue crear el método "drawOcta" (draw Octahedron) el  cual al ser invocado, dentro del loop de dibujo, crea  un octaedro  en el canvas de WebGL. La creaciòn de este método nos permite pintar multiples veces la figura. 2 -  Se modifico el método  " drawOcta" de forma que fuera recursivo. Con el fin de lograr que cada octaedro después de pintarse a si mismo, pinte dos octaedros debajo suyo los cuales además  giren con respecto a el. Para se hizo lo siguiente:  Se agregó el parámetro "maxDepth" el cual disminuye en 1 en cada llamada, lo que permite definir  la profundidad de la recursion. Después de pintarse a si mismo se llama "drawOcta" dos veces Cada objeto  le pasa su transformación a los siguientes llamados recursivos de "drawOcta", de modo que los hijos del objeto se basan en esa transformación para hacer su propia transformación (Rotación+Translación)