2023/11/6 13:59 CS112 PA1: Transformations
CS112 PA1: Transformations
Introduction · Getting started with the code skeleton · Model a scene of a dining room ·
Submission · Grading · Useful references
1 Introduction
The objective of this assignment is to get familiar with the basic geometric transformations that are fundamental to creating any scene. Specifically, you would need to write some code (maybe dozens of lines), and it will take some time to understand every part, so please start early.
Software and hardware requirement: WebGL runs within the browser and is independent of the operating and window systems. You may finish the assignment using any operating system you like (e.g. Windows, MacOS 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 prior experiences in dynamic languages 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 more formal introductions to JavaScript, checkout the references.
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.
2 Getting started with the code skeleton
2.1 Download the codebase
Download pa1_student.zip and extract it any folder you like. You should have six files in the folder:
2023/11/6 13:59
CS112 PA1: Transformations
file name description
pa1.html
HTML file which shows the WebGL canvas, you don't need to change this file.
pa1.js
gl-matrix-min.js
webgl-utils.js
models.js
trackball- rotator.js
the actual functions for this assignment.
utility functions for operating matrices.
utility functions for WebGL animation.
file describing the models in IFS format.
utility functions for rotating the scene using the cursor.
2.2 Open pa1.html
Open pa1.html in the extracted folder with Chrome. In the given code skeleton, a scene is drawn with 4 chairs (which are overlapping with each other as of now) and a table as shown below.
2023/11/6 13:59 CS112 PA1: Transformations
2.3 Note
For this project, you will be modifying only two files: models.js and pa1.js. But try to read and understand what other functions are doing as well as it would help you better implement things. There are lots of comments throughout the codebase and the functions have similar structure as PA0 for better/easy understanding.
The following are two tasks that need to be completed in this programming assignment.
3 Model a scene of a dining room
2023/11/6 13:59 CS112 PA1: Transformations
3.1 TASK 1
Use the built-in matrix transformations such as mat4.scale(), mat4.translate(), and mat4.rotate() provided by gl-matrix-min.js to properly configure the model-view matrix and model a scene of a typical dining room.
3.1.1 Task 1-1
First build the center-piece (i.e. a cube) by determining the coordinates, normals for each of the 8 vertices and also its faces. Use a scratch paper if you need to, similar to what you did in the PA0. Note that you would need to compute per-vertex positions and normals (both of which should involve 24 floating point numbers).
Once you have computed all values, complete the function cube() in models.js. (Refer to models.js to see how other models are represented.)
3.1.2 Task 1-2
Complete the function draw() in pa1.js by computing the transformation for each of the six objects (1 table,4 chairs, 1 box) where you have a table in the center surrounded by four chairs and a center piece on the table. Complete your functions:
perspective(...)
translation(...)
scaling(...)
rotation(...)
and use them to complete the function draw(). Think what input and output parameters you would need for each of these function. The description of these have been provided in the file. Note, the rotate() function rotates the model about an arbitrary axis, hence one of the input would be the axis vector. Note you will still be calling all the 4 transformation functions in draw().
3.1.3 Things to keep in mind
Appropriately scale all the objects such that the scene looks more realistic.
All the four chairs should be properly oriented. i.e. facing the table.
The box should be much smaller and placed approximately on the center of the table.
2023/11/6 13:59 CS112 PA1: Transformations
Try to avoid any intersections between the models.
3.2 TASK 2
Using the task 1 as reference, now model the same scene which you built above but this time you CANNOT use any of the built-in matrix transformations.
Complete the functions perspective(), translate(), rotate() and scale() in pa1.js such that when “Use_My_gl” is checked, the scene should be rendered using your hand-coded transformations; otherwise, the built-in transformations should be used. See below image for example.
Feel free to use your own variable names and write helper functions to perform elementary operations like matrix-matrix and matrix-vector multiplications.
Hint: OpenGL matrices are stored as arrays in column-major orders. 4 Submission
1. Make sure your name and ID is filled above the canvas in pa1.html.
2. You will need to submit the following files on EEE Canvas in a zip archive, please DO NOT submit individual files.
pa1.html
pa1.js
models.js gl-matrix-min.js trackball-rotator.js webgl-utils.js
2023/11/6 13:59 CS112 PA1: Transformations
3. We will grade your work using Google Chrome by default. If your code requires a different browser to work properly, please clarify by including a readme file in your zip archive.
5 Grading
Useful references
WebGL 1, WebGL 2 JavaScript 1, JavaScript 2 glMatrix
1. (50 pts) Your program should be able to place and render all the six objects (1 table, 4 chairs and 1 box) in their correct positions as described above.
2. (50 pts) When the user checks the checkbox “Use_My_gl”, the scene should be rendered using your own transformations and when its unchecked it should be using the built-in transformations. Note that, if your implementation is correct, the scene should remain the same no matter if “Use_My_gl” is checked.
formatted by Markdeep 1.16
✒
