Pixelate entire canvas


i am drawing a 3d scene with lighting, and i would like to pixelate the entire canvas to give it a low-resolution or mosaic effect. i started experimenting with shaders, but i was finding that i have to reconstruct all my lighting effects from scratch, and everything else was getting very complex (i.e. interactions between the 3d shapes in my scene).

is there an easier way to do what i’m trying to do, i.e. something like “render entire scene to off-canvas buffer —> pixelate image by iterating through off-canvas buffer —> draw off-canvas buffer to canvas”? my canvas already looks exactly like i want it to, i just want to make the entire thing a little lower resolution.


Hi there,

Using a shader is the way to go. But you don’t need to re-work everything out.

A pixelate effect is post-processing, so you just need to draw your scene to a frame buffer and use that output as a input texture for your shader.


What I would do would be to draw the scene into an ofFbo (offscreen canvas), then draw that flat image to the stage with a shader like this:

You could draw any way you want into the ofFbo, using your lighting effects, etc, the pixelation effect would just be working on the 2D result.



thank you! i’m working through these suggestions and i’ll post here when i have results.