Leccion 2: Introduccion a los shaders en WebGL

Los shaders son a grandes rasgos, pequeños programas que se ejecutan en la tarjeta gráfica para representar todos y cada uno de los píxeles que compondrán la escena final en 3D. En concreto tenemos dos tipos de shaders:

  • Vertex shader (VS): Se trata de una función de procesamiento gráfico, que se encarga de manipular y representar los vertex (vértices) en un plano 3D, se encarga por ejemplo de calcular el color, la textura o la posición en la escena de ese punto.
  • Fragment shader (FS) o Pixel shader (PS): De forma parecida al VS, estos son funciones o pequeños programitas que manipulan los fragments (algo así como píxeles con datos adicionales como color, iluminacion, etc).
WebGL y GLSL
GLSL el lenguaje para shaders

De esta manera estos programitas llamados shaders, procesan y representan finalmente una escena 3D en un monitor, ejecutandose cada VS por cada vértice, y cada FS por cada fragmento, decidiendo así la posición, color, cantidad de iluminación, etc, de cada punto de la escena.

Explicado brevemente que son los shaders, es la hora de explicar como creamos estos programitas y como se los pasamos a WebGL.

Lo primero de todo es avisar que los shaders, para que WebGL pueda manipularlos, deben estar escritos en GLSL, un lenguaje de programación muy parecido a C que la tarjeta gráfica es capaz de ejecutar.
Aclarado esto comentar que para que sea mas fácil manipular los shaders, estos los colocaremos en etiquetas <script> en la sección <head> de nuestra página HTML de este modo:

<!DOCTYPE html>
<html>
    <head>
        <title>WebGL</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- SHADER -->
        <script id="shader-vs" type="x-shader/x-vertex">
   //Vertex shader
        </script>
        <script id="shader-fs" type="x-shader/x-fragment">
   //Fragment shader
        </script>
 </head>
 <body>
 </body>
</html>

Obviamente nuestro código GLSL irá dentro de su correspondiente etiqueta <script>, que como vemos tienen diferentes atributos id, atributos que utilizaremos para leer su contenido en Javascript de la siguiente manera:

var codigoVertexShader = document.getElementById("shader-vs").textContent;
var codigoFragmentShader = document.getElementById("shader-fs").textContent;

Ahora teniendo nuestro código GLSL en javascript, mediante determinadas funciones que veremos próximamente de la API WebGL, compilaremos y ejecutaremos dicho código.

En conclusión, ya sabemos lo que son los shaders, donde irán ubicados en nuestra página HTML y como los recuperaremos con Javascript, para utilizarlos posteriormente con Webgl, así que ya estamos listos para comenzar a dibujar, que será lo que haremos y explicaremos en la siguiente lección.

Comentarios

Publicar un comentario

Si tenéis alguna duda o sugerencia, no dudéis en comentar. ;)

Entradas populares de este blog

Calcular factorial de un numero en JAVA

Ordenar cualquier array con SORT en JAVA

Modificadores de acceso (public, protected y private) JAVA