WebGL 2.0. Pass a point color to a fragment shader

by Ivan Enzhaev

HTML

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

JavaScript

var vertexShaderSource =
    `#version 300 es
    
    void main()
    {
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
        gl_PointSize = 10.0;
    }`;

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

    out vec4 outColor;
        
    void main()
    {
        outColor = vec4(u_PointColor, 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 u_PointColor = gl.getUniformLocation(program, "u_PointColor");

var r = 0.5, g = 0.8, b = 0.5;
gl.uniform3f(u_PointColor, r, g, b);

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