1. Introduction
In this assignment, you will be combining concepts which you have learnt in your previous programming assignments. Specifically, hierarchical modeling of objects and their motion and manipulating lights and their motion.
You will be required to write the entire code to draw a scene with a car on a circular track, trees, a street lamp and a sun. You would be animating the scene such that the car moves on the circular track and its headlights turn on along with the street lamp when its night time (there is no sun). You will also be animating the sun such that it revolves around the scene switching the scene from day to night and back. Have a look at the attached video to see how the final animation should look like.
We will be providing you with all the basic building blocks for modeling the sun, the car, the trees, the street and the street lamp. However, you will be responsible for transforming the models and lighting all objects to achieve the desired animation. Feel free to use any code from previous assignments. Since you need to understand and write the entire code we suggest you start early.
Software and hardware requirement: WebGL runs within the browser, so is independent of the operating and window systems. You may finish the assignment using any operating system you like, e.g. Windows, OSX or Linux. Programming language: The assignment will be implemented in JavaScript. As we will minimize the use of obscure Javascript language features, it should not be too difficult for anyone with experience in a dynamic language like Python or familiar with the principles of Object Oriented Programming (like C++ or Java) to get a handle on Javascript syntax by reading through some of the code in code skeleton. For a more formal introduction to Javascript, checkout the nice tutorial from https://javascript.info/.
Cooperation and third-party code: This is an individual programming assignment, and you should implement the code by your own. You may not share final solutions, and you must write up your own work, expressing it in your own words/notation. Third party codes are not allowed unless with professor’s permission.
2. Things to keep in mind.
- 1) The sun has directional light which revolves around the scene. It is switched off when its below the horizon.
- 2) There is a street lamp at the center which lights up in the night.
- 3) The car has two headlights which light up in the night.
- 4) The wheels of the car move when the car moves on the street.
- 5) Add an animate check box which when pressed animates the scene.
- 6) All the basic building blocks are given (in the models.js) to draw a car, tree, street lamp, sun, street. Readthe model.js to understand the parameters to draw individual objects.
Hint: Create a torus, sphere, cone, cylinder, disk (from cylinder), ring and a cube. Use them as your basic building blocks to draw all the objects in the scene. e.g. for car think from looking at the video, what building blocks you need, what transformations are needed for each building block etc.
3. Submission
- 1) Make sure you write your name and ID on the top of the canvas.
- 2) Submit your entire code including the models.js file.
4. Grading
Your code should be able to animate the scene as per the above instructions.
5. Useful references
- 1) WebGL tutorial:http://learningwebgl.com/blog/?page_id=1217
- 2) JavaScripthttps://developer.mozilla.org/en-US/docs/Web/JavaScript
- 3) JS style guide:https://google.github.io/styleguide/javascriptguide.xml?showone=Comments#Comments
- 4) WebGL Shaders and GLSL (GL Shading Language)https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html
/**
* The functions in this file create models in an
* IFS format that can be drawn using gl.drawElements
* with primitive type gl.TRIANGLES. Objects have
* vertex coordinates, normal vectors, and texture
* coordinates for each vertex, plus a list of indicies
* for the element array buffer. The return value
* of each function is an object, model, with properties:
*
* model.vertexPositions — the vertex coordinates;
* model.vertexNormals — the normal vectors;
* model.vertexTextureCoords — the texture coordinates;
* model.indices — the face indices.
*
* The first three properties are of type Float32Array, while
* model.indicesis of type Uint16Array.
*/
/**
* Create a model of a cube, centered at the origin.
* @side the length of a side of the cube. If not given, the value will be 1.
*/
function cube(side) {
var s = (side || 1)/2;
var coords = [];
var normals = [];
var texCoords = [];
var indices = [];
function face(xyz, nrm) {
var start = coords.length/3;
var i;
for (i = 0; i < 12; i++) {
coords.push(xyz[i]);
}
for (i = 0; i < 4; i++) {
normals.push(nrm[0],nrm[1],nrm[2]);
}
texCoords.push(0,0,1,0,1,1,0,1);
indices.push(start,start+1,start+2,start,start+2,start+3);
}
face( [-s,-s,s, s,-s,s, s,s,s, -s,s,s], [0,0,1] );
face( [-s,-s,-s, -s,s,-s, s,s,-s, s,-s,-s], [0,0,-1] );
face( [-s,s,-s, -s,s,s, s,s,s, s,s,-s], [0,1,0] );
face( [-s,-s,-s, s,-s,-s, s,-s,s, -s,-s,s], [0,-1,0] );
face( [s,-s,-s, s,s,-s, s,s,s, s,-s,s], [1,0,0] );
face( [-s,-s,-s, -s,-s,s, -s,s,s, -s,s,-s], [-1,0,0] );
return {
vertexPositions: new Float32Array(coords),
vertexNormals: new Float32Array(normals),
vertexTextureCoords: new Float32Array(texCoords),
indices: new Uint16Array(indices)
}
}
/**
* Creates a model of an annulus or disk lying in the xy plane,
* centered at the origin.
* @param innerRadius the radius of the hole in the radius; a value of
* zero will give a disk rather than a ring. If not present,
* the default value is 0.25.
* @param outerRadius the radius of the ring, from the center to the
* outer edge. Must be greater than innerRadius. If not provided,
* the default value is 2*innerRadius or is 0.5 if innerRadius is 0.
* @slices the number of radial subdivisions in the circular approximation
* of an annulus. If not provided, the value will be 32.
*/
function ring(innerRadius, outerRadius, slices) {
if (arguments.length == 0)
innerRadius = 0.25;
outerRadius = outerRadius || innerRadius * 2 || 0.5;
slices = slices || 32;
var vertexCount, vertices, normals, texCoords, indices, i;
vertexCount = (innerRadius == 0)? slices + 1 : slices * 2;
vertices = new Float32Array( 3*vertexCount );
normals = new Float32Array( 3* vertexCount );
texCoords = new Float32Array( 2*vertexCount );
indices = new Uint16Array( innerRadius == 0 ? 3*slices : 3*2*slices );
var d = 2*Math.PI/slices;
var k = 0;
var t = 0;
var n = 0;
if (innerRadius == 0) {
for (i = 0; i < slices; i++) {
c = Math.cos(d*i);
s = Math.sin(d*i);
vertices[k++] = c*outerRadius;
vertices[k++] = s*outerRadius;
vertices[k++] = 0;
texCoords[t++] = 0.5 + 0.5*c;
texCoords[t++] = 0.5 + 0.5*s;
indices[n++] = slices;
indices[n++] = i;
indices[n++] = i == slices-1 ? 0 : i + 1;
}
vertices[k++] = vertices[k++] = vertices[k++] = 0;
texCoords[t++] = texCoords[t++] = 0;
}
else {
var r = innerRadius / outerRadius;
for (i = 0; i < slices; i++) {
c = Math.cos(d*i);
s = Math.sin(d*i);
vertices[k++] = c*innerRadius;
vertices[k++] = s*innerRadius;
vertices[k++] = 0;
texCoords[t++] = 0.5 + 0.5*c*r;
texCoords[t++] = 0.5 + 0.5*s*r;
vertices[k++] = c*outerRadius;
vertices[k++] = s*outerRadius;
vertices[k++] = 0;
texCoords[t++] = 0.5 + 0.5*c;
texCoords[t++] = 0.5 + 0.5*s;
}
for (i = 0; i < slices – 1; i++) {
indices[n++] = 2*i;
indices[n++] = 2*i+1;
indices[n++] = 2*i+3;
indices[n++] = 2*i;
indices[n++] = 2*i+3;
indices[n++] = 2*i+2;
}
indices[n++] = 2*i;
indices[n++] = 2*i+1;
indices[n++] = 1;
indices[n++] = 2*i;
indices[n++] = 1;
indices[n++] = 0;
}
for (i = 0; i < vertexCount; i++) {
normals[3*i] = normals[3*i+1] = 0;
normals[3*i+2] = 1;
}
return {
vertexPositions: vertices,
vertexNormals: normals,
vertexTextureCoords: texCoords,
indices: indices
};
}
/**
* Create a model of a sphere. The z-axis is the axis of the sphere,
* with the north pole on the positive z-axis and the center at (0,0,0).
* @param radius the radius of the sphere, default 0.5 if not specified.
* @param slices the number of lines of longitude, default 32
* @param stacks the number of lines of latitude plus 1, default 16. (This
* is the number of vertical slices, bounded by lines of latitude, the
* north pole and the south pole.)
*/
function uvSphere(radius, slices, stacks) {
radius = radius || 0.5;
slices = slices || 32;
stacks = stacks || 16;
var vertexCount = (slices+1)*(stacks+1);
var vertices = new Float32Array( 3*vertexCount );
var normals = new Float32Array( 3* vertexCount );
var texCoords = new Float32Array( 2*vertexCount );
var indices = new Uint16Array( 2*slices*stacks*3 );
var du = 2*Math.PI/slices;
var dv = Math.PI/stacks;
var i,j,u,v,x,y,z;
var indexV = 0;
var indexT = 0;
for (i = 0; i <= stacks; i++) {
v = -Math.PI/2 + i*dv;
for (j = 0; j <= slices; j++) {
u = j*du;
x = Math.cos(u)*Math.cos(v);
y = Math.sin(u)*Math.cos(v);
z = Math.sin(v);
vertices[indexV] = radius*x;
normals[indexV++] = x;
vertices[indexV] = radius*y;
normals[indexV++] = y;
vertices[indexV] = radius*z;
normals[indexV++] = z;
texCoords[indexT++] = j/slices;
texCoords[indexT++] = i/stacks;
}
}
var k = 0;
for (j = 0; j < stacks; j++) {
var row1 = j*(slices+1);
var row2 = (j+1)*(slices+1);
for (i = 0; i < slices; i++) {
indices[k++] = row1 + i;
indices[k++] = row2 + i + 1;
indices[k++] = row2 + i;
indices[k++] = row1 + i;
indices[k++] = row1 + i + 1;
indices[k++] = row2 + i + 1;
}
}
return {
vertexPositions: vertices,
vertexNormals: normals,
vertexTextureCoords: texCoords,
indices: indices
};
}
/**
* Create a model of a torus (surface of a doughnut). The z-axis goes through the doughnut hole,
* and the center of the torus is at (0,0,0).
* @param outerRadius the distance from the center to the outside of the tube, 0.5 if not specified.
* @param innerRadius the distance from the center to the inside of the tube, outerRadius/3 if not
* specified. (This is the radius of the doughnut hole.)
* @param slices the number of lines of longitude, default 32. These are slices parallel to the
* z-axis and go around the tube the short way (through the hole).
* @param stacks the number of lines of latitude plus 1, default 16. These lines are perpendicular
* to the z-axis and go around the tube the long way (arouind the hole).
*/
function uvTorus(outerRadius, innerRadius, slices, stacks) {
outerRadius = outerRadius || 0.5;
innerRadius = innerRadius || outerRadius/3;
slices = slices || 32;
stacks = stacks || 16;
var vertexCount = (slices+1)*(stacks+1);
var vertices = new Float32Array( 3*vertexCount );
var normals = new Float32Array( 3* vertexCount );
var texCoords = new Float32Array( 2*vertexCount );
var indices = new Uint16Array( 2*slices*stacks*3 );
var du = 2*Math.PI/slices;
var dv = 2*Math.PI/stacks;
var centerRadius = (innerRadius+outerRadius)/2;
var tubeRadius = outerRadius – centerRadius;
var i,j,u,v,cx,cy,sin,cos,x,y,z;
var indexV = 0;
var indexT = 0;
for (j = 0; j <= stacks; j++) {
v = -Math.PI + j*dv;
cos = Math.cos(v);
sin = Math.sin(v);
for (i = 0; i <= slices; i++) {
u = i*du;
cx = Math.cos(u);
cy = Math.sin(u);
x = cx*(centerRadius + tubeRadius*cos);
y = cy*(centerRadius + tubeRadius*cos);
z = sin*tubeRadius;
vertices[indexV] = x;
normals[indexV++] = cx*cos;
vertices[indexV] = y
normals[indexV++] = cy*cos;
vertices[indexV] = z
normals[indexV++] = sin;
texCoords[indexT++] = i/slices;
texCoords[indexT++] = j/stacks;
}
}
var k = 0;
for (j = 0; j < stacks; j++) {
var row1 = j*(slices+1);
var row2 = (j+1)*(slices+1);
for (i = 0; i < slices; i++) {
indices[k++] = row1 + i;
indices[k++] = row2 + i + 1;
indices[k++] = row2 + i;
indices[k++] = row1 + i;
indices[k++] = row1 + i + 1;
indices[k++] = row2 + i + 1;
}
}
return {
vertexPositions: vertices,
vertexNormals: normals,
vertexTextureCoords: texCoords,
indices: indices
};
}
/**
* Defines a model of a cylinder. The axis of the cylinder is the z-axis,
* and the center is at (0,0,0).
* @param radius the radius of the cylinder
* @param height the height of the cylinder. The cylinder extends from -height/2
* to height/2 along the z-axis.
* @param slices the number of slices, like the slices of an orange.
* @param noTop if missing or false, the cylinder has a top; if set to true,
* the cylinder has a top. The top is a disk at the positive end of the cylinder.
* @param noBottom if missing or false, the cylinder has a bottom; if set to true,
* the cylinder has a bottom. The bottom is a disk at the negtive end of the cylinder.
*/
function uvCylinder(radius, height, slices, noTop, noBottom) {
radius = radius || 0.5;
height = height || 2*radius;
slices = slices || 32;
var vertexCount = 2*(slices+1);
if (!noTop)
vertexCount += slices + 2;
if (!noBottom)
vertexCount += slices + 2;
var triangleCount = 2*slices;
if (!noTop)
triangleCount += slices;
if (!noBottom)
triangleCount += slices;
var vertices = new Float32Array(vertexCount*3);
var normals = new Float32Array(vertexCount*3);
var texCoords = new Float32Array(vertexCount*2);
var indices = new Uint16Array(triangleCount*3);
var du = 2*Math.PI / slices;
var kv = 0;
var kt = 0;
var k = 0;
var i,u;
for (i = 0; i <= slices; i++) {
u = i*du;
var c = Math.cos(u);
var s = Math.sin(u);
vertices[kv] = c*radius;
normals[kv++] = c;
vertices[kv] = s*radius;
normals[kv++] = s;
vertices[kv] = -height/2;
normals[kv++] = 0;
texCoords[kt++] = i/slices;
texCoords[kt++] = 0;
vertices[kv] = c*radius;
normals[kv++] = c;
vertices[kv] = s*radius;
normals[kv++] = s;
vertices[kv] = height/2;
normals[kv++] = 0;
texCoords[kt++] = i/slices;
texCoords[kt++] = 1;
}
for (i = 0; i < slices; i++) {
indices[k++] = 2*i;
indices[k++] = 2*i+3;
indices[k++] = 2*i+1;
indices[k++] = 2*i;
indices[k++] = 2*i+2;
indices[k++] = 2*i+3;
}
var startIndex = kv/3;
if (!noBottom) {
vertices[kv] = 0;
normals[kv++] = 0;
vertices[kv] = 0;
normals[kv++] = 0;
vertices[kv] = -height/2;
normals[kv++] = -1;
texCoords[kt++] = 0.5;
texCoords[kt++] = 0.5;
for (i = 0; i <= slices; i++) {
u = 2*Math.PI – i*du;
var c = Math.cos(u);
var s = Math.sin(u);
vertices[kv] = c*radius;
normals[kv++] = 0;
vertices[kv] = s*radius;
normals[kv++] = 0;
vertices[kv] = -height/2;
normals[kv++] = -1;
texCoords[kt++] = 0.5 – 0.5*c;
texCoords[kt++] = 0.5 + 0.5*s;
}
for (i = 0; i < slices; i++) {
indices[k++] = startIndex;
indices[k++] = startIndex + i + 1;
indices[k++] = startIndex + i + 2;
}
}
var startIndex = kv/3;
if (!noTop) {
vertices[kv] = 0;
normals[kv++] = 0;
vertices[kv] = 0;
normals[kv++] = 0;
vertices[kv] = height/2;
normals[kv++] = 1;
texCoords[kt++] = 0.5;
texCoords[kt++] = 0.5;
for (i = 0; i <= slices; i++) {
u = i*du;
var c = Math.cos(u);
var s = Math.sin(u);
vertices[kv] = c*radius;
normals[kv++] = 0;
vertices[kv] = s*radius;
normals[kv++] = 0;
vertices[kv] = height/2;
normals[kv++] = 1;
texCoords[kt++] = 0.5 + 0.5*c;
texCoords[kt++] = 0.5 + 0.5*s;
}
for (i = 0; i < slices; i++) {
indices[k++] = startIndex;
indices[k++] = startIndex + i + 1;
indices[k++] = startIndex + i + 2;
}
}
return {
vertexPositions: vertices,
vertexNormals: normals,
vertexTextureCoords: texCoords,
indices: indices
};
}
/**
* Defines a model of a cone. The axis of the cone is the z-axis,
* and the center is at (0,0,0).
* @param radius the radius of the cone
* @param height the height of the cone. The cone extends from -height/2
* to height/2 along the z-axis, with the tip at (0,0,height/2).
* @param slices the number of slices, like the slices of an orange.
* @param noBottom if missing or false, the cone has a bottom; if set to true,
* the cone has a bottom. The bottom is a disk at the wide end of the cone.
*/
function uvCone(radius, height, slices, noBottom) {
radius = radius || 0.5;
height = height || 2*radius;
slices = slices || 32;
var fractions = [ 0, 0.5, 0.75, 0.875, 0.9375 ];
var vertexCount = fractions.length*(slices+1) + slices;
if (!noBottom)
vertexCount += slices + 2;
var triangleCount = (fractions.length-1)*slices*2 + slices;
if (!noBottom)
triangleCount += slices;
var vertices = new Float32Array(vertexCount*3);
var normals = new Float32Array(vertexCount*3);
var texCoords = new Float32Array(vertexCount*2);
var indices = new Uint16Array(triangleCount*3);
var normallength = Math.sqrt(height*height+radius*radius);
var n1 = height/normallength;
var n2 = radius/normallength;
var du = 2*Math.PI / slices;
var kv = 0;
var kt = 0;
var k = 0;
var i,j,u;
for (j = 0; j < fractions.length; j++) {
var uoffset = (j % 2 == 0? 0 : 0.5);
for (i = 0; i <= slices; i++) {
var h1 = -height/2 + fractions[j]*height;
u = (i+uoffset)*du;
var c = Math.cos(u);
var s = Math.sin(u);
vertices[kv] = c*radius*(1-fractions[j]);
normals[kv++] = c*n1;
vertices[kv] = s*radius*(1-fractions[j]);
normals[kv++] = s*n1;
vertices[kv] = h1;
normals[kv++] = n2;
texCoords[kt++] = (i+uoffset)/slices;
texCoords[kt++] = fractions[j];
}
}
var k = 0;
for (j = 0; j < fractions.length-1; j++) {
var row1 = j*(slices+1);
var row2 = (j+1)*(slices+1);
for (i = 0; i < slices; i++) {
indices[k++] = row1 + i;
indices[k++] = row2 + i + 1;
indices[k++] = row2 + i;
indices[k++] = row1 + i;
indices[k++] = row1 + i + 1;
indices[k++] = row2 + i + 1;
}
}
var start = kv/3 – (slices+1);
for (i = 0; i < slices; i++) { // slices points at top, with different normals, texcoords
u = (i+0.5)*du;
var c = Math.cos(u);
var s = Math.sin(u);
vertices[kv] = 0;
normals[kv++] = c*n1;
vertices[kv] = 0;
normals[kv++] = s*n1;
vertices[kv] = height/2;
normals[kv++] = n2;
texCoords[kt++] = (i+0.5)/slices;
texCoords[kt++] = 1;
}
for (i = 0; i < slices; i++) {
indices[k++] = start+i;
indices[k++] = start+i+1;
indices[k++] = start+(slices+1)+i;
}
if (!noBottom) {
var startIndex = kv/3;
vertices[kv] = 0;
normals[kv++] = 0;
vertices[kv] = 0;
normals[kv++] = 0;
vertices[kv] = -height/2;
normals[kv++] = -1;
texCoords[kt++] = 0.5;
texCoords[kt++] = 0.5;
for (i = 0; i <= slices; i++) {
u = 2*Math.PI – i*du;
var c = Math.cos(u);
var s = Math.sin(u);
vertices[kv] = c*radius;
normals[kv++] = 0;
vertices[kv] = s*radius;
normals[kv++] = 0;
vertices[kv] = -height/2;
normals[kv++] = -1;
texCoords[kt++] = 0.5 – 0.5*c;
texCoords[kt++] = 0.5 + 0.5*s;
}
for (i = 0; i < slices; i++) {
indices[k++] = startIndex;
indices[k++] = startIndex + i + 1;
indices[k++] = startIndex + i + 2;
}
}
return {
vertexPositions: vertices,
vertexNormals: normals,
vertexTextureCoords: texCoords,
indices: indices
};
}