Speedometer Material Rendering

Speedometer GUI element made entirely of Unreal shaders

Role

UX/UI Designer

Role

UX/UI Designer

Role

UX/UI Designer

Industry

Health & Fitness

Industry

Health & Fitness

Industry

Health & Fitness

Duration

UI Design, Unreal Engine, Shaders, Asset Creation

Duration

UI Design, Unreal Engine, Shaders, Asset Creation

Duration

UI Design, Unreal Engine, Shaders, Asset Creation

Material graph of speedometer
Material graph of speedometer
Material graph of speedometer

How it works

The material’s process is broken into a few different steps, which each terminate in named reroute notes for better organization. Once all process steps have been completed, they’re brought down into two final comp blocks (one for color and one for alpha).

How it works

The material’s process is broken into a few different steps, which each terminate in named reroute notes for better organization. Once all process steps have been completed, they’re brought down into two final comp blocks (one for color and one for alpha).

A lot of my experience working in the automotive sector involved creating procedural materials to save on texture memory overhead. When I was given this project to replicate as part of a skills test I noticed that the provided assets were very texture heavy. Texture memory tends to be very limited on cluster hardware, so I opted to recreate the assets with a procedural shader instead of binding textures.

Below is a step by step breakdown of how I did the speedometer in the center of the cluster.

First, two grayscale coordinate maps are generated. The first is a simple distance map from the center of the shader area, and the second is a clockwise radial map for generating slices or radial gradients.

Next, I set up the maps for the center of the gauge. The reference image included a subtle inner glow type shadow. I used smooth step on the distance coordinate map to generate a soft gradient that’s then taken to the power of a bias scalar so that the “spread” of the shadow can be controlled.

Because the border overlays this part of the gauge, I don’t need a soft edge on the region mask. A value step of the greyscale coordinate map set halfway between the inner and outer extents of the border layer is perfectly acceptable.

Next, I set up the maps for the center of the gauge. The reference image included a subtle inner glow type shadow. I used smooth step on the distance coordinate map to generate a soft gradient that’s then taken to the power of a bias scalar so that the “spread” of the shadow can be controlled.

Because the border overlays this part of the gauge, I don’t need a soft edge on the region mask. A value step of the greyscale coordinate map set halfway between the inner and outer extents of the border layer is perfectly acceptable.

Other projects

Steven Bostwick

Steven Bostwick

Steven Bostwick