Technical Art: Prototyping And VFX
A tech art journey: using Unreal to experiment with neuroaesthetic design and create beautiful VFX
I use Unity quite a bit for XR work, so it was nice to finally find time to really dig into Unreal and make some magic. While Unity is great for mobile, XR, and other cases where graphic performance is limited, I like Unreal for its capabilities in producing AAA level gaming visuals and complex photorealistic environments.
Neuroaesthetics Puzzle Escape
Classic Fragment Shaders
Animated Vertex Shader

Elevating A Puzzle Mechanic With Neuroaesthetics

My final project for a technical artist course was a challenge to use one or more tech art disciplines to convert a mundane puzzle game mechanic into a highly engaging experience. The approach I took was to use VFX and shader graphics to implement a few elements of neuroaesthetic design to elevate the puzzle from humdrum to scintillating.

‍

The puzzle mechanic is a basic wave oscillator machine where the objective is to match a generated sine wave using three controls for frequency, amplitude, and phase. Some of the tech arts tools I applied were:

  • Writing a highly dynamic material shader to implement a 2D UI.
  • Writing shaders for all custom objects in the scene.
  • Building Niagara particle systems.
  • 3D modeling via Blender and pipelining into Unreal.
  • Customizing scene lighting and skyboxes.
  • Prototype scripting via Unreal Blueprints.

‍

For the neuroaesthetic elements, I selected a few design approaches from my research and took some inspiration from Tetsuya Mizuguchi's Tetris Effect game design:

  • Ambient music tracks with binaural tones for soothing auditory engagement.
  • SFX with sweeping arpeggios to signal successful completion of puzzle stages and evoke a positive dopamine and seratonin response.
  • A "synesthesia" style of user feedback from Tetris Effect where simple button presses and puzzle stage completions trigger releases of orchestrated and harmonious VFX and SFX.

‍

It all resulted in a nice little sample of my neuroaesthetics-driven approach to design for games, products, and interactive experiences. And I'm planning to use that approach to design experiences that do much more to benefit our brains and well-being by prioritizing calm and positive engagement over the loud and obnoxious attention seeking tactics employed by most of our apps these days.

How it started
This a loop of the original puzzle game demo, a bare-bones prototype that was my reference for creating an upgraded version of the game.
The elevated experience I created
Play the video below to see the graphics, VFX, and sound design I created to turn the puzzle mechanic into a neuroaeshtetic escape room experience.
Interaction design for the oscillator
Oscillator dials show their completion/solve status via color and produce rich user feedback with light emission, particle VFX, and SFX. The sine wave that players shape shows overall puzzle completion status via color.
The Material shader That displays the oscillator's sine waves
This is one of the bits of tech art wizardry that I really enjoyed learning the most. And I'm sure my high school algebra teacher would be thrilled to find out that I've been forced to use trigonometry on a daily basis. But the math torture is worth being able to customize procedural shapes and lines for materials that optimize performance without sacrificing too much visual quality.
Material Shader + Particle System for the dissolving Dome VFX
Wrote a dissolve shader with glowing edges and adjustable height. Added a ring of particles to emit from the dome edge and float into the air to emphasize transitions to each puzzle stage.
Particle system for the orbitting mineral belt
3D modeling in Blender
A small sample Of the Blueprints scripting I put together for this prototype.

Fragment Shaders For VFX

I spent a lot of time with material nodes in Unreal to learn how to craft these pretty classic VFX shaders and have a nice foundation to work from for customizing other kinds of shader and material based VFX.
From left to right, these are an invisibility cloak (indicates a player or character's invisibility mode), hologram effect, and a dissolve effect for appearing and disappearing a character.

Play the video below to see them in action.

A Vertex Shader For Animation

One of my favorite things about shaders is the ability to create animations with them. And that is mostly because of the math involved in building them plus the realtime 3D optimization benefits you can achieve in many situations.
This flying paper animation is one of my favorite shader animations that I've done so far. It turns a piece of flat plane geometry into a flapping wings. Shout-out to Ruben for teaching me this :-)

Play the video below to see it in action.