rendering

Due to the recent busy work, there is no update effects column for a period of time, but also during the collection of some interesting effects code, after sorting will gradually add to the column to share with readers ~ (゚∀゚) Blue ♡

And try to explain the principle in simple language rather than using boring long words and obscure formulas [I encountered such an article to headache (Blue translation)], of course, if there are some readers feel that I did not clear, also welcome to leave a message to remind me to add.

The core algorithm

Sin (sin(x * a))*b, a = 3., b = 20. Is this mathematical formula quite strange (̀ㅂ•́)و✧? !

/// @note vec2(sin(uv.y * scale + sin(iTime * 3.) * 20. + id.y * 0.2), (sin(uV.y * scale + sin(iTime * 3.) * 20. Sin (uv) scale + x * sin (iTime * 3.) * 20 + id. * 0.2 x));Copy the code

The function of this mathematical formula is shown below

Obviously, the texture coordinates follow this “oscillation” mode in the X and y directions, and the period in this case is the same, but each texture coordinate is offset to a certain extent due to the different grid and its own coordinates

A visualization of the offs at one time is shown below

Notice that not all of the black areas are zeros, some of them are actually negative

It is due to the different offset of each coordinate and periodic oscillation over time that the magical effect at the beginning is finally achieved

Complete code and comments

#iChannel0 "file://.. /images/19.jpg" #iUniform float scale = 60. in {1., 100.} void mainImage( out vec4 fragColor, In vec2 fragCoord) {/// @note (from 0 to 1) vec2 uv = fragCoord/iresolution.xy; Vec2 id = floor(uv * scale); /// @note vec2(sin(uv.y * scale + sin(iTime * 3.) * 20. + id.y * 0.2), (sin(uV.y * scale + sin(iTime * 3.) * 20. Sin (uv.x * scale + sin(iTime * 3.) * 20. + id.x * 0.2)); offs *= .01; uv.xy += offs ; Vec3col = texture(iChannel0, uv).rgb; FragColor = vec4 (col 1.0); }Copy the code

For those of you who don’t know how to do this, please refer to my article Shader Toy, a very convenient plug-in for VSCode’s Shader.