One frame in 16 milliseconds — how a game engine renders an image (3D)
About this app
A courtyard is rendered pass by pass as in modern real-time engines: geometry, depth, G-buffer, shadow map, per-pixel lighting, occlusion, reflections, bloom, tonemapping, anti-aliasing. Every intermediate image is computed from the scene; a time budget shows what 16.7 ms at 60 fps means. Recreated for illustration, not Unreal Engine software.
Deferred rendering in 16.7 milliseconds
At 60 frames per second each frame gets 16.7 milliseconds. Modern real-time engines split this time across many passes. In deferred rendering the GPU first writes each pixel's base colour, normal, material and depth into a G-buffer. Only then is lighting computed per pixel, which keeps many light sources affordable. Shadows, ambient occlusion (SSAO), reflections, transparent objects, bloom, tone mapping from HDR to the displayable range and anti-aliasing follow. Every pass costs time; if you want more effects or a higher resolution, you have to save somewhere else.
What the app shows
A courtyard with an arcade, a plant, a gold sphere and a glass block, computed pass by pass in twelve stations from geometry to anti-aliasing. All intermediate images are really computed from the scene in the browser: depth, albedo, normals, material, shadow map, lighting, SSAO, reflections, HDR, bloom and the final image, one at a time or as a grid. A budget panel shows model reference values in milliseconds per pass and the 16.7 ms marker. Recreated for illustration, not Unreal Engine software.
Try it yourself
Play the whole frame or jump to any pass with the slider. Raise the number of point lights to 64 and compare deferred with forward rendering. Set the target resolution to 4K: the bar runs over budget. Then switch off SSAO, reflections, bloom, shadows or anti-aliasing and see how much time you gain and what you lose in the image.
Frequently asked questions
- What is a G-buffer?
- A G-buffer (geometry buffer) consists of several images of the same size that store properties of the visible surface for every pixel: base colour (albedo), normal, material values such as roughness and metalness, and depth. In deferred rendering a later pass uses them to compute lighting per pixel.
- What is the difference between deferred and forward rendering?
- In forward rendering every object is lit by all lights as soon as it is drawn; the cost grows with objects times lights. In deferred rendering the surface data is stored first and lighting is computed once per pixel afterwards. Many lights become cheaper, but transparent objects need a separate pass.
- What does tone mapping do?
- The scene is computed internally with high dynamic range (HDR), so bright spots can be much brighter than white. Tone mapping maps these values to the range a screen can display without bright areas simply burning out.
- Are the milliseconds in the app measured?
- No, they are model reference values for a mid-range GPU. The intermediate images, however, are really computed from the scene. If the browser allows GPU timing, the app also shows the measured time for this small scene.
Subject: Computer science
More from Computer science
- Ackermann function
- Elevator simulator
- Binary workshop
- Binary versus linear search
- The Collatz problem
- Inside a CPU
- Swap the inside
- Function rooms in 3D
A VisuApp by heyprof: interactive, free in your browser, no sign-up. What is a VisuApp? · All apps