The Shaders for WebGL defined in HTML

Description: This part of the project was to define WebGL shaders that manipulate the vertices, in the HTML script tag. Two shaders, the vertex and the fragment shader are defined and are used to manipulate the vertices.

The shaders are defined as follows, in the HTML file:

Vertex shader:
      <script id="pointVertexShader" type="x-shader/x-vertex">
       attribute vec4 worldCoord;
       attribute vec3 coordinates;
       attribute vec4 aVertexColor;
       uniform mat4 mapMatrix;
       varying vec4 vColor;
       void main()
       {
       // transform world coordinate by matrix uniform variable
       gl_Position = mapMatrix * worldCoord;
       //gl_Position = vec4(coordinates, 1.0);
       vColor = aVertexColor; //varying colors for each vertex. Can change shades later to transparent
       }
      </script>

The vertex shader is used to manipulate the positions of the vertices (lat-lon) points and plot them on the HTML 5 canvas. It also defines the colors for the vertices. Here, I had used yellow color for roads and grey colors for points of interest.

Fragment shader:
      <script id="pointFragmentShader" type="x-shader/x-fragment">
       precision mediump float;
       varying vec4 vColor;
       void main()
       {
       gl_FragColor = vColor;
       }
       </script>

The fragment shader interpolates the colors between vertices.