MODERN GPU, 2023

The modern GPU is a general-purpose machine that also draws. This era covers the explicit APIs, requests a real WebGPU adapter from your browser, reads WGSL compute shaders, and works through ray and path tracing, denoising, temporal upscaling and tensor cores.

Graphics track · 24 missions · boss mission, written exam and certificate · free, no signup. Everything below runs in the browser terminal on the SERVBG home page.

Open MODERN GPU in the terminal

What you will do

  1. push the reference scene through this era as an albedo texture ref

    By 2023 a texture is an input to the lighting, not the lighting. The same image feeds a shader that recomputes what light does to it every frame.

  2. see which GL context and float support this browser handed over device

    WebGL 2 shipped in Chrome 56 and Firefox 51 in January 2017 and is OpenGL ES 3.0 behind a JavaScript binding. Whether it will render into a float texture is an extension, not a guarantee.

  3. list the explicit graphics APIs and the year each one shipped apis

    Mantle, announced in September 2013 and shipped in January 2014, started it; Metal followed in 2014, DirectX 12 in 2015, Vulkan 1.0 in February 2016. All four moved work the driver used to guess at into the application, where it can be measured.

  4. feature-detect navigator.gpu and actually request an adapter webgpu

    WebGPU shipped in Chrome 113 in May 2023. navigator.gpu existing is not the same as an adapter existing, which is why the check takes two steps and a fallback.

  5. read a real WGSL compute shader: a tiled matrix multiply wgsl

    WGSL is the WebGPU shading language. @workgroup_size(8, 8, 1) declares 64 invocations per workgroup, and var<workgroup> is the scratchpad all 64 of them share.

  6. simulate a 64-workgroup dispatch on the CPU and time it compute 64

    Sixty-four workgroups of 64 invocations is 4096 threads, one per element of a 64x64 result. One CPU thread walks them in order; a GPU launches them all and hides the memory stalls by switching between them.

  7. see the bandwidth wall and the two habits that get around it memory

    From 0.5 GB/s on a Voodoo in 1996 to over 1000 GB/s on a 2023 card, and it is still not enough. Most kernels run out of bytes long before they run out of arithmetic.

  8. learn what RT cores do and why ray traced images are noisy rt

    Consumer ray tracing hardware arrived with the RTX 20 series in September 2018 and RDNA 2 in November 2020. The fixed-function units walk a BVH and test triangles; everything else stays on the general cores.

  9. build and walk a bounding volume hierarchy over this scene bvh

    A BVH turns a linear search over a million triangles into roughly twenty node visits. At nine primitives the tree costs more than it saves, which is why the shader here tests all nine directly.

  10. read the Cornell box the tracer is about to render scene

    Cindy Goral and her colleagues at Cornell built the original box out of wood in 1984 and measured the light inside it, so a render could be checked against a photometer reading rather than against taste.

  11. set the path length to a single bounce, direct light only bounces 1

    One bounce is what a rasteriser with one shadow map gives you: lit where the lamp reaches, black everywhere else, and no colour bleeding at all.

  12. start the progressive path tracer on the monitor trace

    One sample per pixel per frame, folded into a running mean across two ping-ponged textures. A texture cannot be read and written in one draw call, so there have to be two.

  13. read the accumulated sample count and what it buys samples

    Monte Carlo error falls as one over the square root of the sample count. Four times the samples for half the noise, which is why offline renderers quote thousands and real-time ones denoise instead.

  14. see the in-shader hash that seeds every random decision noise

    There is no random number generator in a fragment shader. The seed is a hash of gl_FragCoord.xy plus the frame index, so the noise differs per pixel and per frame and is identical on every machine.

  15. learn how the ceiling area light is sampled directly light

    A bounce ray off this floor finds the lamp by accident about once in twenty tries. Next event estimation traces one shadow ray straight at a random point on the light instead, and divides by the probability of having picked it.

  16. open the path length to four bounces for full colour bleeding bounces 4

    Four bounces is close to converged for a diffuse box. The red and green creeping onto the white box and sphere is light that touched a coloured wall on the way, and no rasteriser gets that for free.

  17. run a 3x3 box filter on the display pass denoise on

    A box filter is the crudest denoiser there is and it blurs edges along with the noise. Real ones read the depth, normal and albedo buffers so they refuse to mix pixels from different surfaces.

  18. render at 160x120 and stretch it to fill the monitor upscale 2x

    A quarter of the pixels costs a quarter as much, so the same budget buys four times the samples. DLSS in 2018 and FSR in June 2021 both start from that trade.

  19. go back to tracing every pixel natively upscale off

    Stretching 160x120 with a filter that knows nothing about the scene is the honest floor of upscaling. Everything better than this gets its extra information from somewhere.

  20. learn where reconstructed pixels actually come from temporal

    Jittered sub-pixel offsets, motion vectors that reproject last frame onto this one, and rejection rules for history that no longer matches. Get rejection wrong and you get ghosting, or a boiling image.

  21. meet the tensor cores and the precision ladder they run tensor

    Tensor cores arrived with Volta in 2017 and do one thing: a small matrix multiply-accumulate per instruction, FP16 in and FP32 out. INT8 and below trade precision for bytes, and bytes are usually the wall.

  22. see why a chat reply arrives one token at a time inference

    Prefill runs the whole prompt at once and is compute bound. Decode emits one token at a time, reads every weight for each one, and is memory bound. One model, two bottlenecks, one request.

  23. render 32 more samples right now and watch the noise drop samples 32

    Thirty-two samples per pixel is nothing by offline standards and plenty to watch the soft shadows resolve, the colour bleeding appear and the speckle thin out.

  24. Boss missionresume the tracer with 2 or more bounces, 32 or more accumulated samples, and denoise on trace

    From four fixed colours on a CGA card in 1981 to a path traced Cornell box running in a browser tab in 2023, and the silicon that solves this frame is the silicon the AI era runs on. Type AI in the tab row and ask its ORACLE what it is made of.

Certificate

This track is certifiable. Clear the boss mission in the terminal, then run EXAM GPU for the written paper: 20 server-graded questions drawn from our own bank, pass mark 14 of 20. The certificate is issued once both are done, and it carries a verification code.

Nearby eras

Previous
2011 · WebGL
Call raw WebGL from JavaScript with no library: contexts and limits, buffers, shader programs, GL state, draw calls and textures.

All 25 eras in the Terminal Academy

Open MODERN GPU in the terminal