Making my PBR Renderer more user-friendly - Part II

Last week, I wrote an article about making my renderer more user-friendly. If you haven't had a chance to read any of my previous two articles, here are some videos to catch you up.

This week, I decided to work on the Lights User-Interface. I was unhappy with how the lights were added or manipulated in the scene, so I worked on them this week.

One of the first things I did was to make the Lights an ECS component. I also implemented a Light System that manages different types of lights, such as Directional, Points, Spot, and Area Lights.

I then removed the previous Light UI implementation and started all over again. I added a drop-down menu that allows the user to add a particular light type, such as Directional and Point Lights.

For Directional Light, I added visual feedback so the user can determine the direction of the light. I also allow the user to set the light's intensity through a slider.

For Point Light, I allow the user to set its intensity radius. And of course, you can manipulate the transformations and rotation through sliders.

So, here is what I have as of now:

So, what's next?

As you noticed in the video above, the point lights are not casting any shadows. Some bugs need fixing. I'm also wondering if I should add a Gizmo for translation/rotation. But my main objective is to add Ray-Tracing to the renderer. That is where I'm heading. For the time being, I want to focus on setting up a user-friendly UI. So, be ready for a part III.

Making my PBR Renderer more user-friendly

One of the activities that I strongly dislike is creating a User-Interface. For a long time, the first version of my game engine lacked a UI. The only reason it had one was out of necessity, not because I enjoyed developing one.

As you may recall, my last blog post mentioned my interest in learning about BRDF. Thus, I ended up developing a BRDF renderer. If you didn't get a chance to read the article, here are some screenshots of what I accomplished with my renderer.

The UI in my renderer is simple. It lacks several UI interactions such as transforming operations through a slider, adding new models to the scene, adding point lights, etc.

Since my goal is to learn more about the interaction between light and surfaces, i.e. BRDF, it became apparent that I needed to add more features to the renderer's UI.

And that is what I did. For about two weeks I dropped my Renderer Engineer hat and worked as a UI designer. This is what I was able to accomplish:

First, I added sliders that control the model's transformations, such as translations and rotations.

Next, I added the ability to add point lights to the scene. I'm not completely happy with this, but it will do for now.

Next, I implemented a Mouse-Picking with Ray Casting algorithm that allows users to select a model with a click. If you are wondering how to do so, here is a way to do it.

Up to this point, all models' names were listed in a drop-down menu. This was not intuitive, since the user could not get a preview of the model before adding them to the scene. So, I spent a day learning about NSCollectionViews and was able to show a preview of all the models in a collection view.

Another issue with the UI was a lack of visible feedback when selecting a model. The user had no way to determine when a model was selected or not. So, I implemented a bounding box for visual feedback purposes.

So, this is where I am right now.

My goal for next week is to focus on fixing the Disney shaders and Lighting.

Thanks for reading.

I built a PBR Renderer

I was completely immersed in rewriting my game engine when I stumbled upon these captivating images.

The author experimented with the properties of various metals and demonstrated how to create them in a Physically-Based Renderer through renderings.

They looked so cool that made me wonder if I could build a Physically-Based Renderer myself and render these metals.

I was a bit hesitant to take a detour from my engine and modify the renderer.

See, there were several things that I needed to change in my engine. For starters, I was using non-physically-based shaders. Thus, I was not using any material properties from a model. My engine would also require a user interface to manipulate material properties such as Roughness, Metallic, etc.

So, I listed the things that I had to do and after looking at the list, I decided to take a little detour and build a PBR Renderer.

My plan of action was super simple:

1. Become more familiar with PBR and BRDF functions
2. Modify the current code base to use material properties and PBR functions instead of non-physically based functions.
3. Implement a User-Interface for the material properties

So, I began my new project by reading a bunch of amazing BRDF papers, articles, presentations, and everything I could get my hands on. I knew the role of BRDF in PBR but if I was going to build a PBR renderer, it made sense to do a deep dive and understand every aspect of it.

I used most of my existing code base in the renderer. The biggest changes I made were to the shaders. I kept my non-physically based shaders and added BRDF shader functions. I found a nice list of several functions here.

The UI implementation was super simple and it is not worth talking about it but here is an image of the UI.

It allows the user to manipulate several material properties, set tone maps, enable Image-based lighting, and set the direction of the light. One cool thing that I added was the ability to select different BRDFs. You can see in real-time the effect of choosing different BRDFs functions such as Cook-Torrance, Disney, etc.

So, everything seemed to be going well; however, I still had a major problem. The metals were not being rendered as metals; something was off. The rendering below shows my attempt to render Gold.

At this time, I decided to take a break from coding and focus on something that was bothering me, the "Fresnel Function." I didn't quite understand its role in BRDF, so I spent a weekend getting familiar with it. While reading about this topic, I realized that metals don't reflect any diffuse component. I ran to my computer, removed the diffused component, and BOOM!!!!

I had rendered GOLD.

In conclusion, I'm glad I got distracted to build a PBR Renderer. I learned much more than I imagined and had a lot of fun. Also, it wasn't that difficult at all. Here are renderings of other metals.

Thanks for reading

Crafting a Game Engine with User Experience in mind

I wouldn't recommend my game engine to anyone. Not that it doesn't work. It does. The major flaw of my engine is that it was not developed with the end-user in mind. It was developed with my curiosity in mind.

As I mentioned in my previous post, I'm pivoting and developing a new engine. Its a complete rewrite with all decisions revolving about the user-experience instead of my own.

With this new rewrite, I'm spending considerably more time thinking about the editor, its functionality and features than I ever did in the past. I'm spending more time making the controls and camera user-friendlier. I'm spending more time thinking how to make the experience of the user more enjoyable. With all honesty, I have yet to dwelve into low-level graphics stuffs; I'm dying to do so, but this time, I know better. Is all about the user, not about me. To put it simply, I've been thinking more about how to minimize the pain points of my target audience than doing hardcore coding.

I'm enjoying this new approach. Is forcing me to view things from another perspective. I made several bad decisions with my game engine, and thus I won't recommend anyone to use it. However, those decisions brought me to the place where I am now. It opened my eyes to where I should go next. And my next move is to make a game engine not for me but for you.

Thanks for reading.

Why I Decided to Rewrite My Game Engine

I have decided to rewrite my game engine. In fact, I already started a couple of weeks ago. I know, I know, it's an insane decision to develop an engine all over again. But I have good excuses to do so. Here are the three reasons why I'm rewriting my engine:

• Acquired Expertise
• Desired to learn a new language
• Becoming an expert

Acquired Expertise

Over the past years, I have learned so much about computer graphics. I am not the same engineer who started writing an engine in 2013. And if given to chance, I would not develop Untold Engine the same way as I did. Looking at the codebase, I can pinpoint many issues with my game engine. As a matter of fact, I am embarrased with some implementations. But hey, I did not know, what I didn't know.

In a previous post, I mentioned three things that I would do differently. Code wise, I would implement the engine using ECS architecture. I would make use of compute kernels throughout the engine to help with performance. And more importantly, and this is a big one, the codebase would be a lot cleaner/simpler and less full of clutter.

Desired to learn a new language

I can rewrite my engine in C++. But I don't want to waste an opportunity to become an expert in Swift. You may say that is crazy, and maybe it is, but I want to be marketable and learning Swift may help landing job opportunities. Moreover, at work, I use C++ and Objective-C and I don't want to spend my weekends using the same languages. I want to try something new. Finally, Swift is kind of a cool language. I'm starting to like it.

Becoming an expert

My third reason for rewriting my game engine is a personal one. My personal goal is to be expert in this field. Is a personal goal that keeps me going.

We all know that the first time you do something, you are going to suck. The second time around, you will do better, and on and on.

I know that my game engine is not the best one out there. But I know that the second time around, I will develop a higher quality, higher performance game engine ready for the market to use.

So, wish me luck. I'm going to need it. :)