Advice on how to do a mozaic effect on the entire screen?

I am interested in creating a visual effect similar to the transition in Super Mario World:

So, basically I want over a 1/2 second period for the resolution to continue to get lower and lower so that the pixels get huge, and then over another 1/2 second period, the resolution goes back up to normal.

Can anyone give me a push in the right direction as far as how I would go about doing this?

Is this something that can be done with a shader applied to the main GLView? Or is there a better way?

I dont know if this is the best solution (it possibly isnt) but you could render your entire scene into a texture, then render that texture across the entire screen with a fragment shader that pixelates the output. In the fragment shader you start with rendering texels from the texture to the screen 1 to 1 but as time goes by (perhaps controlled with a uniform updated at Client side) you sample increasingly larger parts of the texture, calculate the medium color across all texels and output that for each fragment within the area. (I hope this makes sense to you)

using your own framebuffer object:
– resize the area in which you are rendering using glViewport(0, 0, w, h)

otherwise if you are using an orthographic projection for you 2D renderer, resize the area

[QUOTE=john_connor;1284680]using your own framebuffer object:
– resize the area in which you are rendering using glViewport(0, 0, w, h)

otherwise if you are using an orthographic projection for you 2D renderer, resize the area[/QUOTE]

Sorry, I might not be understanding-- wouldn’t what you are suggesting just “zoom in”? I want the all of the pixels on the screen to get bigger (and so neighboring pixels would ultimately start to overlap each other), not for the size of the projection to increase (zoom).

what happens when supermario enters a level ?
– the screen resolution gets lower

what happens when supermario appears in the new level ?
– the screen resolution gets higher

using a framebuffer object:
setup
resizing the draw area
----> use glViewport(…) to resize the area and glBlitFramebuffer(…) to copy the rendered image

if i render everything into a framebuffer which is smaller than the window, and i copy the result into the window, i have to:
– copy the result into a part of the window (like this: the grey area is rendered, the remaining blue area is unused)
– or i have to resize my result to fit te window size
----> like that (using filter parameter GL_NEAREST)
----> or this (using filter parameter GL_LINEAR)

if you are using an orthographic projection (matrix), you can modify / resize the matrix (i think)

They might be generating out mipmaps for the whole screen and then choosing/blending progressively smaller ones to cause the pixelation. Maybe someone knows for sure. But john has the right basica idea. You are seeing the screen rendered to a smaller and smaller resolution pic basically.