Skip to main content

UI Wooble Shader - Unity Shader

UI Wobble Shader

jiggly wiggly ui in unity
Jiggly Wiggly UI
This optimized, mobile friendly UI shader can be found HERE.
Let's get to making out jiggly wiggly UI shader.
We will look at the properties being declared :
     _Color("Tint", Color) = (1,1,1,1)
     _WobblesPerSecond("Wobbles per Second ", Float) = 2
sampler2D _MainTex;
fixed4 _Color;
fixed4 _TextureSampleAdd;

/*1*/float _WobblesPerSecond;
/*2*/float _WobblePeriod;
/*3*/float _WobbleAmplitude;
/*4*/#define TWO_PI 6.28318
v2f vert(appdata_t IN)
     v2f OUT;
     /*1*/float4 worldPos = IN.vertex;
     /*5*/OUT.vertex = UnityObjectToClipPos(worldPos);
     OUT.texcoord = IN.texcoord;
     OUT.vertex.xy += ( - 1.0)*float2(-1,1);
     OUT.color = IN.color * _Color;
     return OUT;
Let's breakdown the steps:
For the entire source code, go : HERE
For more Shader development tutorials, go : HERE
For Unity development tutorials, go : HERE


Assets Worth Checking Out


Curved Surface Shader [ Unity Implementation ]


First we define what the properties are:

Introduction To Replacement Shaders & Shader Keywords

What is a replacement shader? A replacement shader is a shader that gets applied to every object being rendered.
Since the camera determines what objects end up being shown on screen, The functionality for setting up replacement shaders are in the camera class as well.

A good use case of a replacement shader would be in making effects like SSAO.
Here we need access to the normals and the depth information so a replacement shader that displays only the normals can be rendered ( stored in a render texture ) and then another shader that displays the depth information ( stored in a render texture ) and then the final image is rendered with the SSAO effect by taking the two render textures as input and doing a bunch of calculations.

Another use case would be to visualize the environment differently for various reasons like how they did in City Skylines.

The function that performs shader replacement is:
Camera.SetReplacementShader( Shader shader, string replacementTag ) Takes in a shader as …

Toon Liquid Shader - Unity Shader

So let's start by looking at the properties :

Access Reflection Probe Data For Custom Shaders


Using Reflection Probes In Unity

So this is what we will be making:

How To Animate A Fish Swimming With Shaders

Animate Fish Swimming With Shaders We are going to make swimming animation by using only shader code.
By the time we are done, it's going to look like this.
You will probably need the fish model used in this tutorial, that can be found HERE. Can use your own model but the shader code might have to be modified accordingly because of the orientation of the model that you might be using ( issues with whether the X axis & Z axis is flipped ).
The shader used way out performs a similar scene with skeletal animations applied on the fish models.
On a previous benchmark I did comparing the shader animation with the skeletal animation there was a difference of 28 FPS( on average ) with 50 fish.
The shader we are going to make is really powerful and flexible and don't think that it's limited to making fishes swim😀.

So this mesh oriented like this when imported into unity and this is important to understand because this means that the model's vertices have to be moved along the X-…