Draw Three Points

This JavaScript program demonstrates how to draw three points in a WebGL program.
DrawThreePoints.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's WebGL</title>
    <script  id="idVertexShader">
  // The attribute receives data from the buffer
  attribute vec4 afPositions;

  void main() {
    gl_PointSize = 15.0;
    gl_Position = afPositions;
  }
    </script>
    <script  id="idFragmantShader">
  precision mediump float;

  void main() {
    gl_FragColor = vec4(.5, .75, 1, 1);
  }
    </script>
    <script>
function CreateShader(qGL, iType, sCode) {
  var qShader = qGL.createShader(iType);
  qGL.shaderSource(qShader, sCode);
  qGL.compileShader(qShader);
  var bSuccessfullyCompiled = qGL.getShaderParameter(qShader, qGL.COMPILE_STATUS);
  if (bSuccessfullyCompiled) {
    return qShader;
  } else {
    console.log(qGL.getShaderInfoLog(qShader));
    qGL.deleteShader(qShader);
  }
}

function CreateProgram(qGL, qVertexShader, qFragmentShader) {
  var qProgram = qGL.createProgram();
  qGL.attachShader(qProgram, qVertexShader);
  qGL.attachShader(qProgram, qFragmentShader);
  qGL.linkProgram(qProgram);
  var bSuccessfullyLinked = qGL.getProgramParameter(qProgram, qGL.LINK_STATUS);
  if (bSuccessfullyLinked) {
    return qProgram;
  }
  console.log(qGL.getProgramInfoLog(qProgram));
  qGL.deleteProgram(qProgram);
}

function Render() {
  // Get a WebGL context
  var qCanvas = document.querySelector("#idCanvas");
  var qGL = qCanvas.getContext("webgl");

  // Get the code for the shaders
  var qVertexShaderCode = document.querySelector("#idVertexShader").text;
  var qFragmentShaderCode = document.querySelector("#idFragmantShader").text;

  // Create and compile the shaders
  var qVertexShader = CreateShader(qGL, qGL.VERTEX_SHADER, qVertexShaderCode);
  var qFragmentShader = CreateShader(qGL, qGL.FRAGMENT_SHADER, qFragmentShaderCode);

  // Link the two shaders into a program
  var qProgram = CreateProgram(qGL, qVertexShader, qFragmentShader);
  var qAttributeLocation = qGL.getAttribLocation(qProgram, "afPositions");

  // Create a buffer and put three 2d points in it
  var qCoordinateBuffer = qGL.createBuffer();

  // Bind it as an ARRAY_BUFFER
  qGL.bindBuffer(qGL.ARRAY_BUFFER, qCoordinateBuffer);

  var faCoordinates = [
    -0.5, -0.5,
    -0.1, 0.7,
    0.7, -0.2,
  ];
  qGL.bufferData(qGL.ARRAY_BUFFER, new Float32Array(faCoordinates), qGL.STATIC_DRAW);

  // Tell WebGL how to convert from clip space to pixels
  qGL.viewport(0, 0, qGL.canvas.width, qGL.canvas.height);

  // Clear the canvas
  qGL.clearColor(0.85, 0.85, 0.85, 1.0);
  qGL.clear(qGL.COLOR_BUFFER_BIT);

  qGL.useProgram(qProgram);

  // Turn on the attribute
  qGL.enableVertexAttribArray(qAttributeLocation);

  // Bind the position buffer.
  qGL.bindBuffer(qGL.ARRAY_BUFFER, qCoordinateBuffer);

  // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
  var iCoordinates = 2;          // Use two coordinates per point
  var iDataType = qGL.FLOAT;     // Coordinates are 32 bit floats
  var bNormalize = false;		 // Turn off normalization
  var iStride = 0;               // The number of entries to jump over for each iteration
  var iOffset = 0;               // The first entry to start reading coordinates from
  qGL.vertexAttribPointer(qAttributeLocation, iCoordinates, iDataType, bNormalize, iStride, iOffset);

  // Draw the three points
  var iMode = qGL.POINTS;
  var iFirst = 0;
  var iCount = 3;
  qGL.drawArrays(iMode, iFirst, iCount);
}
    </script>
  </head>
  <body onload="Render()">
    <canvas id="idCanvas" width="400" height="400" style="border:1px red solid"></canvas>
  </body>
</html>
WebGL JavaScript

Draw Three Points

DrawThreePoints.html

Output
