This article is mainly through VBO objects to store multiple vertex data, draw multiple points.

In the OpenGL(Notes for Getting Started) Graphics Pipeline article, we learned about the benefits of using VBO objects.

– Learning Objectives:

  • VBO object creation and use;

Note: VBO generation needs to use a one-dimensional array;

VBO is created and used in WebGL

  • Key functions:

    1. gl.createBuffer(); Create buffer object;

    2. gl.bindBuffer(gl.ARRAY_BUFFER,VBO); ARRAY_BUFFER is the vertex buffer type;

    3. gl.bufferData(gl.ARRAY_BUFFER,sizeof); Configure the currently bound buffer VBO. A function that copies user-defined data to the current binding buffer.

      Parameters:

      • Target buffer type;

      • The size of the transmitted data (in bytes);

      • Actual data;

      • Specify how the graphics card manages the given data;

        • GL_STATIC_DRAW: data almost unchanged;
        • GL_DYNAMIC_DRAW: Data will change a lot;
        • GL_STREAM_DRAW: Data changes each time it is drawn;

        The vertex data is stored in the graphics card’s memory

    4. Link vertex attribute gl.vertexattribPointer ();

    5. Open the vertex cache object gl. EnableVertexAttribArray (0);

      function webgl() {
         const canvas = document.getElementById('canvas');
         const gl = canvas.getContext('webgl');
         if(! gl) {return;
         }

         // Vertex data --VBO objects
         const vertexData = new Float32Array([
             0.0.0.0.0.5.0.0.0.0.0.5
         ])


         const buffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW); 

         // Vec4 vector floating point number
         const VertexSource = ` attribute vec4 a_pos; void main(){ gl_Position=a_pos; Gl_PointSize = 10.0; } `;

         Float has no default precision qualifier on the fragment shader
         //precision Specifies the default precision
         const FragmentSource = ` precision lowp float; uniform vec4 u_color; void main(){ gl_FragColor=vec4(u_color); } `;

         const shaderProgram = initShaders(gl, VertexSource, FragmentSource);
         
          // activate the shader program (use the shader program)
         gl.useProgram(shaderProgram);

         // Inform WEBGL which VBO is associated with which attribute variable
         const a_pos = gl.getAttribLocation(shaderProgram, "a_pos");
         gl.vertexAttribPointer(a_pos, 2, gl.FLOAT, false.0.0.0.0); 
         gl.enableVertexAttribArray(0);// Enable -- vertex cache object
         
         const u_color = gl.getUniformLocation(shaderProgram, "u_color");
         gl.uniform4fv(u_color, [0.0.1.0.0.0.1.0]);

         // Draw -- specifies the primients
         gl.drawArrays(gl.TRIANGLES, 0.3);

     }
  webgl();
Copy the code