Color the Vertices of a Triangle

This JavaScript program demonstrates how to color the vertices of a triangle in WebGL.

ColorTriangle.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's WebGL</title>

    <script  id="idVertexShader" type="c">
      // The attributes receive data from the buffers
      attribute vec2 av2VertexCoordinates;
      attribute vec4 av4Color;
      varying vec4 vv4Color;
      void main() {
        vv4Color = av4Color;
        gl_Position = vec4(av2VertexCoordinates, 0.0, 1.0);
      }
    </script>

    <script  id="idFragmantShader" type="c">
      precision mediump float;
      varying vec4 vv4Color;
      void main() {
        gl_FragColor = vv4Color;
      }
    </script>

    <script type="text/javascript">
    function Render() {
      // Get the WebGL Context
      var qCanvas = document.querySelector("#idCanvasWebGL");
      var qGL = qCanvas.getContext("webgl");

      // Compile the vertex shader
      var sVertexShaderCode = document.querySelector("#idVertexShader").text;
      var qVertexShader = qGL.createShader(qGL.VERTEX_SHADER);
      qGL.shaderSource(qVertexShader, sVertexShaderCode);
      qGL.compileShader(qVertexShader);

      // Compile the fragment shader
      var sFragmentShaderCode = document.querySelector("#idFragmantShader").text;
      var qFragmentShader = qGL.createShader(qGL.FRAGMENT_SHADER);
      qGL.shaderSource(qFragmentShader, sFragmentShaderCode);
      qGL.compileShader(qFragmentShader);

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

      qGL.clearColor(1.0, 1.0, 1.0, 1);
	  qGL.clear(qGL.COLOR_BUFFER_BIT);

      qVertexBuffer = qGL.createBuffer();
      qGL.bindBuffer(qGL.ARRAY_BUFFER, qVertexBuffer);
      var qVertexAttribute = qGL.getAttribLocation(qProgram, "av2VertexCoordinates");
      var adTriangleVertices = [
        0.0, 0.5,
        -0.433, -0.25,
        0.433, -0.25
      ];
      qGL.bufferData(qGL.ARRAY_BUFFER, new Float32Array(adTriangleVertices), qGL.STATIC_DRAW);
      var iVertexItemSize = 2;
      var iVertexItemCount = 3;
      qGL.vertexAttribPointer(qVertexAttribute, iVertexItemSize, qGL.FLOAT, false, 0, 0);
      qGL.enableVertexAttribArray(qVertexAttribute);

      qColorBuffer = qGL.createBuffer();
	  qGL.bindBuffer(qGL.ARRAY_BUFFER, qColorBuffer);
      var qColorAttribute = qGL.getAttribLocation(qProgram, "av4Color");
      var adVertexColors = [
        0.0, 1.0, 1.0, 1.0,
        1.0, 0.0, 1.0, 1.0,
        1.0, 1.0, 0.0, 1.0
      ];
      qGL.bufferData(qGL.ARRAY_BUFFER, new Float32Array(adVertexColors), qGL.STATIC_DRAW);
      var iColorItemSize = 4;
      var iColorItemCount = 3;
      qGL.vertexAttribPointer(qColorAttribute, iColorItemSize, qGL.FLOAT, false, 0, 0);
      qGL.enableVertexAttribArray(qColorAttribute);

      qGL.drawArrays(qGL.TRIANGLES, 0, iColorItemCount);
    }
    </script>
  </head>
  <body onload="Render()">
    <canvas id="idCanvasWebGL" width="512" height="512" style="border:1px solid red"></canvas>
  </body>
</html>

WebGL JavaScript

Color the Vertices of a Triangle

ColorTriangle.html

Output