WebGL 2.0. Points in a circle

by Ivan Enzhaev

HTML

<canvas id="renderCanvas" width="300" height="300" style="border: 1px solid #aaaafa"></canvas>

JavaScript

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

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

var fragmentShaderSource =
    `#version 300 es
    
    precision mediump float;

    out vec4 outColor;

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

function main()
{
    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 a_Position = gl.getAttribLocation(program, "a_Position");

    var radius = 0.7;
    for (var angle = 0; angle < 360; angle += 10)
    {
        var x = radius * Math.cos(angle * Math.PI / 180);
        var y = radius * Math.sin(angle * Math.PI / 180);

        gl.vertexAttrib2f(a_Position, x, y);

        gl.drawArrays(gl.POINTS, 0, 1);
    }
}
main();