GLSL shader example
Liquid Wipe Transition
Noise distorts only the mask between two procedural patterns. Clamp progress endpoints to ensure either input can be shown in full.
Live example
Edit the code and the preview updates as you type.
What to observe
Liquid Wipe Transition.
Mechanism
Noise distorts only the mask between two procedural patterns. Clamp progress endpoints to ensure either input can be shown in full.
The controlling code
float edge=uv.x+.22*(fbm(uv*7.+u_time*.1)-.5);float mask=u_parameter<=0.?0.:u_parameter>=1.?1.:1.-smoothstep(u_parameter-.02,u_parameter+.02,edge);vec3 a=palette(uv.x),b=vec3(.12,.8,.6)*(.6+.4*sin(uv.y*35.));c=mix(a,b,mask);
Experiment
Replace the noise amplitude .22 in the edge expression with 0.. The irregular liquid boundary becomes a straight vertical wipe; the endpoint checks still show all of input a at parameter 0 and all of b at 1.
Debugging and cost
The mask evaluates four fbm octaves before mixing two procedural colors. Change u_parameter-.02 and u_parameter+.02 to offsets of .08 to broaden the blend zone without changing the noise frequency uv*7..