Creating Tesla Model X 90D Real-Time Configurator

Founders of Garage B14 Suren Sahakyan and Vav Hakobyan talked about the workflow behind Tesla Model X 90D Real-Time Configurator made in Blender and Unreal Engine.

Workflow

Vav Hakobyan, Co-Founder and 3D Art Director of Garage B14: As always, modeling starts with research. Luckily there are tons of pictures, videos, and blueprints of the Tesla Model X on the Internet so the researching process was very straightforward. We used blueprints to define model X's proportions and then via camera matching to real-life photos started the modeling process.

Modeling has been done inside Blender because of its easy use and Modifiers that allowed us to reach high precision. The final model has a high polycount (~6 million quads) because we paid high attention to details to make the car look and feel realistic.

For unwrapping the model, we used RizomUV and since we planned to use Automotive Materials by Epic Games, we only concentrated on details that had logos on them or needed unique textures. Automotive Materials use world space projection that works with any kind of UVs so we didn’t have to worry about UV density.

Next, we separated the movable parts from the body such as doors, rear hatch, hood, wheels, calipers, etc. Then the rigging process began. We made a basic vehicle rig with bones for wheels and other moving parts and we will use them as sockets to attach previously mentioned movable parts inside UE4

The hood and the rear hatch have mechanical parts that move a certain way when you open them. So, we animated these mechanisms according to real footage from around the internet. In the end, we exported the rig with only wheels attached.

As we imported the model to UE4, we then started to set up materials. We recommend enabling Clear Coat Second Normal in UE4 to achieve realistic-looking carbon fiber material when using Automotive Materials.

Using instanced materials allowed us to integrate them into the blueprints in order to change certain parameters like color. This allowed us to smoothly blend current and upcoming colors to make color changes more visually interesting.

First, we blocked out the garage, placed windows, doors, and lights around it. After blockout, we got back into Blender to make all necessary models for the garage. Then we gave them Bevel Shader inside Blender and baked out the Normal textures so we can apply them in Unreal Engine. We made a powerful master material for the environment with all necessary tweaks and made different instances of it to make various materials like concrete metal etc. To add more realism to the scene we added decals around the garage to emphasize dirty areas such as corners.

After setting up all the different pieces we ended up with a realistic-looking garage but we noticed that the walls were a bit empty so we decided to add Tesla chargers to the walls. We again researched and found references, made the models and textured them inside Substance Painter, and then imported the models and textures into Unreal Engine and placed them on walls.

At this stage, we started adding more detail to the garage to make it visually interesting, added pipes, fire extinguishers, and, of course, Tesla's logo on the wall. At last, we finalized the scene and finally baked the lighting. We increased the indirect lighting quality and decreased the lighting smoothness to 0.75 in order to make shadows crisper and sharper.

Now the scene is ready and it's time to add some post-process effects. We played with lighting and post-process to get the exact image that we were looking for which is to have neutral colors so that nothing pops out and that the car is always in the center of our attention.

After we were satisfied with the results, we then jumped to the rendering process. We again did research on car photography to really understand the basics and set the cameras up accordingly to portray model X's strength and design.

Challenges

Suren Sahakyan: The most challenging part for us was the programming part. Note that this project was done before Happy Games released their free car configurator template and we had to build everything from scratch. Having some understanding of programming helped us to make a working configurator. We also watched tons of tutorials on YouTube and read documents to better understand the process. Thankfully, Unreal Engine 4 offers a wide variety of tools and of course visual scripting that made the programming part much easier.

Conclusion

Vav Hakobyan: We wanted to make this configurator as interactive as possible. We wanted to be able to change the car’s color, tint windows, open and close every door and hatch, change rims, have a look inside the interior from the driver’s point of view, and so on.

One of the most important parts of the user experience is the user interface or UI. We made the UI using UE4s widget tools. A big inspiration was taken from Tesla model X's website so we share the same kind of design language.

And finally, the customization part. We wanted to have a practical configurator that was still fun to use. For example, if you click on the wheel, you will see that camera moves towards the wheel to get a better look and at the same time will also tilt to be better visible just like AAA games do or when you click on the roof to change the color camera again moves and finds a better spot to show the whole car.

This was all done using widgets and blueprints. When you click on a specific widget, some action happens accordingly.

Suren Sahakyan: We are currently working on a large project that includes a variety of vehicles ranging from off-road trucks to military trucks. We are going to develop to get a multifunctional configurator with a large library. And the beginning of all this is Tesla Model X 90D Real-Time Configurator.