1
\$\begingroup\$

I am making an educational game and am looking for options for a visual effect to show when something is "incorrect". So, I am looking to see if there's an easy way in openGL to temporarily distort everything on the screen (all sprites, everything), like pixelate it or something...

Does anyone know if this is possible?

I'm using cocos2d by the way...

Edit: here is an example of what I am looking for:

On the left, the original, on the right the pixelated / bitcrushed version: enter image description here

The thing is, I don't want to just do this to a single texture / sprite, I want to take the entire display output, and perform this pixelated effect on it and then revert back to normal after a second or something.

Improve this question
\$\endgroup\$
4
  • 1
    \$\begingroup\$ With modern shading tech there's usually a way to do just about any effect you can dream up. The trick is having a specific plan and breaking it down into steps/calculations the shader can do, and the geometry or textures you need to support it. So, step one is to edit your question and include more details of the effect you want. Maybe include images or links to video of similar effects, or make your own mock-up on a screenshot of your game. \$\endgroup\$
    – DMGregory ♦
    Apr 30, 2016 at 20:30
  • \$\begingroup\$ @DMGregory, I have updated the question \$\endgroup\$
    – patrick
    Apr 30, 2016 at 21:37
  • \$\begingroup\$ Are you using Render-To-Texture yet? \$\endgroup\$
    – MickLH
    Apr 30, 2016 at 22:49
  • \$\begingroup\$ @MickLH .. No, I have not, I am doing very little openGL directly, everything through cocos2d v2.x... Is that the best way to go with what I am wanting? \$\endgroup\$
    – patrick
    Apr 30, 2016 at 23:12

1 Answer 1

Reset to default
1
\$\begingroup\$

I don't know cocos2d, but the general approach to use for this effect is simply to just render the scene at a lower resolution into an offscreen render buffer (VBO, in OpenGL terminology), and then copy that low-resolution image to the screen, with smoothing turned off. (in OpenGL terms, that'd be performing the copy using GL_NEAREST instead of GL_LINEAR).

The lower the resolution of the buffer you render into, the larger the 'pixels' will be in your final image.

Improve this answer
\$\endgroup\$
3
  • \$\begingroup\$ You'll get significant aliasing with this approach, with many colors present in the full res image suddenly absent in the pixelated one. If that's a problem you can render to full res then manually downsample instead. \$\endgroup\$
    – MooseBoys
    May 1, 2016 at 2:19
  • \$\begingroup\$ @MooseBoys You can do the low-detail render with multisampling enabled if you're concerned about aliasing due to dense geometry, and with mipmapping enabled if you're concerned about aliasing due to texture resolution. But the provided screenshot has neither dense geometry nor high-detail textures, so aliasing probably isn't a real concern, which is why I didn't mention it. \$\endgroup\$
    – Trevor Powell
    May 1, 2016 at 8:11
  • \$\begingroup\$ Or you can render at full resolution, then downsample several times (in linear mode), then upsample again (in nearest mode). \$\endgroup\$
    – user253751
    May 4, 2016 at 8:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .