Skip to content

JA5. Learning Journal 5

1. Discuss the week’s activities and your observations

I started this week by reading the material and watching the videos. The slides from MIT were particularly complex and deep into details to the point that I could not understand fully; hence, I needed to look for external resources like YouTube. I then did the quiz and the programming assignment which was particular challenging.

The topics of this week included the rendering pipeline and event handling. I learned about the rendering pipeline, which is the process of converting 3D objects into 2D pixels on the screen. The rendering pipeline consists of several stages, including projection transformations, initial coloring, lighting, shading, depth calculation, clipping, and grouping (Uopeople, 2024). In the discussion assignment, I learned about event handlers, callbacks, registering callbacks, and the event loop.

Did anything surprise you this week?

I was surprised that Three.MeshBasicMaterial does not support shadows. I have used them in the assignment and spent quite some time trying to make the shadows appear, but I could not. I then realized that the material I was using does not support shadows, and I had to change it to Three.MeshStandardMaterial to make the shadows appear. My assignment is available here: https://ahmad-ali14.github.io/AY2025-T2-CS4406/unit5/ and the code is available here: https://github.com/ahmad-ali14/AY2025-T2-CS4406/blob/main/src/unit5/code.ts

I was also surprised with the complexity of the rendering pipelines and the algorithms used in it and in rasterization. Ray casting, ray tracing, rasterization, scan lines, super-sampling are all smart techniques that aim for more realistic and performant rendering (Massachusetts Institute of Technology, 2020).

Did you face any challenges this week? How did you overcome them?

In the programming assignment, there is a requirement that “cylinders should be perpendicular to the sphere’s surface and at the center of them”. This task was particularly challenging to me along with making the shadows appear properly. I had to search for a solution for a long time to find a solution that works for me.

I overcome the issue by making all numbers in the scene (atom radius, bond lengths, and positions) relative to a fixed number (the bond length), hence, I was easily able to change that number and then the entire scene changes. I was also able to add controls to the scene to change the light position and intensity which helped me to see the best position for the light source.

2. Compare the concept of Rendering in the common graphical applications (such as PhotoShop) with what you learned in this unit

There are two types of rendering: real-time rendering and pre-rendering. Real-time rendering is used in video games, simulations, and other applications where the details of the scene must be revaluated on every frame and only uses GPU. Pre-rendering is used in movies, animations, and other applications where the scene does not change much or it is too complex to be rendered in real-time, and it uses both CPU and GPU (Will, 2023).

PhotoShop uses multiple images as layers to create the final image, and allows the user to manipulate the layers freely; thus, it requires real-time rendering. Also, scenes rendered using Three.js and canvas are all real-time rendered, as the main event loop keeps rendering the scene on every frame (Angelia, 2020).

To compare, common graphical applications like PhotoShop use real-time rendering, similar to the rendering pipeline in computer graphics; however, the output is vastly different. PhotoShop outputs a 2D image, usually static, and the final images is computed and stored in a file, so the next time it will be used in a pre-rendered manner. On the other hand rendering in computer graphics (using Three.js, WebGL, or canvas) outputs a 2D image on the screen, but this image is a always interactive and it is being rendered on every frame.

References