5 ms·

The Book of Shaders (2015)

188 points by max_ 1y ago

aquova 1y ago
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.
- hackerknew 1y ago
  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.
- hijp 1y ago
  interesting that even though it’s such a cherished resource no one’s taken up the flag to complete it after all this time.
  - TerraHertz 1y ago
    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?
90s_dev 1y ago
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.
- ghfhghg 1y ago
  Try looking up Ben Cloward on YouTube. He's quite concise and thorough.
- hackerknew 1y ago
  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.
- Uehreka 1y ago
  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.
- kaibee 1y ago
  https://iquilezles.org/articles/ https://iquilezles.org/articles/ Also recommend this as a resource, immensely useful and full of examples.
- pjmlp 1y ago
  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.
rossant 1y ago
(2015)? Also, there may be many earlier posts about this on HN.
thomascountz 1y ago
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 https://news.ycombinator.com/item?id=38032288 [0]: https://www.mayerowitz.io/blog/a-journey-into-shaders https://www.mayerowitz.io/blog/a-journey-into-shaders
raincole 1y ago
I feel this book is posted on HN every a few months for years, but it never gets completed...
deadbabe 1y ago
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.
brador 1y ago
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.
AndrewStephens 1y ago
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.
zkmon 1y ago
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.
- thomascountz 1y ago
  What real engineering work do you mean?
  - jonplackett 1y ago
    Vertexes, presumably.
  - Jare 1y ago
    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.
- AHTERIX5000 1y ago
  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.
  - pjmlp 1y ago
    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/9 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
kookamamie 1y ago
> Bump-maps The terminology seems rather old.
deleted 1y ago
[deleted]
bmitc 1y ago
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.

188 points by max_ 1y ago

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.

hackerknew 1y ago
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.
hijp 1y ago
interesting that even though it’s such a cherished resource no one’s taken up the flag to complete it after all this time.
- TerraHertz 1y ago
  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?

90s_dev 1y ago

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.

ghfhghg 1y ago
Try looking up Ben Cloward on YouTube. He's quite concise and thorough.
hackerknew 1y ago
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.
Uehreka 1y ago
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.
kaibee 1y ago
https://iquilezles.org/articles/ https://iquilezles.org/articles/ Also recommend this as a resource, immensely useful and full of examples.
pjmlp 1y ago
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.

rossant 1y ago

(2015)? Also, there may be many earlier posts about this on HN.

thomascountz 1y ago

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 https://news.ycombinator.com/item?id=38032288 [0]: https://www.mayerowitz.io/blog/a-journey-into-shaders https://www.mayerowitz.io/blog/a-journey-into-shaders

raincole 1y ago

I feel this book is posted on HN every a few months for years, but it never gets completed...

deadbabe 1y ago

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.

brador 1y ago

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.

AndrewStephens 1y ago

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.

zkmon 1y ago

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.

thomascountz 1y ago
What real engineering work do you mean?
- jonplackett 1y ago
  Vertexes, presumably.
- Jare 1y ago
  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.
AHTERIX5000 1y ago
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.
- pjmlp 1y ago
  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/9 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

kookamamie 1y ago

> Bump-maps The terminology seems rather old.

deleted 1y ago

[deleted]

bmitc 1y ago

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.