Wow that was quite the break, wasn’t it? Posts on here stopped in May for a few reasons; I finished up my masters, got married ,and also got a job! As you can guess May was a very busy month. But now that I have my feet under me at my new job, more on that later, Its time to bring the dev blog back!
Anyone who has keep up on this knows that in this blog in the past has mostly talked about shaders and game development. That’s going to stay being a trend, but with a little change. As i said before I have a awesome new job! I got brought on as a technical artist at Sphero! for the past few months i have been working on the BB-8 project. With the blessing of my bosses they gave me permission to start up my dev blog again. I plan to keep giving out cool shaders and talking about the development process we go threw, but also will add in some handy tools and other things that i have learned along the way, pretty much everything will be in C#, CG, or a tutorial video!
My goal has been and always will be to make what ever I post be helpful, easy to digest, and most importantly something you can use to make your own projects look awesome! The next blog, that i hope to have out in the next week, will be talking about chroma key shaders!
Been spending some of my time working on my CG shaders for unity. Sadly I cant upload the whole package with texutres for you to play with cause my site wont let me yet… BUT ill figure out how to take care of that and just give ya a link to the shader its self for now.
The way this shader works its using a very very liberal Use of masking and lerps. I use ranges to give the user controls over the shader, also a handy way of no needing to clamp a ton of different values! Please note that this isn’t a light weight shader, so its not mobile friendly. If people are interested ill post a more mobile vertex render one that has only 2 maps going on. Rather then the Per Pixel PBR one that we have now.
The pulse effect is a clever reuse of the code from the Texture blending and from Dissolve that is also documented on here. The difference here is that its used to make a emissive map with part of the code from the Dissolve effect, that once again, is also documented here. So lets take a look.
Like in texture blending were passing the position of our player to be compared against the world position, as well as dividing it so we can control the radius. The radius is going to control how far the pulse will go. We passed this value together with a blending so that way played could see the relieved area a little better.
Now you need to animate the graident that comes out of the division. We do this threw subtracting it from a fraced time, frac just allows a repeat. I included a multiply node with the time just for future tuning. Now is when we pull the Dissolve trick out of our hat. Were fist going to make a section that ramps up our whites, killing the gradient and making he animation pure white and black. Then lerp that together as B with the softer gradient from the subtraction as Alpha and a 0 value. This gives us the very fine and feint edge for the effect. Ceiling that will make all non black information jump up to 1, making it white. And there’s your emissive mask.
In 404Sight we needed a cool effect that could be used to make assets and other things fade in and out of the world. and that’s how the Dissolve effect was born. The images in this will give a more technical look as to what’s going on.
Over all the way i pull this effect off is threw some pretty standard methodologies of shaders effects. we start with animating a height map, or the alpha of a texture if you painted that in its alpha channel.
Animate Height Map Function
As you see above we take our textures and subtract time out of if so we can animate the alpha. Doing that’s causes the white or blacks of the textures, depending if you reverse time or not, to fade into the other value. Multiplying said animated texture just lets you ramp up and down the whites and you see fit, in this case i took it all the way white. Clamp the values just to keep things nice neat and in control.
The meat of the Color
Above we get to see the function in action. AFter you give it the the maps and values it needs it becomes the meat that you control the whole effect with. Lerping the map with two other Maps lets the colors fade from one to the other. Here we see it fades from white to the red tiled texture. In the case with 404Sight we have things fade in and out so its lerped together again but the reverse of of the color maps. I also used If’s and scalars to give us control of how we used the effect. At this point the colors will be dissolving together but to really sell the effect you need the emissive edge.
There’s the meat again
Like with the color the animate height map is the key here, but with much less fed into the white controls so the map is much softer. We lerp that as the alpha, with pure black as A, and a reverse of the original animated height map together. Multiplying that by the new Height map gives is a very fine edge of white on the outside of where the color would be. Ceiling that will pull the whites to the full value of 1, making ripe to be used as an emissive mask. Assuming the timing on your animate height maps are the same.