WebGL - Exemple d'application

Nous avons discuté des bases de WebGL et du pipeline WebGL (une procédure suivie pour rendre les applications graphiques). Dans ce chapitre, nous allons prendre un exemple d'application pour créer un triangle à l'aide de WebGL et observer les étapes suivies dans l'application.

Structure de l'application WebGL

Le code d'application WebGL est une combinaison de JavaScript et d'OpenGL Shader Language.

JavaScript est nécessaire pour communiquer avec le processeur
OpenGL Shader Language est nécessaire pour communiquer avec le GPU.

Exemple d'application

Prenons maintenant un exemple simple pour apprendre à utiliser WebGL pour dessiner un triangle simple avec des coordonnées 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>

Il produira le résultat suivant -

Si vous observez attentivement le programme ci-dessus, nous avons suivi cinq étapes séquentielles pour dessiner un triangle simple en utilisant WebGL. Les étapes sont les suivantes -

Step 1 − Prepare the canvas and get WebGL rendering context

Nous obtenons l'objet canevas HTML actuel et obtenons son contexte de rendu WebGL.

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

Nous définissons les attributs de la géométrie tels que les sommets, les indices, la couleur, etc., et les stockons dans les tableaux JavaScript. Ensuite, nous créons un ou plusieurs objets tampon et transmettons les tableaux contenant les données à l'objet tampon respectif. Dans l'exemple, nous stockons les sommets du triangle dans un tableau JavaScript et passons ce tableau à un objet tampon de sommet.

Step 3 − Create and compile Shader programs

Nous écrivons des programmes vertex shader et fragment shader, les compilons et créons un programme combiné en liant ces deux programmes.

Step 4 − Associate the shader programs with buffer objects

Nous associons les objets tampons et le programme de shader combiné.

Step 5 − Drawing the required object (triangle)

Cette étape comprend des opérations telles que l'effacement de la couleur, l'effacement du bit de tampon, l'activation du test de profondeur, la définition du port d'affichage, etc. drawArrays() ou drawElements().

Toutes ces étapes sont expliquées plus en détail dans ce tutoriel.