Description

In this project, you will modify an existing scene graph implementation to create a basic solar system simulation. Please read the instructions below about the project carefully.
Instructions
Please download the assignment folder from SUcourse. Inside the folder, you should see multiple js files under the src directory.

In this project, you have 3 tasks to perform. Each task requires a specific file to be modified. For each task, you should only modify the respective file. Any submission that modifies any other file will not be accepted. You can find the purpose of each file below:
– camera.js: Helper class for the camera. Used to calculate the view (lookAt) matrix.
– meshDrawer.js: Helper class for drawing meshes to the scene. In task 2, you will modify the fragment shader in this file to implement diffuse and specular light.
– obj.js: Contains the object helper class.
– perspective.js: Helper class for the perspective. Used to calculate the perspective
(projection) matrix.
– sceneNode.js: Implementation of the nodes in a scene graph. In task 1, you will implement the draw method of the scene node to apply transformations from parent to child.
– sphere.js: Contains the sphere object you will use in this assignment.
– trs.js: Helper class for transformations (translation, scaling, rotating).
– utils.js: Contains helper functions for mathematical operations.
– project3.html: Contains the main functionality of the project. In task 3, you should modify the specified regions to add a node to the scene graph.
When you open the project3.html, you should see the empty screen below:

Task1
In task 1, you will implement the “draw” function for the scene graph. If you open the sceneNode.js file and check the draw function inside the sceneNode class, you should see an incomplete implementation below:

You should implement this method properly such that any transformation applied to the parent should propagate to the children nodes. If you implement the draw method properly, you should be seeing the following output:

In this output, you can see the Sun, the Earth, and the Moon. However, light implementation has not been properly implemented. We will handle the light in task 2.
Task2
In this task, we will update the fragment shader inside of the meshDrawer.js file. The current implementation only supports ambient lighting. You should update the fragment shader below to calculate the diffuse and specular lighting properly.

If you calculated the light properly, you should get the following output:

Task3
In the third task, you will add Mars planet to the solar system. To add Mars to the solar system, you should draw Mars in the scene and add it to the scene graph as the child of the Sun node.
You can find the details of the Mars node below:
● Mars should be a child of the sun.
● Mars should use the “sphere” as the mesh object.
● Mars should be translated by -6 units on the X-axis with respect to the sun
● Mars should be scaled to 0.35 for x,y, and z coordinates
● Mars should be rotated around its z-axis 1.5 times the sun’s rotation (check renderLoop method inside the project3.html)
● use the image on the link below as texture:
Mars texture link: https://i.imgur.com/Mwsa16j.jpeg
To add Mars to your scene, you should change the respected parts below:

If you did everything correctly, this should be what your scene looks like in the end:

Report
Additionally, we expect you to write a report that clearly explains your methodology. Any submission without the report will not be graded!
Submission Guidelines
You should upload your work to both GitHub and SuCourse.
GitHub: Uploading the codes only is sufficient. Once you upload your code to GitHub, write the repository link to a txt file named github-link.txt and include that file with your submission to SuCourse.
SuCourse: You should zip all of your work (report, the code(s), and github-link.txt file) and upload it to SuCourse.