Part 6: Making Stuff Glow

Heads up! We are no longer using the current Post Processing effects in this project and are instead going to use Legacy Image Effects from now on. Read here on how to make the switch! 

Last time we learned about normal maps. But if you're here, it's likely because you admired all the neato shaders I've been making, and nearly all of them involve cool glowing colors, So let's get some cool glowing colors already!  The property of a material that we use for glowing colors is the Emissive property, so let's update our XibStandard shader to let us set that. 

If you already have XibStandard.shader:

If you want to keep the shader from last time, copy the XibStandard shader in Unity by clicking the XibStandard shader in your project files and pressing crtl + D. Name the copy NormalBlend. Then in Visual Studio, change the top line of the copied file to 

Shader "Xibanya/NormalBlend"

In the original XibStandard shader, replace everything with this:  https://pastebin.com/FsaYzfd0  scroll down to the section that says RAW Paste Data, click inside the textbox, and press Ctrl + A to highlight everything, then Ctrl + C to copy. In the XibStandard shader in Visual Studio, press Ctrl + A to highlight everything, then Ctrl + V to paste.

Basically we're just taking out the second texture and second normal map because they aren't related to what we're going to do today.

If you don't already have XibStandard.shader:

In the shader folder of your your project files in Unity, right click and create a new Standard Surface Shader and name it XibStandard. Double click it to open it in Visual Studio. Delete all the stuff that is in the new file and replace it with this:  https://pastebin.com/FsaYzfd0  


Everyone continues from here:

At the top of the file, add this line in the properties section under the other properties:

_EmissionColor("Emission Color", Color) = (0,0,0,1)

When I set this equal to (0,0,0,1) that makes the default emissive color black (because red, green, and blue are all 0). I'm doing that because I don't want things with this shader to glow by default.

In the SubShader section, add this line under your other properties above the surface function:

half4 _EmissionColor;

So above the surface function your shader should look like this:

You may notice for colors we use fixed4, half4, or float4. These are all ways of keeping four numbers together (for colors, red, green, blue, and alpha) and for now you can think of them as being basically the same. We'll talk more about that later.

Then in the surface function add a new line:

o.Emission = _EmissionColor;

What, that's it? Yep! 

Save and click back into Unity. Select Girl_Body_Geo and look at the material properties. You should have a new color picker box under Normal Strength. Try picking out a color!

OK, Xibanya, I might hear you say, great, but that looks a whole lot like when we were adding colors, the result is not exactly glowing. Well fine, let's turn out all the lights. Go to the top bar of Unity and click Window > Rendering > Light Explorer to open up a tab that shows us all our lights.

Then untick the checkboxes next to all your scene lights.

click the Light Explorer tab and drag it next to the other tabs in the center pane to dock it there.

Then click back into the Scene tab

Yeah it's not glowing. There's no glowing. Xibanya where is the glowing?

So here's the thing about glowing - it's not really about how bright the color is -- otherwise that white color picker box above the albedo texture would appear to be glowing, now wouldn't it! Something that seems to glow basically mimics how our eyes make things blur in real life when they're too bright, like, the glow color seems to kinda extend past the shape of the thing. So how do we do that?

There's nothing more to be done with Claire's shader. We need to put something on our camera to make it act more like a human eye! 

Go to Window > Package Manager

The package manager window will show up. (It may take a few moments to load.)

Click on Post Processing

In the right pane, you should see this:

Down in the bottom right corner of the window, click Install

It'll then take a few moments to think about it.

When the lower right looks like this, you can close the Packages window.

I have installed this dang thing zillions of times and never not ended up with errors in the console. Right now I have this error:

Double click it to open up the error location in Visual Studio. In my case this is the offender:

I changed it to this

When I saved, Visual Studio told me the file was write protected and asked if I wanted to overwrite, I said yes. This banished the error.

Like I said, I always get some random error when installing this package, if you get a different one, let me know and I'll help troubleshoot. 

ANYWAY now we are happy and error free, so let's move on to getting our camera set up!

What is the camera pointed at anyway? Click the Game tab to see. It's probably pointed at nothing in particular. Let's get it pointed at Claire. Make sure Claire's transform position is 0,0,0 -- if it isn't click [email protected] Standing Pose and change the values in the transform to look like this:

Then click the Main Camera in the Hierarchy. Change its Transform to be 0,0,0 too! Now it's in the same spot as Claire. We won't see her in the Game tab though, because the camera is at her feet, pointing in the same direction she is. Change its Y rotation to 180 so that it's facing Claire instead (the numbers that go in the rotation boxes in the Transform are degrees, like in a circle) then move the camera up and in front of Claire a bit so that you can see her in the Game tab. Here's what I've got:

Also since we want to see stuff glow, let's make the scene background dark! Change the Clear Flags to Solid Color and change the Background color to black!

Click Add Component at the bottom of the Inspector tab and start typing post until you see Post-process Layer. Click that.

You should now have this:

Click the Layer dropdown and change it to Water. Yeah whatever, we just want it to be on a layer that isn't Nothing, Everything, or Default. What this means is that this camera will be affected by Post Process Volumes that are on the Water layer. (So it doesn't have to be the Water layer specifically, it could be anything you want.)

This dropdown is the kind that lets you select multiple things. If you accidentally click something that you don't want, just click it again to unselect it. Or, click Nothing to unselect everything and try again.

Also for extra prettiness, in the anti-aliasing dropdown, select Fast Approximate Anti-aliasing. 

Oo, Claire got a bit smoother-looking, particularly her eyebrows.

Click Add Component again, and this time add a Post-process Volume.

Check the Is Global box and click the New button next to the Profile slot. You should now have this.

We said that the camera would only be affected by Post Process Volumes on the Water layer, so we should change the layer of this whole object to that. Scroll to the top of the Inspector and change the Layer to Water.

Scroll back down to the Post Process Volume. Click Add effect > Unity > Bloom. Click the triangle next to the new Bloom row to expand it.

Check Intensity and Threshold. Change Intensity to 1 and Threshold to 0.5, like so:

Have a look at the Game tab. Whaddya know...she's glowing!

It's fun to see what different colors look like as the Emissive value. 

The Emissive property isn't just another color property either. Setting the main color just doesn't have the same oomph because the Albedo color is always subject to lighting conditions.

That's all well and good, but can't we make the glow have more...idk, glow to it?

Right now all our emissive colors are maxed out at white, 'cause that's when red, green, and blue are 1. But why does that have to be the maximum? Let's turn our glow up to 11. Back in the shader, in the properties section up top, add [HDR] to the start of the _EmissiveColor line to look like this:

Save and click back into Unity. Whatever color it is, your Emission Color picker box should now have the gray letters HDR on it, like so.

Click the box and we have more options to play with!

Try clicking +1 a few times!

Now that's glowing! 

 The final code for this shader is attached to this post. Questions, comments? Drop me a line in the comments here, on twitter, or in discord!  And if you're feeling real smart, here's some extra info about HDR and half vs float.

Next, Part 7: Making Only Some Stuff Glow 


 This tutorial is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. The code shared with this tutorial is licensed under a Creative Commons Attribution 4.0 International License.  

Tier Benefits
Recent Posts