Recreating this flat-shaded look

Question

I'll keep it short. How does one achieve the effect depicted in the image below? Is it feasible to do in realtime? It looks deceptively simple, but it probably isn't. Are there any keywords I can search for to get more information about programming the shaders to achieve this look? Thanks.

Answer 1

That does not appear to be using any kind of specific flat-shading approach, at all. The shading is smooth, though the projected shadows are hard-edged, and the objects are not rounded.

The specific lighting effect appears to be a combination of ambient occlusion (probably SSAO, "screen space ambient occlusion") which is what gives it that soft shadowing in crevices and regular ol' hard-edged shadow mapping and a plain lighting model (probably just Phong lighting).

An orthographic projection is being used. The only light appears to be a directional light which combined with all the objects being squared and flat is why each face has a mostly uniform shade (not any kind of special flat-shading technique).

Answer 2

That looks like occlusion map (corresponds to physically correct diffuse material under uniform white light) combined with directional light (going from top, creates sharp shadows).

Occlusion maps are usually made using ray-tracing techniques. They can not be generated in realtime with sufficient quality on current home computers.

Those maps are usually pre-rendered into texture. That texture can be later rendered using classic GPU rasterization techniques.

Answer 3

This looks like:

• All white, diffuse materials
• A strong white directional light from the upper left, with high-quality shadow filtering (the shadows are not overly soft, but they are free of aliasing)
• A blue sky (hemispherical) light, with high-quality occlusion - even in the shadows, areas more open to the sky are brighter
• There may also be global illumination (bounce lighting). It is difficult to diagnose whether there is actual GI or "simply" high-quality AO as, absent obvious color bleeding, the effects are quite subtle. But if GI is present it may still contribute subconciously to the overall impression of the image's realism, the brightness of the sunlight, etc.
• It's also worth noting that this image is perfectly antialiased, which implies lots of samples and a high quality (e.g. Gaussian) resolve filter.

In short, one could probably come close to this level of image quality in real time, using for instance high-quality PCF shadow filtering, a high-end AO technique such as HBAO or Scalable AO, and a custom MSAA resolve. It would be a lot of work and you'd need a fairly powerful GPU.