Utilizar los shaders para aplicar color en WebGL

Habiendo creado un cuadraro en la demostración anterior, el siguiente paso es agregar algo de color. Nosotros podemos hacer esto a través de los shaders.

Aplicando color a los vértices

En GL, los objetos son construidos  utilizando conjuntos de vértices, cada uno posee una posición y un color; Asignado automáticamente, todos los otros pixeles de colores (y todos sus otros atributos, incluyendo la posición) son procesados utilizando una interpolación, creando automáticamente gradientes suaves. Anteriormente, nuestro shader del vértice no aplicaba ningún color específico a los vértices; En medio de este y el fragment shader asignaban el color adecuado de blanco a cada pixel, el cuadrado entero era desplegado como un blanco sólido.

Vamos a suponer que queremos desplegar un gradiente en cada una de las esquinas con diferente color: rojo, azul, verde, y blanco. La primer cosa por hacer es establecer el color de los cuatro vértices. Para hacer esto, primero necesitamos crear un arreglo de vértices de colores , después los guardaremos dentro del buffer WebGL; podemos realizarlo agregando el siguiente código a nuestra función initBuffers(): 

  var colors = [
    1.0,  1.0,  1.0,  1.0,    // blanco
    1.0,  0.0,  0.0,  1.0,    // rojo
    0.0,  1.0,  0.0,  1.0,    // verde
    0.0,  0.0,  1.0,  1.0     // azul
  ];
  
  squareVerticesColorBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
}

El código comienza por crear un arreglo JavaScript que contenga cuatro vectores de 4-valores, uno para cada color del vértice. Entonces un nuevo buffer WebGL es reservado para almacenar esos colores, y el arreglo es convertido en floats (Números de tipo flotante) y se almacena dentro del buffer.

Para designar los colores a utilizar, el vertex shader necesita ser actualizado para extraer el color apropiado del buffer de color:

    <script id="shader-vs" type="x-shader/x-vertex">
      attribute vec3 aVertexPosition;
      attribute vec4 aVertexColor;
    
      uniform mat4 uMVMatrix;
      uniform mat4 uPMatrix;
      
      varying lowp vec4 vColor;
    
      void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vColor = aVertexColor;
      }
    </script>

La diferencia principal en esto es que por cada vértice, nosotros vamos a establecer el color correspondiente desde el arreglo de color.

Coloreando los fragments

Anteriormente utilizábamos el fragment shader como un actualizador:

    <script id="shader-fs" type="x-shader/x-fragment">
      void main(void) {
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
      }
    </script>

Según vayamos tomando el color interpolado para cada pixel, nosotros simplemente necesitamos cambiar esto para obtener el valor de la variable vColor:

    <script id="shader-fs" type="x-shader/x-fragment">
    	varying lowp vec4 vColor;
    	
      void main(void) {
        gl_FragColor = vColor;
      }
    </script>

Es un cambio simple; cada fragmento simplemente recibe el color interpolado basado en su posición relativa a los vértices, en lugar que de un valor establecido.

Dibujando usando los colores

Como siguiente, es necesario agregar código hacia la rutina initShaders() esto para inicializar el atributo de color para el shader program:

  vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
  gl.enableVertexAttribArray(vertexColorAttribute);

Then, drawScene() puede ser revisado para que utilice dichos colores cuando dibuje el cuadrado:

gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer); gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);

Ver el código completo | Abrir demostración en una nueva página