Chris Pollett > Students > Pundi Muralidharan

    Print View

    [Bio]

    [Blog]

    [CS 297 Proposal]

    [Deliverable 1 - WebGL Program: The Logic Behind]

    [Deliverable 2 - The Study of OSM Data and Vector Tiles]

    [Deliverable 3 - Importing OSM Data into Postgres Database]

    [Deliverable 4 - Study of Current Tile Generators in Trend]

    [CS 297 Report - PDF]

    [CS 298 Proposal]

    [CS 298 Report-Intermediate - PDF]

    [CS 298 - Summary of Intermediate Results - PDF]

    [The Project Idea]

    [The Map Query]

    [The WebGL Shaders]

    [The Final Map]

    [CS 298 Report - PDF]

    [CS 298 Presentation - PDF]

    [CS 298 Project Source Code - ZIP]

                          

























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.