NEW - Gradient Shader Pack - realtime animatable gradient shaders!

Gradient Shader Pack
Realtime rendering of dynamic adjustable gradients

20% OFF, now just $20!
-> Buy now, only $20 at the Unity Asset Store! <-

See the Animated Web Player
or Read the Manual​

Features​

​

Angular Gradients​

​

Box3 Gradients​

​
​

Benefits​

​

 

Box4 Gradients​

​

Diamond Gradients​

​

Horizontal Gradients​

​

Radial Gradients​

​

Vertical Gradients​

​

 

Bonus Shaders - Gouraud Gradients​

​

Bonus Sky Palettes​

​

Example Realtime Box3 Gradient​

​

Example Realtime Palleted Box4 Gradient​

​

Tips and Ideas

Beautiful gradients can be used in a variety of projects and in a variety of ways. Whether you need dynamically adjustable color or just a simple clean background, a gradient can fit the purpose. Here are some further ideas, tips and benefits of using gradient shaders in your projects.

* Apply gradients to 3D objects, not just flat planes - provided you have some relevant UV coordinates the gradient will apply across the object and still be adjustable.

* Set up a mesh object that has carefully crafted UV coordinates to accomplish something along the lines of a `gradient mesh` effect. Highly complex gradients can be greated this way but it does take some effort.

* Layer multiple gradients using the alpha-blended versions - if you can't get the detail you want from a single gradient, just use several of them on top of each other and move them around individually in the scene view to get the effect you want.

* Combine a texture with a gradient - sometimes you just have to resort to using a texture, it could even be a texture containing an image of a gradient you created in some other app. Bring it in and combine it with a realtime adjustable gradient to bring it to life.

* Create beautiful backgrounds for your projects quickly and easily. You'll save significant texture storage space by allowing the gradients to be calculated in realtime - great for mobile devices, minimizing load times, maximizing download speeds from the web, etc. Also since the gradients are not texture-based, they are perfect quality at any resolution without jaggies/aliasing problems.

* Add gradient backgrounds to your plain old menu screens and create a warm fuzzy glow for your users.

* Apply gradients to flat, boring buttons and other GUI elements to give them that extra subtlety that says `quality polish`.

* Use gradients in your game environment as a beautiful dynamic sky. Use one of the included sky palettes to instantly fill the sky with a lovely sunset or clear blue. It will be faster than using a skybox, and save a tonne of texture memory.

* Use gradients for the background in 2D games - you know, that flat monotone background you have - bring it to life with a nice color transition. Even animate and adjust it in-game to simulate different times of the day, to match weather conditions, or create added mood.

* Animate your gradients to give your apps an added touch of subtlety and engagement - something moving on the screen that isn't too imposing helps to keep eyes focussed on and excited about your app, plus smooth gradients are soothing to the eye.

* Create an animated transition or spotlight by using a moving/adjusting gradient to wipe across a texture. Perhaps render your game screen to a texture and use this in combination with an animated gradient to smoothly wipe in/out to/from another screen, or to show/hide a menu.

* Apply gradients to your texture images to re-color them in-game, re-using your resources and minimizing texture overhead. Why make the user see the same image in the background on every level - jazz it up with a splash of color that changes as the game progresses.

* Use an animated gradient on an in-game 3D object to represent a reveal, action or transition between states, or perhaps just to make it look cool.

* Overlay semi-transparent gradients on top of your screen and move the meshes around to animate them as a screen-wipe effect.

* Use a vertical gradient to create a semi-transparent fog effect.

* Use an angular gradient and animate its angle of rotation to simulate a radar scanner

* Render a gradient to a RenderTexture, or grab from the backbuffer, then use that texture as input to a second gradient shader to mix things up while animating both separately.

* Apply gradients to a 3D mesh so `undulate` the gradient shape as you animate it, or to modify its shape in general. Although the gradient is applied to texture coordinates, the shape of the geometry does not have to be rectangular - the gradient will wrap to the surface.

* Take a slice from a photograph to use as a palette texture. This could be a slice of sky gradient, a sunset, or some other pattern. You could also take a slice from a 3D sphere, for example, and use it with the radial gradient to produce a fake 3D effect. Try it with other `contours` too!

* Add a bevel to the edge of your gradient by simply applying bevel shading to one end of your palette texture. This small cross-section of a bevel will spread across the gradient.

* Use graphics software to smooth out the sky gradients if you find them to show too many `lines` across the image - these lines mainly come from small artefacts in the photographs they were taken from.

* Design a gradient in your favorite graphics software and use it to draw a filled rectangle there. Then take a slice from that gradient to make a palette texture. Then use the paletted texture to re-create the same gradient in your realtime shader.

* Apply fake lighting effects by using carefully-adjusted gradients and colors.

* Use a radial gradient with alpha blending and a gradual alpha falloff for a nice vignette or spotlight

* Create a game that renders everything entirely using gradient shaders!

* Animate a vertical bar gradient across the inside of text geometry to show a moving glint of light sheen.

* Use vertical or horizontal gradients with solid-blend for the fastest possible realtime backgrounds, still adjustabale!

* Position an alphablended radial gradient on the horizon, color it to represent the sun, then rise and set it over time with color adjustments to create a beautiful sunrise and sunset. Alphablend it over a background gradient for added mood and color.

* Apply a gradient over your sprite to animate a tint, pulsate, flash, flicker, etc.

* Use a funky color palette with the angular gradient, centered on the screen, then rotate it for a cool disco effect.

* Replace your gradient textures with realtime gradients to save lots of texture memory and improve loading times.

* Choose an interesting background, then re-color it with different gradients as part of a kiosk app or presentation.

* Create a circular mesh and apply the radial gradient to give it a fake highlight looking like a sphere.

* Create a polygon mesh representing a hilly background, then color it with lovely undulating gradients.
​

20% OFF, Now only $20!
-> Buy now, only $20 at the Unity Asset Store <-

​

 

Animation

All gradient shaders generate beautifully smooth color in realtime. Every frame, the shader begins from scratch to generate a completely new gradient. This means all gradients are fully dynamic during development and at runtime.

The built-in material inspector provides dynamic controls for real-time adjustment. Most gradient shaders include adjustments for center coordinates, horizontal and vertical scaling, angle, color and/or textures.

Playing with the material properties is fun and easy, providing instant feedback. You'll see the gradient move and change instantly. The highly optimized mobile-friendly shaders are fast and responsive.

By using a gradient material with geometry in your scene view, adjusting the material parameters provides instant production-quality WYSIWYG feedback. The same quality and adjustability carries through to run-time where you can modify the shader properties at will.

Couple these gradient shaders with the Unity animation editor, custom scripting, third-party visual scripting tools or third-party animation tools for ultimate animation flexibility.

The gradients are calculated and rendered entirely within the shader, including position, scale, angle etc, meaning you can easily apply them to any geometry and animate them in realtime within your game or application.

Works with any mesh where UV coordinates are provided.

​

 

Seems really useful, well done.
EDIT
Very well commented shaders, fast too, nice work.

 

Thanks for being the first to purchase! Greatly appreciated. Let me know if you have any suggestions for additional features. I'm planning some more sophisticated gradients and more animation features.

 

Hey, is there a demo I can check out before buying? This is what I've been looking for.

 

Hi VectorNector.. I've sent you a response to your email with an attachment.... give it a try, if you like it, go ahead and buy it on the asset store.

Thanks

 

Hi,
I bought this and am testing now.
There are a few issues with it though:
On import some of the example prefabs don't work, they are missing all the shader assignments.
Other prefabs, like all the sunsets and tiger ones, just show pink.

Also the example has the prefab and camera at the same z value, so you can't see it.

Could you please fix the package or post a list of what shaders go with what prefabs.
Hunting through the shaders to find the right one is a little time consuming.

Also some better examples would be nice in the package as well.

ty!

 

You're right, my apologies for these issues. Like you said it seems many of the prefab's materials lost touch with what shader they were using, including the one in the demo scene. I have fixed this. I also fixed the camera position, sorry about that - it should show the gradient when you hit Play now. I've resubmitted the changes to the asset store, should only take a few days at most to show up version 1.1

Meanwhile these are the assignments for each prefab

Background: Gradient > Palette > Box4 > SolidBlend
Background2: Gradient > Palette > Box3 > SolidBlend
Background3: Gradient > Palette > Box4 > SolidBlend
Sunset: Gradient > Palette > Vertical > SolidBlend
Sunset2: Gradient > Palette > Vertical > SolidBlend
Sunset3: Gradient > Palette > Vertical > SolidBlend

For me, the tiger prefabs looked fine.

I agree the prefabs are very basic examples, and I hear what you're saying about the lack of a more exciting demo. Most of the functionality you can play around with by modifying the materials at the moment. I am working on some new additional features and will put together a more interesting demo scene.

Thanks for your valuable feedback!

 

v1.1 should be on the asset store hopefully early next week... I think the 4th July in the USA has delayed it a little. I'm still trying to come up with a good idea for a demo showing off the gradients, short of just a bunch of rectangles flying around.

 

Just do something simple that demonstrates each type and actually shows off all the features you list: animation etc.

 

Version 1.1 with fixes is now available on the asset store. I am working on version 2 which will include 28 new shaders, some new gradient types, and some better examples... hopefully available within the next several days.

[edit] Just submitted version 2 to the asset store [/edit]

 

I identified a problem with Unity 4.1.5 which was producing a pink `error` output for many of the shaders. A certain combination of shader instructions produces a GLSL error in that version of Unity which doesn't occur in earlier versions. Whether it's a bug or not I'm not sure. But I did find a workaround and have modified all affected shaders. I've resubmitted version 2 as version 2.1, including all the new features + the fix. It should be available on the asset store in the next few days.

 

Ah, glad you found it. Was about to report it was still there in the latest update;-)

Some examples of what you mean by gradient animation would be great too ty!
I tried just modifying some of the editor values but it does not appear to be seamless tiling?

 

Ahh. You are correct, it is not seamless tiling, except in a few special cases. The Palette Gradients could be considered seamless because they pull from a fixed-width palette texture, so if you offset the palette it does wrap around seamlessly. The same is true of the new Multi Palette gradients which basically pull from a 2D texture - each row is a palette, and you can select which row to use. So those can wrap around provided the palette itself transitions well at the edges. The rest though cannot tile seamlessly. For example if you make a radial gradient you want to be able to offset it, scale it, etc... so then it would go outside the edges of your geometry.

There is one trick you could try.. say you adjust your gradient how you want it within a square.. like in the square images above.. .this could be drawn on a cube or a plane for example.. Then to tile it, you just need to add more cubes/planes, or if you want to get a bit more advanced, generate procedural geometry containing some quads, and then just set the texture coordinates how you want them. This would give you a repeated grid where each cell contains your gradient. You could still do animation but it would be confined within each cell. Is that what you're after?

I did add 3 new demos in the new version, they're still a bit basic but they are all animated. One is Palette based, one is Multi-Palette based, and the other shows how to apply multiple layers of different types of gradient on top of each other using alpha blending.

 

Version 2.1 is now live on the asset store!

 

In Version 2.1 there is a new demo showing multiple layered gradients. What this shows is that using alpha-blending you can simply layer multiple gradients on top of each other. So if you're trying to get a particular result and finding maybe there isn't enough control, or you need different shapes in the same gradient, or you want to animate one aspect of the gradient separately from another, then simply applying more than one gradient can solve this. For example you can have a simple vertical gradient and then overlay a radial gradient on top. There is not really any limit to how many layers you can have, fill-rate permitting. You can do this quite easily using a Unity Plane or Cube for each layer and just positioning them in the scene in Z order. The layered demo shows 4 unique gradients being combined together in realtime.

 

hi
i was wondering looking at your asset if you could produce this kind of speed effect, like shown i this video
https://www.youtube.com/watch?v=0o5vXFHTj_Y

having beautiful gradiant is one thing what if we could combine them with some noise, grungy effect, that could give some interesting effect combining all that.

my 2 cents

i m always impressed by your work

 

Neat effect. Yes I believe you can do this! And thanks for the compliment!

Gradient Shader Pack has a set of Palette driven shaders. Originally these just let you sample one or two palette rows to build a gradient. But in the latest version you also now have Multi Palette gradients (and possibly two of them, as in the case of some of the Box gradients). What this means is, a palette can be two-dimensional, representing frames of animation of the palette itself. Couple this with a simple horizontal gradient and you've pretty much got the effect you showed. All you have to do then is a) design your palette animation texture, and b) animate which palette row is being used from a simple script .. basically just increase the value over the course of time.

You can even go further than the effect you showed and give either side of the effect its own palette, but I think that would probably give you different results than the effect you showed. Something else you can try too is using the same palette for both left and right sides, but offset which row you use on the right side by a few rows (and increment both over time), which will make a bit more of a gradual transition from left to right giving you more of a sense of sideways movement/speed rather than just zapping lines, which might look even better.

Designing your palette anim texture will be most of the work and may take a bit of experimenting. Maybe just an image with some colored circles on it will give something close to the effect you want - as a row is pulled in that has the top of a circle on it it'll start out as a small dot then grow wider and then narrow again as it vanishes. Also try applying some image processing functions, like distortions, to your palette image, to vary its animation effect.

You can also add perspective easily by just applying your gradient to a plane or cube and then rotating it, or the camera. It'll be perfect quality no matter how much you rotate or how high your resolution is, and the graphics hardware will take care of rendering it in 3D.

 

Forgot to say that yes you could easily alphablend, or multiply perhaps, a layer of dirt or grit or other texture on top of your gradient to make it have a different feel. Just add another plane/cube/quad on top of the gradient object with a blended shader.

 

Added a simple 9-color box gradient demo scene and reduced the price to $20. .. should be on the asset store by midweek.



Ahh, unlimited resolution beautiful color gradients, we love you.

 

Gradient Shader Pack is now on sale, 20% off.... down to just $20. Get it while it's hot!
https://www.assetstore.unity3d.com/#/content/9403

 

Is there a web player demo available? I would like to see what this actually looks like at run time. Maybe simply the walls of a cubed room, with various objects inside. I'm curious to see what the animated gradients look like. Could you rotate the gradient at run time? Tileable gradients?

Interesting shader pack. Now to think of places where I can use this!

 

Hi. There isn't a webplayer at present. Basically though the gradients are calculated entirely in realtime, at runtime, every frame, and since they are not based on any texture they are completely resolution independent. So you can cover as large or as small an area as you like and it will look perfect quality, totally smooth blending. The image above for example shows how smooth it looks (minus the jpeg compression). Yes you can adjust the gradients every frame... stuff like center offset, scale in X and Y separately, rotation, etc. Also the ones based on palettes you can have a palette offset and your palette can be any-sized palette texture. You can also use 2D palettes where you show a different row from the texture each frame to animate through palettes - how you set that up is up to you.

If you PM me your email address I'll send you the pack to try.

 

I am quite interested. But is there a manual we can have a look? How do you animate it?
Would be nice if you can make it easier (Inspector widget?) to animate the shaders.

 

Hey.

Well basically these are all shaders, so you set up a material and then choose the shader for it. Then as you're looking at the material inspector you'll get various adjustments for choosing colors, adjusting scale, center, rotation, palette etc.. kind of like this:



As you tweak it you'll see the results in realtime on the Unity mesh objects. Similarly if you actually apply the material to an object in your scene, you can have the scene/game view open and while you make adjustments in the material the mesh will be updated in realtime, WYSIWYG-fashion.

Animation is accomplished either though scripting, some kind of third party programming thingy, or Unity animation curves. Since you're basically dealing with a material, you can animate any of the parameters quite easily.

Here is a webplayer showing an animated gradient - this is based on a box-style gradient so there are actually two separate animated palettes at once. In this example I'm basically just incrementing which row of the 2D palette textures is being used to lookup the palettes, then the two palettes are blended together. The kind of effect you get really depends on your design of the palette and how it changes, or how you decide to modify the material parameters over time. Also in this demo I'm basically just offsetting the top and bottom edge's positions over time. I used Unity animation curves only. http://www.venus12.com/UnityFiles/GradientShaderPack/Demo/GradientDemo.html

Here is the manual.. http://www.venus12.com/UnityFiles/GradientShaderPack/Readme.txt

Code (csharp):

1.  
2. /*
3. Gradient Shader Pack - Copyright (c) 2013 Paul West/Venus12 LLC
4.  
5.  
6. Version 2.1
7.  
8.  
9.  
10.  
11. THANK YOU
12.  
13.  
14. Thank you for purchasing this shader package - you've made my day! Take your time to play with it, but
15. please take a moment when you're ready to return to the Unity asset store and add a short Review on
16. the product page - taking just a couple of minutes to help with this will be greatly appreciated!
17. Your review will help others make informed decisions and help to support me in the development of
18. quality assets for Unity!
19.  
20.  
21.  
22.  
23. WELCOME
24.  
25.  
26. Welcome to the Gradient Shader Pack for Unity! All shaders here are compatible with Shader Model 2.0,
27. Unity 3.5 or higher, and both Unity `Free` and Pro. They should work on all platforms where fragment shaders
28. are supported. This pack includes over 110 shaders which have been hand-written and optmized for maximum
29. performance on mobile and desktop. A material for each shader has been included for your convenience.
30.  
31.  
32.  
33.  
34. USAGE
35.  
36.  
37. Simply apply a material to your model as you would normally and tweak the adjustments. The shaders can
38. be applied to standard Unity prefabs such as the Plane or Cube etc, and there's nothing to stop you
39. applying them to 3D objects. All of the gradient shaders work based on UV coordinates, so your model
40. will need to provide appropriate UV's. Typically they only need to range from 0..1 for the gradient to
41. appear correctly, however the center of the gradients are at 0.0 so you may prefer to map a -1 to +1
42. range. Even if you use a 0..1 range, each shader includes the ability to position the center of the
43. gradient where you want it. Typically -0.5,-0.5 places it in the center of Unity's built-in objects,
44. and you can apply scaling to make it fit.
45.  
46.  
47. Provided are versions with `Solid Blend`, which means no blending with the existing background - these are
48. the fastest. Also provided are `Alpha Blended` versions which blend with the background based on alpha values,
49. either in the colors you specify or in the textures you use. Alpha values in `Paletted` gradients also work,
50. provided you use it with an alpha-blending shader. Also provided in some cases are inverted-UV versions
51. of the shaders, which map the gradient in the opposite direction, or inside out. This allows you to
52. flip the gradient or simply reverse which colors it begins and ends with to suit your needs.
53.  
54.  
55. Most gradients are provided with support for a single color (which fades to transparent) or two colors.
56. Alternatively a palette texture (or in some cases two) can be applied which will span part of the gradient.
57. The palette textures will have their UV coordinates computed in the shader across a 0..1 range, and the
58. texture can be any horizontal size e.g. 2048 x 1, or 256 x 1, preferably a power-of-2 for speed. Versions
59. which work with a diffuse texture can accept any kind of texture that contains RGB pixels of some kind
60. (ie not Apha8) and will work with compressed formats/mipmaps/filtering etc.
61.  
62.  
63. NEW IN VERSION 2
64.  
65.  
66. In Version 2 I have added some extra flexibility, and 28 new shaders.
67.  
68.  
69. For the No-Texture Gradient, Palette Gradient and Single-Texture Gradient: Box4, Diamond and Radial now have
70. an `Offset` adjustment which allows you to animate/adjust color offset from the center of the gradient.
71. For example you can now offset the palette from the center of a radial gradient. Essentially this allows the
72. gradients to be cycled in a way that wasn't possible before.
73.  
74.  
75. For the No-Texture Gradient and Single-Texture Gradient: I have added Box6 and Box9 as new gradient types.
76. Box6 is similar to Box4 except it also has a middle color on the bottom and top edges. The bottom edge
77. can also be offset by a given amount. Box9 is again similar but this time allows you to define color
78. on a 3x3 grid for extra control.
79.  
80.  
81. I've added a new set of gradients - Multi-Palette Gradient. These work the same as the Palette Gradient
82. except that you're allowed to use a 2D gradient texture. This means every row in the texture is a unique
83. gradient. Added adjustments allow you to animate/adjust which palette row is used. Careful preparation of
84. a 2D palette texture (which can be any size) coupled with animation of the Palette Row controls allows you
85. to animate the palette over time in a whole new way. UV coords range from 0..1 vertically.
86.  
87.  
88.  
89.  
90. HORIZONTAL and VERTICAL
91.  
92.  
93. The simplest and fastest gradients are horizontal or vertical, especially with solid blend. These simply
94. map to the normal 0..1 range of the UV channel. The vertical shader transitions color across the vertical
95. UV coordinate (V), and the horizontal shader transitions color across the horizontal UV coordinate (U).
96. As with most of the shaders, the center of the gradient can be adjusted, along with the scale of the
97. gradient and its angle (which rotates around the center). The horizontal and vertical shaders repeat
98. their gradient in the opposite direction in the negative UV coordinate spaces, providing a two-sided
99. `bar-style` gradient if desired. Textured versions allow you to render this on top of a diffuse texture
100. with a `multiply` blend. Paletted versions pull from a horizontal palette texture which is mapped across the
101. width or height of the gradient and repeated across the other dimension. The palette texture can be any
102. size, preferably a power of 2 for speed, and will be read using procedurally-generated UV coords in the
103. 0..1 range. Only the first row of the palette will be accessed. The palette might be e.g. 2048 x 1. Also
104. as of Version 2 you can now use a multi-row palette which can be any size and the Palette Row can be
105. animated.
106.  
107.  
108. DIAMOND
109.  
110.  
111. The diamond gradient produdes a diagonal gradient across the 0..1 UV space, but also mirrors that shape
112. across the other four quadrants. Around its center, which is adjustable and centered on 0,0, it renders
113. a diamond gradient. The horizontal and vertical scales can be adjusted independently allowing you to
114. stretch the shape, and the angle can also be adjusted. Textured versions also multiply with a diffuse
115. texture, while paletted versions pull from a horizontal palette texture of any size, preferably power-of-2
116. for speed. The diamond gradients are almost as fast as the horizontal and vertical. As of Version 2 you
117. can now adjust the offset of color from the center of the diamond for extra animation capabilities.  Also
118. as of Version 2 you can now use a multi-row palette which can be any size and the Palette Row can be
119. animated.
120.  
121.  
122. BOX3
123.  
124.  
125. The `box3` gradients basically fill a box area covering UV coordinates 0..1. It treats two adjacent corners
126. as though they have their own colors, and then maps a third color to the opposite edge. The colors blend
127. smoothly across the `box`. This effect is offset from the center 0,0 coordinates, so if you move the center
128. you will actually see up to 4 mirrored boxes. The box can be scaled independently in horizontal and
129. vertical directions for stretching, and also rotated to any angle. Textured versions will multiply with
130. a diffuse texture. The paletted version will replace the two adjacent corner colors with a spread pulled
131. from a horizontal palette texture of any size, preferably power-of-2 for speed. The third color will then
132. remain spanning the opposite edge, allowing you to combine a palette with a faded tint on one side. As of
133. Version 2, the bottom row of the box can be offset from the top. Also as of Version 2 you can now use a
134. multi-row palette which can be any size and the Palette Row can be animated.
135.  
136.  
137. BOX4
138.  
139.  
140. The `box4` gradient is similar to the box3 gradient, except that unique colors are assigned to all four
141. corners of the box area, spanning UV coords 0..1. Again the box is mirrored across UV axis. This allows
142. you to assign 4 unique colors, somewhat imitating the effects of normal `vertex color` gradients. However,
143. the box can also have its center repositioned, can scale independently in both dimensions for stretching,
144. and can be rotated to any angle, all within the shader. The textured versions allows the gradient to
145. multiply with a diffuse texture. The paletted version actually applies two separate horizontal palette
146. textures. Both palettes will be read using a 0..1 UV range and can be any size, but only the first row is
147. accessed and ideally should be a power-of-2 for speed. In paletted mode, the box4 gradient maps one palette
148. to one edge of the box and the other to the opposite edge, then smoothly transitions between them. This
149. allows you to blend to a different pattern on opposite sides of the geometry, creating a pleasant effect.
150. As of Version 2 you can offset the bottom row of the box. Also as of Version 2 you can now use two multi-row
151. palettes which can be any size and the Palette Rows can be animated individually.
152.  
153.  
154. BOX6
155.  
156.  
157. New in Version 2, the `box6` gradient is similar to the box4 gradient, except that unique colors are
158. assigned to all four corners of the box area, spanning UV coords 0..1, plus a unique color is assigned to
159. the middle of the top row and the middle of the bottom row. Again the box is mirrored across UV axis. This
160. allows you to assign 6 unique colors. The box can also have its center repositioned, can scale independently
161. in both dimensions for stretching, and can be rotated to any angle, all within the shader. The textured
162. versions allows the gradient to multiply with a diffuse texture. Box6 gradients do not currently support
163. Palettes. You can, however, offset the bottom row of the box.
164.  
165.  
166. BOX6
167.  
168.  
169. New in Version 2, the `box9` gradient is similar to the box6 gradient, except that unique colors are
170. assigned on a 3x3 grid, spanning UV coords 0..1. Each corner receives its own color, the middle of each
171. side receives its own color, and the center receives its own color. Again the box is mirrored across UV axis.
172. This allows you to assign 9 unique colors. The box can also have its center repositioned, can scale
173. independently in both dimensions for stretching, and can be rotated to any angle, all within the shader.
174. The textured versions allows the gradient to multiply with a diffuse texture. Box9 gradients do not
175. currently support Palettes. You can, however, offset the bottom row of the box and the middle row of the
176. box independently.
177.  
178.  
179. ANGULAR
180.  
181.  
182. The angular gradients distribute color around a central point like a flattened cone. The full cone covers
183. a 1 to -1 UV range so you may want to reposition its center (normally at 0,0). It creates the effet of rays
184. of color emenating outward from the center. The position of the center of the gradient can be adjusted along
185. with the angle of the effect, since it has to begin and end at a given angle. The textured version allows
186. the gradient to be multiplied with a diffuse texture. The paletted version maps a horizontal palette texture
187. of any size, preferably a power-of-2 for speed, around the circle, allowing you to color individual `rays`
188. of color. The palette also allows you to make your palette `wrap around` smoothly so that there is no seam.
189. The angular shader is a little slower than the other gradients due to the math involved. Also
190. as of Version 2 you can now use a multi-row palette which can be any size and the Palette Row can be
191. animated.
192.  
193.  
194. RADIAL
195.  
196.  
197. The radial gradients radiate color out from the center in concentric circles, covering a 1 to -1 UV range,
198. so you may wish to reposition the center (normally at 0,0). The horizontal and vertical size of the radial
199. circles can be adjusted independently, allowing you to stretch the shape to produce ellipses. Radial gradients
200. do not have an adjustable angle. The textured version allows the gradient to combine with a diffuse texture.
201. The paletted version allows you to map a horizontal palette texture of any size, preferably a power-of-2 for
202. speed, onto the radial circles producing independently colored bands. This can be an easy way to, for example,
203. render a `sun` with a curved sunset around it. The radial shader is also a little slower than the other
204. gradients due to the math involved. As of version 2 you can now adjust the offset of the palette color
205. from the center of the radial effect. Also as of Version 2 you can now use a multi-row palette which can be
206. any size and the Palette Row can be animated.
207.  
208.  
209.  
210.  
211. ANIMATION
212.  
213.  
214. The gradient shaders compute and render beautiful colorful gradients in realtime. The gradients are
215. generated on the GPU (Graphics Processing Unit) in hardware. This means there is in most cases, except
216. where a texture is also applied, no texture memory needed. Even the paletted versions require very little
217. texture memory (e.g. you could use a 256x2 texture, or smaller, or as big as 4096x2 - note that Unity
218. restricts the height to no less than 2, but the gradient shader will only read the first row). The
219. various parameters of the gradients are exposed within the inspector for the Material. So all you need to
220. do is use one of the provided materials or create a new one and select the shader you want to use.
221. The shaders have been categorized so that from the shader selection menu within a material, you can choose
222. the features you want fairly easily. The names of the shaders correspond to the folder structure.
223.  
224.  
225. Once you have selected a material to use, you can apply it to your object quite easily using normal Unity
226. drag-and-drop or via selection from the material selection window. Your model must provide UV coordinates
227. and vertex coordinates. The UV coordinates normally should map from 0 to 1, however you may also prefer
228. to map 0.5 to -0.5 or 1 to -1, since many of the gradients are centered around 0,0 by default. You can however
229. reposition the center of the gradient within the shader itself, as well as in most cases the horizontal
230. and vertical scale, plus a rotation angle. You can also adjust colors, assign textures, adjust the
231. offset and tiling of textures (except palette textures which ignore those adjustements) and adjust the
232. offset of the color from the center, and in the case of the new Multi-Palette shaders you can animate
233. the Palette Row etc. Therefore you can access these parameters either from Unity scripting languages,
234. from the Unity animation timeline editor, or from other third-party visual-scripting and animation systems.
235.  
236.  
237. Since the gradients are computed from scratch every frame, they are completely dynamic and fully adjustable.
238. You can animate movement of the center of the gradient, change its size, rotate it, etc. Unlike a texture,
239. the gradient is calculated with extreme accuracy no matter the size it covers, creating beautifully smooth
240. colors at all scales - totally free from `jaggies` or texture resolution problems. You can animate the
241. adjustement to colors, transparency, or perhaps switch out for a different palette or texture. This shader
242. pack does not include scripts or other methods for producing these animations, but does leave the door open
243. to allow you to implement whatever kind of animation you can imagine as appropriate for your project, using
244. whatever method you prefer.
245.  
246.  
247. Play with adjusting the controls on each material to experiment with the effects you can achieve!
248.  
249.  
250.  
251.  
252. EXTRAS
253.  
254.  
255. A few courtesy shaders are included. Vertex Color shaders require you to supply vertex color data in
256. your mesh (instead of UV's). By default Unity objects such as the Plane or Cube do not include vertex colors.
257. You will likely need to generate the meshes from script or model them in a 3D modelling app. Vertex Colors
258. allow you to utilize standard `gouraud` shading (see http://en.wikipedia.org/wiki/Gouraud_shading).
259.  
260.  
261. You assign a color to each vertex of each triangle (3 per triangle) and the hardware then smoothly
262. interpolates between the colors to produce a gradient. In some cases this may be sufficient, but the
263. drawback is you have to provide the right colors to create the kind of gradients you want, they're not
264. easy to adjust without re-computing the mesh data, and implementing any kind of scaling, positioning or
265. rotation at run-time can be difficult. The gradient shaders provided make it much easier to adjust and
266. animate the gradients at runtime without having to modify meshes, but the vertex shaders are provided as
267. a legacy for completeness. A version is included which also renders a standard texture in combination with
268. vertex colors, for your convenience.
269.  
270.  
271. The pack also includes a simple `texture with a tint` shader allowing you to color a texture and also
272. to apply an adjustable alpha value which can animate the alpha-blending of the texture at runtime to fade
273. the texture in or out, with or without a tint (use white for no tint). Also included is a simple `texture-only`
274. shader - this is nothing special, except it's very fast at just drawing a plain diffuse texture - so is ideal
275. if you prefer to generate a gradient or other texture outside of Unity and simply display it.
276.  
277.  
278. Also included is a bundle of 40 natural `sky` palettes, pulled from photographs of real nature scenes.
279. They therefore represent actual sky palettes which you can use in your project to instantly create
280. a realistic colored sky background. The sky palettes can easily be used with the Paletted versions of the
281. gradient shaders, and are all 2048 x 1 in size. They have been set to `generate alpha values from grayscale`
282. on import, only to show that the alphablended versions of the shaders are working - they do not contain
283. any alpha channel data of their own. They have also be set to not generate mipmaps.
284.  
285.  
286. Some simple example demo scenes are also included.
287.  
288.  
289. Also included are some demo prefabs where various gradients have been applied to a simple Unity Plane object,
290. so you can quickly see an example of some settings.
291.  
292.  
293.  
294.  
295. TIPS, BENEFITS, IDEAS
296.  
297.  
298. Beautiful gradients can be used in a variety of projects and in a variety of ways. Whether you need
299. dynamically adjustable color or just a simple clean background, a gradient can fit the purpose. Here are
300. some further ideas, tips and benefits of using gradient shaders in your projects.
301.  
302.  
303. * Apply gradients to 3D objects, not just flat planes - provided you have some relevant UV coordinates
304. the gradient will apply across the object and still be adjustable.
305.  
306.  
307. * Set up a mesh object that has carefully crafted UV coordinates to accomplish something along the lines
308. of a `gradient mesh` effect. Highly complex gradients can be greated this way but it does take some effort.
309.  
310.  
311. * Layer multiple gradients using the alpha-blended versions - if you can't get the detail you want from
312. a single gradient, just use several of them on top of each other and move them around individually in
313. the scene view to get the effect you want.
314.  
315.  
316. * Combine a texture with a gradient - sometimes you just have to resort to using a texture, it could
317. even be a texture containing an image of a gradient you created in some other app. Bring it in and combine
318. it with a realtime adjustable gradient to bring it to life.
319.  
320.  
321. * Create beautiful backgrounds for your projects quickly and easily. You'll save significant texture storage
322. space by allowing the gradients to be calculated in realtime - great for mobile devices, minimizing load times,
323. maximizing download speeds from the web, etc. Also since the gradients are not texture-based, they are
324. perfect quality at any resolution without jaggies/aliasing problems.
325.  
326.  
327. * Add gradient backgrounds to your plain old menu screens and create a warm fuzzy glow for your users.
328.  
329.  
330. * Apply gradients to flat, boring buttons and other GUI elements to give them that extra subtlety that
331. says `quality polish`.
332.  
333.  
334. * Use gradients in your game environment as a beautiful dynamic sky. Use one of the included sky palettes
335. to instantly fill the sky with a lovely sunset or clear blue. It will be faster than using a skybox, and
336. save a tonne of texture memory.
337.  
338.  
339. * Use gradients for the background in 2D games - you know, that flat monotone background you have - bring
340. it to life with a nice color transition. Even animate and adjust it in-game to simulate different times of
341. the day, to match weather conditions, or create added mood.
342.  
343.  
344. * Animate your gradients to give your apps an added touch of subtlety and engagement - something moving on
345. the screen that isn't too imposing helps to keep eyes focussed on and excited about your app, plus smooth
346. gradients are soothing to the eye.
347.  
348.  
349. * Create an animated transition or spotlight by using a moving/adjusting gradient to wipe across a texture.
350. Perhaps render your game screen to a texture and use this in combination with an animated gradient to
351. smoothly wipe in/out to/from another screen, or to show/hide a menu.
352.  
353.  
354. * Apply gradients to your texture images to re-color them in-game, re-using your resources and minimizing
355. texture overhead. Why make the user see the same image in the background on every level - jazz it up with
356. a splash of color that changes as the game progresses.
357.  
358.  
359. * Use an animated gradient on an in-game 3D object to represent a reveal, action or transition between states,
360. or perhaps just to make it look cool.
361.  
362.  
363. * Overlay semi-transparent gradients on top of your screen and move the meshes around to animate them
364. as a screen-wipe effect.
365.  
366.  
367. * Use a vertical gradient to create a semi-transparent fog effect.
368.  
369.  
370. * Use an angular gradient and animate its angle of rotation to simulate a radar scanner
371.  
372.  
373. * Render a gradient to a RenderTexture, or grab from the backbuffer, then use that texture as input to
374. a second gradient shader to mix things up while animating both separately.
375.  
376.  
377. * Apply gradients to a 3D mesh so `undulate` the gradient shape as you animate it, or to modify its shape
378. in general. Although the gradient is applied to texture coordinates, the shape of the geometry does not have
379. to be rectangular - the gradient will wrap to the surface.
380.  
381.  
382. * Take a slice from a photograph to use as a palette texture. This could be a slice of sky gradient, a
383. sunset, or some other pattern. You could also take a slice from a 3D sphere, for example, and use it with
384. the radial gradient to produce a fake 3D effect. Try it with other `contours` too!
385.  
386.  
387. * Add a bevel to the edge of your gradient by simply applying bevel shading to one end of your palette
388. texture. This small cross-section of a bevel will spread across the gradient.
389.  
390.  
391. * Use graphics software to smooth out the sky gradients if you find them to show too many `lines` across
392. the image - these lines mainly come from small artefacts in the photographs they were taken from.
393.  
394.  
395. * Design a gradient in your favorite graphics software and use it to draw a filled rectangle there. Then
396. take a slice from that gradient to make a palette texture. Then use the paletted texture to re-create the
397. same gradient in your realtime shader.
398.  
399.  
400. * Apply fake lighting effects by using carefully-adjusted gradients and colors.
401.  
402.  
403. * Use a radial gradient with alpha blending and a gradual alpha falloff for a nice vignette or spotlight
404.  
405.  
406. * Create a game that renders everything entirely using gradient shaders!
407.  
408.  
409. * Animate a vertical bar gradient across the inside of text geometry to show a moving glint of light sheen.
410.  
411.  
412. * Use vertical or horizontal gradients with solid-blend for the fastest possible realtime backgrounds, still adjustabale!
413.  
414.  
415. * Position an alphablended radial gradient on the horizon, color it to represent the sun, then rise and set it over time with color adjustments to create a beautiful sunrise and sunset. Alphablend it over a background gradient for added mood and color.
416.  
417.  
418. * Apply a gradient over your sprite to animate a tint, pulsate, flash, flicker, etc.
419.  
420.  
421. * Use a funky color palette with the angular gradient, centered on the screen, then rotate it for a cool disco effect.
422.  
423.  
424. * Replace your gradient textures with realtime gradients to save lots of texture memory and improve loading times.
425.  
426.  
427. * Choose an interesting background, then re-color it with different gradients as part of a kiosk app or presentation.
428.  
429.  
430. * Create a circular mesh and apply the radial gradient to give it a fake highlight looking like a sphere.
431.  
432.  
433. * Create a polygon mesh representing a hilly background, then color it with lovely undulating gradients.
434.  
435.  
436. * Have fun, play, and remember to laugh!
437.  
438.  
439.  
440.  
441. ADVANCED - MODIFYING THE SHADERS
442.  
443.  
444. In case you need to modify the shaders, extensive comments have been included. All shaders are CG-based
445. in Shader Model 2.0. They have been highly optimized including efforts to minimize the size of data
446. variables. This means most UV coordinates for example are interpreted with `half` precision, and most
447. colors are dealt with in `fixed` precision. If you for any reason find your UV's are not accurate enough
448. or the colors are not perfect enough, convert these to `float` types throughout.
449.  
450.  
451. I've only included solid-blend and alpha-blend versions of the shaders. Creating versions for every possible
452. blend mode is an extremely lengthy task, plus Unity takes a long time to import the shaders so a large
453. number of them is impractical. Within the shader sourcecode, however, I have included some commented-out
454. lines which offer alternative blend modes such as Multiply, Soft Additive, etc. Plus there are many more
455. possibilities, but these should get you started. Using different blend modes will allow you to layer
456. the gradients in more sophisticated ways to combine then with your backgrounds and environments. I would
457. like to have included a full selection of 20-30 blends but it was not practical.
458.  
459.  
460. You will also find that in most cases where a diffuse Texture is used, the texture color is simpy multiplied
461. with the result of the gradient generator. If you prefer, other operations could be performed there
462. such as addition, subtraction, division, or some other more complex blending similar to those found in
463. graphics software. See my other asset - Shader Wizard - for some alternative shader code which might help.
464.  
465.  
466. These shaders do not support lighting or shadows or other advanced 3D techniques. They are designed to be
467. fast and efficient at rendering gradients, which for most people will be applied to 2D environments where
468. light and shadow is not so common.
469.  
470.  
471.  
472.  
473. NOTES
474.  
475.  
476. Version 2.1 is a bug-fix, numerous shaders were not compiling fully for GLSL in Unity 4.1.5.
477. I implemented a modification to all affected shaders and they now work in 4.1.5
478.  
479.  
480.  
481.  
482. THANK YOU FOR USING THE GRADIENT SHADER PACK!
483.  
484.  
485. Copyright (c) 2013 - Paul West/Venus12 LLC
486. */
487.  

 

Just purchased this and it's very cool, however I am noticing a little bit of "banding" and was wondering if there is something I can do to minimize it.

I'm using the "Gradient-NoTexture-Radial-TwoColors-RegularUV-SolidBlend" shader.

Here is what it looks like. Nice, but still a bit of banding if you look close. I could live with this but thought I'd see if there is anything I can do to reduce it further.



Thoughts?

 

Hi there. Your project looks cool. Any banding might possibly result from a degree of inaccuracy in the shader calculations. What you can try is, simply open up the shader sourcecode for the shader you want to test, then do a `find replace` ... replace the string "fixed" with the string "half" throughout the file. Save it. Go back to Unity, it will recompile and import it. See if that fixes it. If it doesn't go back and convert all occurrences of `half` with the term `float`, and then save it and go back. Let me know if that works. I think it is showing up mainly because you have a very subtle gradient.

If that's not it, then it almost seems like it's something to do with the color accuracy of your graphics card perhaps? Let me know.

 

Some prebuy questions:

1. How is the performance on Mobile.
2. Can this be used for something like "NGUI Color Gradient" that's on the asset store.

Thanks

 

I'd like to know the answer to the above questions too

 

Hello prospectors! All of the shaders are optimized to be as fast as possible on mobile. They use the `fixed` data type instead of half or float where possible and still produce quality smooth gradients. Some of the gradients are faster than others, since each pixel is being calculated in realtime and different shapes require different math/algorithms. The slowest are the angular and radial gradients, faster is the diamonds, and the fastest are the horizontal and vertical. Also the box-based gradients are a bit slower due to extra cross-fading of colors. Obviously if you're cross-fading 9 unique colors in realtime there are more instructions needed. And the ones which use palettes have to do a texture lookup which adds a bit of extra overhead. Generally in my opinion they are all quite fast.. probably a little slower than a basic texturing shader, but probably faster than some of the complicated shaders that Unity provides.

I don't have any data on what the speed of a given gradient is on a given iOs device. They are as fast as they can possibly be but it depends on your needs. Sorry to be a bit vague, I wish I had some real numbers.

 

Thanks for the info.

2. Can this be used for something like "NGUI Color Gradient" that's on the asset store.

 

I'm not sure, and without owning that assets its hard to tell. My pack is simply a pack of shaders and materials. If NGUI lets you select which shader to use, then you can probably use it with it, provided it generates UV coords that you can work with. The gradients are generated based on the UV coordinates across the geometry. It seems to me that the NGUI gradient thing must be using some kind of shader in order to draw something to the screen, so I presume you can choose to use my material instead. Probably the UV settings will need tweaking a bit in the material to get it to position the effect where you want it, especially if they're using some kind of sprite atlas.

 

Hey imaginary

I'm pretty new to shaders, and I'm trying to implement Double Fine's approach to dynamic 2D character lighting described here. With their approach, ambient lighting is achieved by applying a gradient tint to the characters in the scene (each light source has a gradient, and the tint colour applied to a character is a "weighted average based on the distance from the light sources").

Will it be pretty straightforward to adapt one of your gradient shaders to meet these needs? I'm guessing sprite support should be super easy for me to add. And then I could calculate the gradient colour through script each frame and assign that to the shader?

 

Hey man. Okay, so the gradient shader pack includes a set of shaders that also draw a texture. So the texture would be your sprite which I believes uses UV1, and then the gradient is applied on top using UV2. So I think you have to set up both UV channels in your geometry.. which means I'm not sure if at this point that would work with Unity's sprites, but it does work with Unity's other primitives like cubes and quads and planes. You could use it with pretty much any of the gradient shapes - the radial gradient might give a nice effect versus just vertical. You can use SetFloat() to change the material properties each frame such as the start and end colors, like you said.

The part that it doesn't do is the weighted average. I read that article you linked and it seems like they have multiple locations of light sources/gradient centers and then it's probably doing a simple bilinear interpolation between those to cross-fade and find out what the color would be inbetween the lights. To do that in a single shader you'd have to either pass in the locations of the nearby light sources and maybe how many, or read them in from a texture within the shader. It's doable. A gradient such as a vertical gradient is really just the distance from one coordinate to another. In this case, for example using UV coords that range from 0 to 1, the vertical gradient just scales a given color (multiplies by it) based on the UV coordinate. It's very simple. It's basically like an alphablend/crossfade between two colors based on the UV coord. Similar with a radial gradient except there the distance is calculated based on the actual distance from the UV coords to 0,0 (center), which results in a circle/oval.

So you could base it on the radial gradient shader. You basically will sample the gradient using a set of different UV coords ie pretending that the UV coord is the location of the light. So instead of 0,0 being the center you can find the distance to each of the lights. Then multiply the lights colors by that distance. Then once you have all those in variables you can interpolate the player position and cross-fade the values. That basically means e.g. for 4 lights, finding the interpolated color between each pair of lights, and then cross fading those two intermediary values. I think you might have to work with a limited number of nearby lights, like 4 for example, but you could probably do 8 or 16 too. You said you are a beginner to shaders though so I'm not sure if you'll be able to write these extra bits of code yourself? Let me know.

 

Gradient Shader Pack is still 20% for the remaining few days of 2013, going to a new price in 2014, so now is a great time to buy - just $20.

 

Gradient Shader pack is going on sale on Feb 19th, one-day sale, 50% off

 

Thinking about getting this package.

Very much performance bound on mobile. Can the performance of the shaders be improved by using Unity Pro features?

Cheers.

 

There are no input textures except for a palette if you use the palette versions, or the ones with 1 texture. That's very minimal texture reads so should be okay on performance. The rest of the gradient generation is done entirely dynamically on the fly within the shader, so there is absolutely no way to send it to a RenderTexture or anything else, and doing so wouldn't help at all. It is what it is. It's about as fast as it can possibly be. All the shaders are hand-optimized to be as fast as possible on mobile. So it's one of those cases of, there is only so much that something can be optimized, and if you want xyz features then it has to be `paid` for by the hardware required to make it work. Some of the gradients are definitely more expensive than others - the radial for example uses more square roots. There's info in the readme file about which shaders are the most expensive.

 

Great asset! I'm trying to get a palette shader working on a Unity 2D sprite and can't quite figure it out. When I apply a palette shader to the sprite it says "Material does not have a _MainText texture property. It is required for SpriteRenderer." Some of the other alpha shaders do work with SpriteRenderer, depending on whether or not they have _MainTex. I have tried adding _MainTex to the palette alpha shader but it is not working for me.. it just makes the sprite disappear. Any ideas about how to convert the palette shader to work with the Unity 2D sprite? I can post the code for the texture+palette shader that I'm trying to use if that will help. Let me know. Thanks! -edited for clarity

 

There are a fair few changes that need to be made in order to use a gradient plus a palette plus a texture, and have it work with Unity's sprites.

First you have to add a new _MainTex property for the sprite texture. Then you have to add two `uniforms` to connect the property to a variable. Then in the AppData structure you have to enable a second uv coordinate. Also in the VertexToFragment structure you have to enable a second uv coord. Then in the vertex shader itself you have to change references to uv to uv2, so that the palette/gradient is generated based on a second set of uv coords and not the first. Then in the vertex shader you have to add in lines to `transformtex` the main texture and output it to the uv field of the structure that gets sent to the fragment shader. Then in the fragment shader you have to add a line to read the sprite texture, and finally multiply the sprite texture by the gradient. An example of this with a vertical gradient is below.

However, note that Unity's sprite shader is a bit different from a normal shader, it has some extra magic going on in the vertex shader to deal with pixel perfect coordinates, and there's some other property stuff happening. Also to put a gradient plus a sprite texture requires 2 sets of uv coordinates and I don't know if Unity's sprite renderer generates 2 uv sets or just one. The second uv set governs the gradient's shape/position/angle etc while the first set deals with displaying the sprite texture across the shape properly. If Unity doesn't generate that second uv set then it's not going to work with any sprites unless you can access the sprite geometry from script and generate the uv's properly.

Code (csharp):

1. Shader "Gradient/Palette-Textured/Vertical/Alpha Blend" {
2.  
3.  
4.     //Set up the shader to receive external inputs from Unity
5.     Properties {
6.         _UVXOffset ("UV X Offset", float) = 0            //Receive input from UV coordinate X offset
7.         _UVYOffset ("UV Y Offset", float) = 0            //Receive input from UV coordinate Y offset
8.         _UVScale ("UV Scale", float) = 1.0                //Receive input from UV scale
9.         _Angle ("Angle", float) = 0                        //Receive input from rotation Angle (0..360 degrees)
10.         _PaletteTex ("Palette Texture", 2D) = "" {}        //Receive input from a Texture
11.         _MainTex ("Sprite Texture", 2D) = "" {}            //Receive input from a Texture
12.     }
13.  
14.  
15.     //Define a shader
16.     SubShader {
17.  
18.  
19.         //Define what queue/order to render this shader in
20.         Tags {"Queue" = "Transparent" "RenderType" = "Transparent"}        //Background | Geometry | AlphaTest | Transparent | Overlay
21.  
22.  
23.         //Define a pass
24.         Pass {
25.  
26.  
27.             //Set up blending and other operations
28.             Cull Off            // Back | Front | Off - Do not cull any triangle faces
29.             ZTest LEqual        //Less | Greater | LEqual | GEqual | Equal | NotEqual | Always - Z-Buffer/Depth testing is off
30.             ZWrite On            //On | Off - Z coordinates from pixel positions will not be written to the Z/Depth buffer
31.             AlphaTest Off        //0.0    //Less | Greater | LEqual | GEqual | Equal | NotEqual | Always   (also 0.0 (float value) | [_AlphaTestThreshold]) - All pixels will continue through the graphics pipeline because alpha testing is Off
32.             Lighting Off        //On | Off - Lighting will not be calculated or applied
33.             ColorMask RGBA        //RGBA | RGB | A | 0 | any combination of R, G, B, A - Color channels allowed to be modified in the backbuffer are: RGBA
34.             //BlendOp    //Add    // Min | Max | Sub | RevSub - BlendOp is not being used and will default to an Add operation when combining the source and destination parts of the blend mode
35.             Blend SrcAlpha OneMinusSrcAlpha            //SrcFactor DstFactor (also:, SrcFactorA DstFactorA) = One | Zero | SrcColor | SrcAlpha | DstColor | DstAlpha | OneMinusSrcColor | OneMinusSrcAlpha | OneMinusDstColor | OneMinusDstAlpha - Blending between shader output and the backbuffer will use blend mode 'Alpha Blend'
36.                                 //Blend SrcAlpha OneMinusSrcAlpha     = Alpha blending
37.                                 //Blend One One                       = Additive
38.                                 //Blend OneMinusDstColor One          = Soft Additive
39.                                 //Blend DstColor Zero                 = Multiplicative
40.                                 //Blend DstColor SrcColor             = 2x Multiplicative
41.  
42.  
43.             CGPROGRAM                        //Start a program in the CG language
44.             #pragma target 2.0                //Run this shader on at least Shader Model 2.0 hardware (e.g. Direct3D 9)
45.             #pragma fragment frag            //The fragment shader is named 'frag'
46.             #pragma vertex vert                //The vertex shader is named 'vert'
47.             #include "UnityCG.cginc"        //Include Unity's predefined inputs and macros
48.  
49.  
50.             //Unity variables to be made accessible to Vertex and/or Fragment shader
51.             uniform sampler2D _PaletteTex;                    //Define _PaletteTex from Texture Unit 0 to be sampled in 2D
52.             //uniform float4 _PaletteTex_ST;                //Use the Float _PaletteTex_ST to pass the Offset and Tiling for the texture(s)
53.             uniform sampler2D _MainTex;
54.             uniform float4 _MainTex_ST;
55.             uniform float _UVXOffset;
56.             uniform float _UVYOffset;
57.             uniform float _UVScale;
58.             uniform float _Angle;
59.            
60.             //Data structure communication from Unity to the vertex shader
61.             //Defines what inputs the vertex shader accepts
62.             struct AppData {
63.                 float4 vertex : POSITION;                    //Receive vertex position
64.                 half2 texcoord : TEXCOORD0;                    //Receive texture coordinates
65.                 half2 texcoord1 : TEXCOORD1;                //Receive texture coordinates
66.                             //fixed4 color : COLOR;                        //Receive vertex colors
67.             };
68.  
69.  
70.             //Data structure for communication from vertex shader to fragment shader
71.             //Defines what inputs the fragment shader accepts
72.             struct VertexToFragment {
73.                 float4 pos : POSITION;                        //Send fragment position to fragment shader
74.                 half2 uv : TEXCOORD0;                        //Send interpolated texture coordinate to fragment shader
75.                 half2 uv2 : TEXCOORD1;                        //Send interpolated texture coordinate to fragment shader
76.                             //fixed4 color : COLOR;                        //Send interpolated gouraud-shaded vertex color to fragment shader
77.             };
78.  
79.  
80.             //Vertex shader
81.             VertexToFragment vert(AppData v) {
82.                 VertexToFragment o;                            //Create a data structure to pass to fragment shader
83.                 o.pos = mul(UNITY_MATRIX_MVP,v.vertex);        //Include influence of Modelview + Projection matrices
84.                 o.uv = TRANSFORM_TEX(v.texcoord,_MainTex);//Send texture coords from unit 1 to fragment shader
85.                 o.uv = v.texcoord.xy;
86.                 v.texcoord1.xy = half2((v.texcoord.x+_UVXOffset)*_UVScale,(v.texcoord1.y+_UVYOffset)*_UVScale);
87.                 float ang = _Angle*-0.01745329;                //0.01745329 is conversion of 360.0/(2*PI) as 1.0/(360.0/(2*PI)) to convert angle to radians
88.                  float sinX = sin(ang);
89.                 float cosX = cos(ang);
90.                 float sinY = sin(ang);
91.                 float2x2 rotationMatrix = float2x2(cosX,-sinX,sinY,cosX);    //Position and rotate
92.                    o.uv2 = mul(v.texcoord1.xy, rotationMatrix);
93.                             //o.uv2 = v.texcoord1.xy;                    //Send texture coords from unit 1 to fragment shader
94.                             //o.color = v.color;                        //Send interpolated vertex color to fragment shader
95.                             //o.color = _Color;                            //Send solid color to fragment shader
96.                 return o;                                    //Transmit data to the fragment shader
97.             }
98.             //Fragment shader
99.             fixed4 frag(VertexToFragment i) : COLOR {
100.                 fixed4 tex=tex2D(_PaletteTex, half2(lerp(0,1.0,abs(i.uv2.y)),0) );    //Ouput paletted vertical gradient
101.                 fixed4 sprite=tex2D(_MainTex,i.uv);    //Get sprite
102.                 return tex*sprite;
103.             }
104.  
105.  
106.             ENDCG                            //End of CG program
107.  
108.  
109.         }
110.     }
111. }
112.  
113.  
114. //Copyright (c) 2013 Paul West/Venus12 LLC
115.  
116.  
117.  

 

Just of note, Gradient Shader Pack goes on sale at 50% off this Wednesday

 

Thanks for the response; the new palette-texture shader works great! And thanks for the explanation about Unity's sprite shader... I didn't realize it was so involved.

 

I'm kind of relieved it works, I didn't test it with a sprite, just as a material.

So did the unity sprite define the uv's for you or did you have to dip into code?

 

Hi,

I may be interested by this gradient shader pack yet I'd like to know if it comes with a dedicated cubemap shader or if you'd use a mesh in the scene that would follow the camera center?

Thanks
Regards

 

Hello. Gradient Shader Pack is a set of shaders to render gradients on the fly within the shader, without the need for a texture, although you can apply a texture or palette to it also. It doesn't really have anything to do with cubemapping. I guess what you're asking is whether you can put a gradient onto an object, with a texture, overlaid, and also have it be reflective etc. No not at this time. The shaders are fairly simple, efficient, mobile-optimized and thus don't attempt to do anything with lighting or normal mapping or reflections or shadows. I'm not sure what you're asking about a mesh that follows the camera, can you elaborate?

 

Gradient Shader Pack is on the Asset Store Daily Deals today, 50% OFF!

 

I don't have it working yet with a spite, just for rendering a material with a palette on top of a texture. That'll do for now though, at least it serves to get the gradients on some bit-art. I'll keep my fingers crossed for an update, or a stroke of inspiration on my part to figure out how to get it to work properly with 2D sprites... but like you said it seems pretty complicated.

 

You can use sprites and gameobjects fairly interchangeably, unless you're doing specifically 2d physics. The shader performance will be the same whether you apply it to one or the other, if it were to have correct UV's provided.