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:
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:
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:
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.
- 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).
 |
| 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.
Esperando a la siguiente entrada :)
ResponderEliminarYa somos 2 :D estupenda guía, muchísimas gracias.
ResponderEliminarEsperando la lección 3 >D
ResponderEliminar