rendering

Process logic

Detailed analysis refer to: OpenGL split screen filter

Filter algorithm

The zoom

  • Principle: Magnifies the vertex coordinates as the timestamp changes

  • Vertex shader algorithm flow:

    • Define a period of 0.6ms and a maximum magnification of 1.3 times for the scaling effect
    • Modulo the period with the current timestamp to calculate which phase of the effect period the current time is in
    • Calculate the amplitude multiplier
    • Multiply vertices X,y by magnification to make them new vertices

  • Amplitude of

Control the change curve with the sine function, sin(time/ duration * PI)

Amplitude = 1.0 + maxAmplitude * ABS (sin(time * (PI/duration)))

  • Scaling principle

The following information is displayed

After magnification by 1.3 times, the corresponding relationship is shown as follows:

  • Vertex shader scale.vsh

Soul /

  • The principle of

The algorithm is implemented in the slice shader: the superposition of two layers, and the layer above will gradually enlarge and reduce the opacity over time

  • Chip color detector algorithm flow:

    • Define a time duration of 0.7, maximum transparency of overlay layer, maximum magnification of overlay layer
    • Progress = mod(Time, duration)/duration
    • Calculate the opacity and magnification of the stack at the current time
    • Calculate the reduced texture coordinates
    • Get the strixins and the original strixins of the overlay
    • Blend the original texture with the enlarged texture

  • Amplification principle

If the texture corresponding to the vertex coordinates is moved closer to the center without amplification, the texture mapping relationship is as follows:The texture mapping at 1.3 times magnification is as follows:

  • Slice shader soulout.fsh

jitter

  • The principle of

Color offset + weak magnification in slice shader

  • Chip shader algorithm:

    • Calculates the percentage of current progress based on the current timestamp
    • Calculates the color offset corresponding to the current progress
    • Calculate the scale corresponding to the current progress
    • Gets magnified texture coordinates
    • The amplified texture elements were color offset to obtain three groups of colors
    • Get RGBA values from each of the three groups of colors

  • The slice shader shake.fsh

Flash of white

  • The principle of

Slice shader: Add a white layer. The opacity of the white layer changes over time

  • Chip shader algorithm

    • Calculate the time period corresponding to the current timestamp through the mod function

    • Set a white mask

    • Calculate the amplitude of the white mask, the amplitude range is [0,0, 1.0]

    • Gets the texture of the original image and mixes it with the white mask color

    • There are many ways to mix colors. The commonly used one is mix function or the default mixing equation: Mask* (1-alpha) + weakMask*alpha

  • Slice shader shinewhite.fsh

burr

  • Principle: Tear + weak color offset

    Each row of pixels is randomly offset by a distance of -1 to 1 (here -1 to 1 is for texture coordinates), but if the entire image is offset by a larger value, we may not even see what the original image looks like. So our logic is to set a threshold below which we offset, and beyond which we multiply a reduction factor.

    The end result is that most rows are slightly offset, and only a few rows are significantly offset

  • Chip shader algorithm steps

    • The mod function calculates the time period
    • Calculate the amplitude in the range “0, 1”
    • Get the random offset value of pixel point, the range is [-1,1]
    • Determine if offset is required & calculate the texture’s X coordinate
    • The offset is required and the tear is large, that is, the color offset of X is large
    • No, the tear is small, which means the color offset of x is very small
    • Gets the texture coordinates after the tear
    • Three groups of striin after tearing were calculated and RGBA values in different groups were obtained

  • The chip shader glitch.fsh

illusion

  • Principle: residual shadow and color color offset overlay

    The effect of the shadow is to create a new layer based on the current position at a certain interval during the movement, and the opacity of the new layer decreases gradually over time. As a result, many layers of different transparency can be seen superimposed on each other in a single movement period, resulting in the effect of residual shadows. Residual shadow, let the picture over time in circular motion

    Color offset: Objects move with blue in front and red behind. Therefore, the whole process can be understood as: in the process of movement, some red channel values are lost in their original positions at an interval of time, and the values of these red channels will gradually recover as time shifts.

  • Chip shader algorithm

    • Calculate the current time period by mod function
    • Set magnification
    • Calculate the magnified texture coordinates
    • Obtain the pixel pixel in the whole process of rotation
    • Use the for loop to create a new layer, the phantom color
    • Gets the color superimposed by the original layer and the new layer

  • The slice shader vertigo.fsh

Complete code reference:github