Achieving Retro Resolution with HD

Question

I couldn't really find any tips on this (or perhaps I just lack the proper words once again), but I'm thinking about how to get some retro looks (SNES 16 Bit, specifially) using a modern system. Basically, the game still runs with the native resolution, however, vertially and horizontally we're limited to 256x224 (512x448). The colour palette is not an issue nowadays.

So I basically came up with this idea and am wondering if it's a smart approach (using OpenGL):

1. Create Orthogonal Projection Matrix with 256 units width and 224 units wide.
2. Use a fragment shader that doesn't do anti-aliasing on the textures, so the textures are upscaled to look pixel-y.

Since I couldn't really find a shader for 2), I also came up with a plan b):

1. Same as 1a)
2. Don't use textures at all, replace pixels with 1x1 coloured quads, convert spritesheets to 3D models made of quads.

I think plan a) seems more realistic, however. But I do wonder how other games (Shovel Knight, Freedom Planet) approach a pixel-y, retro look that stays true to the systems of 20 years ago.

Answer 1

If you open the image above in its full resolution and look closely (with something like Magnifier on Windows), you should see that all the pixels simply have something like a blurred edge.

Since there can be seen standalone "edges" of pixels, it is clearly not a post-processing method. When looking at screenshots in different resolutions, the edge appears to be always one pixel wide.

This leads me to a conclusion that they're probably using textures with bilinear filtering disabled and they're doing the filtering manually in a shader, by taking multiple samples from the texture within the screen pixel distance.

The way I would implement this is by taking screen-space derivatives of texture coordinates and using multiple blur offsets.

In HLSL:

// define "offsets" as an array of float2 with each number between [-0.5;0.5], preferably random
float2 dx = ddx( texcoord );
float2 dy = ddy( texcoord );
float4 color = float4(0,0,0,0);
for( int i = 0; i < numOffsets; ++i )
    color += tex2D( texture, texcoord + dx * offsets[ i ].x + dy * offsets[ i ].y );
color /= numOffsets;