Investigacion

TEMA 3. AÑADIENDO COLOR UTILIZANDO WEBGL

Antes de comenzar a analizar los cambios necesarios para añadir color a las figuras representadas en la Lección anterior necesitamos tener un mínimo conocimiento de cómo WebGL es capaz de representar imágenes 3D a partir de los datos que obtiene del código HTML del navegador, para ello vamos a ayudarnos del diagrama de la parte inferior. El diagramabusca darnos una idea de cómo los datos de las funciones JavaScript se convierten en pixels mostrados en el canvas de WebGL.

El proceso seguido es el siguiente: cada vez que llamamos a funciones del tipo drawArrays, WebGL procesa los datos que le pasamos como atributos a esa función, además de las variables uniformes que son utilizadas por las matrices model-view y de perspectiva con las quetrabaja OpenGL, y todo ello se pasa a través del vertex shader.

Esta acción se realiza para cada vértice con sus atributos correspondientes en ese instante. El vertex shader trabaja con estos datos para diseñar el estado de la escena, y almacena los resultados en unas variables especiales denominadas varying variables. El vertex shader puede generar distinto número de varying variables, pero una enespecial es obligatoria, gl_Position, la cual contiene las coordenadas de los vértices una vez que el shader las ha procesado. Una vez generadas estas varying variables, WebGL trabaja con ellas para convertirlas en una imagen 2D y después llama al fragment shader para cada pixel de la imagen. Debemos notar que no todos los píxeles tienen un vértice asociado, pero WebGL realiza un proceso deinterpolación lineal entre píxeles que permite delimitar correctamente las formas que se quieren representar. El propósito del fragmnet shader no es otro que retornar el color para cada uno de los puntos resultantes de este proceso de interpolación, y lo almacena en una varying variable denominada gl_FragColor. Una vez realizado el fragment shader WebGL pasa los resultados al Frame buffer el cual loshace llegar a la tarjeta gráfica del equipo y son representados en la pantalla. Esta pequeña explicación sobre el flujo de los datos desde la función JavaScript hasta que los resultados son mostrados en la pantalla nos sirve para hacernos una idea de cómo WebGL accede al color de los vértices, el cuál está en la función JavaScript. La idea que debemos sacar de todo esto es que no se tiene un accesodirecto desde JavaScript hasta el fragment shader, pero sí que podemos pasarle un número de varying variables con la información de los vértices, no sólo su posición, si no también su color. Con esta introducción al funcionamiento podemos ya observar los pequeños cambios que a introducir en nuestro código para colorear las figuras.

Una vez que tenemos una ligera idea de cómo WebGL trabaja conel color vamos a echar un vistazo al código de esta lección. Los cambios en el código resaltan por su color rojo.

Desarrollo WebGL — Leccion 2: Color



#ifdef GL_ES precision highp float; #endif

varying vec4 vColor;

void main(void) { gl_FragColor = vColor; }

attribute vec3 aVertexPosition; attribute vec4 aVertexColor;

uniform mat4 uMVMatrix; uniform mat4 uPMatrix;varying vec4 vColor;

void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vColor = aVertexColor; }



var gl; function initGL(canvas) { try { gl = canvas.getContext("experimental-webgl"); gl.viewportWidth = canvas.width; gl.viewportHeight = canvas.height; } catch(e) { } if (!gl) { alert("No se ha podido iniciar WebGL, lo sentimos :-("); } }

functiongetShader(gl, id) { var shaderScript = document.getElementById(id); if (!shaderScript) { return null; }

var str = ""; var k = shaderScript.firstChild; while (k) { if (k.nodeType == 3) { str += k.textContent; } k = k.nextSibling; }

var shader;

if (shaderScript.type == "x-shader/x-fragment") { shader = gl.createShader(gl.FRAGMENT_SHADER); } else if (shaderScript.type == "x-shader/x-vertex")...