2_Rasterization.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;
}

#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) {
#ifdef RASTERIZATION
    // Put your code here
	// Move the edge function forward so that it can be used in getCrossType function.
	// Line AB
	float x1 = b.position.x-a.position.x;
    float y1 = b.position.y-a.position.y;
	// Line AP
    float x2 = point.x-a.position.x;
    float y2 = point.y-a.position.y;
	// As all polygons are defined as clock-wise,
	// if the product is smaller than zero,
	// the point is on the right side(inner side) of this edge,
	// or it is on the left side(outer side) of this edge. 
    if (x1*y2-x2*y1 <= 0.0)
		return INNER_SIDE;
	else
		return OUTER_SIDE;
	
#endif
    return OUTER_SIDE;
}

// Clipping part

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

int getCrossType(Vertex poli1, Vertex poli2, Vertex wind1, Vertex wind2) {
#ifdef CLIPPING
    // Put your code here
	// Use the edge function above to test whether the two,
	// vertices of the polygon are inside or outside the clipwindow edge.
	// The position of the first vertex
	int p1position = edge(poli1.position.xy, wind1, wind2);
	// The position of the second vertex
	int p2position = edge(poli2.position.xy, wind1, wind2);
	// If two vertex are outside the clipwindow's edge
	// this edge of the polygon is outside the clipwindow's edge
	if(p1position == 1 && p2position == 1)
	return OUTSIDE;
	// If two vertex are inside the clipwindow's edge
	// this edge of the polygon is inside the clipwindow's edge
	else if(p1position == 0 && p2position == 0)
	return INSIDE;
	// If the first vertex is inside and the second is outside the clipwindow's edge
	// this edge of the polygon is leaving the clipwindow's edge
	else if(p1position == 0 && p2position == 1)
	return LEAVING;
	// If the first vertex is outside and the second is inside the clipwindow's edge
	// this edge of the polygon is entering the clipwindow's edge
	else if(p1position == 1 && p2position == 0)
	return ENTERING;
		
#else
    return INSIDE;
#endif
}

// This function assumes that the segments are not parallel or collinear.
Vertex intersect2D(Vertex a, Vertex b, Vertex c, Vertex d) {
#ifdef CLIPPING
    // Put your code here
	// Compute the equations of the two lines 
	// AB: y = k1 * x + b1 
	// CD: y = k2 * x + b2
	// using the xy coordinates of their two ends. 
	float ax = a.position.x;
	float ay = a.position.y;
	float bx = b.position.x;
	float by = b.position.y;
	float cx = c.position.x;
	float cy = c.position.y;
	float dx = d.position.x;
	float dy = d.position.y;
	// The slope and y-intercept of AB
	float k1 = (by - ay)/(bx - ax);
	float b1 = ay - k1 * ax;
	// The slope and y-intercept of CD
	float k2 = (dy - cy)/(dx - cx);
	float b2 = cy - k2 * cx;
	// The xy coordinates of the intersection point can be calculated 
	// by making k1 * x + b1 = k2 * x + b2
	float x = (b2 - b1)/(k1 - k2);
	float y = k1 * x + b1;
	vec2 intersectPosition = vec2(x,y);
	// Set the new intersection vertex's color the same as vertex a,
	// its xy coordinates as the intersection position, and the z coordinates as zero. 
	Vertex intersect;
	intersect.position = vec3(x,y,0.0);
	intersect.color = a.color;
	return intersect;
#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) {
    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);

        // 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
    	// Put your code here
		// Take the current vertex and its next vertex of the polygon as well as the clipwindow
		// and test the position relation of the two edges
		Vertex p0 = oldClipped.vertices[j];
		Vertex p1 = getWrappedPolygonVertex(oldClipped,j+1);
		Vertex w0 = clipWindow.vertices[i];
		Vertex w1 = getWrappedPolygonVertex(clipWindow,i+1);
		// Use the getCrossType function to test the cross type of the two edges
		int crossType = getCrossType(p0,p1,w0,w1);
		// The side of the polygon is entering the side of the clipwindow
		// add the new intersection point and the second point into the clipped polygon
		if (crossType == 0){
		Vertex newP = intersect2D(p0,p1,w0,w1);
		appendVertexToPolygon(clipped,newP);
		appendVertexToPolygon(clipped,p1);
		}
		// The side of the polygon is leaving the side of the clipwindow
		// add only the new intersection point into the clipped polygon
		else if (crossType == 1){
		Vertex newP = intersect2D(p0,p1,w0,w1);
		appendVertexToPolygon(clipped,newP);
		}
		// The side of the polygon is outside the side of the clipwindow
		// do nothing
		else if (crossType == 2){
			
		}
		// The side of the polygon is inside the side of the clipwindow
		// add only the second point into the clipped polygon
		else if (crossType == 3){
		appendVertexToPolygon(clipped,p1);
		}
			
#else
        appendVertexToPolygon(clipped, getWrappedPolygonVertex(oldClipped, j));
#endif
        }
		// Copy the clipped polygon to the old clipped polygon
		// so it can be used in the next clipping process
        copyPolygon(oldClipped,clipped);
		
    }

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

// Rasterization and culling part

// 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;
	int allPosition = 0;
	int pointPosition = 0;
	for (int i = 0; i < MAX_VERTEX_COUNT; ++i) {
        if (i < polygon.vertexCount) {
#ifdef RASTERIZATION
    // Put your code here
	// Get the position of the point(inside or outside the current edge of the polygon)  
	pointPosition = edge(point,polygon.vertices[i],getWrappedPolygonVertex(polygon,i+1));
	// Sum up the position information of the point regarding to all edges of the polygon
	allPosition += pointPosition; 
			
#else
    rasterise = false;
#endif
        }
	// If the position is insde all edges of the polygon, the sum value should be zero
	// which means that this point is inside the polygon
	if(allPosition == 0)	
    rasterise = true;
	else
	rasterise = false;
    }
    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; 
    for (int i = 0; i < MAX_VERTEX_COUNT; ++i) {
        if (i < polygon.vertexCount) {
#if defined(INTERPOLATION) || defined(ZBUFFERING)
    // Put your code here
	// Barycentric coordinates system
	// Using the proportions of the triangle areas as the weight 
	vec2 p0 = polygon.vertices[i].position.xy;
	vec2 p1 = getWrappedPolygonVertex(polygon,i+1).position.xy;		
	vec2 p2 = getWrappedPolygonVertex(polygon,i+2).position.xy; 
	float totalArea = triangleArea(p0,p1,p2);
	float weightedArea = triangleArea(p1,p2,point);
	float weight = weightedArea / totalArea;
#else
#endif
#ifdef ZBUFFERING
    // Put your code here
	// Use Barycentric weights to interpolate the inverse of z depth
	// of the three vertices to calculate the inverse of the new vertex's depth
	depthSum += weight * (1.0 / polygon.vertices[i].position.z); 
	
#endif
#ifdef INTERPOLATION
    // Put your code here
	// Use Barycentric weights to interpolate the color
	// of the three vertices to calculate the new vertex's color
	colorSum += weight * polygon.vertices[i].color;
#endif
	
        }
    }
    Vertex result = polygon.vertices[0];
  
#ifdef INTERPOLATION
    // Put your code here
	// Sum up the color contributions from all vertices
	result.color = colorSum;
#endif
#ifdef ZBUFFERING
    // Put your code here
	// Sum up the depth contributions from all vertices
	// and take its inverse
	// the xy coordinates remain the same
	result.position.xy = point;
	result.position.z = 1.0 / depthSum;
#endif
#if !defined(INTERPOLATION) && !defined(ZBUFFERING)
    // Put your code here
#endif

  return result;
}

// Projection part

// Used to generate a projection matrix.
mat4 computeProjectionMatrix() {
    mat4 projectionMatrix = mat4(1);
  
  float aspect = float(viewport.x) / float(viewport.y);  
  float imageDistance = 0.5;
	
#ifdef PROJECTION
    // Put your code here
	// Define all parameters used in the projection matrix
	float D = imageDistance;
	float y1 = -0.17;
	float y2 = 0.16;
	float x1 = -y1 * aspect;
	float x2 = -y2 * aspect;
	float dx = x2 - x1;
	float dy = y2 - y1;
	float px = x2 + x1;
	float py = y2 + y1;
	
	// Move to the UV plane (d = 1)
	mat4 mMove = mat4(1,0,0,0,
			  		  0,1,0,0,
			  		  0,0,1,0,
			          0,0,-1,1);
	// Regular pyramid matrix
	mat4 mPyramid = mat4(2.0*D/dx,0,0,0,
			  			 0,2.0*D/dy,0,0,
			  			 -px/dx,-py/dy,1,0,
			  			 -D*px/dx,-D*py/dy,0,1);
	// Scale by 1/D
	mat4 mScale = mat4(1.0/D,0,0,0,
			  		   0,1.0/D,0,0,
			  	       0,0,1.0/D,0,
			  		   0,0,0,1);
	// Projection division (x,y,z,1) to (x,y,z,z+1)
	mat4 mDivision = mat4(1,0,0,0,
			  			  0,1,0,0,
			 			  0,0,1,1,
						  0,0,0,1);
	// The projection matrix is the product of the aboce four matrix
	projectionMatrix = mDivision * mScale * mPyramid * mMove;
#endif  
    return projectionMatrix;
}

// Used to generate a simple "look-at" camera. 
mat4 computeViewMatrix(vec3 VRP, vec3 TP, vec3 VUV) {
    mat4 viewMatrix = mat4(1);

#ifdef PROJECTION
    // Put your code here
	// Define all parameters used in the view matrix
	vec3 VPN = TP - VRP;
	vec3 n = VPN / length(VPN);
	vec3 u = cross(n,VUV);
		 u = u / length(u);
	vec3 v = cross(u,n);
	
	float t1 = - dot(VRP,u);
	float t2 = - dot(VRP,v);
	float t3 = - dot(VRP,n);
	
	// View matrix
	viewMatrix = mat4(u.x, v.x, n.x, 0,
				  	  u.y, v.y, n.y, 0,
				 	  u.z, v.z, n.z, 0,
				  	  t1, t2, t3, 1);
	
#endif
    return viewMatrix;
}

vec3 getCameraPosition() {  
#ifdef ANIMATION
    // Put your code here
	//return vec3(2.0*sin(time), 2.0*cos(time), 10);
#else
    return vec3(0, 0, 10);
#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
    // Put your code here
	// Add 1.0, make xyz coordinates to homogeneous coordinates
	vec4 position4 = vec4(position.xyz,1.0);
	position4 = projectionMatrix * viewMatrix * position4;
	// Projection division: divide all coordinates by z+1
	position = position4.xyz / position4.w;
#else
	
#endif
	return position;
}

// 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
	// If the depth of the point is smaller than the depth saved in zbuffer
	// this point is not covered
	// and the zbuffer is rewrited by the new depth
	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();
}