I've been dissecting your videos piece-by-piece to learn how to program shaders for school. One of the objectives I set for myself was writing an outline shader. This will help me so, so much! Obviously won't just copy it one-on-one, but your videos are so, SO helpful to me that this will make my life a lot easier! Thanks a lot!
Wow amazing, a whole new dimension of programming to explore. The past 2 years I've been working in C#, never really dove deep into shaders, dude great video.
God damn! I hit the shader tutorial jackpot!!! You should start naming your tutorials with the keywords: Unity, Tutorial. Because when I look for shader tutorials I search, and probably many others also, along the lines of "Unity Shader Tutorial." Your videos for some reason never come up in a search. The only reason I found out about your channel was from someone I am working along side with. Anyways...Great videos!
This is one of my favorite channels on TH-cam right now, so glad to see you back. As someone else who works in games as a contractor (and also has a Unity-centric tutorial channel), totally understand the hiatus. Keep up the great work dude. = )
It seems like this could be simplified a bit. You could probably render your blurred geometry to a separate buffer as normal. Draw the rest of the scene as normal and then render the glowing objects as a blurred effect on top of that. Then finally render the that buffer again (non-blurred) on top of that a third time. This eliminates a buffer and a shader step. You could probably also use the depth buffer to handle the overglow effects (4:30) -- also if you still wanted the cutouts you could use a stencil buffer on that first glow-object render (but you probably won't be able to get that inner shadow effect).
Generic Toast Mmh, I don't know man. Not quite. I feel like it stretched on a little too long to *feel* right, and there's less to the notes in the jingle. On top of that, the notes aren't sung in the same -more defined- way. - It's not awful, it's still quite good and I think it could well grow on me. I guess I'm just trying to pinpoint what it is about the thing that seems off.
My guess is just the fact that it's so different, it feels weird. I thought so at first too but after I listened to it a couple dozen times while do the animation, it grew on me and now I actually prefer it to the old one. The vocals sound less clean because there's a vo-coder applied to them to give them a more retro-gamey sounding style. And yeah it is one extra syllable which adds to the "off"ness but like me, you'll probably come to love the new sound :D
for me it's definitely the "stuuuuuuuuuuuuuuf" and "goooooooood", words have one syllable (20%) taking but >40% of the beats. it feels artificial bloated. another difference: here the melody is perfectly (boring) on the beat, in the old intro melody there were syllables sung between two beats (not so boring). in the new intro everything has a tenuto accent, missing variety. in the old intro we had tenuto, legato and staccato accents. old intro were 2 tacts, short and nice, new has 4, but just one syllable more.
Wow, thanks so much for the video and a free example project! This is exactly what I was looking for, I was about to use the stencil buffer for masking out the object silhouette, didn't even think to use the original rendered color! I hate stencil buffer in Unity's shader syntax. It's beyond incomprehensible.
This is an excellent video and the demo is really handy. However, I've tried to use this with the Lightweight Render Pipeline and it doesn't seem to work out of the box (I used an unlit shader for simplicity, adding the "Glowable"="True" tag etc.). No errors are thrown it just doesn't show the outline. Any tips for how to convert this effect to the Lightweight Render Pipeline would be most appreciated, thanks.
awesome video dude! you should do one on subsurface scattering. i dont know if unity has it yet tho. but im always fascinated by it when you can see it with glowing metal.
I've a question: could the Main Cam's OnRenderImage() call a Blit() that takes as source a glow texture to combire with OnRenderImage()'s source parameter? The glow texture should be first processed subtracting prepass tax to blurred tex, and then cutting off all black pixels. Will i get the same result with this method?
I was very excited with your sctips and shaders, however when I did a PC build, the effect was not working as it was on Unity Editor... the glow was not substracting the flat silohuete and the filling was some weird color mixed with some background elements. Any idea dude?
Hello, I've been trying to tweak this in order for the blur to make a black/gray-based glow, in order to achieve a kind of "shadow emission" effect. How could I make it so that instead of having black becoming transparent, we have white become transparent?
How would you go about doing this in shader graph? Im completely new to shaders in general, and id rather not use shader script otherwise id just be copy pasting things into a structure i dont really understand yet.
This glow looks amazing! I understand, in theory, how this works. In practice, I have no idea how to implement this. When I download the code, there are other parts that I don't know what they're for, like GlowObjectCmd and GlowCmdShader. I'd like the add this to a game of mine. Unfortunately, I've added the second camera and the GlowPrePass to it. I've added GlowComposite to the original camera. I thought the GlowComposite would take whatever the rest of my game is rendering and add the blurred outline to it, but nothing glows. I'm unsure how to begin to debug this. I step by step tutorial on building this up would be helpful. It's a big jump for Shaders 103.
Ok, I got it to work. What I was missing was the shader of the glowing object needed the tag Glowable=True. So if I was using the standard shader, I would have to switch the shader of each thing I want to glow to use Standard-Glow. Unfortunately, the materials I am using are legacy diffuse. I was able to download all the shader code from the Unity Archives (change the dropdown to "built in shader") and copy and edit the Diffuse shader to create a Glow diffuse shader. All I did was add the "Glowable"="true" shader. Now the glow works.
This is awesome! Thanks for this great video! Although you forgot to mention that we should add the shaders to "Always Included Shaders" in Settings -> Graphics. Otherwise it will only work on Unity and not on your final build.
Ah okay! I rewrote the scripts and shaders from scratch, that way I can understand more what's going on, and I didn't put them in the Resources folder. Good to know that it achieves the same thing. Thanks :)
Hey! Really awesome video, it has been helping me a ton with some of the custom shaders I have been writing for my own game. I wanted to ask how you think you would change the project if you wanted the Intensity factor to be object-specific, rather than being a global multiplier attached to the Main Camera. Thanks for your effort, anxiously looking forward to the next video!
I thought I managed to replicate the effect but as soon as I switch to another window and back to Unity the effect is broken. This isn't happening in your scene.
What if you wanted to make the glow on the inside edge of an object? Right now the glow is on the outside of the object. Nice video btw, very informative and well made :D
Nice video, just one thing I believe could be done better. IMO in (1)Glow Prepass stage, no need to use replacement shader here (it requires you to edit the selectable object's shader, which is very inconvenient). Just use Graphics.DrawMeshNow() to draw selected objects after the normal render, it is easier to implement(selectable object's shader is irrevent, no separate camera is needed) and only the selected objects are rendered(no need to render non-selected objects as black.....). If you do it this way, you can write the code once only and re-use it in different project in just a few clicks.
This would not work for SkinnedMeshRenderers, and a lot of people want to use this effect on their characters. The better way would be to use Command Buffers but that was outside the scope of one video.
yes you are right! I totally missed the SkinnedMeshRenderers part.Thanks for the quick reply! So Command buffer can do the same effect on SkinnedMeshRenderers regardless of the characters's shader? That sounds good! No experience on Command Buffers..maybe I should go learn it now.
Did you made the "Stadard-Glow" by yourself ? Or it is unity package ? Because im confused where can i find that and also when i look into the source code it is too complex :(
It is a relatively small edit to the Unity Standard shader to add the Tag and the additional color property. If you can't reproduce it yourself, you can grab my edited version from the link in the description, though it will be an older version of the stadard shader and Unity does update it pretty regularly.
It is a great shared, I use in my pc and it is working perfect, but when I add it to the Augmented Reality camera it gives a black screen on Mobile devices, how can I fix that?
Hi, thanks for the materials. But found an error when trying to write to a phone. it says below error: "Invalid antiAliasing value (must be at least 1)" leading to "GlowPrePass" to the following line: PrePass.antiAliasing = QualitySettings.antiAliasing; Can you support with a solution to write this to a mobile.. Unity versions checked - 2018.1, 2018.3
any idea how to make a glow effect that highlights all vertices of a shape rather than just it's outline? Presumably you'd need quite a different system.
This looks great, but I'm not able to get this to work at all in a new project. The github project works, but if I try to replicate it in a new project nothing happens. What am I missing? Everything looks identical. I can even make prefabs of everything in the scene, export it as a package and import it into a new project and yet nothing works. I've been trying to get a proper glow to work for months now, but with basically no shader knowledge it's hard. :p I've found 4 widely different approaches to glow/outline effects on the internet and yours looks like a 5th method, but they all seem so fragile, any other shader or image effect I can just drop into any project and they'll work fine, but glow/outline effects you have to treat like a newborn baby or they'll break, and every single effect has many gotchas and caveats. This approach seems to have a lot of them, but it works in 5.5, at least in your github project, whereas the glow effect I was using broke in 5.5. I hate glow/outline effects with a passion, lol. I don't understand how something so seemingly simple can be so hard and have so many different solutions. :p Sorry for the rant, but unless I'm doing something very wrong I have to assume it's hard to get this glow effect working for other people as well?
Nice video, as always. Would be cool if you make one about command buffers. I saw that in your repository you have a version that uses it, but I'm still having trouble trying to understand command buffers...
First of all, this is really cool! I'm looking to implement something like this for a class project I'm working on, with a caveat: We're trying to make shadows glow when activated. Essentially, the object casts a regular shadow up until it's activated, at which point the shadow takes on a glowing outline. I'm no expert on shaders (still learning!) so I've made a custom 'silhouette' mesh that matches up with the object's shadow, then I make that glow like in the video. The only problem I'm having is I want the mesh not to render anything except the glow (that is, it's invisible, and is essentially only there to provide a shape for the glow camera to render). Do you have any advice on how to make an invisible object glow?
When I implement this my objects have an inner glow that's always visible. Is that supposed to be there? And how can I get rid of that so that there is only the outer glow when the mouse is over the object?
I'm having the same issue, together with a Warning: "OnRenderImage() possibly didn't write anything to the destination texture!" Let me know if you figured it out.
Okay I actually found out what was wrong! The Clear Flags of the GlowPrePassCamera was set to "Skybox", which blended with the glow objects. Set that to a black solid color background, and it's all good!
Thanks for this video! I'm trying to recreate the scripts and it appears the glow spread is dependant on the screen resolution. I'm testing it on a Nexus 6P vertical resolution (1440 x 2560) and the glow is very minimal. I switch the test resolution to say, 800x400 and the glow looks more like what is presented on your test project. Any tips on how to increase the glow spread? I also encountered a bug where in if I alt-tab from my Unity Editor and than back to it, the blurring stops altogether, with only a 1px outline, although that appears to be project specific as when I make a new test project the blurring works even after alt-tabbing. Not sure why, but it's a bit dissappoing that I can't use it on my current project :(
Ahh yes, the resolution problem is present across many post process fx. The real answer is that you'll have to take more samples or do more passes to compensate (simply fudging the texel size will result in some visual artifacts). The problem with these damn phones is that there's little chance the hardware capabilities scale 1:1 with their super high resolutions. You probably want to run at 1080p even on those 1440p phones. In my experience, they just aren't able to pull 60fps at their native resolution unless your rendering is extremely limited (only drawing each pixel once, no transparent over draw, no image fx etc.)
Thanks for the reply! I was hoping that increasing the texel size would suffice. Not sure how to take more samples or passes... duplicate each pass block in the blur shader? Definitely will have to start tinkering with the code.
Instead of using this onmouseenter/onmouseexit i tried setting this up by disabling the glow render camera. However, this leaves the blurred outline still visible. Is there a way OnDisbable to clear the material/texture. Thanks :)
Thanks for the great video and shaders! When I add a metallic texture with alpha for smoothness, the shader breaks (Unity 2017.3). I've searched around for an answer to why I'm getting a null ref exception to no avail. Any thoughts? Here are the errors that get thrown: NullReferenceException: Object reference not set to an instance of an object UnityEditor.MaterialEditor.GetPropertyRect (UnityEditor.MaterialProperty prop, System.String label, Boolean ignoreDrawer) (at /Users/builduser/buildslave/unity/build/Editor/Mono/Inspector/MaterialEditor.cs:954) UnityEditor.MaterialEditor.GetPropertyRect (UnityEditor.MaterialProperty prop, UnityEngine.GUIContent label, Boolean ignoreDrawer) (at /Users/builduser/buildslave/unity/build/Editor/Mono/Inspector/MaterialEditor.cs:946) UnityEditor.MaterialEditor.ShaderProperty (UnityEditor.MaterialProperty prop, UnityEngine.GUIContent label, Int32 labelIndent) (at /Users/builduser/buildslave/unity/build/Editor/Mono/Inspector/MaterialEditor.cs:1027) UnityEditor.StandardShaderGUI.DoSpecularMetallicArea () (at /Users/builduser/buildslave/unity/build/Editor/Mono/Inspector/StandardShaderGUI.cs:324) UnityEditor.StandardShaderGUI.ShaderPropertiesGUI (UnityEngine.Material material) (at /Users/builduser/buildslave/unity/build/Editor/Mono/Inspector/StandardShaderGUI.cs:159) UnityEditor.StandardShaderGUI.OnGUI (UnityEditor.MaterialEditor materialEditor, UnityEditor.MaterialProperty[] props) (at /Users/builduser/buildslave/unity/build/Editor/Mono/Inspector/StandardShaderGUI.cs:143) UnityEditor.MaterialEditor.PropertiesGUI () (at /Users/builduser/buildslave/unity/build/Editor/Mono/Inspector/MaterialEditor.cs:1500) UnityEngine.GUIUtility:ProcessEvent(Int32, IntPtr)
Hi! Great stuff! I was thinking about an alternative that could be simpler but with some problems. For every interactive object, make a clone of it with all the faces flipped and with a slightly larger scale (like, 1.1) and overlap the objects. The backface culling will give the impression that the object has an outline. Than turn this second object mesh renderer off and only turn it on when conditions are met. Than both objects can have completely different shaders. The drawback is that every interactive object will have double polycount. Any thoughts?
Yes! I got this from a Rooster Teeth Panel with Monty Oum (RIP), he did this to get the black outlines in the RWBY characters. Since he did realtime rendering back then I guessed it would be feasible in most gaming situations. I didn't do a stress test, though. My reasoning is that you could still implement the blur with the outside object if you wanted to. But I only tested it with Unity's basic shaders so far. It would give greater flexibility since you could do, with the same setup, a hard outline, glowy outline, etc just changing the outer object's shader.
This wouldn't allow for the glowing effect, at least not very easily. I actually experimented with a multi-pass solution originally but another issue reared its head first: not all geometry is created equally. Scaling vertices outwards along there normal works much better for smooth/rounded objects, but for objects with sharp corners, extruding along the edges creates ugly discontinuities. You can fix this by pre-treating a mesh to have normals be averaged at sharp corners, but this adds a whole other level of complexity! This is why a lot of toon shaders look fine on spheres and most characters, but look not so nice on cubes and blocky objets.
Thank you for your sharing. And I want to ask you something about blur. When actually "sort of size up of bluring" occurs, It seems [GlowPrePass.cs] do that In his OnRenderImage(). But I wonder about how blur size is up by repeating (In your sharing, 4 times) Graphics.Blit( , , [blur Shader Material]). I understand "blur.Shader" works for Gaussian. but I think it results only fragment same as PrePass Texture anyway (blur Texture is copied from it.). So where it happens size up of blur? May it is relative to initial size of "Blurred Render Texture"? But I still dont understand why...
Ah! The Gaussian Mask! In Graphics.Blit( , , [blur Shader Material]), dest Texture's all fragment (may 0~1 UV space?) is shaded Unlike shading in normally model rendering (vertex should be met to render.). So the repeating of blur.Shader which activates Gaussian Mask can size up of blur! ... May be.
wait i think i did it, u have 2 color for materials right? Im trying to do somethig similar, i desature all my scene and only the object i want highlight preserve the color. is working well now but the color is kinda whited a little (because i add the desature image + the replacement shader texture)
Does this effect work in VR? (Vive and rift). And how does this perform on mobile? I really like the effect, but I'd like any info on this before I implement it into my projects (because it requires to use your Glow standard shader, which is convenient and inconvenient at the same time). Anyway, any advice would be greatly appreciated.
It likely will not work in VR. I personally haven't bought into VR yet, but I've been lead to understand there are many issues with traditional post FX in VR. As for performance, you probably should not use it as-is on mobile. It would be fine on some phones, but there are steps you could take to make it better. Primarily, if you were already doing any sort of post processing, you should combine the final step of the effect (compositing the glow with the scene) in your final post processing pass. You also don't have to use an edited standard shader if you go the command buffer route which there is an example of on github.
Thanks. Yeah, Ive found many of the outline effects, or other effects, I'm used to using don't work in VR (due to the stereoscopic rendering/double cameras). I do like the effect though, so I'll see if I can at least try it in any PC project that comes my way (I'm rather noob at shader and graphics programming though, so editing the effect won't be easy for me, lol). Anyway, I'll take a look at the command buffer version, then. Thanks.
Ummm... I'm using this: forum.unity3d.com/threads/free-open-source-outline-effect.314362/ it's free, works in VR, but, it's limited to only 3 colors (of your choice) during runtime. I haven't had the time to check the scripts to see if I can expand this (though, I'm not sure how that'd affect performance). Anyway, if you can work with only 3 colors for your "categories", then it should be more than enough.
Hello! I love your tutorials, and this is great also. This method works perfectly, but how can i convert it to work on LightWeight Render Pipeline, i saved everything as it was on your scene, switched to lwrp, copied simple lightning shader + added "Glowable" tag, but it doesnt seem to work, can you help me:D ? Thank you very much!
I've had the same problem. I'll ask the creator again to see if he replies. If he does I'll let you know. Unless you solved it already, in which case I'd love to know how!
Why do camera postprocess effects have to be so expensive on mobile:( It's not even blur, I tried it with a shader that does almost nothing (a vignette) and it cuts fps in half.
The problem is fillrate. The biggest performance pain point on Mobile GPUs is just straight up pushing pixels. Yes some pixels cost more than others (PBR shading, a bloom that samples 50 neighbouring pixels, etc), but at the end of the day you just have to draw as few pixels as possible. One huge optimization you can make is reducing the resolution, rendering at 720 is a huge difference than 1080. Also making things are being depth-culled where possible. You might expect to see a Blit that does literally nothing other than sample the source rendertexture eat 1-2 ms of frame time on current gen hardware, even before you do anything fancy. On older phones? That empty blit might be as high as 10 ms, at which point image effects aren't feasible at all. This would only ever be your min spec devices though, where you should be forcing lower resolution and lower fps to account for their lack of power.
Thanks, I will try reducing the rendertexture size and doing calculations on that but I don't expect much since just sampling it seems to take a lot of resources. I can't fix the resolution unfortunately, there are hundreds of screen sizes on android. Yes, I tried using this post effect only on the high end devices, didn't even think to use that on old phones.
Using deferred mode, you could create this effect entirely in a post process effect using the GBuffer with RGB emission, and shaders which write a color to that buffer. That's honestly a huge expense, and I think a command buffer approach where you render one or two extra objects to an offscreen buffer is a solution that ends up being more flexible than trying to leverage GBuffer emission.
HDRP is still in beta and doesn't have hooks for extending it. You can edit the code directly on your local package directly but it's not recommended. Some versions of HDRP (pre 2019.x) support the Post-processing stack v2 which you can extend with effects like this.
Download the demo project and try switching from perspective to ortho. See if it works! I think it should just work, but if doesn't because of some weird issue, feel free to create an issue on github and I'll check it out sometime in the near future.
Ahh dang, yes please do thanks! If you solve it yourself, make a pull request and I'll merge it in, otherwise I'll cover when I upload the command buffer variant (which is a nicer solution than replacements anyway).
you need to provide way way way way more information then you do currently. there is little to no information on anything you talk about. you assume we are as knowledgeable as you are on the subject...
Hi Matthew, Thanks for your feedback. I have multiple other videos that tackle more introductory topics and distribute all the code used in my videos on github. Is there something specific from this video you'd like expanded on? This particular video assumes a solid understanding of shaders and post processing effects which is why it is not described as a tutorial or "101 course" but instead, a case study.
I would mention in the videos that you assume a strong understanding of Unity shaders. As for things to expand on, I think a tutorial where you do it in Unity would help a lot. Or split your videos that are advanced into two. One where its simply an overview for viewers that understand the material and one that is very in-depth and goes through everything.
I understand nothing
You powerlevel is too low :-)
I've been dissecting your videos piece-by-piece to learn how to program shaders for school. One of the objectives I set for myself was writing an outline shader. This will help me so, so much! Obviously won't just copy it one-on-one, but your videos are so, SO helpful to me that this will make my life a lot easier! Thanks a lot!
Probably the best resource for writing shaders out there. Thank you for making these.
Wow amazing, a whole new dimension of programming to explore. The past 2 years I've been working in C#, never really dove deep into shaders, dude great video.
God damn! I hit the shader tutorial jackpot!!! You should start naming your tutorials with the keywords: Unity, Tutorial. Because when I look for shader tutorials I search, and probably many others also, along the lines of "Unity Shader Tutorial." Your videos for some reason never come up in a search. The only reason I found out about your channel was from someone I am working along side with. Anyways...Great videos!
This is one of my favorite channels on TH-cam right now, so glad to see you back.
As someone else who works in games as a contractor (and also has a Unity-centric tutorial channel), totally understand the hiatus. Keep up the great work dude. = )
It seems like this could be simplified a bit. You could probably render your blurred geometry to a separate buffer as normal. Draw the rest of the scene as normal and then render the glowing objects as a blurred effect on top of that. Then finally render the that buffer again (non-blurred) on top of that a third time. This eliminates a buffer and a shader step. You could probably also use the depth buffer to handle the overglow effects (4:30) -- also if you still wanted the cutouts you could use a stencil buffer on that first glow-object render (but you probably won't be able to get that inner shadow effect).
Good to know you're back! Amazing videos man.
Excellent content, as always. Glad you're back !
Awesome good to see you back, I was getting the junkie itch :) This was the missing step in the Xray video- happy to see it get covered!
Yesss! Was hoping you'd make a video on this!
YAY! excited to have more in this series
I miss the old intro already :/
Yeah, definitely. :/ This new one doesn't flow the same at all. Too many syllables, and not as catchy a tune.
+Kaleb Weise It's the exact same syllables as the old one lol
Generic Toast Mmh, I don't know man. Not quite. I feel like it stretched on a little too long to *feel* right, and there's less to the notes in the jingle. On top of that, the notes aren't sung in the same -more defined- way. - It's not awful, it's still quite good and I think it could well grow on me. I guess I'm just trying to pinpoint what it is about the thing that seems off.
My guess is just the fact that it's so different, it feels weird. I thought so at first too but after I listened to it a couple dozen times while do the animation, it grew on me and now I actually prefer it to the old one. The vocals sound less clean because there's a vo-coder applied to them to give them a more retro-gamey sounding style.
And yeah it is one extra syllable which adds to the "off"ness but like me, you'll probably come to love the new sound :D
for me it's definitely the "stuuuuuuuuuuuuuuf" and "goooooooood", words have one syllable (20%) taking but >40% of the beats.
it feels artificial bloated. another difference: here the melody is perfectly (boring) on the beat, in the old intro melody there were syllables sung between two beats (not so boring).
in the new intro everything has a tenuto accent, missing variety. in the old intro we had tenuto, legato and staccato accents.
old intro were 2 tacts, short and nice, new has 4, but just one syllable more.
Wow, thanks so much for the video and a free example project!
This is exactly what I was looking for, I was about to use the stencil buffer for masking out the object silhouette, didn't even think to use the original rendered color!
I hate stencil buffer in Unity's shader syntax. It's beyond incomprehensible.
Thank you so much. This is a really usefull tutorial! The technique solves so many problems i had, like outlines etc.
Have you a suggestion on how to achieve the occlusion of the outline if an object is in front of the outlined one?
I'm loving this channel! Btw, can you make a video about objects getting transparent when too close to the camera using a dithering effect?
omg thank you so much. I have been wondering how to do this for weeks!
This is an excellent video and the demo is really handy. However, I've tried to use this with the Lightweight Render Pipeline and it doesn't seem to work out of the box (I used an unlit shader for simplicity, adding the "Glowable"="True" tag etc.). No errors are thrown it just doesn't show the outline. Any tips for how to convert this effect to the Lightweight Render Pipeline would be most appreciated, thanks.
Honestly, I feel like all of the details are kinda glossed over way too quickly in this video.
awesome video dude! you should do one on subsurface scattering. i dont know if unity has it yet tho. but im always fascinated by it when you can see it with glowing metal.
Any ideas on how to make it in URP ?
+1
Is this still valid? I've looked around and I'm not 100% sure if functions such as OnRenderImage work anymore?
New intro is sick!
I would really like to see a detailed look into cell shading and how that can be done/used please ^_^
I've a question: could the Main Cam's OnRenderImage() call a Blit() that takes as source a glow texture to combire with OnRenderImage()'s source parameter?
The glow texture should be first processed subtracting prepass tax to blurred tex, and then cutting off all black pixels.
Will i get the same result with this method?
I was very excited with your sctips and shaders, however when I did a PC build, the effect was not working as it was on Unity Editor... the glow was not substracting the flat silohuete and the filling was some weird color mixed with some background elements. Any idea dude?
Hello, I've been trying to tweak this in order for the blur to make a black/gray-based glow, in order to achieve a kind of "shadow emission" effect. How could I make it so that instead of having black becoming transparent, we have white become transparent?
How would you go about doing this in shader graph? Im completely new to shaders in general, and id rather not use shader script otherwise id just be copy pasting things into a structure i dont really understand yet.
This video is unlisted you probably missed it, make it public so other subscribers can see awesome tutorials are back :)
Yup totally forgot to actually hit publish. Thanks!
This glow looks amazing!
I understand, in theory, how this works. In practice, I have no idea how to implement this. When I download the code, there are other parts that I don't know what they're for, like GlowObjectCmd and GlowCmdShader. I'd like the add this to a game of mine. Unfortunately, I've added the second camera and the GlowPrePass to it. I've added GlowComposite to the original camera. I thought the GlowComposite would take whatever the rest of my game is rendering and add the blurred outline to it, but nothing glows. I'm unsure how to begin to debug this.
I step by step tutorial on building this up would be helpful. It's a big jump for Shaders 103.
Ok, I got it to work. What I was missing was the shader of the glowing object needed the tag Glowable=True. So if I was using the standard shader, I would have to switch the shader of each thing I want to glow to use Standard-Glow. Unfortunately, the materials I am using are legacy diffuse. I was able to download all the shader code from the Unity Archives (change the dropdown to "built in shader") and copy and edit the Diffuse shader to create a Glow diffuse shader. All I did was add the "Glowable"="true" shader. Now the glow works.
What about MRT's? Bit nicer than using replacement shaders, saves rendering everything twice too.
This is awesome! Thanks for this great video!
Although you forgot to mention that we should add the shaders to "Always Included Shaders" in Settings -> Graphics. Otherwise it will only work on Unity and not on your final build.
In the github project, they are placed in the Resources folder, which also includes them in the build.
Ah okay! I rewrote the scripts and shaders from scratch, that way I can understand more what's going on, and I didn't put them in the Resources folder. Good to know that it achieves the same thing. Thanks :)
Wow, this is awesome! Thank you so much!
Hey! Really awesome video, it has been helping me a ton with some of the custom shaders I have been writing for my own game.
I wanted to ask how you think you would change the project if you wanted the Intensity factor to be object-specific, rather than being a global multiplier attached to the Main Camera.
Thanks for your effort, anxiously looking forward to the next video!
I thought I managed to replicate the effect but as soon as I switch to another window and back to Unity the effect is broken. This isn't happening in your scene.
What if you wanted to make the glow on the inside edge of an object? Right now the glow is on the outside of the object. Nice video btw, very informative and well made :D
Are there any books or things like that you would suggest for greater detail into graphics? P.S. what university did you go to??
Nice video, just one thing I believe could be done better.
IMO in (1)Glow Prepass stage, no need to use replacement shader here (it requires you to edit the selectable object's shader, which is very inconvenient).
Just use Graphics.DrawMeshNow() to draw selected objects after the normal render, it is easier to implement(selectable object's shader is irrevent, no separate camera is needed) and only the selected objects are rendered(no need to render non-selected objects as black.....). If you do it this way, you can write the code once only and re-use it in different project in just a few clicks.
This would not work for SkinnedMeshRenderers, and a lot of people want to use this effect on their characters. The better way would be to use Command Buffers but that was outside the scope of one video.
yes you are right! I totally missed the SkinnedMeshRenderers part.Thanks for the quick reply!
So Command buffer can do the same effect on SkinnedMeshRenderers regardless of the characters's shader? That sounds good! No experience on Command Buffers..maybe I should go learn it now.
Did you made the "Stadard-Glow" by yourself ? Or it is unity package ? Because im confused where can i find that and also when i look into the source code it is too complex :(
It is a relatively small edit to the Unity Standard shader to add the Tag and the additional color property. If you can't reproduce it yourself, you can grab my edited version from the link in the description, though it will be an older version of the stadard shader and Unity does update it pretty regularly.
Another great video, Thanks!
Great vid...What license is it under?
It is a great shared, I use in my pc and it is working perfect, but when I add it to the Augmented Reality camera it gives a black screen on Mobile devices, how can I fix that?
Hi, thanks for the materials. But found an error when trying to write to a phone. it says below error:
"Invalid antiAliasing value (must be at least 1)" leading to "GlowPrePass" to the following line:
PrePass.antiAliasing = QualitySettings.antiAliasing;
Can you support with a solution to write this to a mobile..
Unity versions checked - 2018.1, 2018.3
any idea how to make a glow effect that highlights all vertices of a shape rather than just it's outline? Presumably you'd need quite a different system.
Hey, welcome back. Could you link to your LD entry?
This looks great, but I'm not able to get this to work at all in a new project. The github project works, but if I try to replicate it in a new project nothing happens. What am I missing? Everything looks identical. I can even make prefabs of everything in the scene, export it as a package and import it into a new project and yet nothing works.
I've been trying to get a proper glow to work for months now, but with basically no shader knowledge it's hard. :p I've found 4 widely different approaches to glow/outline effects on the internet and yours looks like a 5th method, but they all seem so fragile, any other shader or image effect I can just drop into any project and they'll work fine, but glow/outline effects you have to treat like a newborn baby or they'll break, and every single effect has many gotchas and caveats. This approach seems to have a lot of them, but it works in 5.5, at least in your github project, whereas the glow effect I was using broke in 5.5.
I hate glow/outline effects with a passion, lol. I don't understand how something so seemingly simple can be so hard and have so many different solutions. :p
Sorry for the rant, but unless I'm doing something very wrong I have to assume it's hard to get this glow effect working for other people as well?
This works perfect, until after a couple of seconds it starts flickering on my animated models. Any idea of how to fix this?
Trying to make it work on WebGL almost made me cry.
Nice video, as always. Would be cool if you make one about command buffers. I saw that in your repository you have a version that uses it, but I'm still having trouble trying to understand command buffers...
First of all, this is really cool! I'm looking to implement something like this for a class project I'm working on, with a caveat: We're trying to make shadows glow when activated. Essentially, the object casts a regular shadow up until it's activated, at which point the shadow takes on a glowing outline.
I'm no expert on shaders (still learning!) so I've made a custom 'silhouette' mesh that matches up with the object's shadow, then I make that glow like in the video. The only problem I'm having is I want the mesh not to render anything except the glow (that is, it's invisible, and is essentially only there to provide a shape for the glow camera to render).
Do you have any advice on how to make an invisible object glow?
Nevermind, I figured it out. #Reading!
Again, really great videos!
uhh link to github where? didnt find nuffin in the description :C
//edit: ohhh url shortener... whyyy?
I've tested this on my smartphone and it's not really hardware friendly when it comes to mobile phones.
When I implement this my objects have an inner glow that's always visible. Is that supposed to be there? And how can I get rid of that so that there is only the outer glow when the mouse is over the object?
I'm having the same issue, together with a Warning: "OnRenderImage() possibly didn't write anything to the destination texture!" Let me know if you figured it out.
Okay I actually found out what was wrong! The Clear Flags of the GlowPrePassCamera was set to "Skybox", which blended with the glow objects. Set that to a black solid color background, and it's all good!
this is very very very useful and i give u 1000000 like
Thanks for this video! I'm trying to recreate the scripts and it appears the glow spread is dependant on the screen resolution. I'm testing it on a Nexus 6P vertical resolution (1440 x 2560) and the glow is very minimal. I switch the test resolution to say, 800x400 and the glow looks more like what is presented on your test project. Any tips on how to increase the glow spread?
I also encountered a bug where in if I alt-tab from my Unity Editor and than back to it, the blurring stops altogether, with only a 1px outline, although that appears to be project specific as when I make a new test project the blurring works even after alt-tabbing. Not sure why, but it's a bit dissappoing that I can't use it on my current project :(
Ahh yes, the resolution problem is present across many post process fx. The real answer is that you'll have to take more samples or do more passes to compensate (simply fudging the texel size will result in some visual artifacts).
The problem with these damn phones is that there's little chance the hardware capabilities scale 1:1 with their super high resolutions. You probably want to run at 1080p even on those 1440p phones. In my experience, they just aren't able to pull 60fps at their native resolution unless your rendering is extremely limited (only drawing each pixel once, no transparent over draw, no image fx etc.)
Thanks for the reply! I was hoping that increasing the texel size would suffice. Not sure how to take more samples or passes... duplicate each pass block in the blur shader? Definitely will have to start tinkering with the code.
Man, you are so cool! Thanks for everything you do)
Instead of using this onmouseenter/onmouseexit i tried setting this up by disabling the glow render camera. However, this leaves the blurred outline still visible. Is there a way OnDisbable to clear the material/texture. Thanks :)
You'd also have to disable the image effect on the main camera as well, the one responsible for compositing the three RTs
I've currently just set the intensity on the main composite to 0. Whilst the glow camera is disabled.
Thanks for the great video and shaders! When I add a metallic texture with alpha for smoothness, the shader breaks (Unity 2017.3). I've searched around for an answer to why I'm getting a null ref exception to no avail. Any thoughts?
Here are the errors that get thrown:
NullReferenceException: Object reference not set to an instance of an object
UnityEditor.MaterialEditor.GetPropertyRect (UnityEditor.MaterialProperty prop, System.String label, Boolean ignoreDrawer) (at /Users/builduser/buildslave/unity/build/Editor/Mono/Inspector/MaterialEditor.cs:954)
UnityEditor.MaterialEditor.GetPropertyRect (UnityEditor.MaterialProperty prop, UnityEngine.GUIContent label, Boolean ignoreDrawer) (at /Users/builduser/buildslave/unity/build/Editor/Mono/Inspector/MaterialEditor.cs:946)
UnityEditor.MaterialEditor.ShaderProperty (UnityEditor.MaterialProperty prop, UnityEngine.GUIContent label, Int32 labelIndent) (at /Users/builduser/buildslave/unity/build/Editor/Mono/Inspector/MaterialEditor.cs:1027)
UnityEditor.StandardShaderGUI.DoSpecularMetallicArea () (at /Users/builduser/buildslave/unity/build/Editor/Mono/Inspector/StandardShaderGUI.cs:324)
UnityEditor.StandardShaderGUI.ShaderPropertiesGUI (UnityEngine.Material material) (at /Users/builduser/buildslave/unity/build/Editor/Mono/Inspector/StandardShaderGUI.cs:159)
UnityEditor.StandardShaderGUI.OnGUI (UnityEditor.MaterialEditor materialEditor, UnityEditor.MaterialProperty[] props) (at /Users/builduser/buildslave/unity/build/Editor/Mono/Inspector/StandardShaderGUI.cs:143)
UnityEditor.MaterialEditor.PropertiesGUI () (at /Users/builduser/buildslave/unity/build/Editor/Mono/Inspector/MaterialEditor.cs:1500)
UnityEngine.GUIUtility:ProcessEvent(Int32, IntPtr)
I see you are adding a whole unity shader archive. just add the standart shader withouth GUI.
How do I reduce the blur resolution? Thanks
Hi! Great stuff! I was thinking about an alternative that could be simpler but with some problems. For every interactive object, make a clone of it with all the faces flipped and with a slightly larger scale (like, 1.1) and overlap the objects. The backface culling will give the impression that the object has an outline.
Than turn this second object mesh renderer off and only turn it on when conditions are met. Than both objects can have completely different shaders. The drawback is that every interactive object will have double polycount. Any thoughts?
I think some toon shaders actually work that way. You won't have the blurry glow, though.
Yes! I got this from a Rooster Teeth Panel with Monty Oum (RIP), he did this to get the black outlines in the RWBY characters. Since he did realtime rendering back then I guessed it would be feasible in most gaming situations. I didn't do a stress test, though.
My reasoning is that you could still implement the blur with the outside object if you wanted to. But I only tested it with Unity's basic shaders so far.
It would give greater flexibility since you could do, with the same setup, a hard outline, glowy outline, etc just changing the outer object's shader.
This wouldn't allow for the glowing effect, at least not very easily. I actually experimented with a multi-pass solution originally but another issue reared its head first: not all geometry is created equally. Scaling vertices outwards along there normal works much better for smooth/rounded objects, but for objects with sharp corners, extruding along the edges creates ugly discontinuities.
You can fix this by pre-treating a mesh to have normals be averaged at sharp corners, but this adds a whole other level of complexity!
This is why a lot of toon shaders look fine on spheres and most characters, but look not so nice on cubes and blocky objets.
Cool. Made me want to do a comparison side-by-side. I just did a couple of basic shaders in the past and this looks like good practice.
Thank you for your sharing. And I want to ask you something about blur. When actually "sort of size up of bluring" occurs, It seems [GlowPrePass.cs] do that In his OnRenderImage(). But I wonder about how blur size is up by repeating (In your sharing, 4 times) Graphics.Blit( , , [blur Shader Material]).
I understand "blur.Shader" works for Gaussian. but I think it results only fragment same as PrePass Texture anyway (blur Texture is copied from it.). So where it happens size up of blur?
May it is relative to initial size of "Blurred Render Texture"? But I still dont understand why...
Ah! The Gaussian Mask!
In Graphics.Blit( , , [blur Shader Material]), dest Texture's all fragment (may 0~1 UV space?) is shaded Unlike shading in normally model rendering (vertex should be met to render.).
So the repeating of blur.Shader which activates Gaussian Mask can size up of blur!
... May be.
I dont understand how u make the material black color inside the replacement shader and not in the normal camera.
wait i think i did it, u have 2 color for materials right? Im trying to do somethig similar, i desature all my scene and only the object i want highlight preserve the color. is working well now but the color is kinda whited a little (because i add the desature image + the replacement shader texture)
Does this effect work in VR? (Vive and rift). And how does this perform on mobile? I really like the effect, but I'd like any info on this before I implement it into my projects (because it requires to use your Glow standard shader, which is convenient and inconvenient at the same time). Anyway, any advice would be greatly appreciated.
It likely will not work in VR. I personally haven't bought into VR yet, but I've been lead to understand there are many issues with traditional post FX in VR.
As for performance, you probably should not use it as-is on mobile. It would be fine on some phones, but there are steps you could take to make it better. Primarily, if you were already doing any sort of post processing, you should combine the final step of the effect (compositing the glow with the scene) in your final post processing pass.
You also don't have to use an edited standard shader if you go the command buffer route which there is an example of on github.
Thanks. Yeah, Ive found many of the outline effects, or other effects, I'm used to using don't work in VR (due to the stereoscopic rendering/double cameras). I do like the effect though, so I'll see if I can at least try it in any PC project that comes my way (I'm rather noob at shader and graphics programming though, so editing the effect won't be easy for me, lol). Anyway, I'll take a look at the command buffer version, then. Thanks.
Hey Alvaro, did you find a good outline solution for VR yet? Looking for something similar at the Moment...
Ummm... I'm using this: forum.unity3d.com/threads/free-open-source-outline-effect.314362/ it's free, works in VR, but, it's limited to only 3 colors (of your choice) during runtime. I haven't had the time to check the scripts to see if I can expand this (though, I'm not sure how that'd affect performance). Anyway, if you can work with only 3 colors for your "categories", then it should be more than enough.
If any of you are still curious, I got this to work in unity vr for the vive pretty well by using the CMD version in the description
Thank you for your tutorial.
Is there a way to achieve this in the new Shader Graph?
yes, just make it with nodes or use scripts. Don't ask me how though.
Hello! I love your tutorials, and this is great also. This method works perfectly, but how can i convert it to work on LightWeight Render Pipeline, i saved everything as it was on your scene, switched to lwrp, copied simple lightning shader + added "Glowable" tag, but it doesnt seem to work, can you help me:D ? Thank you very much!
I've had the same problem. I'll ask the creator again to see if he replies. If he does I'll let you know. Unless you solved it already, in which case I'd love to know how!
Why do camera postprocess effects have to be so expensive on mobile:( It's not even blur, I tried it with a shader that does almost nothing (a vignette) and it cuts fps in half.
The problem is fillrate. The biggest performance pain point on Mobile GPUs is just straight up pushing pixels. Yes some pixels cost more than others (PBR shading, a bloom that samples 50 neighbouring pixels, etc), but at the end of the day you just have to draw as few pixels as possible. One huge optimization you can make is reducing the resolution, rendering at 720 is a huge difference than 1080. Also making things are being depth-culled where possible.
You might expect to see a Blit that does literally nothing other than sample the source rendertexture eat 1-2 ms of frame time on current gen hardware, even before you do anything fancy. On older phones? That empty blit might be as high as 10 ms, at which point image effects aren't feasible at all. This would only ever be your min spec devices though, where you should be forcing lower resolution and lower fps to account for their lack of power.
Thanks, I will try reducing the rendertexture size and doing calculations on that but I don't expect much since just sampling it seems to take a lot of resources. I can't fix the resolution unfortunately, there are hundreds of screen sizes on android.
Yes, I tried using this post effect only on the high end devices, didn't even think to use that on old phones.
Hey great video. I'm having trouble building this to a Android Mobile device its just showing a black screen, but the glow effects do show though.
Amazing!
It seems CommandBuffers not working on Android??(mobile) It almost all black screen!!
do you have get this working finally? im interested but just using urp right now
@@IndieFist It seems not ">>" or"
and i did not know what the ">>" means...just get rid of it in code .It works fine.
the project is very nice！
I think all users of Unity3d seek one solution to glow emission channel only. It's really fundamental mechanic, but Unity ignore that for years :
Using deferred mode, you could create this effect entirely in a post process effect using the GBuffer with RGB emission, and shaders which write a color to that buffer.
That's honestly a huge expense, and I think a command buffer approach where you render one or two extra objects to an offscreen buffer is a solution that ends up being more flexible than trying to leverage GBuffer emission.
How can i create this in HDRP?
HDRP is still in beta and doesn't have hooks for extending it. You can edit the code directly on your local package directly but it's not recommended. Some versions of HDRP (pre 2019.x) support the Post-processing stack v2 which you can extend with effects like this.
@@DanMoranGameDev thanks for answer.Will you do a tutorial?
@@DanMoranGameDev would love an update for HDRP as well!
Can I achieve this effect in orthographic camera?
Download the demo project and try switching from perspective to ortho. See if it works! I think it should just work, but if doesn't because of some weird issue, feel free to create an issue on github and I'll check it out sometime in the near future.
it's not workin properly in orthographic camera. I will create an issue on github :)
Ahh dang, yes please do thanks! If you solve it yourself, make a pull request and I'll merge it in, otherwise I'll cover when I upload the command buffer variant (which is a nicer solution than replacements anyway).
Have you set both Main Camera and GlowPrePassCamera to orthographic?
I didn't notice the GlowPrePassCamera in my first run. Everything working fine now! Thanks!
I like the video, but I miss the old intro. So much more catchy!
thanks
Thanks
It's graphics, man.... you won't make sense of it if you're only good with programming ;/
you need to provide way way way way more information then you do currently. there is little to no information on anything you talk about. you assume we are as knowledgeable as you are on the subject...
Hi Matthew,
Thanks for your feedback. I have multiple other videos that tackle more introductory topics and distribute all the code used in my videos on github. Is there something specific from this video you'd like expanded on? This particular video assumes a solid understanding of shaders and post processing effects which is why it is not described as a tutorial or "101 course" but instead, a case study.
I would mention in the videos that you assume a strong understanding of Unity shaders. As for things to expand on, I think a tutorial where you do it in Unity would help a lot. Or split your videos that are advanced into two. One where its simply an overview for viewers that understand the material and one that is very in-depth and goes through everything.