Ray Tracer

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 desplazar en cualquier dirección. Para agregar este objeto, agregamos funciones nuevas en glsl:

La primera determina sí existe una intersección entre un rayo y el triángulo. De existir la intersección, retorna la distancia entre el origen del rayo y el triángulo. De lo contrario, retorna una distancia grande.

La segunda función determina cual es el vector normal al vértice donde el rayo intersectó con el triángulo.

Ya que dibujamos un triángulo, siempre va a ser el mismo vector normal, que es el producto cruz entre los puntos que conforman el triángulo.

Estas dos funciones de glsl se utilizan en una nueva clase: Triangle.

Como se evidencia de los métodos. Esta clase va escribiendo código en glsl para poder dibujar un triangulo. Se apoya de los métodos definidos anteriormente para reducir el código. Los llamados a estos métodos se hacen en "getIntersectCode" y en "getNormalCalculationCode()". Finalmente, un método que toca proveer es el de getMinCorner y getMaxCorner. Este método sirve para que la aplicación pueda calcular el bounding box a nuestro triángulo. Este bounding box se utiliza como ayuda visual para el usuario cuando esta arrastrando el objeto por el canvas.

Bitácora de Tiempos

Para esta tarea se dispuso de 12 horas. Las 12 horas se consumieron en el desarrollo de la tarea. Fue interesante modificar el código de otra persona que agregarle funcionalidades a código que yo mismo creé. El modelo de WebGL también fue distinto ya que no se definieron en ningún lado las coordenadas de los objetos en un buffer. Me costó un poco adaptarme a este cambio.