当前位置：网站首页>Post processing - deep camera deformation effects

Post processing - deep camera deformation effects

2022-06-24 12:34:00 【Y.one】

post-processing (Post-processing), Is for the original game screen algorithm processing , Technology to improve picture quality or enhance picture effect , You can use shaders Shader Program realization .

summary

Transfiguration effects It is a kind of post-processing technology to process and enhance the picture effect , It is often used in all kinds of camera short video app Special effects , Such as beauty and slimming 、 Ha ha mirror effect .

Deformation effect of beauty camera

This article mainly combs the following common deformation effects from all kinds of beauty cameras ：

Local distortions (twirl effect)
Local expansion (inflate effect)
Squeeze in any direction (pinch effect)

among , Twist can be used in the local rotation of the eye , Inflation can be used for big eyes , extrusion / Stretching can be used for facial plasticity and face thinning, etc . How to use shaders Shader Make these deformations , Is the focus of this article .（ps: See the end of the article for the children's shoes eager to preview the code ）

The principle of deformation technology

Although the effect of deformation is various , But they are often inseparable from these three elements ： Deformation position 、 Range of influence and degree of deformation .

deformation Shader Realize the character's awkward dance

So it is in Shader In the implementation of , It's by constructing a deformation function , Will be passed into the original uv coordinate , The location of the deformation 、 Range range And degree strength, After calculation, the deformed sampling coordinates are generated , The code is as follows ：

#iChannel0 "src/assets/texture/joker.png"

vec2 deform(vec2 uv, vec2 center, float range, float strength) {
  // TODO:  Deformation treatment 
  return uv;
}

void mainImage(out vec4 fragColor, vec2 coord) {
    vec2 uv = coord / iResolution.xy;
    vec2 mouse = iMouse.xy / iResolution.xy;
    uv = deform(uv, mouse, .5, .5);
    vec3 color = texture(iChannel0, uv).rgb;
    fragColor.rgb = color;
}

This article uses GLSL standard , follow Shader-Toy Writing , It's convenient for you to preview .

Deformation tips ： Sampling range field transformation

Let's set the fixed coordinates O, Any point to point O A distance of dist, With different dist The value is radius , With a little O As the center, it can form countless equidistant sampling circles , They're called dots O The distance field of .

Sampling distance field

We can change the size of the sampling circle 、 Location , And then change the texture sampling position , To inflate / shrinkage 、 Deformation effect of extrusion .

vec2 deform(vec2 uv, vec2 center, float range, float strength) {
  float dist = distance(uv, center);
  vec2 direction = normalize(uv - center);
  dist = transform(dist, range, strength); //  Change the radius of the sampling circle 
  center = transform(center, dist, range, strength); //  Change the center of the sampling circle 
  return center + dist * direction;
}

The application of this technique is not urgent , Now let's start with a simple twist .

Distortion

The twist effect is similar to the vortex shape , The characteristic is that the closer to the center point, the stronger the degree of rotation , We can express the distance from the center by decreasing function d And the corresponding rotation angle θ The relationship between .

Here's the picture , Using simple first-order function θ = -A/R *d + A, among A Represents the rotation angle of the center of the twist ,A A positive number means that the direction of rotation is clockwise , A negative number means counter clockwise ,R Represents a distorted boundary ;

The principle of distortion

Pictured above , Twist function into parameter A( Center rotation angle Angle) and R( Deformation range Range) It can be described as ： 1）A Represents the rotation angle of the center , The greater the absolute value , More distortion ; 2）A > 0 Indicates that the twist direction is clockwise , conversely A<0 It means counter clockwise ; 3）R It's for twisted borders , The bigger the value is. , The larger the impact .

Twist dynamics

We can introduce time variables time The dynamic change A Value , Create twist effects , As shown in the picture above, the clown twisting effect , Specifically shader The code is as follows ：

#iChannel0 "src/assets/texture/joker.png"
#define Range .3
#define Angle .5
#define SPEED 3.
mat2 rotate(float a) //  Rotation matrix 
{
    float s = sin(a);
    float c = cos(a);
    return mat2(c,-s,s,c);
}
vec2 twirl(vec2 uv, vec2 center, float range, float angle) {
    float d = distance(uv, center);
    uv -=center;
    // d = clamp(-angle/range * d + angle,0.,angle); //  linear equation 
    d = smoothstep(0., range, range-d) * angle;
    uv *= rotate(d);
    uv+=center;
    return uv;
}
void mainImage(out vec4 fragColor, vec2 coord) {
    vec2 uv = coord / iResolution.xy;
    vec2 mouse = iMouse.xy / iResolution.xy;
    float cTime = sin(iTime * SPEED);
    uv = twirl(uv, mouse, Range, Angle * cTime);
    vec4 color = texture(iChannel0, uv);
    fragColor = color;
}

It is worth mentioning that , In addition to using a linear equation to express the distortion relationship , You can also use smoothstep Method , comparison linear Linear function ,smoothstep Method is smoother at the twist boundary , Here's the picture .

linear and smoothstep Distortion equation effect comparison

Considering the smoothness of the boundary , You can also use the following deformation methods smoothstep Functions instead of linear equations .

inflation / shrinkage

The texture near the center of expansion is stretched , And the texture near the expansion boundary is squeezed , This means that in the expansion range , Take the expansion center as the distance field , Each sampling circle should be smaller than the original radius , And the circle spacing gradually expands from the inside to the outside .

As shown on the right side of the figure below , We map the equidistant black sampling circle to the more cohesive red sampling circle , The interval between new sampling circles increases monotonically from inside to outside .

Expansion sampling range field transformation

We sample the smooth increasing function smoothstep By the radius of the sampling circle dist Calculate the scaling value scale：

The function above shows , Near the center of expansion , Sampling circle scaling is most obvious , The scaling value is the smallest (1 - S); With dist increase , Scale value scale Go to 1 Increasing , Until the arrival of R Behind the border ,scale Constant is 1, The sampling circle is no longer scaled .

float scale = (1.- S) + S * smoothstep(0.,1., dist / R); //  Calculate the scaling value of the dilated sampling radius

So we get the above sampling radius scaling formula , Where settings Strength(0 < S < 1) It's inflation . For the transformation process of the expanding distance field , It's easy to infer that , To achieve the reverse effect of inflation shrinkage , Directly to S be located [-1,0] The interval is enough .

S Value corresponds to the degree of expansion and contraction Strength

Pictured above , Expansion function into parameter S( The degree of deformation Strength) and R( Deformation range Range) It can be described as ： 1） When S stay [0,1] In the interval , present inflation effect ,S The bigger the value is. , The higher the expansion ; 2） When S stay [-10] In the interval , present shrinkage effect ,S The smaller the value. , The higher the contraction ; 3）R Represents the boundary of deformation , The higher the value is , The greater the area of influence ;

Dynamic expansion effect

We can introduce time variables time The dynamic change Strength Value , Simulated breath animation , As shown in the picture above, the clown's belly bulge effect , Specifically shader The code is as follows ：

#iChannel0 "src/assets/texture/joker.png"
#define SPEED 2. //  Speed 
#define RANGE .2 //  Deformation range 
#define Strength .5 * sin(iTime * SPEED) //  The degree of deformation 

vec2 inflate(vec2 uv, vec2 center, float range, float strength) {
    float dist = distance(uv , center);
    vec2 dir = normalize(uv - center);
    float scale = 1.-strength + strength * smoothstep(0., 1. ,dist / range);
    float newDist = dist * scale;
    return center + newDist * dir;
}
void mainImage(out vec4 fragColor, vec2 coord) {
    vec2 uv = coord / iResolution.xy;
    vec2 mouse = iMouse.xy / iResolution.xy;
    uv = inflate(uv, mouse, RANGE, Strength);
    vec3 color = texture(iChannel0, uv).rgb;
    fragColor.rgb = color;
}

The longitudinal / Transverse stretch

Original picture - Longitudinal stretch - Transverse stretch - inflation

The previous expansion is achieved by scaling the range field sampling circle , The longitudinal / The transverse stretch is only for the sampling circle x Axis or y Axis , It can be used in beauty “ Long legs ” On .

Transverse stretching distance field transformation

It can be found that the transverse stretching distance field is transformed into multiple elliptical sampling loops , The code implementation is as follows ：

vec2 inflateX(vec2 uv, vec2 center, float radius, float strength) {
    //  The previous code is the same as the expansion implementation 
    ...
    return center + vec2(newDist, dist) * dir; //  Transverse tension is scale It's just about thinking x Axis 
}

extrusion

Extrusion generally indicates a point of action and a direction of extrusion , Its feature is to push the texture near the action point to the end of extrusion .

Here's the picture , Green action point P As a starting point for extrusion , The arrow is the squash vector V, Where the direction of the vector indicates the direction of the extrusion , Vector length length(V) Represents the distance of extrusion , The end point of the vector is the position after extrusion . To achieve texture squeezing , Let the center of the sampling circle squeeze the vector V Up shift , The sampling center point should be shifted to the point P The location of .

Extrusion adopts distance field transformation

With the radius of the sampling circle dist It's getting bigger from the inside out , The center offset after transformation offset Gradually shorten , We can use -smoothstep The smooth decreasing function deals with the radius of the sampling circle dist Offset from circle offset The relationship between .

The formula ：offset = length(V) - length(V) * smoothstep(0, R, dist), among R Represents the extrusion boundary range.

Squash dynamic effect

alike , We introduce the time variable time Dynamically changing the length and direction of the extrusion vector , Can achieve dither effects , As shown in the picture above, the clown top crotch effect , Specifically shader The code is as follows ：

#iChannel0 "src/assets/texture/joker.png"
#define RANGE .25  //  Deformation range 
#define PINCH_VECTOR vec2( sin(iTime * 10.), cos(iTime * 20.)) * .03 //  Squeeze vector 

vec2 pinch(vec2 uv, vec2 targetPoint, vec2 vector, float range) 
{ 
    vec2 center = targetPoint + vector;
    float dist = distance(uv, targetPoint);
    vec2 point = targetPoint +  smoothstep(0., 1., dist / range) * vector;
    return uv - center + point;
}
void mainImage(out vec4 fragColor, vec2 coord) {
    vec2 uv = coord / iResolution.xy;
    vec2 mouse = iMouse.xy / iResolution.xy;
    uv = pinch(uv, mouse, PINCH_VECTOR, RANGE);
    vec3 color = texture(iChannel0, uv).rgb;
    fragColor.rgb = color;
}

summary

This paper mainly introduces three kinds of local deformation shader Implementation principle of , It's swelling / The effect of shrinkage and extrusion is realized by the transformation of sampling distance field , The former transforms the sampling circle size , The latter changes the position of the circle . In addition to the three local deformations described above , There are also some interesting global deformation effects , Like wave effects (wave effect), Dislocation effects and mirrors, etc ,shader Easy to implement , I won't introduce you much .

The waves / dislocation / Mirror image