top of page

Personal Shader Work

Hologram Shader

ezgif.com-optimize.gif

This was a shader I made in the process of teaching myself HLSL code, specifically using Unity's Shaderlab. I wanted to achieve a few things with this shader:

1) Use minimal textures. Though I feel I could have made the scanline effect without any textures, I chose to stick with a texture, so the look could be more easily tweaked.

2) Modify vertex positions to animate the effect

3) Make the shader scalable with static toggles, so certain effects could be turned off and not compiled

Below are a couple of functions I used in this shader. The full shader code is available to download further down.

pulseLineFunc.png

The 'PulseLine' function returns a single thin gradient line which is used later to slide down the length of the object. 

glitchFunc.png

The 'glitch' function returns essentially a parameterized pseudo-random number to offset vertices for the intermittent glitch that happens in the effect. This is encased in a compiler time 'if' check, and will be removed from the compiled code if a user unchecks 'Use Vertex Offset' (see below).

Here is a snapshot of the inspector for the material.

 

I exposed parameters for scrolling and tiling of the scanlines, Fresnel control, and vertex offset control. 

The 'Use Vertex Offset' Toggle controls whether the shader code pertaining to vertex animation will compile, in case it is undesired.

You can download the full shader code here:

hologram_inspector.png

Mobile Refraction Glass Shader

refractionExample.gif

Another written shader, I made this mostly as an exercise in optimization. A lot of the work I do tends to be for mobile platforms, or otherwise lower-end target hardware. And it's really difficult to find a decent looking refraction shader that doesn't kill performance on some platforms. 

So this shader is mostly cannibalized from code found in Unity examples and such (the refract function used is straight up Unity's HLSL implementation), but it does run pretty well on mobile hardware.

As an example, I did a mobile VR benchmark test on the Oculus Quest; in the simple scene above, where this shader was hitting the target 72 fps, an asset store alternative which looks similar tanked the scene down to ~40 fps.

glass_normal.png

As this one is a surface shader, it was pretty trivial to have a normal map input as well.

glass_inspector.png

Laser Dissolve Shader

step3.gif

The Shader

lasermelt_shader_whole.png

Above is the shader graph for the effect. It is an opacity masked shader (to allow for the hard dissolve edge used for the effect). A point is calculated in object space and used to dial the effect in. There are a few exposed parameters but the two important ones are:

1. 'Hit Position' - The object space vector that is fed in from a C# script.

2. 'Offset' - An additive value that controls how much the effect is dialed in.

Below is a closer look at the core of the effect, which is the point calculation. Taking the distance of each vertex from a custom Input Vector effectively gives a circular radius in 3D space, which I use to mask in the effect.

lasermelt_shader_dissolve.png
step1.gif

The Code

There are 2 C# classes responsible for the effect. The first is a simple Raycast, and the second is DissolvableObject which is shown below.

I've not included the Raycast code here as its quite standard, with the only exception being that when a successful hit is returned against a DissolvableObject, the Hit() method below gets called and passed the world space position of the hit point.

lasermelt_code2.png
step2.gif

Above is the effect again, this time controlled with a raycast and the code above.

Just for fun, I included below a slightly more involved version of the code that adds in more juice, plus some movement that is controlled by the raycast. The full script and shader can be found in the link below.

step4justforfun.gif

The script and shader:

(note, the files are meant for review, not as a functional package that works out of box)

bottom of page