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\$
  • 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 '16 at 20:30
  • \$\begingroup\$ @DMGregory, I have updated the question \$\endgroup\$ – patrick Apr 30 '16 at 21:37
  • \$\begingroup\$ Are you using Render-To-Texture yet? \$\endgroup\$ – MickLH Apr 30 '16 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 '16 at 23:12
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\$
  • \$\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 '16 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 '16 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\$ – immibis May 4 '16 at 8:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.