NEW - Gradient Shader Pack - realtime animatable gradient shaders!

I'm sorry as reading my post back, I see that my question is quite unclear.

I'm currently developing a space game which uses a simple trick in Unity which takes a 1*2048 grayscale texture and imports it as a cylindrical cubemap. This texture is then applied to a material using a Skybox shader which I tweak dynamically the Tint Color. It gets then added to the scene's Skybox giving me a nice gradient skybox that I can control to generate multiple space environments easily.

Still, this technique has its limits as it tends to create small bands that I could get rid of using something similar to your package if I understand well its feature set.

What I'd like to know then is: Can I use your gradient system to create a better gradient 3d skybox?

Thanks

 

The gradient shaders here generate gradients based on UV coordinates. The shaders have been optimized to use e.g. `half` precision floats for the uv's, which is better on mobile. But you can easily find/replace all instances of the term `half` with the term `float` in the shader code for maximum precision. Also you could replace all references to `fixed` with `float` for maximum quality, but that might not matter much. It already produces very smooth gradients but that would give the absolute smoothest accuracy so you shouldn't see any kind of banding or quantizing.

The shader though cannot be used on a skybox, at least not as a traditional cubemap. Since you'd be getting rid of the texture you're importing you can't generate a cubemap texture from the shader, to be able to put it onto the skybox of the scene. Instead you would need to e.g. create a large cube, or perhaps a sphere, surrounding the scene (child of the camera?) and then simply apply a gradient shader to it. That would work pretty much the same as a `skysphere` I would imagine.

The main benefit of a cubemap over a spheremap is that with texture-based sphere-mapping there is a great loss of detail near the horizon and other artifacts, which cubemapping somewhat solves. So when it's a matter of using a realtime-generated gradient shader, with `infinite` resolution (it's resolution independent), then there is no loss of accuracy when it's mapped onto a sphere, and so no benefit to putting it onto a cube. Putting it on a cube I think would add complications because it would distort improperly toward the cubes corners. So if you throw it onto a sphere it should look pretty good. Depends though on what the UV coords are on the sphere... standard spheres condense toward the poles, you'd be better with an isohedron or some other fancy evenly-spaced-triangle type of sphere that's been UV mapped properly... hmm... like maybe a cube that's been morphed/mapped into a sphere? Either way it will look very smooth with the gradient shader. You'd just make sure the sphere is very very large and its surface is behind all other visible objects/stars etc). I hope that helps.

I guess an alternative is to put the gradient shader on a big sphere, then use a cube-map generator to turn it into a set of textures... but then you're not only locked into the texture resolution but it also takes up tonnes of memory and file space. One of the major benefits of the Gradient shader pack is the gradient is created in realtime on the fly, within the shader, without any textures (except if you're using a palette or something which is not very expensive).

 

Thanks for your reply. It exactly answers my initial question. I may thus work on a isohedron or similar sphere mesh and use your shader pack to generate my game background.

Cheers

 

Sure, no problem.

 

Big thanks to everyone who supported the sale yesterday, I very much appreciate it.

 

Thanks again for this great product! Used it in my new free Android mini-game collection: Anachron's Arcade. There would be far fewer rainbows without this product.

 

Very nice and colorful! I like the arcade look of it too. Thanks for sharing!

 

So is the vertex gradient the same as Unity's vertex lit shader with the added feature of adding gradients? Is there a trial version or a screenshot of the vertex gradient?

 

Hey. If you are talking about the simple vertex color shader include in the pack, yes it is just using the vertex colors as normal. The hardware does the interpolation between vertices. If each vertex in the mesh has a different color set, it'll produce a gouraud-shaded/smooth-shaded triangle. If the colors are all the same, it will appear to be flat-shaded. There are no other gradient calculations done there.

If you use one of the other gradient shaders, then you need to pass it also some texture coordinates, which are used to position and generate/scale/rotate the gradient - without actually using a texture. There are also versions of gradients with a texture multiplied in.

I think you were also asking about using gradients with polyworld... I don't own it so I'm not sure if it uses just a big set of separate triangles, each with 3 vertex colors... if so, then the vertex shader will simply show you flat-shaded triangles (which is what gives it the polyworld look)... although you could also modify those vertex colors to add smooth-shaded gradients... the gradient will just be linear across the triangle.. no fancy circles or radials or anything. To use more advanced gradients on a polyworld mesh or any mesh you'll need to add some texture coordinates and adjust them.

 

If I have a texture in my material, is it possible to constrain the gradient to only draw over a certain color in the texture, or NOT on a certain color, like a mask? I can think of a few cool effects for this. It sounds simple, but I don't program shaders.

 

Currently no. All pixels in the texture are multiplied with all pixels in the gradient. However, here is a workaround...

Have one object with your texture on it, and where you want the gradient to appear, OR where you just want the object to have a variegated edge, have alpha values. .. ie give it transparency where you want the background to show through and where certain pixels should get gradients...

Then have a second object positioned behind it, same shape but using a white texture representing a `mask` where you want to draw gradient pixels, and apply the gradient shader to it (the one that includes a texture, using that white texture). That would then give gradient pixels of normal color when the alpha channel of the mask texture is solid (use alpha values there to cut out the original outline of the object). Then where the front image has transparency, gradient pixels from the back image will show through.

Something like that.. provided the gradient shader can use alpha blending.... I don't recall of the top of my head if there is one included... but I guess you can switch alphablending on pretty easily in a shader.

 

Thanks for the reply. I think I get what you are saying. It's not important I don't think, plus I realized there would be a lot of objects needing this, and may dramatically decrease the FPS. It was just a thought.

I just bought your asset anyways, as I think it would be cool for an animated menu background.

 

Ok cool, thank you.

 

HI I just bought your shader pack and I added Gradient-NoTexture-Vertical-TwoColors-SolidBlend.mat
to a NGUI UITexture

It works great in unity but on the mobile it does not work at all.

How can I get the material to work on mobile?

 

When you say mobile what device? It's odd because thats a very simple shader, and isn't even doing any blending with the backbuffer. Does your device support shader model 2 or 3, or better? It should just work if it works in the editor. I'm not sure what an NGUI UITexture is, though.. does it provide texture coordinate channel that is used by the shader to create the gradient?

 

I am testing on iphone5 and ipod touch 5th gen

I am not a graphics person so I dont really know what you are asking about shader and texture coordinate channels, etc

I attached a screenshot of the UITexture script from NGUI

Basically, I want to use it as a background and then I set the Anchor to fill the panel (screen)
And it adjusts to fill the screen (This is all done by NGUI)

I will do some more testing and see if I can get it to work on a blank project with just a cube.

 

Yes good idea, test it on just a default unity cube, it should work there... if it does work there and doesn't work with the NGUI thing, then there's some data which ngui must be failing to put into the mesh.

 

I just wanted to mention (brag?) ... Gradient Shader Pack continues to be my best-selling asset on the asset store. It kind of surprises me because in my opinion a couple of my other assets are more sophisticated, but I guess it's a matter of what people can use in their projects. So a big thank you to everyone for your ongoing support!

 

First off I want to let you know that I really like your gradient shader pack, I've been using it since day one in my latest project.

I've been converting my app to switch from using Meshrenderers with materials + textures applied to them over to Unity 4.6's sprite system. I noticed that you modified one of your shaders to work with Unity's SpriteRenderer component on the previous forum page, and I wanted to let you know that I appreciate you taking the time to do that.

I imagine that it would be a totally out of scope idea, but you might want to add a few shaders that are tested with the new SpriteRenderer component and add it to the description on the Unity asset store page.

EDIT:
I hate to ask you for a favor, but could you create a modified SpriteRenderer version of your Gradient/Single Texture/Vertical/Two Colors/Alpha Blend shader? It's the one I primarily use and it would be very convenient to have a SpriteRenderer alternative. Thank you in advance if you have the time to tackle this.

 

That example sprite shader I did, did it actually work? I did not test it.... it depends on Unity providing uv2 coordinates in the sprite's geometry... if those coordinates are not provided then you won't be able to use a gradient on a sprite.

 

Hi imaginaryhuman,

I just bought your package -- exactly what I was looking for, thanks! Am enjoying exploring the different options for gradient awesomeness.

Just a quick note/question: when attempting to load a material in code (C#) using Resources.Load, the material doesn't load properly. So I thought "Hmm, I wonder if it's those hyphens ". I removed the hyphens from the folder names and material names and then they loaded up successfully.

Code (CSharp):

1. Material background;
2. background = Resources.Load ("Materials/Gradients/NoTextureGradient/Box3/GradientNoTextureBox3SolidBlend") as Material;

That code works, but when there are hyphens in the folder or material names, it doesn't.

Is this a bug or am I missing some special way that assets with hyphens in the names should be loaded. I Googled a bit but nothing stood out.

Great package, looking forward to seeing it in game.
Cheers!

 

Odd. I would call that a bug, unless there's some trickery like 'escaping' special characters in the string or something?

 

Yeah probably. Anyway after I posted that message it occurred to me if it's a bug, it's not with your package.. you're just naming shaders and files, so, I will repost question to Unity themselves perhaps!

 

Correct ;-)

 

Hi,

is lighting supported by your shaders? Can I create a surface that has a gradient going from a solid color to transparency and that also reacts on different light sources?

 

Unfortunately no, these are simple cg shaders, not surface shaders, with no lighting or shadows. You can go from solid to transparent but you can't add light to it.

 

Hi, I purchased the shader pack, and I'm trying to work out how to get a simple two-colour gradient material that works with a sprite. The documentation says "Apply a gradient over your sprite to animate a tint, pulsate, flash, flicker, etc.", so I'm presuming I can do it. But when I add one of the vertical shaders to a sprite, I'm not getting a gradient. If I adjust the UV Y offset the sprite alternates between each colour, but there's not a real gradient in between. Have tried playing with the scale, but it's not helping.

Not sure how clear that is, sorry! But basically, if you add a simple white image to your scene as a sprite and try to add one of the shaders you should see what I mean. (I've been using the Single Texture/Vertical/Two Colour/Solid Blend, as that respects the alpha of my sprite).

Is it something to do with UV coordinates on sprites? Do I need to edit the code? Can you help me get it to work?

Thanks!

 

UV-related yes.... to show a texture on a `sprite`, you have one set of uv coords. This maps to the sprite image. Then in order to show a gradient on the output as well, the gradient has to have a set of uv coords which the shader can use to determine a) where is the center of the gradient, b) where is the bottom of it, c) where is the top of it, and then it can interpolate the color. So if the geometry does not have a second set of uv coordinates on each vertex, then the gradient wont be able to be generated.

Unity sprites only have 1 set of uv coordinates at each vertex, because the default sprite shader does not have a need for another set.

In the gradient shader pack documentation when it says `sprite`, it refers to the concept of a sprite, and not exactly to `unity sprite`... because e.g. you can make a `sprite` from a quad or a cube with a texture on it, as in the pre-unity2d days. A sprite is a small object that moves around. So, sorry about the confusion in terms of the meaning or wording of that.

I don't think you can do texture + gradient on a unity sprite, because of the lack of uv coordinates, unless you can somehow tap into the mesh data for the sprite and add another set of uv's.

 

Ok thanks for the quick response and for clearing that up. It's a shame it can't be done.

 

Yah its a pity. I could easily make a 'sprite shader', but without the uv's being supplied by the geometry it won't work.

 

Hi. I purchased the shader pack and would like to say thank you for your great work!
I have a small problem and hope you could help me. In my application I want to show a very long gradient (about 100 colors), so I use two planes tiling them one-by-one. They have the same color on the adjoining edges but generally it doesn't look as smooth as it should be (you can see that in the attached image). It catches the eye on mobile devices.
Is it possible to solve that problem?

 

I think what you are seeing is actually correct. You have a peak of brightness at both the top and bottom of the gradient. You have bright yellow at the top and bright white at the bottom. That means there will be a kind of 'bar' of brighter pixels all the way down that edge. I think maybe its kind of the peripheral vision that picks up on the brightness change versus the color change. I bet if you make the bottom middle corners be not as bright, the appearance of that strip will disappear or diminish.

As an alternative, try a single quad with a 'box 6' gradient. I think thought the underlying math of the color interpolation will be about the same, but you can see if it looks any different. The box 6 is a little slower than other the simpler gradients, but you may not notice.

 

hello
i have a couple questions :
Does it work with unity 5 ? Any web demos for the package ?

thank you

 

It does work with Unity 5. They are basic cg shaders, nothing too complex that would likely break.

There is a basic demo here: http://www.venus12.com/UnityFiles/GradientShaderPack/Demo/GradientDemo.html

I could do with making a more comprehensive demo showing all fo the gradients I guess.

 

thanks for the answer

"I could do with making a more comprehensive demo showing all the gradients I guess."
i was thinking more about differents examples of gradient in action, to show what the asset is capable of ...

 

Maybe at some point. They are gradients.. I mean... a gradient is a gradient. The screenshots show most of what they can do, except for being able to animate some of the values if you adjust them from a script.

 

I am using the Angular/Two-Color gradient shader with the Unity UI for a particular column list of buttons. Everything was working as expected until I started to use a ScrollRect and Mask for the list of buttons. I get the following warning in the console:

Material Gradient/No Texture/Angular/Two Colors/Inverted UV/Alpha Blend doesn't have stencil properties
UnityEngine.UI.ScrollRect:LateUpdate()

Below is a sample of what the output is.



The intention is for the teal gradient to be clipped just as the text to the next of it is. Are you aware of any issues using your shaders with the Unity UI? Any thoughts on how I might fix this?

 

You need to enable stencil testing in the shader. They are not designed for this, but you can figure out how to modify the shader code to make it only output where the stencil is set.

 

This could be so useful. Good work

 

I know little to nothing about writing shaders. Can you point me to your recommended resource for me to study to implement this?

 

I don't actually know how to do this either... look at the unity documentation for shaderlab, it should describe how to use stencils in the shader.

 

Thanks ... this was released a couple of years ago btw.

 

I saw as I read the thread! I'm guessing it didnt catch my eye during store browsing, but then again i might not have been in the right frame of mind. I'm currently modifying pbr shaders for additional npr effects and i think some frankenshader results with this added would be great too (as i think ive mentioned somewhere, im on a Sparth kick atm) so i'll probably pick it up when i have the funds

 

Hi! I purchased the pack and it has been tremendously useful for a beginner like myself.

I've managed to make a simple time of day loop using a couple of horizontal gradients and changing them one after another using Material.Lerp after a specific duration.

However I noticed that Material.Lerp doesn't work for texture and paletted gradients? As a result I'm only able to lerp "color" gradients, rather than a more customized multi-color choice if I used a texture.

Am I doing something wrong or is there some better way to blend from one material to another? Ultimately I was hoping I could create more dynamic animations by lerping "palette row animated" materials. Is that even possible?

 

http://docs.unity3d.com/ScriptReference/Material.Lerp.html

Does the docs help?

It says it lerps color and float values... not sure why it would not find and modify them, except maybe the presence of the texture may be interfering?

For palettes you can just upload a modified palette texture at runtime. you can thus write to the palette in your script with setpixels() and apply() etc.

 

Is this assets work with unity UGUI?

 

To a degree yes... but others have reported it won't support stencils. It was designed way before Unity GUI came along. If you need to stencil something you probably have to create a piece of geometry/triangles that covers just the area you want to have the gradient, so that it will clip inside the shape.

 

Hi,

Thanks for your gradient shader pack.

But I have a little issue about the UV scales and offsets.

My gradients are fixed, ie. I never change the UV value and scale value.

But when I compiled on mobile, the « black » who is in the top left of my circle on my editor, is on the bottom left.

What can I do to have really a fixed point , who will never move.

Thanks a lot for your help.

(all the details on the files attached)

Best regards,

AB

(I sent it by mail too, but maybe another persons who should be interested y the answer)

 

Well the shader is just a shader and all its doing basically is `outputting` the UV coordinates, in the form of a color. So nothing should ever change. The only way your output can be different is if, on mobile, the uv coordinates are not the same, or the object is flipped or the camera is flipped or something. You'd probably have to look into whether UV coords might be different on mobile or something. I can't see any reason for this.

 

Thanks for your quick answer.

In fact in mobile it's a different position, but always the same. I found the values, so it's ok.

Thanks !

But if I have 50 sprite with the same material/shader, and I just want to anim the color, I have +1 draw calls everytime.

Any tips for this ?

Thanks for your precious help!

Edit :

I have another issue : I have some artifacts when I move a sprite with your shaders on a camera without skybox (depth only or don't clear). please see the image attached.

Thanks again!