Using the Fragment Shader to Draw an Anti-Aliased Cosine Graph

This JavaScript program demonstrates how to use the pixel coordiantes in the fragment shader to draw an anti-aliased cosine graph in a WebGL program.

FragmentDrawAntialiasedCosineGraph.html

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

    <script  id="idVertexShader" type="c">
      attribute vec2 av2Vertex;
      void main() {
        gl_Position = vec4(av2Vertex, 0.0, 1.0);
      }
    </script>

    <script  id="idFragmantShader" type="c">
      precision mediump float;

      vec4 ColorLines(vec4 v4InitColor, float fScale, float fCoord, float fPixelSize) {
        vec4 v4GraphLineColor = vec4(0.85, 0.85, 0.85, 1.0);
        vec4 v4AxisColor = vec4(0.5, 0.5, 0.5, 1.0);
        // This should always be odd because the middle one will be the axis
        // It must be a constant in order to be used in a for loop
        const int kiLinesPerLength = 17;
        float fDelta = fScale*2.0/float(kiLinesPerLength - 1);
        float fLeast = -fScale;
        for (int i = 0; i < kiLinesPerLength; ++i) {
          float fDistToLine = abs(fCoord + fLeast + float(i)*fDelta);
          if (fDistToLine < fPixelSize) {
            vec4 v4LineColor = ((i == kiLinesPerLength/2) ? v4AxisColor : v4GraphLineColor);
            float fFill = pow(fDistToLine/fPixelSize, .5);
            return (1.0 - fFill)*v4LineColor + fFill*v4InitColor;
          }
        }
        return v4InitColor;
      }

      uniform float ufCanvasWidth;
      uniform float ufCanvasHeight;
      float fScale = 4.0;
      float fPixelHeight = fScale*2.0/ufCanvasHeight;
      void main() {
        // Scale and shift to the range [-fScale, fScale]
        float fX = fScale*(2.0*gl_FragCoord.x/ufCanvasWidth - 1.0);
        float fY = fScale*(2.0*gl_FragCoord.y/ufCanvasHeight - 1.0);
        // Distance from the sin graph in the y direction
        // Get the background color
        vec4 v4BackColor = vec4(1.0, 1.0, 1.0, 1.0);
        vec4 v4GraphColor = vec4(0.0, 1.0, 0.0, 1.0);
        gl_FragColor = v4BackColor;
        gl_FragColor = ColorLines(gl_FragColor, fScale, fX, fPixelHeight);
        gl_FragColor = ColorLines(gl_FragColor, fScale, fY, fPixelHeight);
        float fDY = abs(fY - cos(fX));
        if (fDY < fPixelHeight) {
          // Anti-alias by square root of the distance on the other channels
          float fFill = pow(fDY/fPixelHeight, .5);
          gl_FragColor = (1.0 - fFill)*v4GraphColor + fFill*gl_FragColor;
        }
      }
    </script>

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

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

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

      // Compile and link the program
      gqProgram = gqGL.createProgram();
      gqGL.attachShader(gqProgram, qVertexShader);
      gqGL.attachShader(gqProgram, qFragmentShader);
      gqGL.linkProgram(gqProgram);
      gqGL.useProgram(gqProgram);
    }

    function CreateBuffers() {
      var faVertices = new Float32Array([1.0, 1.0,  -1.0, 1.0,  1.0, -1.0,  -1.0, -1.0]);

      var qVerticesBuffer = gqGL.createBuffer();
      gqGL.bindBuffer(gqGL.ARRAY_BUFFER, qVerticesBuffer);
      gqGL.bufferData(gqGL.ARRAY_BUFFER, faVertices, gqGL.STATIC_DRAW);

      var qVertexLoc = gqGL.getAttribLocation(gqProgram, 'av2Vertex');
      gqGL.vertexAttribPointer(qVertexLoc, 2, gqGL.FLOAT, false, 0, 0);
      gqGL.enableVertexAttribArray(qVertexLoc);

      // Unbind the buffer
      gqGL.bindBuffer(gqGL.ARRAY_BUFFER, null);
    }

    function Initialization() {
      CreateProgramAndContext();
      CreateBuffers();
      var fCanvasWidth = gqGL.getUniformLocation(gqProgram, 'ufCanvasWidth');
      var fCanvasHeight = gqGL.getUniformLocation(gqProgram, 'ufCanvasHeight');
      gqGL.uniform1f(fCanvasWidth, gqGL.drawingBufferWidth);
      gqGL.uniform1f(fCanvasHeight, gqGL.drawingBufferHeight);

      gqGL.clearColor(0.0, 0.0, 0.0, 1.0);
      gqGL.clear(gqGL.COLOR_BUFFER_BIT);
      gqGL.drawArrays(gqGL.TRIANGLE_STRIP, 0, 4);
    }
    </script>
  </head>
  <body onload="Initialization();">
    <canvas id="idCanvasWebGL" width="400", height="400" style="border:1px solid green"></canvas>
  </body>
</html>

WebGL JavaScript

Using the Fragment Shader to Draw an Anti-Aliased Cosine Graph

FragmentDrawAntialiasedCosineGraph.html

Output