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