top of page

Render Engine

 

For this project I worked on a graphics rendering engine along with two other team members. For this project, I mainly worked on the UI,Gamma Correction, Attenuation and Shadows 

​

​

Gamma Correction and Attenuation (Post-Processing)
Gamma correction is a method that allows us to modify the illuminance of a pixel in order to increase the details of an object. The distortion of the colors manipulates the colors that are being displayed on the monitor that we in turn perceive. Instead of having a linear color representation, gamma correction allows us to change the curve and output of the image in order to increase details in our scene. The representation of the graph has 0 being black and 1 being white. It shows how gamma correction manipulates the darker colors and brighten up the entire image in general. This is important in our use especially in graphics engine is that it allows us to increase the details in our scene that might have been lost due the lack of light.  Using the graph as an example above, with a gamma value of 2.2. We will be able to manipulate the original value of 0.218 to be 0.5.

​

BeforeGamma2.PNG
AfterGamma2.PNG

Before Gamma Correction

After Gamma Correction

At the same time attenuation of can be applied to the objects in order to create a more three-dimensional feel. Attenuation change how much light is being projected on an object according to the distance that it is at. This is to depict our real life on how object further away from the light source are darker and vice-versa. This may cause a problem especially when the object is too far away. These objects that are further away will become too dark for the users to see. This is when gamma correct is added to the implementation in order to brighten up the scene for a better visualization. The example below shows this implementation.

​

NOEffect.JPG
Attentuation.JPG
Attentuation+Gamma.JPG

No Effect

Attenuation

Attenuation +

Gamma correction

Shadows (using directional light)
Shadows is an important part in the implementation of realism in the scene. Without the existence of shadows, the image of a scene will be flat and hence, a lesser sense of dimension visually. Shadows also allows us to be able to differentiate between the difference if an object is floating or on the ground.  

 

Noshadows.JPG
shadows.JPG
shadows2.JPG

No Shadow

Shadow

Shadow

 

In order to have a shadow visually mapped onto the scene, we are required to render this scene twice. The first rendering will create a depth, and the second would use the generated depth texture to predict the shadow. These two renditions will allow us to create shadow mapping.  The shadow map contains the scene from the light’s perspective. This allows us to see from the light source what is visible and blocked by other objects. Everything that is within view can be seen. On the other hand, anything that are blocked will be in the shadows.

​

​

depthMap_edited.jpg

.

​

The first step to creating a shadow map is to first create a depth map or also known as the depth texture. A depth map is drawn on an external framebuffer than the one that we display.  Since we only need the depth information of an object, we do not need to have any color buffer. This image shows an example of how a depth map looks like after being generated. The darker the image, indicates that the object is closer to the light.

 

First a matrix is needed for us to change the world space coordinates into a light space coordinate. This allows us to know what the coordinate is in the world space and manipulate to see if it is in the shadows. The calculation to check if the object is in shadows will be off a single value calculated. The inverse value ranging from 0 to 1 is multiplied into the diffuse and specular color of the image in order to darken it. A comparison between the actual scene and the depth map is made. Firstly, we attain the from the light’s point of view the closest depth and compare it to the current depth of the fragment. If the current depth is larger than the light’s closest depth (meaning to say it is further than what the light projects on), the fragment portion is hence in shadow. If the fragment is in shadow, we multiply zero to the diffuse and specular light component when calculating the final color. This would create a darken portion to our scene. Hence creating shadows.

Depth Map

 

Postmortem

During the creation of shadows in our scene, I was spending a huge amount of time trying to figure out what and how to use framebuffers. In past implementations of graphics in the past, we did most computations in a single framebuffer. Hence trying to learn how to make both framebuffers interact with each other was a slight difficulty for me at the start. At first it was a little puzzling for me mainly in the confusion of how a two-dimensional image/ texture manipulates a three-dimensional scene.  However due to the information online, I was eventually able to comprehend what to do and implement such behaviors.
A regret I had was being unable to implement point shadows. Due to the time constraints due to poor management of time, we decided to forgo some features. Instead I choose to work on current features in the engine that requires more changes and tweaking for a better user experience.

​

One of which was to clean up the UI or ImGUI that was on screen. The layout was originally cluttered and some element in the editors were unusable. Hence there was lot of unnecessary elements that had to removed. I also group elements that are usable in the current mode the engine is in. For example to remove diffuse and specular light when PBR is in use.

The thing that had to be improved on was the movement of the camera. The camera can now move around the space/ world with two modes orbit and FPS. Depending on which mode the users prefer, they can toggle according to which mode fits better.  Camera speed can be change in the editor to speed up or slow down.
Another feature that we added was some movement for the objects in space to create more motions and actions in the engine. This will make the scene livelier and less static.

Overall, I felt that the entire project was interesting and I was able to learn new implementation of features.

​

bottom of page