WebGL: aplicación de muestra

Hemos discutido los conceptos básicos de WebGL y la canalización de WebGL (un procedimiento que se sigue para renderizar aplicaciones de gráficos). En este capítulo, vamos a tomar una aplicación de muestra para crear un triángulo usando WebGL y observar los pasos seguidos en la aplicación.

Estructura de la aplicación WebGL

El código de la aplicación WebGL es una combinación de JavaScript y OpenGL Shader Language.

Se requiere JavaScript para comunicarse con la CPU
Se requiere OpenGL Shader Language para comunicarse con la GPU.

Aplicación de muestra

Tomemos ahora un ejemplo simple para aprender a usar WebGL para dibujar un triángulo simple con coordenadas 2D.

<!doctype html>
<html>
   <body>
      <canvas width = "300" height = "300" id = "my_Canvas"></canvas>
		
      <script>
         /* Step1: Prepare the canvas and get WebGL context */

         var canvas = document.getElementById('my_Canvas');
         var gl = canvas.getContext('experimental-webgl');

         /* Step2: Define the geometry and store it in buffer objects */

         var vertices = [-0.5, 0.5, -0.5, -0.5, 0.0, -0.5,];

         // Create a new buffer object
         var vertex_buffer = gl.createBuffer();

         // Bind an empty array buffer to it
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
         
         // Pass the vertices data to the buffer
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

         // Unbind the buffer
         gl.bindBuffer(gl.ARRAY_BUFFER, null);

         /* Step3: Create and compile Shader programs */

         // Vertex shader source code
         var vertCode =
            'attribute vec2 coordinates;' + 
            'void main(void) {' + ' gl_Position = vec4(coordinates,0.0, 1.0);' + '}';

         //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 = 'void main(void) {' + 'gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' + '}';

         // Create fragment shader object
         var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

         // Attach fragment shader source code
         gl.shaderSource(fragShader, fragCode);

         // Compile the fragment shader
         gl.compileShader(fragShader);

         // Create a shader program object to store 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 programs
         gl.linkProgram(shaderProgram);

         // Use the combined shader program object
         gl.useProgram(shaderProgram);

         /* Step 4: Associate the shader programs to buffer objects */

         //Bind vertex buffer object
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

         //Get the attribute location
         var coord = gl.getAttribLocation(shaderProgram, "coordinates");

         //point an attribute to the currently bound VBO
         gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);

         //Enable the attribute
         gl.enableVertexAttribArray(coord);

         /* Step5: Drawing the required object (triangle) */

         // 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.drawArrays(gl.TRIANGLES, 0, 3);
      </script>
   </body>
</html>

Producirá el siguiente resultado:

Si observa el programa anterior con atención, hemos seguido cinco pasos secuenciales para dibujar un triángulo simple usando WebGL. Los pasos son los siguientes:

Step 1 − Prepare the canvas and get WebGL rendering context

Obtenemos el objeto de lienzo HTML actual y obtenemos su contexto de representación WebGL.

Step 2 − Define the geometry and store it in buffer objects

Definimos los atributos de la geometría como vértices, índices, color, etc., y los almacenamos en las matrices de JavaScript. Luego, creamos uno o más objetos de búfer y pasamos las matrices que contienen los datos al objeto de búfer respectivo. En el ejemplo, almacenamos los vértices del triángulo en una matriz de JavaScript y pasamos esta matriz a un objeto de búfer de vértice.

Step 3 − Create and compile Shader programs

Escribimos programas de sombreado de vértices y de fragmentos, los compilamos y creamos un programa combinado al vincular estos dos programas.

Step 4 − Associate the shader programs with buffer objects

Asociamos los objetos de búfer y el programa de sombreado combinado.

Step 5 − Drawing the required object (triangle)

Este paso incluye operaciones como borrar el color, borrar el bit del búfer, habilitar la prueba de profundidad, configurar el puerto de visualización, etc. Finalmente, debe dibujar las primitivas requeridas utilizando uno de los métodos: drawArrays() o drawElements().

Todos estos pasos se explican con más detalle en este tutorial.