Car Customization - Project 1

Project Details:

The studio is interested in creating a cross platform racing and car customization game. The design team needs an interaction prototype with the following visual customization features:

• A custom surface shader which allows the player to randomize or select a new color scheme for the car. The color scheme must change both the paint and upholstery colors in a harmonious (but not identical) fashion while preserving surface details such as rust and wear. A full RGB spectrum should be possible.
• A decal system which allows the player to optionally add one of 4 different “tattoo” sets to further customize appearance. The tattoos can be monochromatic.
• A car ornament system which allows the player to optionally add one of 4 different ornament, e.g. spoilers, hood ornament, etc. These should also use the custom surface shader.
• An on-screen GUI with buttons and sliders to control customization.
• The final car should be able to export from the “Build Your Car” scene into the “Race!” scene.

Assets Used:

 

• Retro Cartoon Cars - Cidada asset from RCC Design, https://assetstore.unity.com/packages/3d/vehicles/land/retro-cartoon-cars-cicada-96158
• Free Universal Accessories Asset Pack, https://assetstore.unity.com/packages/3d/props/free-universal-accessories-asset-pack-141691
• Yughues Free Sci-Fi Decals, https://assetstore.unity.com/packages/2d/textures-materials/yughues-free-sci-fi-decals-13322 (unused as decals were not added)

 

Video showing functionality: https://youtu.be/lVZNjOTO3Lk

 

Analysis:

Based on the required features, a few questions were asked:

• How do I change the hue of the shader via the UI?
• How do I make the interior and exterior of the car look different with one slider?
• How do I export the finalized car into a new scene?
• How do I apply the individual ornaments to the car?

 

Approach:

After research and testing shaders, sliders, and child objects, the following approach was chosen:

 

• A shader with a ‘hue’ float property with a value between 1 and 360 that determines the color of the material along a whole RGB spectrum
• A second shader with the same use of a hue property as the exterior shader but that also passes through a node which desaturates it for the car interior
• A slider that controls the hue of both car shaders simultaneously by changing the hue property’s value between 1 and 360 in the shader graph
• Buttons that set active one of four car ornament child objects on the car and deactivate all other car ornament children of the car when pressed
• A script that uses the “DontDestroyOnLoad” class to carry the car over into a new scene

 

Breakdown of Approach:

 

• Car Exterior and Interior Shaders:

Both the exterior and interior shader use a float property titled “hue,” which plugs into a Multiply node that multiplies the float by 360, making it range from 1 to 360. The Multiply node plugs into a Hue node, which is set to red by default, and the 1-360 range then determines the hue of the node.

For the exterior shader, various types of noise are combined together to create the sparkling paint texture. The Hue node and the node with the finalized noise, the Divide node, then plug into a Multiply node to have the hue applied onto the noise texture and this Multiply node plugs into the PBR Master’s Albedo node. A Fresnel Effect node and a Simple Cubemap node using Unity’s default reflective cubemap are then plugged into a Multiply node which plugs into the PBR Master’s Emission node to create a reflective sheen on the car. 

The interior shader functions similarly, but the hue is applied to the texture that comes with the car model rather than a texture created within the shader graph. A Texture 2D Asset node set to use the car’s interior texture then plugs into a Sample Texture 2D node to be used in a Multiply node. A hue system identical to the exterior shader then plugs into the Multiply node as well, setting the texture’s color to be the same as the hue. The Multiply node then plugs into a Saturation node that desaturates it to make it different from the exterior hue but still look good aesthetically. Finally, this Saturation node plugs into the PBR Master’s Albedo node.

• UI:

The slider in the UI has a script that allows it to control the “hue” float property to change the hue node of whatever material is applied to the specified game object.

The ornaments of the car are each set as children of the car prefab and the buttons in the UI have a script that sets active their corresponding ornaments while deactivating the other three.

• Export:

The export script loads the next scene without destroying the car object from the customization scene.