Tag: shader
Color Spread Post-Processing Effect Tutorial in Unity
(important disclaimer: this work represents me only & not the company I work for.)
I was inspired by an episode of the Powerpuff Girls for this effect. I wanted to create this effect of color spreading in a black and white world, but to do the effect in world space coordinates so that you can see the color crawling over objects instead of flatly spreading across the screen like in the show.
I created this effect in Unity’s new Lightweight Rendering Pipeline, a built-in example of a Scriptable Rendering Pipeline. All of the concepts still apply to other pipelines, but some of the built-in functions or matrices might have different names. I also used the new post-processing stack, but I omitted explaining how the basics of how to set it up, as I think other guides already cover this pretty well, such as this video.
For tutorial updates, follow me on Twitter. I also do Q&A coding streams on Twitch, and you can always DM me on Twitter or ask me questions in the Twitch chat about shader stuff 😀
Continue reading Color Spread Post-Processing Effect Tutorial in Unity
Foggy Window Shader in Unity
Hey y’all, this tutorial series is going to cover all of the techniques used to create the foggy window shader! There’s quite a bit going on, so we’re going to break it down into 3 parts:
- The Gaussian blur effect
- Writing & reading a texture
- Changing the blur based on the texture
At the end of each part, you’ll have a fully working shader, and you’ll learn techniques that you can reuse and adapt in other shaders!
A little disclaimer- this section does a really lazy application for the blur for the purposes of focusing on part 2 and 3. It’s most useful if you’ve never written a blur before and want to learn a really basic (but lazy) way of applying it in Unity. If you’re already a pro at writing a blur shader, then go ahead and move on to part 2!
Here’s the full code for the foggy window shader for you to reference. You’ll also need to look at the DrawOnTexture script for the C# part of this tutorial, and the blurring algorithm is in blur.cginc.
On with the tutorial 🙂
Using Command Buffers in Unity: Selective Bloom
Disclaimer: This post is a bit outdated since Unity has introduced the Scriptable Render Pipeline, which Catlike Coding has a better guide on than I’ll ever put in the time to write, LOL. However, if you’re using a legacy version of Unity that doesn’t have the SRP, or you want to write a single custom pipeline effect instead of extending the SRP, then the topics covered in this post are your best bet.
What this tutorial will cover
This is a pretty hefty tutorial that covers how to use command buffers in Unity for graphical effects that require extending the graphics pipeline. I’m going to illustrate the concept of extending the graphics pipeline by explaining how I built the system that creates this selective bloom effect.
The glowing effect in this tutorial is pretty boring, since the glow is a single solid color. I challenge you to modify the glow buffer step to actually render the model or utilize a custom emission map per-object… the possibilities are endless! The possibilities of what could be contained in this tutorial, however, are finite, so that’s why we’re focusing on this solid color glow.
Credit goes to Unity’s example project for command buffers, especially the one on decals, for helping me figure out how to utilize command buffers.
What you need to start
You’ll need some basic knowledge about how Unity’s rendering pipeline works, and what rendering pipelines do in general. I also recommend you check out Unity’s basic overview of command buffers before reading this.
You definitely also need to have some experience writing basic shaders. This blog is full of tutorials on shader writing that I strongly recommend you check out before diving into this one ;0
I also strongly recommend that you reference the Unity project on GitHub for this tutorial, as it completely implements everything we’re about to cover!
Continue reading Using Command Buffers in Unity: Selective Bloom
X-Ray Shader Tutorial in Unity
Mercy and certain other characters and powers in Overwatch have a cool effect that draws players in front of walls. Mercy’s looks like this:
Notice how, in this image, the D.Va is drawn as a solid translucent color. The translucency applies to the model itself such that it looks like you can see the inside of the model and its backfaces.
In this tutorial, we’re going to learn how to replicate this effect!
For your reference, the full code for the x-ray shader is here, under a non-commercial open-source license. 🙂
Rim Highlight in Unity
Hey y’all! Today, I have a quick tutorial on how to create the highlight effect featured in the gif above. I was inspired by artworks like this one by Loish which have strong rim highlights.
If you’re familiar with this tutorial on how to create a basic outline, then this technique will be super easy! However, that’s certainly not required reading 🙂
For your reference, here’s the link to the final code for the highlight shader. It also includes some custom diffuse lighting from this tutorial, but you really only need to look at the pass labeled “outline pass”!
On with the tutorial!
Custom Diffuse Shader in Unity
If you want your game to have a unique aesthetic, a great way to accomplish that is to have all of your objects using a shader that you personally wrote for the game. The only lighting scheme I’ve written about so far is cel shading, but that’s not the only way to go about stylized looks!
So, I decided this tutorial series needed a post on diffuse shading. Lots of tutorials have already covered diffuse shading in lots of languages, so this post also has a few ideas for ways to improve and expand upon a basic diffuse shader.
In the header image, the watermelon slice is using Unity’s default diffuse shader; on the right, it’s using the shader we write during this tutorial!
We’re going after a stylized look, so the ideas presented here introduce some basic ideas and skip over others. This is certainly not the ‘best’ way to write a diffuse shader, and there arguably isn’t one single ‘best’ way- there’s just what’s best for your game!
For your reference, here’s the final code for the simple diffuse shader in Unity.
Now, on with the tutorial!
Colored Outline Shader in Unity
It seems like I’m on a roll with outline shaders! I’ve already written a basic cel shader with outline tutorial and an animated dotted outline shader, and now I’m doing this colored outline.
The special thing about the color of this outline is that it’s using the color of the texture, so that the outline color always matches the pixel it’s closest to. I find it’s a common tool used by 2D artists to make outlines feel more natural, as opposed to using a solid color like black for the whole outline.
Here’s an example of the difference it makes with an example from 2D pixel art from u/croakiee on Reddit:
This tutorial teaches you how to do this effect in 3D.
IMPORTANT: Since I already went over the basics of how to do the outline here, I’m not going to repeat that explanation in this tutorial. Do the basic tutorial first if you’re not sure how to create an outline at all.
Here’s the full code for the shader for reference, under a non-commercial open-source license:
->> Link to full code for Unity Colored Outline Shader
Also, The 3D model is from this free asset pack.
Now, on with the tutorial!
2D Reflective Water Shader in Unity
Hey, y’all! My friends Kytana Le, Lucien Ye, and I created a chill, atmospheric, color-based puzzle game called The Endless River during the 2018 Global Game Jam. I wrote all of the shaders used for this game (except for the bloom), and my favorite one is definitely the reflective water shader.
So, while it’s still fresh in my mind, I figured I’d write a tutorial about it! The waving effect is quite similar to the 3D water shader tutorial, but the reflectivity is a special Unity trick that I felt made it worth writing a whole tutorial about.
If y’all want to see another tutorial covering how I made the entire aesthetic for the game, including bloom, other post-processing effects (like the vignette), fog, animations, and other effects, please let me know!
If you have any other feedback or questions about these tutorials, don’t be afraid to PM me on Reddit, contact me on Twitter, or comment on this post ❤
For your reference during the tutorial, here’s the final code for this shader, under an open-source licence. The code isn’t my usual shader tutorial repository, but instead the repository for the whole game. 😉
-> Link to final code for Unity 2D Reflective Water Shader
On with the tutorial!
Animated Dotted Outline Shader in Unity
Earlier, I wrote a tutorial on how to create a cel shader with an outline effect. For the sake of not repeating that explanation, refer to that tutorial to learn how to draw the basic outline.
You can apply this outline effect to any kind of lighting or other shader properties, since it’s in its own pass.
Here’s the final code for you to reference:
Linden Reid 