This week was the buffer week in my schedule to do any remaining tasks in the first half of this semester. There were 2 goals viz., Implement Point Light & Implement Dear Imgui for debug UI.

Howdy Everyone! If you’re regular visitor and here to see my progress on this project, I am glad to see you here. If you’re new visitor, You might like to start from my first blogpost when I started working on this project from scratch. Thanks for visiting.

Allright, so we didn’t had any 1:1 this week as Interim presentation covered all the work done till last week. As per my schedule, this week was assigned to cover any pending tasks from first 5 weeks. for me, I’ve roughly managed to stick to the schedule except implementing debug UI system. So, I decided to look into 3 tasks this week.

1. Research about building better scene for rendering
2. Implement Point Light.
3. Implement Dear Imgui for UI handling.

Currently we have only single chalet in our scene with some baked shadows and lights in it… Even though I’ve added my own lights, and we are going to add our own shadow mapping later, I wanted to have better scene to work with. So I did reach out to previous cohort Alumnus who has good experience in Graphics Programming about his suggestion to use scene composed of one mesh or to load multiple objects in scene. His suggestion was ideally one should have different models tied to their own vertex and index buffers and load into scene but for saving time, I should use scene composed of one mesh. So after some search, I found one nice model on Sketchfab.

“The Drunk Troll” Tavern by mrrobot on Sketchfab

This model is completely free hence its ideal to use in our project. I also contacted modeler about missing texture file in scene but he said that he is using vertex coloring along with post processing effects to achieve the final rendering look. Thankfully he has shared all his post processing stack with me so I can recreate that in my engine provided that I either don’t use any texture with it. I am going to take help of an Artist to see what I can do with this model else I will stick to the current one.

Second task was about Implementing point light. In the last week, we had created fragment uniform buffer object structure to pass data from our program to fragment shader. So now, we have 2 uniform buffers objects for our Vertex and Pixel shaders. We can just populate those with additional data required to render point light in the scene.C

btw, Feel free to visit my GitHub repository to checkout my project and download code files.

Link to This Project’s GitHub Repository

You can go to “releases” section on my GitHub repo and download zip file under tag “Week_VI_Progress“. So You can look into the code which I’m referencing here.

So lets look at what’s changed in Vertex and Fragment Shaders.

In vertex shader‘s Uniform buffer object, we have 2 new inputs viz., pointLightPosition and pointLightRadius. We also have 2 new outputs for worldPosition and pointLightAttenuation which we will feed into fragment shader. One of the important thing to note here is we are calculating point light attenuation in the vertex shader because at close distance, attenuation will be negligible so we can avoid expensive attenuation calculation in fragment shader.

Previously, in the fragment shader we only had ambient color and diffused light color in the uniform buffer object. now we have 5 more inputs viz., pointLightColor, pointLightPosition, cameraPosition, specularColor & specularPower. Point light’s position and color are straightforward. As we are using Blinn-Phong effect to achieve point light, so Camera position is required to calculate view direction. Specular color & power specifies the color & intensity of the point light.

As we have multiple lights in our scene, we have two n_dot_l floats representing dot product between normal & respective light directions ( directional & point light ). Blinn-Phong effect use half vector instead of reflection vector. This half vector lies between view and light vectors and can be obtained by addition of point light direction and view direction.

We have 2 diffuse lights now which are generated by directional light and point light. Calculating diffuse light is the same for point light but only difference is we need to multiply result with attenuation, so it attenuates over distance. Finally, the output color is addition of all light effects at specific pixel which is nothing but ambient + diffuse + diffusePointLight + specular .

Once we create descriptor sets, they need to bind with the Command Buffers. so inside our createCommandBuffer() method, we call vkCmdBindDescriptorSets() method to bind descriptor sets to each command buffer.

The current task which I am working on is Implementing Dear Imgui debug UI. Currently our updateUniformBuffer() method is handling all sorts of transformations and binding uniform buffers. we can move all that logic into UI, so debugging will be lot easier.

Imgui is render agnostic api and supports Vulkan with GLFW. To setup we need to add 4 files from Imgui examples section along with their dependencies. those files are,

1. imgui_impl_vulkan.h
2. imgui_impl_vulkan.cpp
3. imgui_impl_glfw.h
4. imgui_impl_glfw.cpp

We aren’t using Vcpkg for Imgui as it doesn’t include these source files from examples folder so rather we are copying all required Imgui files in our project. Then we have created new method in RendererC class called InitializeImgui() which deals with creating Imgui context, Setting up its vulkan bindings, setting Imgui style & create command buffer and use it to create font texture. InitializeImgui() method is called after initializing vulkan as its going to use Command pool & render pass initialized during vulkan initialization.

Then in the main loop, we need to start new Imgui frame by calling 3 functions.

1. ImGui_ImplVulkan_NewFrame();
2. ImGui_ImplGlfw_NewFrame();
3. ImGui::NewFrame();

We will add all our UI elements between ImGui::Begin() and ImGui::End() methods. and finally call ImGui::Render() & ImGui_ImplVulkan_GetDrawData() methods to render UI on screen.

This is our chalet model updated with point light ( Red color )

Next Week Task:-

For next week, I am going to finish Imgui errors & move onto implementing projective texture mapping & Shadow mapping technique.

I hope that you’ve found this dev diary informative and useful. Feel free to comment down below on what do you think and also if you have any questions or requests, You’re most welcome! Stay Tuned! 

Thanks for visiting. Have a great day ahead.. 🙂

• Pratik
• July 1st, 2019
• • Development Diary
• Comments