Draw a Single Point

This JavaScript program demonstrates how to draw a single point in a WebGL program.

DrawASinglePoint.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's WebGL</title>
  </head>
  <script>
function render() {
    // Get A WebGL context
    var qCanvas = document.querySelector("#idWebGL");
    var qGL = qCanvas.getContext("webgl");
    qGL.clearColor(0.75, 0.75, 0.75, 1.0);
    qGL.clear(qGL.COLOR_BUFFER_BIT);

    // The Vertex Shader
    var sVertextShaderCode = 'void main() { gl_Position = vec4(0.5, -.2, 0.0, 1.0); gl_PointSize = 25.0; }';
    var qVertexShader = qGL.createShader(qGL.VERTEX_SHADER);
    qGL.shaderSource(qVertexShader, sVertextShaderCode);
    qGL.compileShader(qVertexShader);

    // The Fragment Shader
    var sFragShaderCode = 'void main() { gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0); }';
    var qFragmentShader = qGL.createShader(qGL.FRAGMENT_SHADER);
    qGL.shaderSource(qFragmentShader, sFragShaderCode);
    qGL.compileShader(qFragmentShader);

    // Compile and link the program
    var qProgram = qGL.createProgram();
    qGL.attachShader(qProgram, qVertexShader);
    qGL.attachShader(qProgram, qFragmentShader);
    qGL.linkProgram(qProgram);

    // Deallocate
    qGL.detachShader(qProgram, qVertexShader);
    qGL.detachShader(qProgram, qFragmentShader);
    qGL.deleteShader(qVertexShader);
    qGL.deleteShader(qFragmentShader);

    // Initialize Attributes
    var qBuffer;
    qGL.enableVertexAttribArray(0);
    qBuffer = qGL.createBuffer();
    qGL.bindBuffer(qGL.ARRAY_BUFFER, qBuffer);
    qGL.vertexAttribPointer(0, 1, qGL.FLOAT, false, 0, 0);

    qGL.useProgram(qProgram);
    qGL.drawArrays(qGL.POINTS, 0, 1);

    // Deallocate
    qGL.useProgram(null);
    if (qBuffer) qGL.deleteBuffer(qBuffer);
    if (qProgram) qGL.deleteProgram(qProgram);
}
  </script>
  <body onload="render()">
    <canvas id="idWebGL" width="400" height="400" style="border:1px black solid;">
    </canvas>
  </body>
</html>

WebGL JavaScript

Draw a Single Point

DrawASinglePoint.html

Output