17025135_Jischeng.Liu_cw2.uclcg

function setup()
{
	UI = {};
	UI.tabs = [];
	UI.titleLong = 'Rasterization Demo';
	UI.titleShort = 'rasterizationDemo';
	UI.numFrames = 1000;
	UI.maxFPS = 24;
	UI.renderWidth = 800;
	UI.renderHeight = 400;

	UI.tabs.push(
		{
		visible: true,
		type: `x-shader/x-fragment`,
		title: `Rasterization`,
		id: `RasterizationDemoFS`,
		initialValue: `#define PROJECTION
#define RASTERIZATION
#define CLIPPING
#define INTERPOLATION
#define ZBUFFERING
#define ANIMATION

precision highp float;
uniform float time;

// Polygon / vertex functionality
const int MAX_VERTEX_COUNT = 8;

uniform ivec2 viewport;

struct Vertex {
    vec3 position;
    vec3 color;
};

struct Polygon {
    // Numbers of vertices, i.e., points in the polygon
    int vertexCount;
    // The vertices themselves
    Vertex vertices[MAX_VERTEX_COUNT];
};

// Appends a vertex to a polygon
void appendVertexToPolygon(inout Polygon polygon, Vertex element) {
    for (int i = 0; i < MAX_VERTEX_COUNT; ++i) {
        if (i == polygon.vertexCount) {
            polygon.vertices[i] = element;
        }
    }
    polygon.vertexCount++;
}

// Copy Polygon source to Polygon destination
void copyPolygon(inout Polygon destination, Polygon source) {
    for (int i = 0; i < MAX_VERTEX_COUNT; ++i) {
        destination.vertices[i] = source.vertices[i];
    }
    destination.vertexCount = source.vertexCount;
}

// Get the i-th vertex from a polygon, but when asking for the one behind the last, get the first again
Vertex getWrappedPolygonVertex(Polygon polygon, int index) {
    if (index >= polygon.vertexCount) index -= polygon.vertexCount;
    for (int i = 0; i < MAX_VERTEX_COUNT; ++i) {
        if (i == index) return polygon.vertices[i];
    }
}

// Creates an empty polygon
void makeEmptyPolygon(out Polygon polygon) {
  polygon.vertexCount = 0;
}

// Clipping part

#define ENTERING 0
#define LEAVING 1
#define OUTSIDE 2
#define INSIDE 3

// function to judge cross type of two lines that defined by two pairs of vertecies
int getCrossType(Vertex poli1, Vertex poli2, Vertex wind1, Vertex wind2) {
#ifdef CLIPPING
    // judge whether two vertices are inside or outside the edge
    float type1 = (poli1.position.x - wind1.position.x) * (wind2.position.y - wind1.position.y) - (poli1.position.y - wind1.position.y) * (wind2.position.x - wind1.position.x);
    float type2 = (poli2.position.x - wind1.position.x) * (wind2.position.y - wind1.position.y) - (poli2.position.y - wind1.position.y) * (wind2.position.x - wind1.position.x);
  
  if (type1 >= 0.0){
    if(type2 >= 0.0){
      return INSIDE;     // two verteces are both inside the edge
    }else{
      return LEAVING;    // the 1st vertex inside and the 2nd vertex outside the edge, so their line is leaving
    }
  }else{
    if(type2 >= 0.0){
      return ENTERING;    // the 1st vertex outside and the 2nd vertex inside the edge, so their line is entering
    }else{
      return OUTSIDE;     // both two vertiecs are outside the edge
    }
  }
#else
    return INSIDE;
#endif
}

// This function assumes that the segments are not parallel or collinear.
// Assume a and b on the same line, while c and d on the same line
Vertex intersect2D(Vertex a, Vertex b, Vertex c, Vertex d) {
#ifdef CLIPPING
    // compute x and y coordinates of intersection point
    float numX= (a.position.x * b.position.y - a.position.y * b.position.x) * (c.position.x - d.position.x) - (a.position.x - b.position.x) * (c.position.x * d.position.y - c.position.y * d.position.x);
    float numY= (a.position.x * b.position.y - a.position.y * b.position.x) * (c.position.y - d.position.y) - (a.position.y - b.position.y) * (c.position.x * d.position.y - c.position.y * d.position.x);
    float den= (a.position.x - b.position.x) * (c.position.y - d.position.y) - (a.position.y - b.position.y) * (c.position.x - d.position.x);
  
    // using (x-a.position.x)/(b.position.x-a.position.x)=(z-a.position.z)/(b.position.z-a.position.z) to get z
    float numZ = a.position.z + (b.position.z - a.position.z) * (numX/den - a.position.x) / (b.position.x - a.position.x);
  	
    return Vertex(vec3(numX/den, numY/den, numZ), vec3(1.0));
#else
    return a;
#endif
}


void sutherlandHodgmanClip(Polygon unclipped, Polygon clipWindow, out Polygon result) {
    Polygon clipped;
    copyPolygon(clipped, unclipped);

    // Loop over the clip window
    for (int i = 0; i < MAX_VERTEX_COUNT; ++i) {
      
        if (i >= clipWindow.vertexCount) break;
      
        // Make a temporary copy of the current clipped polygon
        Polygon oldClipped;
        copyPolygon(oldClipped, clipped);    
        copyPolygon(result, clipped);
        // Set the clipped polygon to be empty
        makeEmptyPolygon(clipped);

        // Loop over the current clipped polygon
        for (int j = 0; j < MAX_VERTEX_COUNT; ++j) {
            if (j >= oldClipped.vertexCount) break;
            
            // Handle the j-th vertex of the clipped polygon. This should make use of the function 
            // intersect() to be implemented above.
#ifdef CLIPPING
            // edge, which determined by vertex poli1 and poli2 of polygon, to be checked
            Vertex poli1 = getWrappedPolygonVertex(oldClipped,j);
            Vertex poli2 = getWrappedPolygonVertex(oldClipped,j+1);
          
            // window edge that determined by vertex wind1 and wind2
            Vertex wind1 = getWrappedPolygonVertex(clipWindow,i);
            Vertex wind2 = getWrappedPolygonVertex(clipWindow,i+1);
            
            // get cross type by calling getCrossType()
            int crossType = getCrossType(poli1, poli2, wind1, wind2);
            
            if(crossType == INSIDE){         // INSIDE: add the current vertex
               appendVertexToPolygon(clipped, poli1);
            }else if(crossType == ENTERING){    // ENTERING: add the intersection point
               Vertex intersectionP=intersect2D(poli1, poli2, wind1, wind2);
               appendVertexToPolygon(clipped, intersectionP);
            }else if(crossType == LEAVING){     // LEAVING: add the current vertex and intersection point
               Vertex intersectionP=intersect2D(poli1, poli2, wind1, wind2);
               appendVertexToPolygon(clipped, poli1);
               appendVertexToPolygon(clipped, intersectionP);
            } 
            // OUTSIDE: do nothing
          
#else
            appendVertexToPolygon(clipped, getWrappedPolygonVertex(oldClipped, j));
#endif 
        }
    }

    // Copy the last version to the output
    copyPolygon(result, clipped);
}

// Rasterization and culling part

#define INNER_SIDE 0
#define OUTER_SIDE 1

// Assuming a clockwise (vertex-wise) polygon, returns whether the input point 
// is on the inner or outer side of the edge (ab)
int edge(vec2 point, Vertex a, Vertex b) {
  
// For clockwise polygon, if the point on the right side of edge, the point is inner the edge
#ifdef RASTERIZATION
    float l = (point.x - a.position.x) * (b.position.y - a.position.y) - (point.y - a.position.y) * (b.position.x - a.position.x); 
    if (l >= 0.0){       // if l > 0, the point on the right side (inner side) of the edge (if l==0, the point on the edge)
      return INNER_SIDE;
    }else {             // if l < 0, the point on the left side (outter side) of the edge
      return OUTER_SIDE;
    }
#endif
    return OUTER_SIDE;
}

// Returns if a point is inside a polygon or not
bool isPointInPolygon(vec2 point, Polygon polygon) {
    // Don't evaluate empty polygons
    if (polygon.vertexCount == 0) return false;
    // Check against each edge of the polygon
    bool rasterise = true;
    for (int i = 0; i < MAX_VERTEX_COUNT; ++i) {
        if (i < polygon.vertexCount) {
#ifdef RASTERIZATION
          // determine if the point is inside or outside the edge that determined by current vertex and next vertex of the polygon
          // if the point on the inner side of the edge, return true; otherwise, return false
          Vertex poli1 = getWrappedPolygonVertex(polygon, i);
          Vertex poli2 = getWrappedPolygonVertex(polygon, i+1);
          if(edge(point, poli1, poli2) == OUTER_SIDE){
            return rasterise = false;
          }
#else
            rasterise = false;
#endif
        }
    }
    return rasterise;
}

bool isPointOnPolygonVertex(vec2 point, Polygon polygon) {
    for (int i = 0; i < MAX_VERTEX_COUNT; ++i) {
        if (i < polygon.vertexCount) {
          	ivec2 pixelDifference = ivec2(abs(polygon.vertices[i].position.xy - point) * vec2(viewport));
          	int pointSize = viewport.x / 200;
            if( pixelDifference.x <= pointSize && pixelDifference.y <= pointSize) {
              return true;
            }
        }
    }
    return false;
}

float triangleArea(vec2 a, vec2 b, vec2 c) {
    // https://en.wikipedia.org/wiki/Heron%27s_formula
    float ab = length(a - b);
    float bc = length(b - c);
    float ca = length(c - a);
    float s = (ab + bc + ca) / 2.0;
    return sqrt(max(0.0, s * (s - ab) * (s - bc) * (s - ca)));
}

Vertex interpolateVertex(vec2 point, Polygon polygon) {
    float weightSum = 0.0;
    vec3 colorSum = vec3(0.0);
    vec3 positionSum = vec3(0.0);
    float depthSum = 0.0;
    bool depthSumCheck = false;    // declare a boolean to check if the depthSum equals zero (i.e.if z-buffer is calculated)
  
    for (int i = 0; i < MAX_VERTEX_COUNT; ++i) {
        if (i < polygon.vertexCount) {
#if defined(INTERPOLATION) || defined(ZBUFFERING)
          // compute sum of weights, i.e. total area of the polygon
   			 Vertex poli1 = getWrappedPolygonVertex(polygon, i);
    		 Vertex poli2 = getWrappedPolygonVertex(polygon, i+1);
    		 Vertex poli3 = getWrappedPolygonVertex(polygon, i+2);
    		 weightSum = triangleArea(vec2(poli1.position.x, poli1.position.y), vec2(poli2.position.x, poli2.position.y), vec2(poli3.position.x, poli3.position.y));
  
          // compute weight for each vertex, i.e. (area of corresponded triangular)/(total area of the polygon)
          float area = triangleArea(vec2(poli2.position.x,poli2.position.y), vec2(poli3.position.x,poli3.position.y), point);
          float weight = area/weightSum;
          
#else
#endif
#ifdef ZBUFFERING
          // compute depth (i.e. z coordinate) of the point by using 1/z
          depthSum = depthSum + 1.0/poli1.position.z * weight;
          depthSumCheck = true;      // if the depthSum does not equal zero, set boolean as true
#endif
#ifdef INTERPOLATION
         // interpolate color of the point 
         if(depthSumCheck) {         // if the depthSum does not equal zero, calculate colorSum based on 1/depth
          		colorSum = colorSum + (poli1.color/poli1.position.z) * weight;
          }else{                                    // if the depthSum equal zero, 1/depth will be infinite
					colorSum = colorSum + poli1.color * weight;        // so calculate colorSum = weight0 * color0 + weight1 * color1 + weight2 * color2
          }        
#endif
        }
    }
    
    Vertex result = polygon.vertices[0];
  
#ifdef INTERPOLATION  
  	if(depthSumCheck) {                 // if the depthSum does not equal zero, calculate colorSum based on 1/depth
    result.color = colorSum / depthSum;     //assign color to vertex result: c = z [weight0 * (c0/z0) + weight1 * (c1/z1) + weight2 * (c2/z2)]
   }else {
    result.color = colorSum;
  }
#endif
#ifdef ZBUFFERING
    // assign depth (z coordinate) to vertex result: 1/z = weight0 * (1/z0) + weight1 * (1/z1) + weight2 * (1/z2)
    result.position.z = 1.0 / depthSum;
  
#endif
#if !defined(INTERPOLATION) && !defined(ZBUFFERING)
     // assign default color and depth to vertex result
#endif

  return result;
}


// Projection part

// Used to generate a projection matrix.   convert into image space
mat4 computeProjectionMatrix() {
  mat4 projectionMatrix = mat4(1);
  
  float aspect = float(viewport.x) / float(viewport.y);  
  float imageDistance = 0.5;

#ifdef PROJECTION
  projectionMatrix[0] = vec4(1.0, 0.0, 0.0, 0.0);
  projectionMatrix[1] = vec4(0.0, aspect, 0.0, 0.0);           // change coordinates in y axis
  projectionMatrix[2] = vec4(0.0, 0.0, 1.0, imageDistance);      // change coordinates in depth
  projectionMatrix[3] = vec4(0.0, 0.0, 0.0, 1.0);  
#endif
  
    return projectionMatrix;
}

// Used to generate a simple "look-at" camera.   convert to the 3-D camera space
// VRP: view reference point
// TP: target point
// VUV: view up vector
// VPN: TP-VRP view plane normal (where the camera point)
mat4 computeViewMatrix(vec3 VRP, vec3 TP, vec3 VUV) {
   mat4 viewMatrix = mat4(1);
  
#ifdef PROJECTION
   vec3 VPN = TP - VRP;              // VPN: view plane normal
  
   // find the basis vectors
   // n, u and v are unite vectors and are all orthogonal to each other
   vec3 n = normalize(VPN);
   vec3 u = normalize(cross(VUV, n));
   vec3 v = normalize(cross(n, u));
   viewMatrix[0] = vec4(u[0], v[0], n[0], 0);     // 
   viewMatrix[1] = vec4(u[1], v[1], n[1], 0);     //
   viewMatrix[2] = vec4(u[2], v[2], n[2], 0);     // rotation
   viewMatrix[3] = vec4(- dot(VRP, u), - dot(VRP, v), - dot(VRP, n), 1);    // translation
#endif
    return viewMatrix;
}

vec3 getCameraPosition() {  
#ifdef ANIMATION
   // convert camera position by using a time variable
   return vec3(10.0*vec3(sin(time), 0.0, cos(time)));
  
  // the back-facing primitives are not drawn because they are culled. (last frame)
  // in this case the polygon is assumed to be clockwise (vertex-wise). 
  // so when the camera ray shot at back-facing primitives of the polygon, they are counter-clockwise after projection so they are culled (i.e.not rendered)
#else
   return vec3(0, 0, 10);    // static position
#endif
}

// Takes a single input vertex and projects it using the input view and projection matrices
vec3 projectVertexPosition(vec3 position) {

  // Set the parameters for the look-at camera.
    vec3 TP = vec3(0, 0, 0);
    vec3 VRP = getCameraPosition();
    vec3 VUV = vec3(0, 1, 0);
  
    // Compute the view matrix.
    mat4 viewMatrix = computeViewMatrix(VRP, TP, VUV);

    // Compute the projection matrix.
    mat4 projectionMatrix = computeProjectionMatrix();
  
#ifdef PROJECTION
    vec4 pos = projectionMatrix * viewMatrix * vec4(position, 1.0);   // change demension of position from three to four to be applied 
                                                 // apply view matrix and projection matrix to given position
    position = vec3(pos.x/pos.w, pos.y/pos.w, pos.z/pos.w);        // get the correct three dimensional matrix by deviding forth coordinate
                                                 // the transform is (x, y, z, w)=(x/w, y/w, z/w)
    return position;
#else
    return position;
#endif
}

// Projects all the vertices of a polygon
void projectPolygon(inout Polygon projectedPolygon, Polygon polygon) {
    copyPolygon(projectedPolygon, polygon);
    for (int i = 0; i < MAX_VERTEX_COUNT; ++i) {
        if (i < polygon.vertexCount) {
            projectedPolygon.vertices[i].position = projectVertexPosition(polygon.vertices[i].position);
        }
    }
}

// Draws a polygon by projecting, clipping, ratserizing and interpolating it
void drawPolygon(
  vec2 point, 
  Polygon clipWindow, 
  Polygon oldPolygon, 
  inout vec3 color, 
  inout float depth)
{
    Polygon projectedPolygon;
    projectPolygon(projectedPolygon, oldPolygon);  
  
    Polygon clippedPolygon;
    sutherlandHodgmanClip(projectedPolygon, clipWindow, clippedPolygon);

    if (isPointInPolygon(point, clippedPolygon)) {
      
        Vertex interpolatedVertex = 
          interpolateVertex(point, projectedPolygon);
#if defined(ZBUFFERING)    
      // Put your code here
      // Compare depth (i.e. z coordinate) of interpolatedVertex with input depth
      // if depth of interpolatedVertex is smaller than input depth, change depth to that of interpolatedVertex
      if(interpolatedVertex.position.z < depth){
         color = interpolatedVertex.color;
         depth = interpolatedVertex.position.z;
      }
#else
      // Put your code to handle z buffering here
      color = interpolatedVertex.color;
      depth = interpolatedVertex.position.z;      
#endif
   }
  
   if (isPointOnPolygonVertex(point, clippedPolygon)) {
        color = vec3(1);
   }
}

// Main function calls

void drawScene(vec2 pixelCoord, inout vec3 color) {
    color = vec3(0.3, 0.3, 0.3);
  
  	// Convert from GL pixel coordinates 0..N-1 to our screen coordinates -1..1
    vec2 point = 2.0 * pixelCoord / vec2(viewport) - vec2(1.0);

    Polygon clipWindow;
    clipWindow.vertices[0].position = vec3(-0.65,  0.95, 1.0);
    clipWindow.vertices[1].position = vec3( 0.65,  0.75, 1.0);
    clipWindow.vertices[2].position = vec3( 0.75, -0.65, 1.0);
    clipWindow.vertices[3].position = vec3(-0.75, -0.85, 1.0);
    clipWindow.vertexCount = 4;
  
  	// Draw the area outside the clip region to be dark
    color = isPointInPolygon(point, clipWindow) ? vec3(0.5) : color;

    const int triangleCount = 2;
    Polygon triangles[triangleCount];
  
    triangles[0].vertices[0].position = vec3(-2, -2, 0.0);
    triangles[0].vertices[1].position = vec3(4, 0, 3.0);
    triangles[0].vertices[2].position = vec3(-1, 2, 0.0);
    triangles[0].vertices[0].color = vec3(1.0, 0.5, 0.2);
    triangles[0].vertices[1].color = vec3(0.8, 0.8, 0.8);
    triangles[0].vertices[2].color = vec3(0.2, 0.5, 1.0);
    triangles[0].vertexCount = 3;
  
    triangles[1].vertices[0].position = vec3(3.0, 2.0, -2.0);
    triangles[1].vertices[2].position = vec3(0.0, -2.0, 3.0);
    triangles[1].vertices[1].position = vec3(-1.0, 2.0, 4.0);
    triangles[1].vertices[1].color = vec3(0.2, 1.0, 0.1);
    triangles[1].vertices[2].color = vec3(1.0, 1.0, 1.0);
    triangles[1].vertices[0].color = vec3(0.1, 0.2, 1.0);
    triangles[1].vertexCount = 3;

    float depth = 10000.0;
    // Project and draw all the triangles
    for (int i = 0; i < triangleCount; i++) {
        drawPolygon(point, clipWindow, triangles[i], color, depth);
    }   
}

void main() {
    drawScene(gl_FragCoord.xy, gl_FragColor.rgb);
    gl_FragColor.a = 1.0;
}`,
		description: ``,
		wrapFunctionStart: ``,
		wrapFunctionEnd: ``
	});

	UI.tabs.push(
		{
		visible: false,
		type: `x-shader/x-vertex`,
		title: `RasterizationDemoTextureVS - GL`,
		id: `RasterizationDemoTextureVS`,
		initialValue: `attribute vec3 position;
    attribute vec2 textureCoord;

    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;

    varying highp vec2 vTextureCoord;
  
    void main(void) {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        vTextureCoord = textureCoord;
    }
`,
		description: ``,
		wrapFunctionStart: ``,
		wrapFunctionEnd: ``
	});

	UI.tabs.push(
		{
		visible: false,
		type: `x-shader/x-vertex`,
		title: `RasterizationDemoVS - GL`,
		id: `RasterizationDemoVS`,
		initialValue: `attribute vec3 position;

    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;

    void main(void) {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`,
		description: ``,
		wrapFunctionStart: ``,
		wrapFunctionEnd: ``
	});

	UI.tabs.push(
		{
		visible: false,
		type: `x-shader/x-fragment`,
		title: `RasterizationDemoTextureFS - GL`,
		id: `RasterizationDemoTextureFS`,
		initialValue: `
        varying highp vec2 vTextureCoord;

        uniform sampler2D uSampler;

        void main(void) {
            gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
        }
`,
		description: ``,
		wrapFunctionStart: ``,
		wrapFunctionEnd: ``
	});

	 return UI; 
}//!setup

var gl;
function initGL(canvas) {
    try {
        gl = canvas.getContext("webgl");
        gl.viewportWidth = canvas.width;
        gl.viewportHeight = canvas.height;
    } catch (e) {
    }
    if (!gl) {
        alert("Could not initialise WebGL, sorry :-(");
    }
}

function evalJS(id) {
    var jsScript = document.getElementById(id);
    eval(jsScript.innerHTML);
}

function getShader(gl, id) {
    var shaderScript = document.getElementById(id);
    if (!shaderScript) {
        return null;
    }

    var str = "";
    var k = shaderScript.firstChild;
    while (k) {
        if (k.nodeType == 3) {
            str += k.textContent;
        }
        k = k.nextSibling;
    }

    var shader;
    if (shaderScript.type == "x-shader/x-fragment") {
        shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (shaderScript.type == "x-shader/x-vertex") {
        shader = gl.createShader(gl.VERTEX_SHADER);
    } else {
        return null;
    }

    gl.shaderSource(shader, str);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert(gl.getShaderInfoLog(shader));
        return null;
    }

    return shader;
}

function RasterizationDemo() {
}

RasterizationDemo.prototype.initShaders = function() {

    this.shaderProgram = gl.createProgram();

    gl.attachShader(this.shaderProgram, getShader(gl, "RasterizationDemoVS"));
    gl.attachShader(this.shaderProgram, getShader(gl, "RasterizationDemoFS"));
    gl.linkProgram(this.shaderProgram);

    if (!gl.getProgramParameter(this.shaderProgram, gl.LINK_STATUS)) {
        alert("Could not initialise shaders");
    }

    gl.useProgram(this.shaderProgram);

    this.shaderProgram.vertexPositionAttribute = gl.getAttribLocation(this.shaderProgram, "position");
    gl.enableVertexAttribArray(this.shaderProgram.vertexPositionAttribute);

    this.shaderProgram.projectionMatrixUniform = gl.getUniformLocation(this.shaderProgram, "projectionMatrix");
    this.shaderProgram.modelviewMatrixUniform = gl.getUniformLocation(this.shaderProgram, "modelViewMatrix");
}

RasterizationDemo.prototype.initTextureShaders = function() {

    this.textureShaderProgram = gl.createProgram();

    gl.attachShader(this.textureShaderProgram, getShader(gl, "RasterizationDemoTextureVS"));
    gl.attachShader(this.textureShaderProgram, getShader(gl, "RasterizationDemoTextureFS"));
    gl.linkProgram(this.textureShaderProgram);

    if (!gl.getProgramParameter(this.textureShaderProgram, gl.LINK_STATUS)) {
        alert("Could not initialise shaders");
    }

    gl.useProgram(this.textureShaderProgram);

    this.textureShaderProgram.vertexPositionAttribute = gl.getAttribLocation(this.textureShaderProgram, "position");
    gl.enableVertexAttribArray(this.textureShaderProgram.vertexPositionAttribute);

    this.textureShaderProgram.textureCoordAttribute = gl.getAttribLocation(this.textureShaderProgram, "textureCoord");
    gl.enableVertexAttribArray(this.textureShaderProgram.textureCoordAttribute);
    //gl.vertexAttribPointer(this.textureShaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);

    this.textureShaderProgram.projectionMatrixUniform = gl.getUniformLocation(this.textureShaderProgram, "projectionMatrix");
    this.textureShaderProgram.modelviewMatrixUniform = gl.getUniformLocation(this.textureShaderProgram, "modelViewMatrix");
}

RasterizationDemo.prototype.initBuffers = function() {
    this.triangleVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, this.triangleVertexPositionBuffer);
    
    var vertices = [
         -1.0,  -1.0,  0.0,
         -1.0,   1.0,  0.0,
          1.0,   1.0,  0.0,

         -1.0,  -1.0,  0.0,
          1.0,  -1.0,  0.0,
          1.0,   1.0,  0.0,
     ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    this.triangleVertexPositionBuffer.itemSize = 3;
    this.triangleVertexPositionBuffer.numItems = 3 * 2;

    this.textureCoordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, this.textureCoordBuffer);

    var textureCoords = [
        0.0,  0.0,
        0.0,  1.0,
        1.0,  1.0,

        0.0,  0.0,
        1.0,  0.0,
        1.0,  1.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
    this.textureCoordBuffer.itemSize = 2;
}

function getTime() {  
	var d = new Date();
	return d.getMinutes() * 60.0 + d.getSeconds() + d.getMilliseconds() / 1000.0;
}


RasterizationDemo.prototype.initTextureFramebuffer = function() {
    // create off-screen framebuffer
    this.framebuffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
    this.framebuffer.width = this.prerender_width;
    this.framebuffer.height = this.prerender_height;

    // create RGB texture
    this.framebufferTexture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, this.framebufferTexture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.framebuffer.width, this.framebuffer.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);//LINEAR_MIPMAP_NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    //gl.generateMipmap(gl.TEXTURE_2D);

    // create depth buffer
    this.renderbuffer = gl.createRenderbuffer();
    gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderbuffer);
    gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, this.framebuffer.width, this.framebuffer.height);

    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.framebufferTexture, 0);
    gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this.renderbuffer);

    // reset state
    gl.bindTexture(gl.TEXTURE_2D, null);
    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}

RasterizationDemo.prototype.drawScene = function() {
            
    gl.bindFramebuffer(gl.FRAMEBUFFER, env.framebuffer);
    gl.useProgram(this.shaderProgram);
    gl.viewport(0, 0, this.prerender_width, this.prerender_height);
    gl.clear(gl.COLOR_BUFFER_BIT);

        var perspectiveMatrix = new J3DIMatrix4();  
        perspectiveMatrix.setUniform(gl, this.shaderProgram.projectionMatrixUniform, false);

        var modelViewMatrix = new J3DIMatrix4();    
        modelViewMatrix.setUniform(gl, this.shaderProgram.modelviewMatrixUniform, false);

        gl.uniform2iv(gl.getUniformLocation(this.shaderProgram, "viewport"), [getRenderTargetWidth(), getRenderTargetHeight()]);
            
		gl.uniform1f(gl.getUniformLocation(this.shaderProgram, "time"), getTime());  

        gl.bindBuffer(gl.ARRAY_BUFFER, this.triangleVertexPositionBuffer);
        gl.vertexAttribPointer(this.shaderProgram.vertexPositionAttribute, this.triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

        gl.bindBuffer(gl.ARRAY_BUFFER, this.textureCoordBuffer);
        gl.vertexAttribPointer(this.textureShaderProgram.textureCoordAttribute, this.textureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
        
        gl.drawArrays(gl.TRIANGLES, 0, this.triangleVertexPositionBuffer.numItems);

    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    gl.useProgram(this.textureShaderProgram);
    gl.viewport(0, 0, this.render_width, this.render_height);
    gl.clear(gl.COLOR_BUFFER_BIT);

        var perspectiveMatrix = new J3DIMatrix4();  
        perspectiveMatrix.setUniform(gl, this.textureShaderProgram.projectionMatrixUniform, false);

        var modelViewMatrix = new J3DIMatrix4();    
        modelViewMatrix.setUniform(gl, this.textureShaderProgram.modelviewMatrixUniform, false);

        gl.bindTexture(gl.TEXTURE_2D, this.framebufferTexture);
        gl.uniform1i(gl.getUniformLocation(this.textureShaderProgram, "uSampler"), 0);
            
        gl.bindBuffer(gl.ARRAY_BUFFER, this.triangleVertexPositionBuffer);
        gl.vertexAttribPointer(this.textureShaderProgram.vertexPositionAttribute, this.triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

        gl.bindBuffer(gl.ARRAY_BUFFER, this.textureCoordBuffer);
        gl.vertexAttribPointer(this.textureShaderProgram.textureCoordAttribute, this.textureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
        
        gl.drawArrays(gl.TRIANGLES, 0, this.triangleVertexPositionBuffer.numItems);
}

RasterizationDemo.prototype.run = function() {

    this.render_width     = 800;
    this.render_height    = 400;

    this.prerender_width  = this.render_width;
    this.prerender_height = this.render_height;

    this.initTextureFramebuffer();
    this.initShaders();
    this.initTextureShaders();
    this.initBuffers();
};

function init() {   
    env = new RasterizationDemo();

    return env;
}

function compute(canvas)
{
    env.run();
    env.drawScene();
}