In the previous two articles, we introduced how to use WebGL for simple drawing. Today, we will briefly discuss how to use buffers.

• DEMO Preview
• http://zmofei.github.io/yes-webgl/demo/drawpoint.html
• DEMO Source Code
• https://github.com/zmofei/yes-webgl/blob/master/demo/drawpoint.html
• DEMO Online Debugging
• http://jsbin.com/vavude/1/edit

Additionally, I have placed some resources used during the learning process on the GitHub Yes-webGL project https://github.com/zmofei/yes-webgl. If anyone has good suggestions or is willing to write tutorials together, feel free to reach out to me.

What is a Buffer?

Through the previous examples, we should be very familiar with the rendering process of WebGL: Create Project -> Bind Shader -> Clear Canvas -> Draw Canvas. Before each drawing, we clear the contents of the canvas and perform new drawings. However, what if we need to draw multiple points or shapes at once? Drawing one by one may not be satisfactory in terms of performance, especially when we have tens of thousands of points to draw.

At this time, buffers start to make their presence felt. We can store our data in a buffer and then draw the data from the buffer all at once.

Some Encapsulation

In this DEMO, we encapsulated complex steps like getting WebGL context and binding shaders. If you want to understand how these two steps work, please refer to the previous two articles.

Steps to Use Buffers

Now let's get to the point and see how we handle these details in our DEMO.

Using a buffer is very simple. Here, we complete the creation, binding, and data input of the buffer through the following steps:

1. Create a buffer
2. Bind the buffer to the WebGL object
3. Pass data into the buffer

1. createBuffer()

var vertexColorBuffer = gl.createBuffer();

Create a buffer; this is quite understandable and requires no further explanation.

2. bindBuffer()

gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);

Bind the created buffer to the WebGL object. Here, we used two parameters: the first is the type. Since we are using array point data, we use the system-provided gl.ARRAY_BUFFER variable.

The second parameter is the buffer object we need to bind, which is the buffer object we created in the first step.

3. bufferData()

var verticesColors = new Float32Array([
     0.5,  0.5,  0,
    -0.5, -0.5,  0,
    -0.5,  0.5,  0,
     0.5, -0.5,  0]);
//...
gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);

In this step, we pass our point position array into the buffer object. The method accepts three parameters:

• Data type, which can be gl.ARRAY_BUFFER or gl.ELEMENT_ARRAY_BUFFER. In this example, we use gl.ARRAY_BUFFER.
• Data
• Buffer type, with several options available: GL_STREAM_DRAW, GL_STATIC_DRAW, GL_DYNAMIC_DRAW.

Using GLSL Variables

In this example, we pass some vertex coordinates to the vertex shader through JS. So how are these coordinates assigned?

var VSHADER_SOURCE =
        'attribute vec4 a_Position;
' +
        'void main() {
' +
        '  gl_Position = a_Position;
' +
        '  gl_PointSize = 10.0;
' +
        '}
';

First, look at the vertex shader. We declare the variable a_Position, and then we assign values using the following method.

var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
 gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
 gl.enableVertexAttribArray(a_Position);

getAttribLocation(program, name)

In JS, we first get the variable a_Position address in the renderer using getAttribLocation(). This method accepts two variables:

• program project object
• name variable name

Next, we specify how to handle the value in the renderer using the vertexAttribPointer() method.

vertexAttribPointer(index, size, type, normalized, stride, offset);

This is a somewhat complex method.

• index: target index bound in gl.ARRAY_BUFFER. It is a bit difficult to understand, but generally, we can obtain this value using getAttribLocation.
• size: length of each attribute [1, 2, 3, 4(default)]
• type: specifies the data type. We have two choices: [gl.FLOAT (default)|gl.FIXED]
• normalized: whether to initialize the input data [gl.FALSE|gl.TRUE]
• stride: number of items per group [0-255]
• offset: starting position of the data in this group (starts from 0)

Next, enable enableVertexAttribArray().

enableVertexAttribArray(index);

• index: Same as the index in vertexAttribPointer

## Summary

OK, so far we have learned very basic knowledge of WebGL. Next, we will try to take a real step into 3D learning.

Quick Links

• 《WebGL Learning Notes | WebGL Tutorial (One)》
• 《WebGL Learning Notes | WebGL Tutorial (Two)》