taxiderby

Tutorial: Light pillar effect

Added 2018-06-20 05:28:07 +0000 UTC

WHAT YOU'RE GONNA NEED:

The open source version of Shader Forge, which you can get here! (Shader Forge -> Assets -> Shader Forge) If you have a Asset Story version of Shader Forge, 90% of this tutorial will still work, you'll just have a weird transparency issue involving back faces.
The attached files, which includes two needed textures, and includes some modifications I made to Shader Forge. You're REALLY going to need it if you're using Unity 2018, as it fixes some major errors.
A modeling program. I use Blender in the tutorial, but anything will work, if you know what you're doing.
oh ya unity also lol

This tutorial assumes you have basic knowledge of Unity, Blender, and to a lesser extent, Shader Forge.

Before we do anything, install Shader Forge, and add both the textures and the replacement Shader Forge files included in the attached .zip. In the import settings for BasicGradient.png, set the Wrap mode to "Clamp." This will prevent some artifacting at the edges of our effect.

The secret to a lot of non-particle VFX is they're actually models with funky textures, so let's get started by opening up Blender, and making a cylinder.

Make sure this cylinder has no caps, either when it's created, or by just deleting the faces itself. Next, make it around this size (in my case, it's roughly 4 units height and 2 units in diameter), and then extrude the bottom ring straight down (length doesn't matter)

Go to the UV menu, highlight the upper face loop, and perform a cylinder project.

The UV should look something like this.

Now, do it again for the lower half.

cool and good

Now, you'll want to take the bottom edge, scale it up, and move it up to what might consider the "floor." You should get a result like this.

Lastly, you'll want to complete the "floor" by selecting the inner bottom ring, and extruding it inwards, making the vertices merge in the center (alt+m/option+m by default), to get you this.

Select these new polys, and move their UVs to the very bottom, like so.

Alright, let's export this into Unity!

Huh.

Let's get this thing a proper texture. Start by making a new texture, and then opening up Shader Forge. In Shader Forge, make a new "Particle (Alpha-Blended)" Shader. After naming it, you should get a menu like this.

You can get rid of that lower "multiply." We won't be needing that just yet.

If you apply your new shader to the new material and apply that to our cylinder, it'll look like this:

Let's get rid of that culling. Go to the "Geometry" tab and select "Back Then Front."

If you've used Shader Forge before, you may notice that "Back Then Front" wasn't there before. Transparency in textures is a messing thing in real-time 3D, especially with objects that can be seen through themselves. I was having an issue where sometimes the back faces would render on top of the front faces, so I added in this feature myself, to ensure the backfaces are ALWAYS drawn first, with the front faces then drawn on top of that.

If you select "Double Sided," you'll get issues like this, and that's no good.

Next up, add two Texture 2D nodes. (Tip: holding down a letter key displays a menu of all nodes that start with that letter). Name it the following, and while you don't have to set images for them in the Shader Forge inspector, it helps for organization.

You DO want to add them in the actual material inspector, however.

Make sure you set the tiling for the ClipPattern to 4 and 2, as shown here.

Next up, you'll want to add a "Blend" node, set its mode to "Screen," and attach it like so. Additionally, I've added a fixed Value node with a value of 1.3 to brighten the color somewhat — this allow it to look a bit nicer with HDR/Bloom.

If all goes well, you should have something like this.

But that's not GOOD ENOUGH we want DIAMONDS!!!!

Add a Multiply, One Minus, and Set (A <= B) node, and connect them like so to each other, and the "Opacity" input on the "Main" node to the far right.

This is what you'll get!

Now, you might be wondering what's going on with that diamond texture, exactly. The way it's set up is that it uses the gradient as a reference of sorts — it compares its value to the inverted gradient, and if it's a higher value, it renders as solid. Otherwise, it's transparent. Thus, the higher up on the pillar the diamonds go (and therefore, the brighter the gradient), the less of the pattern is shown, making the diamonds appear as though they're shrinking.

Anyway while that's cool, it seems a little...... flat. Let's change that.

Add a "Remap (Simple)" node, and set its lower values to 0.5 and 1, and insert it between the Step and Multiply nodes.

With that nice glow, we're almost there!! If you have HDR and even Bloom enabled, this'll look REALLY nice. However, it's still static. Let's get this thing moving.

Add a "UV Coord." node and a "Panner" node. You can set the Panner's values to whatever you like, but I personally feel 0 and -0.4 work beter here. Connect them to eachother, and then the Panner to ClipPattern, as shown.

And there you go!

If you want, you can set up this effect to have a slider that allows you to modify the intensity of this effect on the fly. While it's a bit difficult for me to explain what does what, here's all the relevant nodes required!