Assignment 1 - Introduction to WebGL - (100 points)



Due Date: Sept 7 2023 at 11:59pm


Objectives:



  • Familiarize yourself with WebGL
  • Experiment with various WebGL calls

Download Example WebGL HTML file from class web site.



You will need to download the simple example WebGL application. You can download it from: https://cs.boisestate.edu/~scutchin/cs464/webgl/webgl_A1_00.zip

Simple WebGL Viewer Page



For this assignment you will complete the basic WebGL html program available on the class website.
  1. You will add a simple rotating cube object
  2. Add different Geometry.
  3. Add Texture Images
  4. Experiment with shader coloring.

Rotate the Cube Object in the scene - 25 points



Add the code that was discussed in class to cause the cube to rotate around the Y axis. You can also find this code in the class text book.

Replace the Cube Object with other Shapes - 30 points



Change the code that creates the vertices of the Cube Object to create other geometric shapes. Possible shapes are: A rectoid, a sphere, a cone, a cylinder, and/or any other polyhedral shape. Any kind of altered shape is ok.

Texture Images - 30 points



Select 3 images from the internet no bigger than 500k in size for each. Map these textures to the surface of your geometry object. To work with textures on the local file system you must choose to use one of the following 3 options: 
a) Call chrome with --disable-web-security in the command-line.
b) Run a webserver locally to supply the textures for Chrome.
c) Use Firefox for examples with textures stored on the local filesystem. 
d) If on Mac OS X: open -a Google\ Chrome --args --disable-web-security --user-data-dir
 
Here is how you can start the solution on windows:
start chrome --disable-web-security --user-data-dir=c:/tmp file://c:/webgl/hellowebgl_texture.html

Shader Coloring - 15 points



Experiment with shader colors and shader changes. Submit screen shots of 3 different shaders with different colors.

Extra Credit: Incorporate other WebGL primitives - 5 points



  • Incorporate at least three other primitives, for example add simple lines, points, and quads.

Extra Credit: Add Event handlers - 5 points



  • Add handlers for resize, close, webglcontextlost, webglcontextrestored.

Submitting the Assignment



Required files



Please include the following files for submission.

  • HTML Files - one html file for each solution.
  • Image Files for Textures
  • README - This should be a text file (.txt) and should include your name, a list of the files being submitted, any awesome WebGL functions you discovered and used, which extra credit you implemented (if any) and anything you want to tell me about this assignment. Please mention the names of students you worked with or websites you used for this assignment.

Submit your files through Canvas Assignment 1 File Upload link.