6 ms·

A trip through the Graphics Pipeline (2011)

56 points by 1_player 6y ago

FredrikMeyer 6y ago
I've just started learning WebGL+Three.js. Does anyone know how similar this pipeline is to how it is done in a browser? (and how much of this is still true 9 years later?...)
- winterismute 6y ago
  The pipeline is essentially the same since what the article describes is the architectural abstraction modern GPUs implement. WebGL is essentially only a layer over the system GPU APIs (DirectX, OpenGL, Vulkan, btw the fact you are using WebGL does not mean you are using the OS OpenGL since, for example, on Windows most browsers use a SW component called ANGLE to translate WebGL calls into DirectX commands, due to the fact that the DirectX path on Windows is often more robust/performant) which are implemented by the driver, and thus are the main way to communicate with the HW and drive the graphics acceleration. This being said, you can learn WebGL and especially Three.js without knowing the pipeline as described there, but knowing it will help you understand some subtleties or if you ever want to move to a lower level.
- dragontamer 6y ago
  I haven't read this yet (and I'm not a graphics expert), but I expect this blog-series / WebGL to apply to DirectX11-era and OpenGL-era code (which still exists today). DirectX12 and Vulkan have changed the pipeline by making it more flexible, but still largely follow the vertex -> geometry -> pixel pipeline. Because the DirectX11 (and OpenGL) immediate-mode pipelines were used for so long, I expect that for the DECADES to come, the information in this blog will remain relevant (even if more efficient techniques advance the state of the art).
sscott 6y ago
This is a fantastic resource and a must read but it is quite out of date in many respects. Especially in respect to the introduction of low level APIs, mesh shaders etc etc.
- Impossible 6y ago
  It would be nice to see a modern version of this. Low level APIs largely change resource binding, state management and command execution, when they originally launched there weren't many changes to the core pipeline from say... DX11. But as you said with the introduction of mesh shaders and raytracing shaders there are two new, radically different alternative pipelines. Updating the compute section to include WaveIntrinsics/subgroups, async compute queues, copy queue. Maybe even explore ML hardware (Tensor Cores)
dfischer 6y ago
I am seeking a first principles approach to graphics. From poking a chip to manipulating bits and drawing pixels on the screen in the most raw form. Anyone know of any such books/tutorials? I need to study how the first terminals worked. Assembly as the highest level abstraction. Anything equivalent to assembly anyway - a forth would be fine.
- el_oni 6y ago
  Maybe something like Ben Eater's video card series? https://youtu.be/l7rce6IQDWs https://youtu.be/l7rce6IQDWs If i remember correctly he assembles a gfx card on a bread board. So its fairly fundamental
- gruelsandwich 6y ago
  I don't know how well it applies, but the Coursera course(s) NAND2TETRIS could be what you're looking for. You essentially learn how a computer works from the lowest level (logic gates), to the OS, where the final project is to make a little game. On the way, you also make a simple asslembly language, and a programming language that compiles to the assembly language.
- f00zz 6y ago
  Maybe check out this book: https://www.amazon.com/Designing-Video-Game-Hardware-Verilog/dp/1728619440 https://www.amazon.com/Designing-Video-Game-Hardware-Verilog...
- dahart 6y ago
  This one might be interesting to you: https://youtu.be/l7rce6IQDWs https://youtu.be/l7rce6IQDWs “The world’s worst video card?” Ben builds a framebuffer display device on a bread board from scratch, you’ll understand what every transistor does at a high level in an hour (don’t miss part 2). That is abstractly what first principles graphics looked like some time ago - pixels were represented by a block of main memory, and the video system simply scanned that memory at the same frequency as the CRT monitor’s beam. I’d say it’s pretty important to remember that what counts as “first principles” graphics has changed over time, and there was a time before frame buffers (the first Pong game was displayed on an oscilloscope) and the way we use framebuffers today is completely different - there is no more direct access to pixels in the same way old terminals used to work. The article here is detailing how we use a higher level API to draw higher level primitives, and the hardware takes care of the pixels. I’d love to hear a little more about your goal... what’s driving you to study the old terminals?
mypalmike 6y ago
I was expecting this to link to Jim Blinn's very similarly named pair of excellent books on 3D graphics fundamentals. I wonder if this title is an homage to this (older) work.

56 points by 1_player 6y ago

I've just started learning WebGL+Three.js. Does anyone know how similar this pipeline is to how it is done in a browser? (and how much of this is still true 9 years later?...)

winterismute 6y ago
The pipeline is essentially the same since what the article describes is the architectural abstraction modern GPUs implement. WebGL is essentially only a layer over the system GPU APIs (DirectX, OpenGL, Vulkan, btw the fact you are using WebGL does not mean you are using the OS OpenGL since, for example, on Windows most browsers use a SW component called ANGLE to translate WebGL calls into DirectX commands, due to the fact that the DirectX path on Windows is often more robust/performant) which are implemented by the driver, and thus are the main way to communicate with the HW and drive the graphics acceleration. This being said, you can learn WebGL and especially Three.js without knowing the pipeline as described there, but knowing it will help you understand some subtleties or if you ever want to move to a lower level.
dragontamer 6y ago
I haven't read this yet (and I'm not a graphics expert), but I expect this blog-series / WebGL to apply to DirectX11-era and OpenGL-era code (which still exists today). DirectX12 and Vulkan have changed the pipeline by making it more flexible, but still largely follow the vertex -> geometry -> pixel pipeline. Because the DirectX11 (and OpenGL) immediate-mode pipelines were used for so long, I expect that for the DECADES to come, the information in this blog will remain relevant (even if more efficient techniques advance the state of the art).

sscott 6y ago

This is a fantastic resource and a must read but it is quite out of date in many respects. Especially in respect to the introduction of low level APIs, mesh shaders etc etc.

Impossible 6y ago
It would be nice to see a modern version of this. Low level APIs largely change resource binding, state management and command execution, when they originally launched there weren't many changes to the core pipeline from say... DX11. But as you said with the introduction of mesh shaders and raytracing shaders there are two new, radically different alternative pipelines. Updating the compute section to include WaveIntrinsics/subgroups, async compute queues, copy queue. Maybe even explore ML hardware (Tensor Cores)

dfischer 6y ago

I am seeking a first principles approach to graphics. From poking a chip to manipulating bits and drawing pixels on the screen in the most raw form. Anyone know of any such books/tutorials? I need to study how the first terminals worked. Assembly as the highest level abstraction. Anything equivalent to assembly anyway - a forth would be fine.

el_oni 6y ago
Maybe something like Ben Eater's video card series? https://youtu.be/l7rce6IQDWs https://youtu.be/l7rce6IQDWs If i remember correctly he assembles a gfx card on a bread board. So its fairly fundamental
gruelsandwich 6y ago
I don't know how well it applies, but the Coursera course(s) NAND2TETRIS could be what you're looking for. You essentially learn how a computer works from the lowest level (logic gates), to the OS, where the final project is to make a little game. On the way, you also make a simple asslembly language, and a programming language that compiles to the assembly language.
f00zz 6y ago
Maybe check out this book: https://www.amazon.com/Designing-Video-Game-Hardware-Verilog/dp/1728619440 https://www.amazon.com/Designing-Video-Game-Hardware-Verilog...
dahart 6y ago
This one might be interesting to you: https://youtu.be/l7rce6IQDWs https://youtu.be/l7rce6IQDWs “The world’s worst video card?” Ben builds a framebuffer display device on a bread board from scratch, you’ll understand what every transistor does at a high level in an hour (don’t miss part 2). That is abstractly what first principles graphics looked like some time ago - pixels were represented by a block of main memory, and the video system simply scanned that memory at the same frequency as the CRT monitor’s beam. I’d say it’s pretty important to remember that what counts as “first principles” graphics has changed over time, and there was a time before frame buffers (the first Pong game was displayed on an oscilloscope) and the way we use framebuffers today is completely different - there is no more direct access to pixels in the same way old terminals used to work. The article here is detailing how we use a higher level API to draw higher level primitives, and the hardware takes care of the pixels. I’d love to hear a little more about your goal... what’s driving you to study the old terminals?

mypalmike 6y ago

I was expecting this to link to Jim Blinn's very similarly named pair of excellent books on 3D graphics fundamentals. I wonder if this title is an homage to this (older) work.