Assignment 2 - Scene Building, Camera, Textures, and Lighting - Due

Mar 17, 2025 11:59 PM

o Spring 2025 CSC 305 A01 A02 X

This assignment tests your understanding of hierarchical transformations, the camera, textures, rasterization, and lighting in the real-time graphics pipeline.

This assignment is purposefully open-ended, you are meant to be creative.

See past examples at the end of this text, and clarifications in the rubric and notes.

Write a program in JavaScript/WebGL that draws an animated scene with the  requirements given below. Template code is provided to handle many of the     aspects necessary to get basic objects rendered with textures and moving in a scene. Use the template code found on the course webpage.

There are important notes about the template code regarding textures below! You will very likely have to address these, so make sure to read them carefully. There is a lot of information here, it is for your benefit. Make sure you read the assignment text from beginning to end. If you have questions consult this assignment text first.

In Lab 5 and 7 we modify the assignment basecode to support textures in multiple ways. I strongly suggest using either Lab 5 (with help from Lab 7 later if you need it) as your starting point! Lab 5 is in the Syllabus, Lab 7 will be later. Note you will find that you can not complete all components immediately. There are two key labs upcoming 5 and 6 (with additional hints in 7 for those who need additional insights near the due date of the assignment), and several lectures, rasterization, textures, and lighting that are needed to complete this assignment.

Marking Scheme

Total Marks: 47

1. [4 Marks] At least one hierarchical object of at least three levels in the hierarchy  (e.g. human arm body - > shoulder - > elbow ...) where joint motion clearly shows the interaction between levels. A good example of this is the legs in A1, note that legs in A2 will not count (you can not simply use the legs to fulfill this requirement).

2. [4 Marks] 360-degree camera fly around using lookAt() and setMV() to   move the camera in a circle while focusing on a point that the camera is circling. This can be a single fly around or can be a part of a composed scene or can be a loop.

3. [4 Marks] Connection to real-time. You should make sure that your

scene runs in real-time on fast enough machines. Real-time means that one simulated second corresponds roughly to one real second.

4. [6 Marks] Make use of at least two textures either procedural or

mapped. You must map them to a(n) object(s) in a meaningful way.

Using the textures from the Lab modified assignment base code does not count toward the two. Simply placing a texture on a default object   using the default object coordinates does not count. Using textures as   in the lab code with no meaningful or non-trivial development does not count.

5. [5 Marks] Convert the ADS shader in the assignment base code from a vertex shader to a fragment s hader. You need to compute the lighting   equation per fragment.

6. [2 Marks] Convert the Phong to Blinn-Phong in the new fragment shader created in step 3.

7. [5 Marks] At least one shader effect designed from scratch to perform   a clearly visible novel effect (novel w.r.t basecode and labs). This can be directly incorporated in the given shader basecode or added to the

HTML file, loaded, and compiled as an additional shader program make use of. Each line of your shader code must be commented clearly explaining exactly what the following line does and why. You must clearly identify the purpose and effect the shader produces in the submitted README. Note that some really cool effects require very little code. Note that your effect can use a texture and thus may count as part of your novel texture count above (you need to document this in your readme)! Think about how lighting works, how surfaces work, and how your favourite, games, movies, and comics look.

Past examples: Create a spotlight rather than a directional light, cel-shading, swirl effect, water caustics, blur, glow, edge highlighting, x-ray, CRT (retro gaming TV), etc.

Please be careful here, it is very tempting to pul effects from Shadertoy, YouTube gurus, or some other s hader resource. You need to complete this item yourself! You are better off working out and coding a simple one-line effect that is we l explained than copying someone else 's effect (one can get you fu l marks, and the other can lead to an academic integrity case).

8. [5 Marks] Complexity: scene setup and design, movement of animated elements, and programming.

9. [5 Marks] Creativity: storytelling, scene design, object appearance and other artistic elements.

10. [5 Marks] Quality:  Attention to detail, modelling quality, rendering quality, motion control.

11. [2 Marks] Programming style.

12. [-2 Marks if not] Make and submit a movie of your complete scene. The movie should be the resolution of your canvas, and in a standard file format/codec such as mp4. Include a cover image (png or jpg) from your movie. You may use any screen capture program that is available (e.g. ShareX). Some additional info below.

13. [-4 Marks if not] Provide a readme.txt that describes what you have done, what you have omitted, and any other information that will help the grader evaluate your work, including what is stated below.

Requirements/Policies

Collaboration

None.

Original Work

The assignment must be done from scratch. Apart from the template provided and labs, you should not use code from any other source, including the previous offering of the class.

Note there are many shader sources on the internet. Please develop your own first! You can seek inspiration but do not use others’ code.

Zero Mark

If the code does not run, no objects appear in the window, or only the template code is running properly, no partial marks will be given.

Clarifications

· Note that creativity and complexity are both important for this

assignment, but are in many ways subjective. The mark will be applied objectively in a way that reflects whether you've done something non-   trivial w.r.t. the given code. We are not subjectively judging your artistic ability.

· Make sure you rotate the hierarchical elements from [1] around the

correct point, i.e. where they touch the parent body parts, so bodies do not appear to break apart.

· Start your code in main.js:render() and feel free to write additional functions

· You must do the assignment from scratch. If you use existing code (e.g.   A1, Lab5, Lab 7) then you must state that clearly in your readme.txt file. You are not allowed to use any piece of code from any other source.

Using any piece of code from any source (including previous offerings of the course, the web etc) without attribution will be considered plagiarism.

· You can use libraries as stated below. You will not get credit for the

code you have not written, however, it might help with the visual complexity of your scene. For example, if you use an existing 3D model for required element 1, then you will not get credit for it. See below for more details.

Project Submission Instructions

1. Make a backup copy of your project folder first to avoid accidentally deleting your work.

2. Rename the parent project folder to include your name

3. Remove any unnecessary files from the assignment. You need to submit all files required to run your assignment and nothing more.

4. Archive the project folder in a zip folder and call it csc305_assignment_2.zip.

5. Test the archive

a. Unzip the archive in a different location.

b. Make sure everything works as expected.

6. Submit the zip file on brightspaces.

We want to be able to open your zip file, run, and see your project right away. Also, note that you can add as many files as you want to the project as well as modify any settings that you need to (see below). However, it would be useful if you stated unusual settings and additional files in the readme.txt.

Movie Submission Instructions

1. There are lots of screen capture software that simplify screen

recording. On Windows, ShareX is very good.

2. Call your movie file _ _movie. [mpg,mp4], replacing  and  with your first name and last name.

3. Call your image file _ _image.jpg.

4. Zip the two files in an archive called _ _bundle.zip.

5. Submit the file on brightspaces.

Security Issues with Textures

If the textures do not work, check the console for an error message related to “Cross-origin image”.  To use textures in WebGL we have to bypass a security  issue that is present with most browsers.

The easiest way to handle this is with the python HTTP server approach we discussed in Lab. This is how we will mark your assignment.

1. Open explorer/file manager and navigate to the code folder.

2. Now shift-click in the file list and open a command prompt or powershell here

1. Alternatively, you can open a command prompt or power shell from the windows menus and then use cd [folder] to navigate to the correct folder.

3. Now run the following:

python -m http.server 8080

4. Now you should be able to open a browser and type

localhost:8080

In the URL bar

5. You’ll see your files being hosted on a simple local server, you can now click your html file.

FAQ

1. Are there any size limitations to the project? i.e. number of classes, project size, memory, number of textures, texture resolution etc?

A: In terms of texture resolution, number of textures etc, there are:

a. Hardware and software limitations. There is a maximum number of textures you can have active at the same time, and there is a maximum size for textures.

b. Practical limitations. Brightspace has a 1gb limit on what you can upload and a recommended 40mb maximum. You also want your project to run in real-time.

2. What should be the duration of the movie?

A: However long to capture it generally, if it loops you may want to

capture two or three loops. Often these are between 20-60 seconds.

3. Can we use images from the web?

A: As long as the images are free for public use, sure. Do not use assets that are copyrighted. Note that the filters on google images are rarely    correct w.r.t usage rights. Check out resources like:

a. OpenGameArt

https:/opengameart.org/

b. Wiki Commons

https:/commons.w ikimedia.org/w iki/Mai n_ Page

c. PARIS MUSÉES

https:/www.parismuseescollections.paris.fr/en

d. Smithsonian Open Access

https:/www.si.edu/OpenAccess

4. Can we use external libraries?

A: As long as they (a) are free for public use, (b) do not make the required elements unfairly easier for you (do not use an engine, tool, package, module, or any resource that solves a required element for  you),  and (c) the TA can run your project, you can use additional libraries. However, if the TA cannot run your program because of missing dependencies etc. you will have a problem. Generally, that means they need to be freely available and you need to submit the complete assignment. No setup or downloading on our part should be required to get it to run.

5. Can we use audio?

A: You can, however, 3) and 4) also apply here.

6. How ambitious can we be?

A: I encourage you to take this opportunity and explore your

programming abilities and your creative interests. However, I advise you not to aim too high, unless you are confident about what you are doing.  Above all, FIRST make sure that you have covered the required elements of the assignment. THEN, add complexity incrementally in a  way that does not break your base of working elements.

Hints

· Use the timestamp or dt variables to synchronize your animation elements.

· Use setColor(r,g,b) to set the desired colours.

· For the motions, you may want to use functions such as

1. x(timestamp) = A* Math.cos(w*timestamp+h)

Where timestamp is real-time, A is amplitude, Math.cos is cosine function, w is the angular frequency, h is the phase

1. x(t + dt) = x(t) + x'(t)dt

Next position in time ( x(t + dt) ) is just the current position ( x(t) )plus velocity ( x'(t) ) scaled by the change in time (dt).

。Wave functions

。Euler integration for movement · Common mistakes with motion

1. eye[0] = eye[0]*Math.cos(theta) + eye[2]*Math.Sin(theta) ;

2. eye[2] = -eye[0]*Math.sin(theta) + eye[2]*Math.cos(theta) ; / incorrect use of the newly computed eye[0] instead of the original eye[0]

。Camera Motion