As others have pointed out, this book is incomplete (and has been for some years), though it is considered foundational by many.
A different intro I particularly enjoyed is A Journey into Shaders[0], which succinctly covers signed distance functions and leaves you with a small finished project.
If you're discovering this for the first time and think it looks interesting, I shall post the customary warning to perhaps not bother. It's a well-written resource, for what's there, but it is left unfinished right where things start getting interesting and hasn't had an update in almost a decade now.
I learned so much from this website many years ago when I was first discovering webgl programming. It is unfortunately unfinished, yes, but those unfinished chapters on advanced topics make for curiosity and the desire to learn more. There are plenty of other resources that fill in the details, but this is a great beginner guide.
I hadn't seen this before, thought it looks interesting. Wondered why it is perpetually unfinished... until I saw the 'Make an off-line version of this book' and 'Make a PDF of the book' sections.
Oh, OK. The authors have chronic obsessive abstraction syndrome, aka Endpoint Avoidance. What a shame.
Anyone have links to an actual PDF of it? Or a zip of the entire 'book' fileset?
I have tried a few times to learn shaders, but it always feels like I'm about 20 years behind on all sorts of random but necessary facts about shaders with no way to catch up in a reasonable timeframe. This book looks like it could help catch me up, and I like that all the code samples are interactive and immediately update.
If you stick with Web 3D, no worries, because those standards by nature of the Web standards, are also like trailing behind 10 years in native 3D hardware capabilities.
Also they have the benefit of having been designed from the ground up for managed languages on the host side.
The major paint point is lack of debugging tools, as browser vendors don't see as a priority having that kind of support on their developer tools.
Honestly this is exactly the kind of area where I’ve found things like OpenAI’s Deep Research and Anthropic’s Advanced Research help a ton. Tell the LLM what you’ve learned, what kinds of things you want to know, and if you don’t know what you want to know then heck, tell it how you feel (like you just did in this comment). I generally try to give it a nice chunky paragraph or two of background and questions.
In my experience, the LLM is usually good at surveying the field, finding resources you might not have found, and evaluating the quality of learning resources. The report that comes back might be super juicy, or it might just point you in some new directions, but it will probably help you get unstuck.
Yes, this is exactly what this website is for, and the interactive examples put you right in to programming in glsl and give such an awesome base to experiment.
There are plenty of resources out there as you get more advanced, but imo bookofshaders is a great starting resource.
Everytime I think I understand shaders, I find examples of people running entire simulated worlds inside a shader and I no longer understand how that is possible.
This is by far the gentlest introduction to shaders I have found. It was a great help when I was working on a toy system to crossfade between images on a web page.
For some reason, I find that for real engineering work a lot of work happens outside of fragment shaders. I think fragment shaders were romanticized far more than what they deserve.
Fragment shaders are perhaps over over-represented due to old WebGL style and easiness of integration, full screen quad + a shader is quite self contained setup.
Compute shaders are much more interesting and widely used in modern graphics though. No fixed rasterizing setup needed, just buffers for data in/out and a kernel with access to the usual GPU syncing primitives in between.
Side note that WebGL only doesn't have compute, because Google sabotaged the effort, asserting that WebGPU was right around the corner, so there was no need to adopt Intel's work into Chrome.
Shader parameter management, visibility and culling, shadow and lighting setup, scriptable pipelines, geometry shader orchestration, etc. There's a lot of work involved in preparing the stuff that you'll ask your shaders to, well, shade. But I wouldn't exclude shaders from "real engineering work", they're all parts of the whole.
Does anyone have any suggestions for the best way to learn WebGPU/wpgu without much exposure to prior APIs such as OpenGL, WebGL, or Vulkan? As in, I'm wanting to learn WebGPU/wgpu inside and out, but I don't much want to learn about other APIs. But this has proved difficult due to a dearth of resources on WebGPU and it's new shader language, WGSL.
As others have pointed out, this book is incomplete (and has been for some years), though it is considered foundational by many.
A different intro I particularly enjoyed is A Journey into Shaders[0], which succinctly covers signed distance functions and leaves you with a small finished project.
Previously discussed : 555 points by superMayo on Oct 26, 2023 | 71 comments | https://news.ycombinator.com/item?id=38032288
[0]: https://www.mayerowitz.io/blog/a-journey-into-shaders
If you're discovering this for the first time and think it looks interesting, I shall post the customary warning to perhaps not bother. It's a well-written resource, for what's there, but it is left unfinished right where things start getting interesting and hasn't had an update in almost a decade now.
I learned so much from this website many years ago when I was first discovering webgl programming. It is unfortunately unfinished, yes, but those unfinished chapters on advanced topics make for curiosity and the desire to learn more. There are plenty of other resources that fill in the details, but this is a great beginner guide.
interesting that even though it’s such a cherished resource no one’s taken up the flag to complete it after all this time.
I hadn't seen this before, thought it looks interesting. Wondered why it is perpetually unfinished... until I saw the 'Make an off-line version of this book' and 'Make a PDF of the book' sections.
Oh, OK. The authors have chronic obsessive abstraction syndrome, aka Endpoint Avoidance. What a shame.
Anyone have links to an actual PDF of it? Or a zip of the entire 'book' fileset?
I have tried a few times to learn shaders, but it always feels like I'm about 20 years behind on all sorts of random but necessary facts about shaders with no way to catch up in a reasonable timeframe. This book looks like it could help catch me up, and I like that all the code samples are interactive and immediately update.
https://iquilezles.org/articles/ Also recommend this as a resource, immensely useful and full of examples.
If you stick with Web 3D, no worries, because those standards by nature of the Web standards, are also like trailing behind 10 years in native 3D hardware capabilities.
Also they have the benefit of having been designed from the ground up for managed languages on the host side.
The major paint point is lack of debugging tools, as browser vendors don't see as a priority having that kind of support on their developer tools.
Honestly this is exactly the kind of area where I’ve found things like OpenAI’s Deep Research and Anthropic’s Advanced Research help a ton. Tell the LLM what you’ve learned, what kinds of things you want to know, and if you don’t know what you want to know then heck, tell it how you feel (like you just did in this comment). I generally try to give it a nice chunky paragraph or two of background and questions.
In my experience, the LLM is usually good at surveying the field, finding resources you might not have found, and evaluating the quality of learning resources. The report that comes back might be super juicy, or it might just point you in some new directions, but it will probably help you get unstuck.
Yes, this is exactly what this website is for, and the interactive examples put you right in to programming in glsl and give such an awesome base to experiment.
There are plenty of resources out there as you get more advanced, but imo bookofshaders is a great starting resource.
Try looking up Ben Cloward on YouTube. He's quite concise and thorough.
I feel this book is posted on HN every a few months for years, but it never gets completed...
Everytime I think I understand shaders, I find examples of people running entire simulated worlds inside a shader and I no longer understand how that is possible.
This is by far the gentlest introduction to shaders I have found. It was a great help when I was working on a toy system to crossfade between images on a web page.
Such a shame it has never been completed.
For some reason, I find that for real engineering work a lot of work happens outside of fragment shaders. I think fragment shaders were romanticized far more than what they deserve.
Fragment shaders are perhaps over over-represented due to old WebGL style and easiness of integration, full screen quad + a shader is quite self contained setup.
Compute shaders are much more interesting and widely used in modern graphics though. No fixed rasterizing setup needed, just buffers for data in/out and a kernel with access to the usual GPU syncing primitives in between.
Side note that WebGL only doesn't have compute, because Google sabotaged the effort, asserting that WebGPU was right around the corner, so there was no need to adopt Intel's work into Chrome.
This was back in 2020,
https://github.com/9ballsyndrome/WebGL_Compute_shader/issues...
Thankfully we are all now writing easy, portable, WebGPU computer shaders, even ShaderToy supports them now. /s
What real engineering work do you mean?
Shader parameter management, visibility and culling, shadow and lighting setup, scriptable pipelines, geometry shader orchestration, etc. There's a lot of work involved in preparing the stuff that you'll ask your shaders to, well, shade. But I wouldn't exclude shaders from "real engineering work", they're all parts of the whole.
Vertexes, presumably.
Does anyone have any suggestions for the best way to learn WebGPU/wpgu without much exposure to prior APIs such as OpenGL, WebGL, or Vulkan? As in, I'm wanting to learn WebGPU/wgpu inside and out, but I don't much want to learn about other APIs. But this has proved difficult due to a dearth of resources on WebGPU and it's new shader language, WGSL.
This seems perfect for AI. I want one window with the AI code generator and a second window with the output to see the shader.
(2015)?
Also, there may be many earlier posts about this on HN.
> Bump-maps
The terminology seems rather old.