Javascript 3d Game Engine Javascript Programming Homework

CS 418: Interactive Computer Graphics

Spring  2018

Tu/Th     9:30 – 10:45 am,
Room 1404 SiebelCenter

Office: 2209 Siebel Center
Office Hour: Tu. 2-3pm or by appointment

Book:  There is no book for the class. Notes and other materials will be posted online.

Piazza:ThistermwewillbeusingPiazzaforclassdiscussion. Ratherthanemailingquestionstotheteachingstaff,weencourageyoutopostyourquestionsonPiazza.Findourclasspageat:

TA Office Hours:


Grading: The course grade for the class is broken down among the following items:

Machine Problem 1 15%
Machine Problem 2 15%
Machine Problem 3 15%
Machine Problem 4 10%
Exam 1 15%
Exam 2  15%
Exam 3 15%






Machine Problems: There will be 4 machine problems during the semester. Assignments will be announced in class and on Piazza. Homework submission will be done electronically through Compass. The required files and acceptable file formats for submission will be specified in the assignment.

Exams: There will be three exams. We will use the Computer Based Testing Facility. 

  • Exam 1 Feb. 15   -  Feb. 17
  • Exam 2 March 13 - March 15
  • Exam 3 April 29 - May 1

Extra Credit: At 3 lectures during the semester, I will take attendance. If you attended that lecture, you will receive 0.5% of the total course grade as extra credit. This means there is a total of 1.5% of the grade available as extra credit, which could easily be the difference between letter grades. This will be the only extra credit opportunity offered during the course.

LateHomeworkorProjects: Machine problems submittedaftertheduedate lose 10% per day. Inexceptionalcircumstanceswhereextensionmaybereasonable(illness,familyemergencyetc.)arrangementmustbemadewiththeinstructor.

Collaboration:Youshouldcollaborate on the MPs. You should not copy code verbatim from each other or the web. 

Software: We will use HTML/JavaScript/WebGL and GLSL for the programming assignments. No prior knowledge of these is required for the class.

Commenting Code:All files, classes, methods and properties should be documented with JSDoc comments with the appropriate tags and types.
                                  Details can be found in the Google JavaScript Style Guide.

OtherPolicies:Donotmakeclassmaterial publicly available.Thisincludescopiesoflectures,homework,solutions,handouts,andcodeprovidedbyus.

4 Credit Option: If you are taking the course for 4 credits, you will complete extra work on Machine Problems 2 and  3.

Language References and Resources

Tentative Schedule (Note that slides and topics for future lectures may change):

1/16Introduction to Rendering [PDF]




Walking through a WebGL Program [PDF]

SIGGRAPH 2017 Papers Trailer [link]
SIGGRAPH 2017 Animation Trailer [link]
WebGL Demo 1 [link]
WebGL Demo 2 [link]


HelloColor.html [link]
HelloColor.js [link]


1/22Lab 1: MP1 and Affine TransformationsPresentation Slides [ppt]
Lab Code []
MP1: Due Feb. 5 [link]

Affine Transformations [PDF]

HelloProjection.html [link]
HelloProjection.js [link]
gl-matrix-min.js [link]
webgl-utils.js [link]

Chapter 5: 2D Transformational Geometry
by John Hart [PDF]

Chapter 6: 3D Transformational Geometry
by John Hart [PDF]

Worksheet 1: 2D Geometry [PDF]
Solution [PDF]


Basic Animation [PDF]
Hierarchical Modeilng [PDF]


Chapter 7: Modeling Transformations
by John Hart [PDF]

1/29Lab 2: MP1 and Vertex BuffersPresentation Slides [ppt]
Lab Code []

Basic Mesh Data Structures [PDF]



Worksheet 2:
3D Geometry and Mesh Data Structures [PDF]
Solution [PDF]

Polyon Mesh Processing by Botsch et al.
Chapter 2: Mesh Data Structure [PDF]

2/1Viewing Transformation [PDF] 

Chapter 8: Viewing
by John Hart [PDF]

2/5Lab 3: Procedural Generation of a MeshPresentation Slides [ppt]
Lab Code []

Orthographic Projection [PDF]


Chapter 9: Projection
by John Hart [PDF]


Perspective Projection [PDF]


Worksheet 3:
Viewing and Hierarchical Modeling [PDF]

Solution [PDF]

2/12Lab 4: Practice Exam 1  

Perspective Projection [PDF]


MP2 Part 1: Due   March 6 [link]


Lecture Canceled (Exam Week)


Worksheet 4:
More on Affine Transformations [PDF]

Solution [PDF]


Lab 5: Terrain Generation 

Presentation Slides [PPT]
Lab Code []

2/20Basic Shading [PPT]  

Transforming Normals [PPT]

Terrain Generation [PPT]

2/26Lab 6: Phong Shading

Presentation Slides [PPT]
Lab Code []

Phong Reflection Model - Wikipedia [link] 

Quaternions [PPT]


Rotations in Three Dimensions from
3D math primer for graphics and game development 
by Ian Parberry [link]

Worksheet 5:
Shading [PDF]
Solution [PDF]
3/1Interaction [PPT]   

Texture Mapping [PPT]

Lab 7: Fog and Flying [PPT]

HelloTexture.html [link]
HelloTexture.js [link]
UIUC_I_mark.png [link]

Read Chapter 15&16: Texture Mapping
by John Hart [PDF]

MP2 Part 2: Due March 16 [link]


Color [PPT]


Information Visualization (Second Edition) 
Perception for Design
by Colin Ware
Chapter 4: Color [PDF]

3/13Texture Filtering [PPT] 

Worksheet 6:
Color [PDF]
Solution [PDF]


No Class 


MP 2 4-Credit Students Only, Due April 6 [link] 


Spring Break



3/22Spring Break 

3/27Environment Mapping  
3/29Bump Mapping  
4/10Bezier Curves and Surfaces 


Bezier Curves and Surfaces


Mesh Processing



4/19Subdivision Surfaces  
4/24A Simple Physics Engine 


4/26Procedural Texture Generation



Physically Based Rendering







WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 2D and 3D rendering in an HTML  in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and shader code (GLSL) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

This article will introduce you to the basics of using WebGL. It's assumed that you already have an understanding of the mathematics involved in 3D graphics, and this article doesn't pretend to try to teach you 3D graphics concepts itself. We have a beginner-oriented guide, complete with coding assignments to complete, in our Learning Area: Learn WebGL for 2D and 3D graphics.

The code examples in this tutorial can also be found in the webgl-examples GitHub repository.

Preparing to render in 3D

The first thing you need in order to use WebGL for rendering is a canvas. The HTML fragment below declares a canvas that our sample will draw into.

<body> <canvas id="glCanvas" width="640" height="480"></canvas> </body>

Preparing the WebGL context

The  function in our JavaScript code, is called when our script is loaded. Its purpose is to set up the WebGL context and start rendering content.

main(); // // start here // function main() {   const canvas = document.querySelector("#glCanvas");   // Initialize the GL context   const gl = canvas.getContext("webgl");   // Only continue if WebGL is available and working   if (!gl) {     alert("Unable to initialize WebGL. Your browser or machine may not support it.");     return;   }   // Set clear color to black, fully opaque   gl.clearColor(0.0, 0.0, 0.0, 1.0);   // Clear the color buffer with specified clear color   gl.clear(gl.COLOR_BUFFER_BIT); }

The first thing we do here is obtain a reference to the canvas, assigning it to a variable named .

Once we have the canvas, we try to get a WebGLRenderingContext for it by calling getContext and passing it the string . If the browser does not support webgl  will return  in which case we will display a message to the user and exit. 

If the context is successfully initialized, the variable is our reference to it. In this case, we set the clear color to black, and clear the context to that color (redrawing the canvas with the background color).

At this point, you have enough code that the WebGL context should successfully initialize, and you should wind up with a big black, empty box, ready and waiting to receive content.

View the complete code | Open this demo on a new page

See also

  • An introduction to WebGL: Written by Luz Caballero, published at This article addresses that what WebGL is, explains how WebGL works (including the rendering pipeline concept), and introduces some WebGL libraries.
  • WebGL Fundamentals
  • An intro to modern OpenGL: A series of nice articles about OpenGL written by Joe Groff, providing a clear introduction to OpenGL from its history to the important graphics pipeline concept, and also includes some examples to demonstrate how OpenGL works. If you have no idea what OpenGL is, this is a good place to start.

Document Tags and Contributors

 Contributors to this page:stephaniehobson, gmanpersona, etisdew, Sheppy, base-p, infertux, nmve, trusktr, fscholz, chrisdavidmills, skbhardwaj, senders, Will.Fan, kevdonk, rvighne, foxbrush, ScottMichaud, Jeremie, marcusstenbeck, ChaitanyaGSNR, AllenZ, ThePrisoner, yyss, Havvy, arnaudbrousseau, krabsatt, greggman, soswow, ericbock, Bandock, Brettz9

 Last updated by:stephaniehobson,

0 thoughts on “Javascript 3d Game Engine Javascript Programming Homework

Leave a Reply

Your email address will not be published. Required fields are marked *