This assignment tests your understanding of hierarchical transformations, the camera, textures, and shaders.
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 or Lab 7 as your starting point!
Marking Scheme
Total Marks: 49
1.[4 Marks] At least one hierarchical object of at least two-levels in the hierarchy (e.g. human arm body -> shoulder -> elbow -> wrist...).
2.[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 coords does not count. Using textures as in the lab code with no meaningful or non-trivial development does not count.
3.[5 Marks] Convert the ADS shader in the assignment base code from a vertex shader to a fragment shader. You need to compute the lighting equation per fragment.
4.[2 Marks] Convert the Phong to Blinn-Phong in the new fragment shader created in step 3.
5.[5 Marks] At least one shader edited or designed from scratch to perform a clearly visible effect. 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.
6.[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.
7.[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.
8.[2 Marks] You should display the frame rate of your program in the console window or the graphics window once every 2 seconds.
9.[5 Marks] Complexity: scene setup and design, movement of animated elements, and programming.
10.[5 Marks] Creativity: storytelling, scene design, object appearance and other artistic elements.
11.[5 Marks] Quality: Attention to detail, modelling quality, rendering quality, motion control.
12.[2 Marks] Programming style.
13.[-2 Marks if not] Make and submit a movie of your animation. The movie should be at least 512x512 resolution and in a standard format, such as mp4. Include a cover image (png or jpg) of at least 512x512 pixels. You may use any screen capture program that is available (e.g. ShareX).
14.[-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. If you discuss this assignment with others, you should submit their names along with the assignment material.
Original Work
The assignment must be done from scratch. Apart from the template provided, 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, or 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 in a way that reflects whether you've done something non-trivial w.r.t. the given code.
●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. Using any piece of code from any source (including previous offerings of the course, A1, 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 unnecessary files from the project.
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
版权所有:留学生编程辅导网 2021,All Rights Reserved 联系方式:QQ:99515681 电子信箱:99515681@qq.com
免责声明:本站部分内容从网络整理而来,只供参考!如有版权问题可联系本站删除。