Posted July 02, 2024 by ShadowRealm Studios
#hdrp #shader #holographic #unityshadergraph #shadergraph #fresnaleffect #techart
Howdy howdy y’all, it’s Rachel again, resident junior technical artist here!
*engage typical narrator’s accent*
We’re back on this grand adventure, ShadowRealm Studio is just about to upload our BETA. We’ve spent the past six weeks working our computers down to the bone, and boy howdy do I feel it, Mr. Krabs. These past couple of weeks, I’ve finally had some free time to work on some shaders and let me tell you nothing seems harder than a shader graph in HDRP (honestly it makes me miss working in Unreal Engine), but I love it. It’s like a riddle I know the answer to, I just got to figure out the steps to explain it.
Now before I get too deep into the trenches of this how to, let me show you the big result from this week.
Specifically, it was rendering 3D objects in a holographic depiction, and their original materials are still visible under the effects of the shader. In Unity, in HDRP. It was harder than I thought, and mostly because I’m always learning how to do stuff. Honestly, I figured this one out by accident. Let’s dig through my thought process.
First step, create a Lit Shder Graph. Below shows a picture of the file path, but in your Project Window, right click, select Create > Shader Graph > HDRP > Lit Shader Graph. Name is something useful. This is your base instance.
So after creating the shader, create a material, you don’t have to make changes to it, just make the material. Drag the respective shader icon atop of the material in your Project Window, it will magically connect the material to be a specific instance of that shader. So any parameters you expose, you’ll be able to have a specific instance of based on that shader. Think “Materials” and “Material Instances” from Unreal Engine 5, same soup, different spoon.
So specifically, I wanted a Lit Shader because to me holograms scream “Emission”. But I also needed this thing to be transparent. Holograms aren’t solid. Lets dig in.
My blackboard of this shader has these parameters exposed.
Cool, Rachel, but where’d you put them?
Before I show you that, look at these changes I made in my Graph Inspector.
Before:
After:
I know I had a fun time figuring out that one. So please, have this as a reference.
So I started with a “Position” node based on “World Space”. And I split the outputs with a “Split” node.
Below the “Position” node, I created an exposed float for the “Scroll Speed”. By creating a “Multiply” node and a “Time” node, you going to connect them as you see in the image below.
As you see, we are using the “G” channel from the split node, this is the “Green” output from the position of the object that the shader will be on. Since we are messing with the “Alpha” you’re going to want to use the section of the “Position” node that will give you a (1, -1) value [x,y].
That’s right, vertexes. Vertices? Verts? We’ll call them Verts. I don’t know. I know just enough math to get me into trouble.
Excuse me using my mouse to write that out, but it gives you, the reader, an idea of what I mean. We need specially to access the vertex of those range of floats on the x and y plane in order to reproduce an alpha effect “strobing”. You’ll see.
So all those bits we just saw before my tangent, they plug into an “Add” node, the Split into “A” and the “Multiply” into “B”. From there you made a “Vector2” node and replicate from an exposed parameter a “Vector2” where you will set the default of the “Holographic Tiling” of your “Alpha” map to a decent size. I did mine at 32x32.
Hereeeeeeee’s the fun part! You get to use your 2D Texture!
So in that giant green ball, your going to plug in the output into a Sample Texture 2D node. And you’ll use your open parameter, in which case I called it “Holographic Scanlines” from a quick alpha I made in Photoshop 2024.
By connecting them as so:
Your left with some cool lines dancing across your screen. Now you could mess around with this and get it to tilt in all sort of crazy fashions, but I’m concerned with one big ol’ thing. How am I gonna get it to glow, more importantly, glow around the edges?
Well, my friends, I love Fresnal effects! And Unity has a base version – guess what I used!
So lets start from the top. Forget that the other thing isn’t hooked up to you Fragment, we’ll get there. We’re almost there.
Right click, and populate a Fresnal Effect, and your going to put the output of that effect through a multiply node, on the “B” channel. The “A” channel will be for an exposed parameter for what color you want your effect to be.
And that’s it. Good night folks. Nahh --- wait a moment. We forgot a MAJOR magic step. Well, two. Actually three.
First one. Your going to add these two effects together and plug in that output into your “Emission” and your “Alpha” channel. Like so:
You might see that other node in the “Base Color” and you’d be right, that is magic number two. Almost there. Okay, actually there is another step. I’m sorry! It’s really easy though.
So connect that open parameter to the base color, SAVE your shader, and apply your material to whatever you want rendering in this cool wackadoo way.
But you’ll see… something is amiss. Where is my cool effect?
Check if your “Always Refresh” is check marked. That’s a big one. But there is an even BIGGER step.
So there is this funny little thing here:
Your specific material is going to need a “Diffusion Profile” and you’ll have to plug it in. I followed through with some quick searches to see what this meant, and it was pretty self-explanatory. Here is the link to the API: https://docs.unity3d.com/Packages/com.unity.render-pipelines.high-definition@14.0/manual/Diffusion-Profile.html
Essentially, it effects post processing and multipliers and outlines, all that good shader thing. From what I can see it is a component that stores all that information and relates it to where it needs to be seen or heard from in the HDRP settings.
Well y’all, I hope you enjoyed this long winded approach to a holographic shader. I’ll be messing around with it some more to get that final polish on the game.
Thank you so much, and keep on trucking.
- Rachel H.