Technical Artist & Game Designer
POM - Triplanar - Vertex Blend
Custom pixel shape
Directional fresnel ramp
Barrel drain VFX
When building environments out of smaller pieces, you usually have to spend a lot of time and effort hiding the clipping between them (rocks intersecting terrain, etc), and it rarely looks good anyways.
This shader automatically hides clipping, and makes it look like a continuous surface.
It uses distance fields to even normal directions where objects intersect each other.
It also supports world-space triplanar mapping:
...and material blending at intersection areas:
Here you can see what's happening in the normal buffer:
This shader takes advantage of UE4's volumetric lighting, and pushes it one step further,
by allowing you to control light color with textures.
It's specially useful for stained glass, since the light comes trough, and changes its color to that of the glass.
The old-school way of faking this effect was to use geometry or particles, but by using volumetric lighting, you can have it interact with dynamic objects:
It is also possible to move, rotate, and scale the effect in any way, which makes it easy to place it around the level:
This is how it works:
Parallax Occlusion Mapped, triplanar, vertex-blended shader
Building a huge, highly detailed area, like a castle, can be really challenging.
Even if you rely on modular props, it's still a lot of work.
So this shader was created to make it all easier. Its main features are:
- Triplanar (No need for UVs. Easy to move pieces around when building the level).
- POM (High detail with no need for extra geometry, just tileable textures).
- Vertex blended (Realistically blend between different materials).
Something worth mentioning would be "Silhouette clipped POM",
which prevents POM from looking flat at edge angles:
And the vertex color blending takes advantage of the POM heightmap to achieve a more natural look:
This shader is useful for focusing the player's attention on a specific spot.
It could also be achieved by using lights, but this method:
- Fades out when you get close, preventing things from looking overexposed.
- Gives you more control over the final look.
- It's cheaper.
All you have to do is place a plane covering the area you want the player to look at, and forget about it.
The effect fades out when close to geometry or the camera, preventing clipping and overexposure.
This is how it works:
This shader adds a nice little touch of detail to screens in your game.
It takes a "image texture" and a "pixel texture", and it pixelates the first one based on the second one.
The pixel texture can be a simple mask, or a RGB mask, like a real pixel:
The effect fades out based on distance, to avoid aliasing artifacts:
And in case you need to animate the image show on the screen, there's an option to remove "pixel swimming".
Pixel swimming is an artifact that takes place when an image falls between two pixels.
By removing it, you can keep the silhouette of you image.
This is specially useful for text panning over a led screen, for instance.
And finally, you can also add burnt pixels, for some extra detail.
Custom Pixel Shape
This shader pixelates UVs based on a "pixel shape" texture.
That means you are not limited to square pixels, but you can have triangles, hexagons...
or even brushstrokes, for a painterly look.
These are some "pixel shape" texture examples:
And here are some of their results:
You are also able to change resolution, add wiggle, and other cool effects.
Also, this effect is not limited to an image. You can use it as a post-processing effect, or on a character's texture, to add detail without having to rely on higher resolution textures.
It's all inside a single material function, so it's easy to use.
And since it's just a UV transformation after all, you can still apply new effects, like panning, rotation...
Directional fresnel ramp
You might need a well-placed rim light to emphasize your character's silhouette during cinematics, or gameplay.
But that doesn't only take time, but you will also have to re-adjust it every time the camera changes
(which would be so chaotic during gameplay, with a free camera).
This shader simplifies that process by allowing you to map a color ramp texture to the silhouette of an object.
It does so in a screen-space way.
That means that no matter the camera orientation, you can have an orange rim light coming from the left of the screen, and a blue one from the right, for instance.
The effect is very flexible. You can use any color ramp, rotate it, cut it...
This is how it works:
When it comes to movement, most shaders use panning textures, or uv distortion.
That's ok, but sometimes you need more detail, or precision.
This shader allows you to create effects with complex directionality, like the examples below.
Basically, it takes a gradient texture, and uses it as a path to animate along over time.
The shader is very flexible. You can also achieve effects like this one, from Prince of Persia: Warrior Within's loading screen:
The red channel represents the mask for the effect, green is the path, and blue is the "splash ammount"
But you can also achieve other effects using the same technique:
In this case, the red channel is the mask, green is the path, and the blue one is the length of each path, to control velocity individually.
When placing many decals like, say, posters, it can take a lot of time to manually create randomization.
This shader randomizes each poster's texture, while still allowing you to use a specific one, if you need to.
It also does the same thing with the poster's opacity/roughness... mask, so that even if two of them share the same texture, they will never look exactly the same.
You can use vertex colors to change its properties, without having to rely on many materials with different configurations:
Another nice feature, is that it prevents the typical Z-fighting you would see when two polygons share the same space in the world:
And finally, it also takes advantage of my "pixel screen" shader, so you will see some extra detail if you get really close.
This is how it works:
I made this effect for the swamp boss of Disembodied, which carried monster eggs on its back.
The idea was to have the babies swimming around, but that would require too many skeletal meshes just for decoration, which would have an impact on performance, so instead, I went with a matcap-based approach:
It's basically a multi-layered matcap, with some random movement and rotation, UV distortion for the tail, and variations in opacity and blur to fake depth.
Even though each instance moves in a unique way, I created a few variations of the monster seen from different angles, to give some extra variety:
Matcap shaders give the artist a lot of control over the final look, and can provide interesting results:
These are the combat barriers of Disembodied. They block the entrances when combat starts,
and they go down once it's over.
We wanted to make them look like they were growing (quite fast), but there are several versions of them,
so hand-animating them would have been slow and costly. Instead, I went for shader-based animation:
Basically, the vertex shader tightens the plant inwards, and once it's thin enough, it gets alpha-clipped,
so it's completely invisible. This effect is then animated along the stalk based on a vertex color gradient:
This system represents wetness on a partially or fully submerged character. It involves 3 effects:
This system allows for several characters to interact with their environment, be it stepping on grass, swimming in water, skiing on snow...
Usually, you would use a small, localized render target for this kind of effect.
But instead of writing directly to that texture, I'm spawning particles at the character's position, which are later recorded into the render target by a camera that follows the player's character.
By modifying the particle's behaviour, the artist gets full control to define the way the character interacts with each element of the environment (for instance, you can turn on inertia for water, so that it keeps moving if you suddenly stop).
But thanks to this approach, you can also have:
These are some of the spline tools I made for artists at Disembodied.
This one allows you place several lamps (or any other object, really) along a hanging rope, with options for random rotation, scale, wind...
The lamps are instanced meshes, so you can have lots of them without affecting performance.
It takes a number of pipe section meshes, and lets you select which one to put on any and every spline segment.
This way, you can customize the pipe, and later edit an specific segment without having start from scratch.
This one is quite simple, but provides a great visual improvement.
It makes it so that elements hang from the spline, instead of getting twisted with it:
In Disembodied, you play as a clumsy skeleton who gets beaten up a lot. We wanted to dismount him and later rebuild him again, and do all sort of crazy stuff.
But when we tried to implement that in the skeletal mesh within UE4, we faced a lot of limitations.
In the end, we ended up faking the effect by spawning individual bones with physics enabled, and de-spawning the original skeleton.
This way, we were also able to access each bone in the code, allowing us to create pseudo-procedural animations, and other cool stuff.
Disembodied UI went trough a lot of iterations, but these 3 proved to work nicely:
Everything good for the player is represented by blue fire, so the health itself should follow that rule as well.
The main challenge with this shader was to fake bloom in the shader, since we couldn't have postprocessing on the UI.
These represent your two hands, the object you are carring on each one, and its durability.
It ended being a torn banner for narrative reasons, so I had to make sure to get its look right.
Normally, I would have used the vertex shader for flag-like movement. But this was a simple plane, so I had to rely on UV distortion and a panning shadow texture.
Since the skull (the most important element in the game) was relatively small, it would get lost on the ground very often. We needed a marker to grab the player's attention.
We tried the usual arrow, but it proved not to be enough. So we went with a badass ghost floating on top of the skull.
It was bigger, brighter, and it also allowed us to display facial expressions.
This floating green blob grows arms that attach to nearby surfaces when the player gets close, blocking their path until it gets deactivated.
Barrel drain VFX
In this effect, I replicate a barrel full of wine getting drained from many holes at once.
The number and positioning of the holes affect the draining speed and VFX.
Arise - A simple story
I worked at Arise as a Technical/VFX Artist. It's a small, artsy adventure game where you can scroll through time.
One of the main challenges was making every effect rewindable. A lot of what could have usually been done with simple particles, here it had to be done through lots of vertex shader trickery.
Besides, every level was completely different from each other, so I got to work on many different effects and shaders to make the game look good.
These are some highlights from Arise: