A full screenshot of the shadergraph. An explanation is in text below this image.

Shader Magic! Walls fade to show the action (With explanation)

I wanted to show what’s going on in the world of my game without deleting walls – I tried a few things, but finally persevered with the shader! 🙂

There were two approaches – one was the shader, and the second was a script that got the camera’s rotation and hid various layers depending on the direction we were facing. I did the second one, and it looked… okay… but by this point I was determined! 🙂

First up: here’s the shader in my project…

View post on imgur.com

It appears to work how I want, and this pleases me.

Here’s how I did it! 🙂

A full screenshot of the shadergraph. An explanation is in text below this image.Because this is incredibly blurry, there are more details below, and the file is downloadable too.

Normal vector, rotate about axis

A closeup of the graph. A Shader Normal vector node which set to view space, is plugged into a rotate about axis node. The rotate about axis node is set to (0,1,0), and it rotates 45 degrees

We start with the pretty rainbow thing on the left. This is a Normal Vector Node set to View Space.

This goes into a Rotate About Axis Node – I found through trial and error that this helped to offset the camera. I’ve set it to 0,1,0 and then 45 in degrees.

Split, multiply, add, remap

The rotate about axis node goes into a split node. The R and B channels go into separarate multiply nodes. Both are multiplied by 3. They both then go into an add node to be combined. I then use a remap node to swap the 3,0 range to 0,3.

The rotate about axis node goes into a Split Node.

When testing, I fed the vector 3 numbers into the albedo colour, and found things looked purple when they were facing the camera – meaning X and Z were the ones I wanted. I take the red and blue values, and throw them both into their own Multiply Node. I find 3 looks nice for the effect – you could always make this a parameter for tweaking in scene view.

After this, I add them together with the Add Node.

This works, but is the opposite effect – things got MORE opaque when facing the camera. So… we flip it round! 🙂 The add node goes into a remap. Note: because I’ve multiplied by 3, I go 3,0 to 0,3 – you would need to change the 3 to whatever value you’re multiplying with.

End!

And with no further ado, we’re done! 🙂 Remap goes straight into the alpha input of the fragment.

I added some extra things to sample the texture and multiply that by the main colour – nothing huge. I’ll try and upload the file below. 🙂

Here’s my shadergraph file! I’ve also added a generated .shader, but it may not work. Sadly wordpress didn’t like me uploading shader graph files, so Google Drive it is.

I hope this was useful! 🙂 I couldn’t find anything about this online, so wanted to help some poor soul in the future.

Leave a Reply