WebGL - Colores
En todos nuestros ejemplos anteriores, aplicamos color al objeto asignando un valor de color deseado al gl_FragColorvariable. Además de eso, podemos definir colores para cada vértice, al igual que las coordenadas y los índices de los vértices. Este capítulo toma un ejemplo para demostrar cómo aplicar colores a un cuadrilátero usando WebGL.
Aplicar colores
Para aplicar colores, debe definir los colores para cada vértice usando los valores RGB, en una matriz de JavaScript. Puede asignar los mismos valores a todos los vértices para tener un color único para el objeto. Después de definir los colores, debe crear un búfer de color y almacenar estos valores en él, y asociarlo a los atributos del sombreador de vértices.
En el sombreador de vértices, junto con el atributo de coordenadas (que mantiene la posición de los vértices), definimos un attribute y un varying para manejar colores.
los color atributo contiene el valor de color por vértice, y varyinges la variable que se pasa como entrada al sombreador de fragmentos. Por tanto, tenemos que asignar elcolor valor para varying.
En el sombreador de fragmentos, el varying que contiene el valor de color se asigna a gl_FragColor, que tiene el color final del objeto.
Pasos para aplicar colores
Los siguientes pasos son necesarios para crear una aplicación WebGL para dibujar un Quad y aplicarle colores.
Step 1 − Prepare the Canvas and Get the WebGL Rendering Context
En este paso, obtenemos el objeto de contexto Renderizado WebGL usando getContext().
Step 2 − Define the Geometry and Store it in the Buffer Objects
Se puede dibujar un cuadrado usando dos triángulos. Por lo tanto, en este ejemplo, proporcionamos los vértices para dos triángulos (con un borde común) e índices. Como queremos aplicarle colores, también se define una variable que contiene los valores de color y se le asignan los valores de color para cada uno (rojo, azul, verde y rosa).
var vertices = [
-0.5,0.5,0.0,
-0.5,-0.5,0.0,
0.5,-0.5,0.0,
0.5,0.5,0.0
];
var colors = [ 0,0,1, 1,0,0, 0,1,0, 1,0,1,];
indices = [3,2,1,3,1,0];Step 3 − Create and Compile the Shader Programs
En este paso, debe escribir los programas de sombreado de vértices y de fragmentos, compilarlos y crear un programa combinado vinculando estos dos programas.
Vertex Shader- En el sombreador de vértices del programa, definimos atributos vectoriales para almacenar coordenadas 3D (posición), y el color de cada vértice. UNvaringLa variable se declara para pasar los valores de color del sombreador de vértices al sombreador de fragmentos. Y finalmente, el valor almacenado en el atributo de color se asigna avarying.
var vertCode = 'attribute vec3 coordinates;'+
'attribute vec3 color;'+
'varying vec3 vColor;'+
'void main(void) {' +
' gl_Position = vec4(coordinates, 1.0);' +
'vColor = color;'+
'}';Fragment Shader - En el sombreador de fragmentos, asignamos el varying al gl_FragColor variable.
var fragCode = 'precision mediump float;'+
'varying vec3 vColor;'+
'void main(void) {'+
'gl_FragColor = vec4(vColor, 1.);'+
'}';Step 4 − Associate the Shader Programs with the Buffer Objects
En este paso, asociamos los objetos de búfer y el programa de sombreado.
Step 5 − Drawing the Required Object
Dado que estamos dibujando dos triángulos que formarán un cuádruple, usando índices, usaremos el método drawElements(). A este método, tenemos que pasarle el número de índices. El valor deindices.length indica el número de índices.
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);Ejemplo: aplicación de color
El siguiente programa demuestra cómo dibujar un cuadrante usando la aplicación WebGL y aplicarle colores.
<!doctype html>
<html>
<body>
<canvas width = "300" height = "300" id = "my_Canvas"></canvas>
<script>
/*============= Creating a canvas ==================*/
var canvas = document.getElementById('my_Canvas');
gl = canvas.getContext('experimental-webgl');
/*========== Defining and storing the geometry ==========*/
var vertices = [
-0.5,0.5,0.0,
-0.5,-0.5,0.0,
0.5,-0.5,0.0,
0.5,0.5,0.0
];
var colors = [0,0,1, 1,0,0, 0,1,0, 1,0,1,];
indices = [3,2,1,3,1,0];
// Create an empty buffer object and store vertex data
var vertex_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
// Create an empty buffer object and store Index data
var Index_Buffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
// Create an empty buffer object and store color data
var color_buffer = gl.createBuffer ();
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
/*======================= Shaders =======================*/
// vertex shader source code
var vertCode = 'attribute vec3 coordinates;'+
'attribute vec3 color;'+
'varying vec3 vColor;'+
'void main(void) {' +
' gl_Position = vec4(coordinates, 1.0);' +
'vColor = color;'+
'}';
// Create a vertex shader object
var vertShader = gl.createShader(gl.VERTEX_SHADER);
// Attach vertex shader source code
gl.shaderSource(vertShader, vertCode);
// Compile the vertex shader
gl.compileShader(vertShader);
// fragment shader source code
var fragCode = 'precision mediump float;'+
'varying vec3 vColor;'+
'void main(void) {'+
'gl_FragColor = vec4(vColor, 1.);'+
'}';
// Create fragment shader object
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
// Attach fragment shader source code
gl.shaderSource(fragShader, fragCode);
// Compile the fragmentt shader
gl.compileShader(fragShader);
// Create a shader program object to
// store the combined shader program
var shaderProgram = gl.createProgram();
// Attach a vertex shader
gl.attachShader(shaderProgram, vertShader);
// Attach a fragment shader
gl.attachShader(shaderProgram, fragShader);
// Link both the programs
gl.linkProgram(shaderProgram);
// Use the combined shader program object
gl.useProgram(shaderProgram);
/* ======== Associating shaders to buffer objects =======*/
// Bind vertex buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
// Bind index buffer object
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer);
// Get the attribute location
var coord = gl.getAttribLocation(shaderProgram, "coordinates");
// point an attribute to the currently bound VBO
gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
// Enable the attribute
gl.enableVertexAttribArray(coord);
// bind the color buffer
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
// get the attribute location
var color = gl.getAttribLocation(shaderProgram, "color");
// point attribute to the volor buffer object
gl.vertexAttribPointer(color, 3, gl.FLOAT, false,0,0) ;
// enable the color attribute
gl.enableVertexAttribArray(color);
/*============Drawing the Quad====================*/
// Clear the canvas
gl.clearColor(0.5, 0.5, 0.5, 0.9);
// Enable the depth test
gl.enable(gl.DEPTH_TEST);
// Clear the color buffer bit
gl.clear(gl.COLOR_BUFFER_BIT);
// Set the view port
gl.viewport(0,0,canvas.width,canvas.height);
//Draw the triangle
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);
</script>
</body>
</html>Si ejecuta este ejemplo, producirá el siguiente resultado: