Computación Visual Interactiva

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

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

Ejemplo de utilización de luces en WebGL. El ejercicio que se va a explicar se encuentra aquí . El código se puede encontrar tanto en codepen como en github . Nos concentraremos en los detalles de luces y obviaremos la implementación de las figuras y del grafo de escena. Solo se mencionara estos componentes cuando sea relevante. La mayoría de efectos de luces que se implementaron se hacen directamente desde el vertex shader y el fragment shader. Lo único que se necesita para poder realizar los efectos es tener el vector normal de cada vértice dibujado, y la posición de los objetos que emiten luz. A continuación se explicará el vertex shader suponiendo que ya hemos cargado todas los vectores con las posiciones que emiten luz y los vectores normales a los vertices de cada figura. Se evidencia de esta primera sección del vertex shader que hemos agregado un número importante de variables. Además de tener la posición del vértice (aVertexPosition) y la coordenada de textura (aTex

Se explicará un ejemplo de uso y manipulación de texturas en webgl. Se dibujó una escena con una lata de Coca Cola, un balón de futbol y un hershey kiss. El resultado final se puede encontrar aquí , mientras que el código se puede encontrar acá . El primer paso para poder agregarle texturas a los objetos es cargarlas como objetos de tipo Image en JavaScript. Esto se realiza en el método main: Hacemos un llamado a loadTexture por cada textura que queremos cargar. Ya que vamos a dibujar 3 objetos, hacemos 3 llamados. La implementación del método loadTexture es sencilla: Antes de cargar la textura que queremos utilizar, agregamos una por default que tiene un color azul. De esta forma, si es imposible descargar la textura por internet, al menos podemos agregarle otra. Luego, creamos el objeto image y le asignamos una función que se llamará cuando la imagen se baje por internet (onload). Este método hace el binding de la textura con el ambiente gráfico. Adicionalmente, si las