How to implement a pixelated screen transition shader?

Question

I am interested in creating a screen transition seen in a lot of retro games. The transition is just a kind of pixelated distortion that increases or decreases in granularity over time.

The effect is present in Super Mario World, and can be seen recreated in this clip.

Also, here is an image depicting the transition (ignore the gradual lightening of the screen):

I want to achieve this by animating the uniforms of a GLSL shader.

Unfortunately, I don't know how to design the shader.

I know how to sample gradient textures to create various screen wipes, as well as how to sample noise textures to create simple distortion effects. But I can't figure out exactly how to create this effect.

Any advice on how to set up a shader to achieve this effect?

Answer 1

You need to make psuedo pixels. The great thing about this effect for this purpose is that it didn't do an average of the pixels, but chose the colir at the top left corner, so you won't have to do a costly averageing shader.

You'll need to pass in the screen size to the shaders (screenSize) and the size of the pixels you want (pixelSize) and you'll have to have uv/texture coordinates.

So, to make the uv coordinates "pixelated" you'll have to round to the nearest pseudo pixels corners. Basically, multiply by screen size over pixel size, floor and divide by screensize over pixelsize again:

vec2 newUV = floor(uv * screenSize / pixelSize) / screenSize * pixelSize;

Now just gradually increase pixelSize and use newUV instead of uv