WebGL - Points de dessin

Nous avons discuté plus tôt (au chapitre 5) de la manière de suivre un processus étape par étape pour dessiner une primitive. Nous avons expliqué le processus en cinq étapes. Vous devez répéter ces étapes chaque fois que vous dessinez une nouvelle forme. Ce chapitre explique comment dessiner des points avec des coordonnées 3D dans WebGL. Avant d'aller plus loin, relookons les cinq étapes.

Étapes requises

Les étapes suivantes sont nécessaires pour créer une application WebGL pour dessiner des points.

Step 1 − Prepare the Canvas and Get the WebGL Rendering Context

Dans cette étape, nous obtenons l'objet de contexte de rendu WebGL à l'aide de la méthode getContext().

Step 2 − Define the Geometry and Store it in the Buffer Objects

Puisque nous dessinons trois points, nous définissons trois sommets avec des coordonnées 3D et les stockons dans des tampons.

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

Step 3 − Create and Compile the Shader Programs

Dans cette étape, vous devez écrire des programmes vertex shader et fragment shader, les compiler et créer un programme combiné en liant ces deux programmes.

Vertex Shader - Dans le vertex shader de l'exemple donné, nous définissons un attribut vectoriel pour stocker les coordonnées 3D, et l'attribuons au gl_position variable.
gl_pointsizeest la variable utilisée pour attribuer une taille au point. Nous attribuons la taille de point à 10.

var vertCode = 'attribute vec3 coordinates;' +

   'void main(void) {' +
      ' gl_Position = vec4(coordinates, 1.0);' +
      'gl_PointSize = 10.0;'+
   '}';

Fragment Shader - Dans le shader de fragment, nous attribuons simplement la couleur du fragment au gl_FragColor variable

var fragCode = 'void main(void) {' +' gl_FragColor = vec4(1, 0.5, 0.0, 1);' +'}';

Step 4 − Associate the Shader Programs to Buffer Objects

Dans cette étape, nous associons les objets tampons au programme shader.

Step 5 − Drawing the Required Object

Nous utilisons la méthode drawArrays()pour dessiner des points. Puisque le nombre de points que nous voulons dessiner est de trois, la valeur de comptage est de 3.

gl.drawArrays(gl.POINTS, 0, 3)

Exemple - Dessiner trois points à l'aide de WebGL

Voici le programme WebGL complet pour dessiner trois points -

<!doctype html>
<html>
   <body>
      <canvas width = "570" height = "570" 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.0,0.5,0.0,
            -0.25,0.25,0.0, 
         ];

         // Create an empty buffer object to store the vertex buffer
         var vertex_buffer = gl.createBuffer();

         //Bind appropriate array buffer to it
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

         // Pass the vertex data to the buffer
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

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

         /*=========================Shaders========================*/

         // vertex shader source code
         var vertCode =
            'attribute vec3 coordinates;' +

            'void main(void) {' +
               ' gl_Position = vec4(coordinates, 1.0);' +
               'gl_PointSize = 10.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 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 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);

         // 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);

         /*============= Drawing the primitive ===============*/

         // 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.POINTS, 0, 3);
      </script>
   </body>
</html>

Il produira le résultat suivant -