Draw an Equilateral Triangle

This JavaScript program demonstrates how to draw an equilateral triangle in a WebGL program.

DrawEquilateralTriangle.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's WebGL</title>
    <script type="text/javascript">
    var qGL;
    var qShaderProgram;
    var qVertexBuffer;

    function CreateGLContext(qCanvasElement) {
      var saNames = ["webgl", "experimental-webgl"];
      var qContext = null;
      for (var i = 0; i < saNames.length; i++) {
        try {
          qContext = qCanvasElement.getContext(saNames[i]);
        } catch(e) {}
        if (qContext) {
          break;
        }
      }
      if (qContext) {
        qContext.viewportWidth = qCanvasElement.width;
        qContext.viewportHeight = qCanvasElement.height;
      } else {
        alert("Failed to create WebGL context!");
      }
      return qContext;
    }

    function LoadShader(qType, sShaderSource) {
      var qShader = qGL.createShader(qType);
      qGL.shaderSource(qShader, sShaderSource);
      qGL.compileShader(qShader);
      if (!qGL.getShaderParameter(qShader, qGL.COMPILE_STATUS)) {
        alert("Error compiling shader" + qGL.getShaderInfoLog(qShader));
        qGL.deleteShader(qShader);
        return null;
      }
      return qShader;
    }

    function SetupShaders() {
      var sVertexShaderSource =
        "attribute vec3 aVertexPosition;              \n"+
        "void main() {                                \n"+
        "  gl_Position = vec4(aVertexPosition, 1.0);  \n"+
        "}                                            \n";
      var sFragmentShaderSource =
        "precision mediump float;                     \n"+
        "void main() {                                \n"+
        "  gl_FragColor = vec4(1.0, 0.5, 0.5, 1.0);   \n"+
        "}                                            \n";
      var qVertexShader = LoadShader(qGL.VERTEX_SHADER, sVertexShaderSource);
      var qFragmentShader = LoadShader(qGL.FRAGMENT_SHADER, sFragmentShaderSource);

      qShaderProgram = qGL.createProgram();
      qGL.attachShader(qShaderProgram, qVertexShader);
      qGL.attachShader(qShaderProgram, qFragmentShader);
      qGL.linkProgram(qShaderProgram);

      if (!qGL.getProgramParameter(qShaderProgram, qGL.LINK_STATUS)) {
        alert("Failed to setup shaders");
      }

      qGL.useProgram(qShaderProgram);
      qShaderProgram.vertexPositionAttribute = qGL.getAttribLocation(qShaderProgram, "aVertexPosition");
    }

    function SetupBuffers() {
      qVertexBuffer = qGL.createBuffer();
      qGL.bindBuffer(qGL.ARRAY_BUFFER, qVertexBuffer);
      var daTriangleVertices = [
        0.0, 0.5, 0.0,
        -0.433, -0.25, 0.0,
        0.433, -0.25, 0.0
      ];
      qGL.bufferData(qGL.ARRAY_BUFFER, new Float32Array(daTriangleVertices), qGL.STATIC_DRAW);
      qVertexBuffer.itemSize = 3;
      qVertexBuffer.numberOfItems = 3;
    }

    function Draw() {
      qGL.viewport(0, 0, qGL.viewportWidth, qGL.viewportHeight);
      qGL.clearColor(1.0, 1.0, 1.0, 1.0);
      qGL.clear(qGL.COLOR_BUFFER_BIT);
      qGL.vertexAttribPointer(qShaderProgram.vertexPositionAttribute, qVertexBuffer.itemSize, qGL.FLOAT, false, 0, 0);
      qGL.enableVertexAttribArray(qShaderProgram.vertexPositionAttribute);
      qGL.drawArrays(qGL.TRIANGLES, 0, qVertexBuffer.numberOfItems);
    }

    function Start() {
      qCanvasElement = document.getElementById("idCanvasWebGL");
      qGL = CreateGLContext(qCanvasElement);
      SetupShaders();
      SetupBuffers();
      Draw();
    }
    </script>
  </head>
  <body onload="Start();">
    <canvas id="idCanvasWebGL" width="400", height="400" style="border:1px solid red"></canvas>
  </body>
</html>

WebGL JavaScript

Draw an Equilateral Triangle

DrawEquilateralTriangle.html

Output