original text
The original was written in GLSL
PPT Switch - Pure Shader Implementation (above)
PPT Switching - Pure Shader Implementation (Below)
Effect
1. Fade fading in and out
Just call the mix function of GLSL directly
2. Push
Phenomenon: One picture pushes another picture out of the screen from right to left
Main points:
1. Judging texCoord and u_ratio size, choose which chart to display on the left and right sides
2. Offset the texCoord s of the two graphs at the same time
3. Erase Wipe
Phenomenon: erase the above picture from right to left
Ideas:
Mixing relies primarily on the mix function, except for gradients at the edges, which can be easily achieved using linear interpolation, and right-to-left erasing is like moving a slash from right to left, then clamp becomes transparency alpha
4. Split
Phenomenon: Erase from middle to both sides
Ideas: Similar to Erase as moving from right to left, the implementation of split can be abstracted as follows:
5. Display Reveal
Phenomenon: First from right to left, the picture is slightly enlarged while the screen turns white, then from left to right, another picture appears and is slightly reduced
Main points:
1. The effect of fading out and fading in pictures is similar to that of erasing before, except that the blended objects become white pictures.
2. The implementation of picture zooming. When zooming, the zoom center should be selected. The order of transformation is: first move to the zoom center, then move back from the zoom center after zooming.
6. Cut in
Phenomenon: Instant switch, very simple effect
7. RandomBars of Random Lines
Phenomenon: The first picture disappears in many random lines, and the second picture emerges as if performing a "split" at multiple random locations.
Idea: Use a for loop to overlay the "split" transparency of multiple random locations, taking the minimum of multiple functions:
8. Shape Shape
Phenomenon: Spread from one shape to all sides, and the next picture appears
Think: Still from the "shape shift" thinking, consider the transparency function of different shapes, but at this point the function becomes a binary function:
9. Cover and Uncover
Phenomenon: One picture slides in one direction, or another picture slides in
Important: The effect is similar to Push Push Push, except one of the pictures does not have a vertex offset
10. Flash
Phenomenon: Similar to a flash, switch to another picture
Important points: First, the RGB of the first picture will rise rapidly to become a full white image, then switch to the second picture in full white to reduce the RGB value and make it normal.
11. Dissolve
Phenomenon: One graph dissolves into many small fragments, then another appears
Main points:
1. Divide the screen into several small pieces, such as 7*5 pieces, multiply xy by vec2(7,5), and divide floor by vec2(7,5) to do so.
2. Then each block sets a different random value. Previously, one-dimensional pseudo-random number generation was introduced. Here, two-dimensional pseudo-random number generation can be used. After each block sets a different random value, it is compared with u_ratio comparison to determine whether it dissolves or not
12. Flip flip
Phenomenon: Picture flipped in place with another picture on the back
Main points;
1. Implement 3D rotation and perspective projection around the y-axis, using shear instead of projection
2. A small detail, when flipped, the picture is offset in z direction
13. CheckBoard
Phenomenon: Many small squares are generated, each page is turned over, and the back is the next picture
Main points:
1. Divide the screen into small pieces, as described in the Eleventh section, and each piece has a different page turning time. Add two-dimensional random numbers
2. Flip operation for each piece, same as Flip operation in 12
14. Blinds blinds
Phenomenon: Similar to ad blinds switching, rotating from one side of the prism to the other
Main points:
1. To simulate the rotation of a triangle prism, set the initial angle of the first image to 0 and the second to 60 degrees, and rotate 120 degrees around the axis of the virtual triangle prism.
2. Because there are differences between the texture coordinate transformation and the vertex coordinate transformation, there are still some artifact s in the result. There is no good way to import the vertex coordinate transformation into the model except for the trigonometric prism.
15. Clock Clock
Phenomenon: A clock-like pointer sweeps through a circle and emerges as the picture disappears
Main points:
1. Calculate angles by xy values of texture coordinates
2. Add a gradient to the swept edge. The gradient mentioned earlier in Wipe Erase is achieved by moving a linear function, where the angle is treated as an independent variable and linear interpolation is used to achieve the gradient as well.
16. Ripple
Phenomenon: Similar to water ripple spreading around, while the second image emerges
Main points:
1. Realization of outermost gradient of water ripple, similar to circle inside Shape shape
2. The sin function can be used to simulate the refraction of water waves from pictures.
3. Changes in brightness of ripple peaks and valleys, also with the help of the sin function
17. HoneyComb of Honeycombs
Phenomenon: The first image rotates and becomes larger, disappearing one by one as a honeycomb, while the second image appears as a honeycomb
Main points:
1. It is easy to rotate and zoom pictures.
2. At the beginning and end, use two erasing effects, which are simple enough to add transparency.
3. Write out the honeycomb shape and add different random values to each shape. This is a complex and detailed explanation:
To achieve the honeycomb shape shown in the diagram, we know that if these small pieces are a rectangle, they can be easily generated according to previous ideas, but these honeycombs are hexagons and are not regularly arranged like rectangles. Here I introduce the idea of "minimum splice": can you find the smallest rectangular splice? Just make a pattern of this splice and copy it?
You can see that the smallest rectangular splice on the right can be obtained by Boolean operations with two hexagons and one rectangle, so the difficulty is how to generate the hexagon?
We know that long rectangles are easy to generate, so how do you generate a hexagon?
Use three rectangles with different rotation angles to intersect! With hexagons and rectangles, three graphics can be Booleaned, for which the and, or, and not functions are written specifically for float types
18. Shining Glitter
Phenomenon: Many small regular hexagons flip randomly and another picture appears on the back
Main points:
1. Realization of regular hexagons and setting different rotation centers and angles for each hexagonal area
19. Switch
Phenomenon: Two pictures are switched back and forth, which is easy to implement. This sample code is lost
20. Curtain
Phenomenon: One picture is like a curtain spreading out on both sides, then switching to another picture
Main points:
1. Simulate the fabric of the curtain. The shape of the curtain is mainly simulated by the sin function, and some perlin noise is added to disturb it to make it more natural.
2. Animate "cloth" with the idea of keyframe, define the transformation of cloth (texture coordinates) in key time stamp, then superimpose tent function, that is, linear interpolation.
21. Hanging Drape
Phenomenon: A picture drops from top to bottom like a piece of cloth, completing the switch
Main points:
1. The process of falling a cloth requires the back of the cloth to be displayed.
2. When the cloth falls to the bottom, it will slightly shift in due to inertia and then recover
22. Up-curtain Prestige
Phenomenon: One picture is pulled up like a cloth, switching to another
Main points:
1. Choose an appropriate function to simulate the distortion of the cloth while applying noise to simulate the movement of the cloth.
23. Strip PeelOff
Phenomenon: One picture is revealed like one piece of paper, showing another
Main points:
1. This implementation is similar to (nineteen-hanging), assuming that there is an oblique straight line, such as y = x-1, the back of the picture is mirrored, the right side of the line shows the basemap, and the left side shows the above picture
24. Library Gallery
Phenomenon: The first image rotates inward first, while the other image pushes in, and finally rotates back
Main points:
1. Approximate three-dimensional transformation of pictures
2. Implementing the effect of mirroring
25. Cube
Imagine switching between cube-like sides
Main points:
1. Approximate three-dimensional transformation of pictures
26. Door Door
Phenomenon: The first image opens like a door, and the second image shows from small to large
Main points:
1. Approximate rotation of the first image, scaling of the second, and mixing
27. Box
Phenomenon: Two pictures rotate like a square frame, switching to another picture
Main points:
1. Approximate three-dimensional rotation of pictures, thought roughly the same as (24-cube)
28. Comb ing
Phenomenon: Images fly out one by one to the left and right, showing another picture
Key Points: Simple implementation, vertical slicing can be
29. Zoom
Phenomenon: Two pictures zoom in, one fade out and one fade in to switch
Main points:
1. Implement picture scaling, a simpler implementation
30. Fragmented Shred
Phenomenon: The first image is divided into fragments, moves forward and backward rapidly, switches to another image at the farthest point, and then recovers
Main points:
1. Generation of random fragments using simple random numbers as detailed in the generateFrag function
2. Approximate 3-D fragmentation transformation
31. Fall Drop
Phenomenon: One picture falls in and switches to another
Main points:
1. Warp texture coordinates and approximate edge warping using polynomial functions
2. Warp the edges while rotating the picture
32. PageTurn
Phenomenon: Picture switching, like page flipping in a Book
Important: Rotate the right half of the picture clockwise
Unity Code
00 Basic Tools.cginc
// Picture blending method; linear interpolation
fixed4 mix(fixed4 a, fixed4 b, float alpha)
{
fixed4 res = 0;
res = a * (1 - alpha) + b * alpha;
return res;
}
//Determine if the UV is in the 0-1 range: 0 is not in the range; 1 in range
fixed UVRange0_1(fixed2 bud2)
{
if (bud2.x < - 0.001)
return 0.0;
if(bud2.x > 1.001)
return 0.0;
if(bud2.y < - 0.001)
return 0.0;
if(bud2.y > 1.001)
return 0.0;
return 1;
}01Fade fade in and out
Shader "Jack Shaders/01Fade Fade in and out"
{
Properties
{
_MainTex ("Texture", 2D) = "black" { }
_SecondTex ("SecondTex", 2D) = "black" { }
u_ratio ("Ratio", Range(0, 1)) = 0
}
SubShader
{
Tags { "RenderType" = "Opaque" }
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
#include "Assets\Shaders\Tools\Tools.cginc"
struct appdata
{
float4 vertex: POSITION;
float2 uv: TEXCOORD0;
};
struct v2f
{
float2 uv: TEXCOORD0;
float4 vertex: SV_POSITION;
};
sampler2D _MainTex;
sampler2D _SecondTex;
fixed u_ratio;
float4 _MainTex_ST;
v2f vert(appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
fixed4 frag(v2f i): SV_Target
{
// sample the texture
fixed4 t1 = tex2D(_MainTex, i.uv);
fixed4 t2 = tex2D(_SecondTex, i.uv);
return mix(t1, t2, u_ratio) ;
}
ENDCG
}
}
}
02Push Push
Shader "Jack Shaders/02Push Push into"
{
Properties
{
_MainTex ("Texture", 2D) = "black" { }
_SecondTex ("SecondTex", 2D) = "black" { }
_Ratio ("Ratio", Range(0, 1)) = 0
}
SubShader
{
Tags { "RenderType" = "Opaque" }
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex: POSITION;
float2 uv: TEXCOORD0;
};
struct v2f
{
float2 uv: TEXCOORD0;
float4 vertex: SV_POSITION;
};
sampler2D _MainTex;
sampler2D _SecondTex;
fixed _Ratio;
float4 _MainTex_ST;
v2f vert(appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
fixed4 frag(v2f i): SV_Target
{
fixed4 res = 0 ;
//Towards the left
fixed R = 1 - _Ratio;
if (i.uv.x > R)
res = tex2D(_SecondTex, fixed2(i.uv.x - R + 1, i.uv.y));
else
res = tex2D(_MainTex, fixed2(i.uv.x - R, i.uv.y));
// //Right
// fixed R = _Ratio;
// if (i.uv.x > R)
// res = tex2D(_MainTex, fixed2(i.uv.x - R, i.uv.y));
// else
// res = tex2D(_SecondTex, fixed2(i.uv.x - R + 1, i.uv.y));
return res ;
}
ENDCG
}
}
}
03Fade Erase
Shader "Jack Shaders/03Fade Erase"
{
Properties
{
_MainTex ("Texture", 2D) = "black" { }
_SecondTex ("SecondTex", 2D) = "black" { }
_Ratio ("Ratio", Range(0, 1)) = 0
}
SubShader
{
Tags { "RenderType" = "Opaque" }
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
#include "Assets\Shaders\Tools\Tools.cginc"
struct appdata
{
float4 vertex: POSITION;
float2 uv: TEXCOORD0;
};
struct v2f
{
float2 uv: TEXCOORD0;
float4 vertex: SV_POSITION;
};
sampler2D _MainTex;
sampler2D _SecondTex;
fixed _Ratio;
float4 _MainTex_ST;
v2f vert(appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
fixed4 frag(v2f i): SV_Target
{
fixed4 t1 = tex2D(_MainTex, i.uv);
fixed4 t2 = tex2D(_SecondTex, i.uv);
float w = 0.5 ;
float alpha = -1.0 / w * i.uv.x + (1.0 + w) / w + _Ratio * ( - (1.0 + w) / w);
alpha = clamp(alpha, 0.0, 1.0);
return mix(t1, t2, alpha) ;
}
ENDCG
}
}
}
04Split Split Split
Shader "Jack Shaders/04Split Division"
{
Properties
{
_MainTex ("Texture", 2D) = "black" { }
_SecondTex ("SecondTex", 2D) = "black" { }
_Ratio ("Ratio", Range(0, 1)) = 0
}
SubShader
{
Tags { "RenderType" = "Opaque" }
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex: POSITION;
float2 uv: TEXCOORD0;
};
struct v2f
{
float2 uv: TEXCOORD0;
float4 vertex: SV_POSITION;
};
sampler2D _MainTex;
sampler2D _SecondTex;
fixed _Ratio;
float4 _MainTex_ST;
v2f vert(appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
fixed4 frag(v2f i): SV_Target
{
// sample the texture
fixed4 t1 = tex2D(_MainTex, i.uv);
fixed4 t2 = tex2D(_SecondTex, i.uv);
float w = 0.2 ;
float alpha = clamp(abs(i.uv.x - 0.5) / w + 1.0 + _Ratio * (-0.5 / w - 1.0), 0.0, 1.0);
fixed3 mixed = t1.rgb * (1 - alpha) + t2.rgb * alpha ;
return fixed4(mixed, 1) ;
}
ENDCG
}
}
}