Website powered by
Tammie Treffers
Game Artist at HKU - Illustration, VFX, Animation, 3D
Home
Resume

[Student Work] Lightbox - Unreal Engine

This is a small audio visualizer I made in Unreal engine using Blueprints and the Material Graph. There's a slight interactive element where it reacts to your mouse movement through a soft rotation and a highlight on the visualizer. You can also load in any audio track to visualize, and have control over which colors are displayed.
As my first Unreal Engine project it was quite daunting and at times frustrating, but I got the hang of it by the end and have learned a ton.

Demonstration video. Song: Till Depth Do Us Part - Splatoon 3

Demonstration video. Song: Peaceful Sleep - Nier Automata

Demonstration video. Song: D.A.N.C.E - Justice

Overview of the entire blueprint that's used to control the inputs

Overview of the entire blueprint that's used to control the inputs

Part where it passes the variables on to the material. The synesthesia system outputs more audio levels than the 16 rows of bars that are in the visualizer, so I had to compress the array down to 16.

Part where it passes the variables on to the material. The synesthesia system outputs more audio levels than the 16 rows of bars that are in the visualizer, so I had to compress the array down to 16.

Part of the blueprint where it gradually shifts the rotation according to the mouse position. It basically takes the difference between the target amount and the current amount, and reduces that by 5% each frame.

Part of the blueprint where it gradually shifts the rotation according to the mouse position. It basically takes the difference between the target amount and the current amount, and reduces that by 5% each frame.

Overview of the whole material graph. For the 16 input levels I had to simply repeat the same collapsed graph, each subsequent loop incrementing the index variable by one.

Overview of the whole material graph. For the 16 input levels I had to simply repeat the same collapsed graph, each subsequent loop incrementing the index variable by one.

This is what's inside each of the collapsed graphs. I use two step functions to plot out the correct row on the UV map. It only needs 3 inputs: the audio level, the row index, and an input for the previous row to add to.

This is what's inside each of the collapsed graphs. I use two step functions to plot out the correct row on the UV map. It only needs 3 inputs: the audio level, the row index, and an input for the previous row to add to.

This part of the material graph takes input from the mouse pointer position and maps it onto the UV

This part of the material graph takes input from the mouse pointer position and maps it onto the UV

Report