WebGL 2.0. Drawing multiple points with a vertex buffer object (VBO)

by Ivan Enzhaev

HTML

<canvas id="renderCanvas" width="200" height="200"></canvas>

CSS

#renderCanvas {
    border: 1px solid #aaaafa;
}

JavaScript

var vertexShaderSource =
    `#version 300 es
    
    in vec2 a_Position;

    void main()
    {
        gl_Position = vec4(a_Position, 0.0, 1.0);
        gl_PointSize = 7.0;
    }`;

var fragmentShaderSource =
    `#version 300 es

    precision mediump float;

    out vec4 outColor;

    void main()
    {
        outColor = vec4(1.0, 0.0, 0.0, 1.0);
    }`;

var gl = document.getElementById("renderCanvas").getContext("webgl2");

var vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vShader, vertexShaderSource);
gl.compileShader(vShader);

var fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fShader, fragmentShaderSource);
gl.compileShader(fShader);

var program = gl.createProgram();
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
gl.useProgram(program);

var vertices = [];
var x, y, radius = 0.7;
for(var angle = 30; angle < 360; angle += 60)
{
    x = radius * Math.cos(angle * Math.PI / 180);
    y = radius * Math.sin(angle * Math.PI / 180);
    vertices.push(x, y);
}

var vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

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

gl.drawArrays(gl.POINTS, 0, vertices.length / 2);