3D bike configurator & high-end renders

Scanned model provided by the client.

At the beginning of the project, we were provided with 3D scans of the motorcycle for most of the needed visible parts. It is important to mention that although the scans provided were not bad, having a solid image reference library is extremely important for any kind of artistic project; having a real object reference is the most important step to increasing the quality of whatever you are making.

References are also crucial for texturing since we are aiming to create a digital twin of a real object. Materials need to be almost identical to how they look in real life.

Luckily for us, Simon Dabadie, CEO, and founder of DAB Motors was very helpful with that, providing us every angle needed at every stage of the project. Beyond photographs, he would also tell us what certain parts are made of aluminum, steel, titanium, plastic, etc. Different metals have different properties, including the look and feel, which makes it much easier when searching for materials in the Substance Source library.

This is the most time-consuming yet the most crucial part of this project. To people who are not too familiar with the ins and outs of 3D, I would like to mention that even though we have a scan of the bike, this scan cannot be used directly. Scans are only visual and positional references upon which you build the model. Scans show us the position of motorcycle parts in relation to each other, their proportions and also shows us the shape of the parts we need to model. Depending on the scan quality, sometimes you can get away with just looking at it and modeling on top, but scans can be incorrect, and therefore it is important to look at reference images to get things right.

Tracing process around the scan.

The process of 3D modeling is rather simple and straightforward. Most of the modeling was done in Blender using classic sub-d techniques. As mentioned earlier, we need to “trace” by pushing and pulling vertices along the scan. Easy, but it takes a lot of time! The hardest modeling is for parts that you cannot see through the scan because they’re too close to each other so the scanner didn’t pick them up. In cases like this we could only rely on photo references.

Final high poly model using sub-d level 1 (3.8M triangles)

As you can see from the images, the whole handlebar area was not scanned at all. For this we had to rely only on photo references. Sometimes we used camera mapping to align different photos to 3D cameras, which would help to get a better idea of the shape of the parts, thus speeding up the modeling and reducing guessing. Moreover, there are some parts that are welded together in the real world, including, for example, intersections of metal pipes on the frame, or the swingarm or exhaust pipe. To get those welds right we would export high-poly from Blender into Zbrush and manually “weld” them with a brush. You can achieve similar results with some welding add-ons and brushes for Substance Painter, but I find that manual welds look better and more realistic.

Sculpting welding in ZBrush.

BEFORE	AFTER

Before and after applying baked normals from the Sub-d level 4 welding on the Sub-d level 1 model.

Trying to achieve this with an add-on that makes everything even and straight is not that great. When you are in manual mode, you inevitably make mistakes and your welds become slightly uneven here and there, which provides a very nice human touch; you make these subtle imperfections by default. In CG we get everything perfect and geometrically precise by default; the key to realism is to break away from perfection.

Final result of the welding result on all necessary parts.

Step 3 – High-poly optimisations

I have a few words about optimizing your model for texturing and rendering. A motorcycle is a very complicated object when it comes to modeling: it has a lot of surfaces and a lot of cylindrical shapes that result in large amounts of polygons on a high-poly model. Computer resources are not unlimited, and even if you have the beefiest PC in the world, if you don’t optimize, at some point you will run into troubles that could’ve been avoided. The problem I had was very clear and simple: I wanted a mesh of the bike to look good even when zoomed in close to it. The simplest way to achieve this is to increase the subdivision levels. The total poly-count on sub-d level 1 for the whole bike is 3-4 million polygons. Let’s say I’m only happy with sub-d level 4. The whole bike is now skyrocketing to 20 million polygons. With this many polygons, your viewport becomes much slower, and the rendering takes a lot more time. Generally, you just waste time waiting for every manipulation on a model.

Quality comparison between Sub-d level 1 and 2.

The solution to this was to bake the sub-d level 4 mesh onto the sub-d level 1 mesh. This gives you maximum visual quality, as well as a moderate polycount, fast viewport response, faster render times, faster loading and much more. There’s no more wasting time, which is important.

Before and after applying Sub-d 4 baked normals on Sub-d 1 model.

Step 4 – Low-poly Creation

When it comes to generating a model for WebGL configuration, you need to understand a simple fact, that the higher your polycount and size of your textures, the slower loading times you will have for the end user. In Visionaries 777 we use PlayCanvas for our WebGL projects. Creating and optimizing a model for the web is an act of balancing what looks good and what loads fast. Designers and artists tend to overdo the looking good aspect. The logic and thinking are understandable: “I have spent so much time on this, polishing every tiny corner to make it look as good as possible, therefore, people can wait.” But the reality is that people don’t care what you think. If the app doesn’t load fast enough, they will just ignore it, and all that amazing work you’ve done will never be seen. So think twice before adding 10 4K textures to your model; do you really need it? Most likely not.

The process for generating low-poly was rather simple and easy. Since we had a high-poly already that was done using sub-d method, we could reuse existing geometry by just removing some edge loops, dragging few vertices here and there, and the mesh would be good to go. Of course, some parts have to be redone, but having clean geo underneath speeds this significantly.

Before and after optimisation.

Low poly without and with baked normal maps applied.

Like I mentioned already, to get realistic results with a low-poly model we had to do a lot of clever baking for a good compromise between visual quality and performances. But, as explained previously, having a clean high-poly model is everything you need to achieve good normal map bakes. After setting up good UVs, a simple baking of normal maps from the high-poly onto the low-poly parts has to be carried out.

However, there are exceptions requiring further thinking for baking. Trying to make normal maps tileable saves a lot of megabytes; one example of this is the textures of tires. Speaking of tires: We could use only 1 UV channel per texture type, which was a huge limitation. Making something very low in size and super tileable would result in a very repetitive look, whereas trying to unwrap the whole tire would require very large texture in order to keep enough details.

If you don’t want a lot of variation on your material, then using material tile frequently is fine, but if you want to avoid repetition you need to be smart about your resolution and tiling.

Before and after applying high-poly baked normals onto the low poly tire section.

To put it more simply, you cannot have low-res bake and good quality tileable normal (for example,: cast metal details). As with everything else, I had to find the right balance between resolution and quality.

Final low poly model (only 227K triangles)

Final low poly model without and with baked normal maps.

Step 5 – Applying Materials from Substance 3D Assets

Once the high-poly modeling is close to the end, it is time to start experimenting with different materials from Substance Source. It has everything you need when it comes to texturing a product. It becomes extremely easy to use when you know the material you are looking for. As an example, the front fork main piston is made of machined steel, just type it in the search and you will get the basic materials. These are highly editable with just several simple sliders to control various properties of the look and feel.

Real photograph of the bike break disk
The material we selected from Substance Source library

Final outlook of the break disk material applied on the high poly model in Substance Painter.

The Substance Source library has most of the materials and textures that you need. If there is a texture or finish that you can’t find in Substance Source (which is unlikely), you can generate it by combining existing preset materials: copying certain features (layers) of one material and pasting them onto a newly created one.

Step 6 – High-poly Texturing with Substance Painer

After getting the basic material right, you must move onto adding wear and damage effects. I see a lot of projects where people tend to add a lot of wear and tear. There should be balance and subtlety in everything. It is very tempting with Substance Painter to go overboard with dirt and damage/weathering effects. But making an object clean yet slightly scratched is what will make it look realistic. Of course, there are cases where you want extreme surface damaging, but for this project, since the bike needs to look new, only a little bit of damage weathering was necessary.

Final outlook of the completed bike with all materials and texturing done in Substance Painter.

Substance products are extremely helpful because they allow materials to be easily reused. You can reuse layers such as dirt or dust, which is simple because they are just masks made by generators. I usually create a group that would contain all the weathering effects needed and copy/paste this group onto parts needing it. This saves a lot of time and can be easily adjusted.

Step 7 – Seamless Transition from High to Low

However, the most useful feature is the ability to save your sets of layers as “Smart Materials” for future use.

Since we had two models, the high-poly for rendering and the low-poly for web configuration, it would’ve been a waste of time to texture each one of them from scratch. Using the smart materials capabilities mentioned above, we are able to use them for multiple projects. It becomes exponentially handy

1. when you increase the complexity of a material, and 2) if you want to maintain the same look between multiple projects. You can even keep them for future projects and won’t need to waste time making them again. Because of the non-destructive nature of Smart Materials, we can even reuse layers that contain logos (for example markings on the tire sides). Sometimes you may need to adjust the mapping slightly, but all this takes seconds and becomes very intuitive when you become familiar with all the powerful Substance features.

Seamless material transition from the high to low-poly tire model.

Seamless material transition from the high to low-poly engine model.

Another great feature of Substance is the ability to combine multiple textures into a single texture using different color channels. This capability becomes extremely relevant for web optimizations; in our case we use GMAO.

Combine textures into different channels as GMAO.

Final Result – High-end Renders

Down below you can switch through the final renders of the high-poly motorcycle. Blender was used for rendering both stills and video. For these kinds of shots, I usually render three layers separately: ground with shadow, the motorcycle without background and the volumetric lighting on top. I then combined these three layers in Photoshop, for minor adjustments, and then into Lightroom for final color corrections.

I used the same process for the video, but instead of using Photoshop and Lightroom, I used Adobe Premiere. Rendering the video takes significantly more time, if you are working on a slower machine you need to be extra careful with your render quality settings.

Final Result – Interactice WEBGL Configurator

The configuration finally hosted on the official website allows users to customize the bike of their dreams directly within their web browser on any mobile, tablet or desktop device. Users can choose from a wide range of colors for every single part, as well as the suspension, tire types, ABS, etc. Endless configurations are possible. Once the customization is finished, users are given the total and detailed pricing for the chosen build with the ability to process an online order. DAB Motors will then be notified of your order and proceed to make your custom bike a reality!