NEW - Gradient Shader Pack - realtime animatable gradient shaders!

Each unique MATERIAL is going to produce a draw call. So if you set different colors/gradients for different sprites, only the sprites sharing the same setup will share a drwa call. In your example image you have 5 colors? .. so that'd be 5 draw calls because you'd need 5 sets of gradients.

An alternative that wouldn't do this would be to use the `vertex-colors` based gradient - very simple linear gradient, no rounded highlights ... but you could adjust your uv coords and have kind of fan/circular mesh perhaps, to allow you to set the vertex colors `around a circle` to produce circular highlight. Then they'd all share one draw call and pull colors from the vertex data (which you'd have to feed to your meshes from a script).

 

Hi,

Thanks.

I know that but the point is if I have 10 sprite with the same color, I have 1 draw call.

I animate one.

When I come back to the original states of my shader, I still have 2 draw calls. How can I come back to 1 draw call ?

And do you know why I have this artfact ?


Thanks for your help and your patience !

Best regards,

AB

 

Look up `shared material` and change that instead of the sprite's own individual instance of the material.

 

Hi,

I aldready do this. I have +1 draw calls during the animation.. ok .. but when it's finished how can I get back to my original material to have -1 draw calls. that's the point.

But I will post it on the unity forum at the good place if you have no idea.

But about your asset :

Do you know why I have this artifact on the left side of my image ?

Thanks !

 

The pink stuff? looks like your camera doesn't cover the whole screen so it's not clearing that background?

 

Hi,

Thanks for your answer.

Yes, it's the case. But a classic sprite shader doesn't do that..

 

you have to cover the entire screen with some kind of camera otherwise the render buffers will leave trash data in them between frames.

 

hi there,

I feel like that question was asked before and you gave the answer but I still have the following problem. I'm using "No texture/Vertical/Two Colors/Solid Blend" and I can see lines (I think maybe you called them bands before). I used your suggestion and renamed fixed and half to float. Yet I don't see a difference the result image still has lines. The only thing that seems to affect those lines is the UV scale - it makes the gap between lines smaller or bigger. And also the lines seems to show more when you use darker colors. Most of your example backgrounds and materials use lighter colors and looks super smooth with no lines whatsoever. Yet, if i take you examples and start messing with colors I can see the lines show up again. Is that the way it is or can I completely get rid of lines in the following picture?

 

I tried a simply experiment using the exact same high and low color values from your test image. I simply created a new material with the same vertical shader, set the two colors, and grabbed the preview.



You can see that it is very smooth. This is even without any shader modifications. You should not normally be seeing as much banding as you are, that's not a normal amount of color resolution. Also the 'fixed' values used in the shader are usually enough resolution for colors. There must be something else happening in your case... perhaps your graphics card is applying some kind of compression to uv data? or maybe it is interpolating in a weird way? or some kind of color space issue? or its your monitor? something is going on... but I don't think it's the shaders. There is a tiny bit of color banding you can see when you zoom into the image but its not very obvious.

It does make sense that scaling UV would adjust the banding width as would changing the distance between the two colors, but still to your eye, it should not normally be discernible.

 

thanks for the reply, yeh I think it has something to do with darker color combinations. There is no visible banding in all the sample materials that come with the asset. Yet if i start messing around with color it shows up...



I can see the issues on both my PC and phone so I don't think it is monitor / card.

edit: zoom in on the second image (or whole page) to see that first image is smooth but second has circles. Which is interesting effect in itself but not what I was trying to achieve.

 

Certainly with less difference between the start and end colors, there are less distinct 'steps' between them, so thicker bands of each color.. yet at the same time, those bands have very small differences in color values. So the bands are in a sense more noticeable, but for other reasons not. I still think it must be something else going on here because on my computer I don't see banding.. just just in the monitor display, but the actual pixel values themselves seem to output smoother on mine than yours. It may possibly have something to do with the hardware. On mobile it may possibly be a 16-bit buffer or some issue with gamma correction or something, I don't know. I do know that there is pretty much nothing else I can do to the shader to make it any smoother. It should already be calculating very accurate color transitions, provided the graphics card supports that accuracy. Changing all the 'fixed' values to floats might be slightly more accurate, depending on the hardware, but not really noticeable.

 

that's fine. thanks for the explanation.

 

is it upgraded for unity3d 5? it seem to not work in unity3d 5 from the comments in asset store. if it works in unity3d 5, it will be perfect to us.

 

Originally this asset was created when Unity 3.5 was popular and this was the baseline requirement. At that time there were no unity sprites and the new UI system did not exist. It was designed to work with pretty much any existing Unity geometry whether it was a custom mesh or any of the built-in prefabs like cube, plane, etc. At that time, to do `2D` you would typically use a plane or cube and an orthographic camera. The shaders only need two things in the mesh:

1) vertex data to position the vertices
2) texture coordinates for each vertex

So it works totally fine with the built-in unity meshes and you can also create your own mesh elsewhere and import it etc. The gradients are generated by interpreting the texture coordinates. So in Unity 5 you can still use this same approach to add gradients to any mesh.

But the comment on the asset store is correct, these are not SPRITE shaders and they also were not written with Unity's UI in mind. A sprite shader is a bit different to a regular shader, it has some extra stuff happening in order to make it work with Unity's sprite system, z-sorting and adjustments etc. Also with the UI, there are some things the UI system needs and uses which may not be present in these shaders. So you can't just choose a gradient shader for a sprite and expect it to interact fully-featured with all other sprites as if it were just another sprite shader. But you can use it, as I said, on a regular mesh object like a plane or cube etc.

I may or may not be updating this asset to support sprites and UI... it is a LOT of work... there are many many shaders and each one has to be hand-coded and converted. Having only very limited hours available it would probably take a month's work.

I've responded to the comment on the asset store page also.

 

Anyway, thank you for your reply. i've found other plugin.

 

Hi there, I have just purchased the pack and was wondering how to create a pallete that will produce similar to these gradients ? ignore the radial effects

http://fc-asset1.freekeylabs.com/file/1/1375/1375.jpg

 

You might be able to get close to that with the `box9` gradient... which lets you set 9 unique colors on a grid of 3x3 cells.

But what I see in that image is a) what seems to be a spherical gradient near the bottom half, b) a vertical gradient overplayed on top, and c) some differences in the lower corners where it becomes more orange.

A good start to create a similar gradient is to take that image, crop it to a 1-pixel wide column, the height of the image. Then rotate that 90 degrees to get a horizontal texture. Actually you may find you have to turn it into a 2 pixel thickness due to how texturing has limits. Then throw this onto a `palette` version of the vertical shader etc and you'll get the same colors.

But how to get the vertical + the spherical... you can draw the vertical first, then overlay it with an alpha blended radial gradient. Or use a box9 to deal with the vertical gradient plus the lower corners being extra orange, then draw an alpha blended radial on top.

 

Hi ImaginaryHuman, thank you for your reply. I managed to create a pallette using the original image, as per your instruction. However it has a lot of horizontal lines, it doesn't appear smooth. Do you know why this is the case ?

 

That's typical because you grabbed it from an image which has subtle fluctuations in it, especially if it came from a jpeg. Load it into your graphics app and apply a gentle blur.

 

Price for Gradient Shader Pack will shortly be reducing to just $10 for the month of December!

 

cool

 

Gradient Shader Pack is now only $10 for the month of December, 50% off!

https://www.assetstore.unity3d.com/en/#!/content/9403

Also all my other assets are now reduced by at least 50% to just $10 each, this month only! https://www.assetstore.unity3d.com/en/#!/search/page=1/sortby=relevance/query=venus12

 

Hi, I am using playmaker, and currently you adjust materials by calling a material name like _color or _Emisson. How would I call to the Second Color or offset properties in your materials? thx, layne

 

Open up the shader sourcecode and look at the section at the top, the names of the variables are listed there. Then you can use SetFloat() to change it.

 

@imaginaryhuman
Yesterday i bought your asset to use in a UI based project.

I know it doesnt work with New Unity UI and thats not a problem as i want it you use as a background behind a screen overlay UI.

Can you please provide script that resize gradient to screen width height?

Secondly
Is there any tutorial for animated gradients?

 

Sorry but I can't provide a script. It depends on your camera height and resolution and aspect ratio.

You can just use a Unity quad or cube or plane to put your gradient on, and cover the camera with it.

An animated gradient would just be you using a script to change material properties, or maybe a Unity animation curve if it's able to access them.

 

Hi,



I just purchased the unity3d gradient shader pack.



I have some 3d models that I want to render with their texture and a subtle gradient over the top of the texture.

But as you can see from the screen grab attached it’s not working. I can’t see any gradient colors ie blue , green and the existing texture colors are washed out to a red colour.



Any suggestions?



Thanks,

Lance

 

Hi. Try changing the UV scale. Normal range for a 'full gradient' is 0..1 ... if your uv coords are way bigger or smaller you might not recognize it as the gradient you expect.

 

That didn't work. I've tried all the settings I can think of but still can't get the effect I need.
Can I request a refund please.

 

Sorry you couldn't get it working. I'm fine with the refund, but I don't have that power. You had to contact the asset store sales team and request it.

 

Thanks much appreciated,
The refund policy is :
If the seller agrees to a refund, the seller then needs to contact support@unity3d.com with the order number and say that a refund has been agreed on.
The order number is :
OR302529038

 

Hmm ok didn't know that, I haven't actually had any refunds before. .... I've sent them an email with your order # giving permission. It might take then a few business days.

 

Hi,
Just checked with Unity3D team and they are missing your email.
Can you send it again please.

 

Done, I've sent them a fresh one. I did email the first time.

 

Hey there,

This looks like it works with geometry in the scene, but will it work with sprites?

 

Possibly not, mainly because Unity's sprites generate texture coordinates which do not necessarily range from 0..1, which would be necessary to show a proper gradient since the gradient is generated based on the texture coordinates. If you have a sprite on a sprite sheet with various other sprites, the tex coords will only cover a portion of the texture, so the coordinates will then be incorrect. The geometry has to have a regular range of tex coords, which is what Unity gives you when you use a quad or a cube or some other build-in object, except for sprites. A sprite is sort of just a quad with a texture on it and a shader, really... besides all the background sprite sheet stuff, so you can probably substitute the sprite for that.

 

Looks like the entire sheet is zero to one and the sprites are a normalized value between that.

Is it possible to use the normalized coordinate of the sprite and generate the gradient between those values?

 

For you to use this on a 'sprite', which means a texture image, I presume you want it to actually show the sprite's texture, right, but to also overlay a gradient on top of it? Or are you just trying to fill the sprite's geometry with gradient pixels?

So you're going to use the texture+gradient shader(s), which means they'll use UV1 (i believe) for the texture coordinates of the sprite image, and UV2 for generating the gradient. So, in that sense, you're in luck I guess... .BUT, the problem is, the sprite engine in Unity is NOT going to generate UV2 coordinates in your sprite's mesh data. At least not by default. I don't know if you can set those from a script? But normally a sprite is just a set of UV1's which have to be used to draw the sprite pixels in the proper place, and that can't be reused for the gradient generation part, or at least, it's not coded to in the shader code. You could modify the shader I guess to share the UV1 coords but then you would be pretty stuck - the gradient generated would be only 'part' of a gradient confined to the UV coord range of the sprite within the sprite sheet.

 

Hi @imaginaryhuman,

Your asset is almost what I wanted, but unfortunately it looks like none of the shaders are Unity-fog aware. AFAIK supporting fog is not a big change to the shaders, would you be up for enabling this functionality? I think it'd benefit your customers.

Otherwise I would suggest you at least mention this somewhere, so others know what they get themselves into.

 

I'd also ask if you would consider tagging color properties with [HDR]?

I don't usually just make feature requests, but it's my understanding that these are fairly small features to add that would benefit everyone, without breaking anything. For now I'm just hacking these features into the shaders I need, but more optimal for everyone if you wanted to take it upstream.

 

Hi @gaggle - the shaders do not support any kind of lighting or shadows or fog or HDR or normal mapping or parallax mapping or anything else other than what it specifically says it supports. It generates gradients and it renders them. Some of the shaders also combine the gradient with a texture. That's all. There's no other fancy features or advanced rendering features or support for other aspects of Unity's graphics pipeline.

Fog would presumably be used in 3D and this isn't really a package well-suited to 3D. It technically can be used in 3D but most people looking to render gradients are 2D folk. I have had nobody request this before... and I would have to modify over 100 shaders, so I'd prefer not to add it. If you are aware of how to modify the shader yourself to apply fog maybe you'd consider doing that yourself as a customization. Apologies for the confusion.

Also you asked about HDR, this is an advanced rendering feature, and again almost nobody is going to be using HDR with drawing gradients. The shader uses texture coordinates to generate gradient patterns and those would interpolate linearly so there'd be no tone mapping or whatever. It would be best suited to a customization that you make to the shader yourself. I just don't want to go through all the shader source code to add this, it takes a lot of time. Sorry to disappoint.

Are you making a 3D game where you're using gradients?

 

Hi @imaginaryhuman,

I understand, and of course you know your package and customers best.

I use gradients as the background of a scene where fog and HDR is used, and I think it looks nice after I add in the necessary changes. Thanks for making the package available.

 

Hi, I was just taking a look at this and saw a lot of comments and misinformation about the banding issue and wanted to spread some light. It's nothing to do with float/half precision etc. in the shader. For some people with extreme issues maybe that's something going on with their graphics card, but everyone will have banding with this current implementation. It's the fact that we all use 8 bit per channel displays, so while we may have (2^8)^3 colors we only have 256 levels of brightness. This leads to noticeable banding when we have subtle gradients, unless (and this is what the "Dither" tick box is doing when you create a gradient in Photoshop) we introduce noise- a small amount of random variation in each pixel. This breaks up the banding effect so it's no longer noticeable.

@gaggle If you could introduce dithering into these shaders it would be perfect.

 

You have a point, although what we experienced was that I did not see banding on my computer whereas someone else was seeing significant banding on theirs. I think that was a separate issue. Generally it should not be 'too' noticeable. It may have been their graphics card or perhaps more likely their monitor might not have had a very accurate color precision. Realtime dithering is a good idea, but I'd have to implement it into over 100 shaders.

 

Hi there,

I've been using this package for a while without any issues (thanks!).

But just recently, all the shaders have turned pink and on the shader script itself I get the following message:

Shader is not supported on this GPU (none of subshaders/fallbacks are suitable)

After investigating a bit, it seems what has fixed this is to remove Metal from the Graphics APIs (accessible under "Other settings" by un-checking Auto Graphics API). So I just have OpenGLES2 in my list Graphics API list.

Can you please confirm that this is correct - that these shaders aren't supported on Metal?

Thanks!

 

Thats frightining situation, I hope author update his asset to support new APIS

 

It seems from this blog post that Unity is supposed to convert the cg shader into Metal shader format.
https://blogs.unity3d.com/2014/07/03/metal-a-new-graphics-api-for-ios-8/

There is nothing particularly advanced going on in the shader, so it really shouldn't be breaking. I would think maybe this is a Unity bug due to early Metal support? I don't see why it wouldn't convert to Metal automatically and without issues.

Are you sure there isn't something else going on in your project to make the shaders go pink? Any error messages or anything?

"But what about shaders, since Metal has a different shading language?
We’ll take care of that. Right now you generally write shaders in Cg/HLSL, which we convert into GLSL for OpenGL ES behind the scenes. For Metal, we’ll convert them in a very similar way."

 

Hello, Has the pack any shader to do a Vertical infinite like galaxy animated or something like that?

Thanks!

 

A galaxy? No not really. It generates gradients, that's all. You could make a sky or horizon or make a 'ring' perhaps but not something made of individual dots.

 

That idea with a horizon and make a ring is a good approach. That with a pallete that can be changed in real time with a kind of "queue" of next colours can do the trick.

Do you think is possible with your pack?

Best regards