Shaders y pipeline en THREE.js

 Para este proyecto se buscaron referencias en el documento de three y referencias externas con ejemplos.

https://threejsfundamentals.org/threejs/lessons/threejs-post-processing.html

https://threejs.org/

Al principio el programa básico no funciono en repl.it que era la herramienta que estaba usando, por lo que me toco otra vez volver a jsfidle. No se sabe porque en una plataforma se ejecuta bien y en la otra falla pero se tiene la teoría de que es por el import por módulos que hace repl.it por debajo lo que no deja ejecutar las librerías necesaria.

Lo mas difícil fue encontrar una solución a este problema y hasta ahora no se sabe porque el código no se ejecuta en repl.it. una vez en js fidle se paso a crear una escena simple con un efecto predeterminado de three (glitch) tratando de comprender el proceso interno. Se descubrió después de varias lecturas que THREE como tal no deja tocar el proceso de pipeline de manera manual si no que usa una librería especial llamada "composer" para este tipo de arreglos. Podemos entender que "composer" es el pipeline resumido que ordena jerárquicamente cada "pass" que no es nada mas que los shaders modificados.

Se puede notar como la librería nos obliga a empezar con un "RenderPass" que contenga la camara y la escena, se puede tratar como un nodo inicio del cual partirá el pipeline, después cada "pass" realizara cambios que luego tomaran los siguientes en la lista hasta llegar a un nodo final. Cabe aclarar que típicamente el nodo final es un "copyShader" o un efecto de la librería que extienda de esta clase, pero no lo usamos ya que encontramos como de manera directa ver resultados con los shaders sin tener que terminar el pipeline. Este "truco" se encontró cuando realizábamos un shader personalizado para poder ver que cambios se podían realizar sin ayuda de librerías, para esto es necesario crear un objeto que será el "shader" o visto de otra manera la lista de variables y ejecuciones en los shaders establecidos para realizar diferentes cambios.

Como se puede ver se tuvo que usar el lenguaje propio de WGL para interactuar con los shaders, también hay que aclarar que como este lenguaje es nuevo para mi tuve que usar varias referencias para llegar a este resultado y el código resultante es muy básico, simplemente cambia de color en el fragment y el vertex lo deja igual. Pasando este detalle se puede notar que se pueden llegar a efectos muy diversos si se conoce bien el lenguaje ( solo hay que mirar la gran cantidad de librerías con efectos tan variados) por lo que personalmente se intentara averiguar que otros usos se le puede usar a esta herramienta. Finalmente se coloco un tablero de control con los colores para poder cambiarlos y se termino el pipeline con la opción "renderToScreen" que tiene la herramienta "pass" .

El resultado final es muy interesante y se puede usar de diversas formas pero con este proyecto queda claro que hay un largo camino que recorrer.