7 ms·

Shader School - An introduction to GLSL shaders that runs in your web browser

255 points by ducaale 5y ago

silverfrost 5y ago
7 years old?
- pjmlp 5y ago
  Given the progress of WebGL adoption and development tools, still pretty much up to date, for the most part. Safari 15 just added WebGL 2.0 available on stable, and native debugging tools are still the way to go for most cases. After 10 years.
  - beebeepka 5y ago
    Yep, not much had changed over the last few years on that regard. Well, except running complex 3d scenes in a modern browser is mostly fine these days. Plenty of performance I still remember Macromedia/Adobe showing off their flash 3d engine. Nothing was accelerated, just software rendering. Ugly and slow but there wasn't anything better at the time. It went nowhere I think
    - pjmlp 5y ago
      Of course it went nowhere, we have spent 10 years catching up with 2011, after killing Flash. See Unreal Engine 3 demo on Flash. And with Web 3D reflecting 2012 hardware in 2021, no wonder that the answer for ultimate 3D and good debugging tools is native on mobile, or server side rendering with streaming.
      - dahart 5y ago
        > we have spent 10 years catching up with 2011, after killing Flash. Lol, Flash 3d was built on OpenGL and DirectX, which are still here and have progressed since then. What are we catching up with? Adobe chose to kill flash because of WebGL.
        pjmlp 5y ago
        Lol, it wasn't Adobe that killed plugins, rather an intifada against browser plugins, that is yet to match Adobe's tooling.
        dahart 5y ago
        Hahaha Flash abuse by advertisers and spammers is a big reason plugins met their well-deserved end. I really am sorry that you lost your favorite tools, Flash was truly awesome for animators and developers. What you’re talking about is separate and independent from GL APIs, which don’t attempt to compete in the artist-facing tooling space at all.
        pjmlp 5y ago
        The irony is that native game development and server side rendering is where all the 3D programming fun is nowadays. Even when WebGPU eventually comes out into stable Chrome, it will take again 10 years to similar adoption, and it won't be anything more than a plain 1.0 MVP, short of many things that Vulkan, Metal and DirectX 12 Ultimate are capable of in 2021. Enjoy your pyrrhic victory.
        dahart 5y ago
        Safari, made by Apple, was the lone holdout for WebGL2. You’re familiar with Apple’s relationship to Flash. No I won’t be surprised at all if Safari holds out on WebGPU, and it will be precisely because it offers functionality that Metal already has. > Enjoy your pyrrhic victory. I don’t understand why you’re repeatedly spending time on WebGL threads sharing sour grapes about Flash. They don’t compete. At all. WebGL is not an authoring tool, and Flash was. Your sentiment is just laughably misplaced. Adobe killed flash, Adobe alone is where your ire should be aimed, for not making an ecosystem that could withstand abusive content creators.
        pjmlp 5y ago
        As if WebGL and WebAssembly protect anything against abusive content creators. Worse, they can't be be turned off, can be used for tracking analytics as well and it isn't as if shaders can't be used for mining.
thrower123 5y ago
It seems really odd to me that GLSL and HLSL never unified into a common language.
- pjmlp 5y ago
  Because neither Nintendo nor Sony consoles use any of them, so in practice there are five major shading languages. You forgot MSL. And for WebGPU, it seems like C++, Rust and HLSL had a baby named WGSL. Finally, GLSL on desktop, GL ES, WebGL and Vulkan isn't the same language anyway, just close enough to port most shaders.
  - rectang 5y ago
    As an outsider, it's really hard to discern what I might choose to learn amongst graphics tech. I've tried to invest my learning in subjects and technologies that aren't going anywhere and where my knowledge will pay off over decades — computer science fundamentals, math, SQL, C, vanilla JavaScript, HTML, CSS, LaTeX, Git, Python, etc. It looks like everybody's still fighting it out in graphics though.
    - Agentlien 5y ago
      Honestly, if you learn hlsl or glsl it's not much work to learn the other. I originally learned opengl in school and after a few years of working with it I transitioned to a job where we primarily used Direct3D. I guess I had passively picked up enough bits and pieces along the way because I never really thought about the shift. I briefly looked at Vulkan when it first came out, but I haven't had the time to get into it. That's a whole different beast.
      - billti 5y ago
        This. I wrestled with the same topic a couple years ago. Not only which to use, but once you choose a “common” one (say OpenGL), then actually getting pixels in a window is still different across platforms (hence things like SDL and GLFW). For me I settled on: 1) Learn WebGL in the browser. It’s a pretty good subset of OpenGL [ES] and an easy environment to experiment in. Then 2) learn a more “native” approach with good tooling support, such as Direct3D 11. (I wouldn’t get into D3D12 or Vulkan until you learn the basics pretty well). As others have mentioned, while the landscape is confusing, the concepts across them are pretty similar once you get a foothold.
ducaale 5y ago
The sequel to shader-school: Learn the WebGL API https://github.com/stackgl/webgl-workshop https://github.com/stackgl/webgl-workshop
CodeArtisan 5y ago
https://thebookofshaders.com https://thebookofshaders.com Still incomplete but browsable online and has its own interactive shader editor (try to click on values like floats or vectors) https://thebookofshaders.com/edit.php?log=161127202429 https://thebookofshaders.com/edit.php?log=161127202429
- doctorhandshake 5y ago
  For anyone looking to pick up shaders for the first time, I recommend not beginning with the book of shaders. It’s an excellent introduction to a particularly heady slice of shader programming that, in my opinion, is a blind alley for folks new to shaders. I think focusing on fragment shaders rendering as full-screen quads makes the process feel more arcane and mind-shattering than it does when you consider the frag shader’s role in a 3D rendering pipeline. In the latter context, the simultaneous invocation of every frag doesn’t feel like a puzzle to solve but a reasonable part of getting pixels onscreen as part of a 3D render. For that reason I recommend newbies work on using fragments in the context of materials that include vertex and potentially compute shaders to manipulate geometry and to replicate things like phong shading or a shader-based particle system first.
  - jamal-kumar 5y ago
    It hasn't been really added to for a long time, either. I would be surprised at this point if they decide to finish the thing, it feels like I've been checking for over a year now, but starting out on an in-progress book that isn't even 50% of the way there yet sure sounds like a great exercise in disappointment. I'd love to see it get there and cover things more widely in terms of setting up a development environment as well as everything you mentioned, though.
modeless 5y ago
Maybe this is a good place to note that with the release of Safari 15 now every major browser has WebGL 2 enabled. It's finally possible to rely on WebGL 2 without excluding iOS users. For GLSL that means you can upgrade to a new major version of the language. Some limitations on loops have been lifted, bitwise integer operations are available, as well as many other things: https://webgl2fundamentals.org/webgl/lessons/webgl2-whats-new.html https://webgl2fundamentals.org/webgl/lessons/webgl2-whats-ne...
- poniko 5y ago
  And with the latest release of Chrome/Edge you can now tinker with WebGPU stable release.
  - greggman3 5y ago
    I must be misunderstood your comment but WebGPU is has not shipped yet except behind flags and or origin trials. the specs are still changing and not done
    - poniko 5y ago
      My bad it's in origin and available for tinkering nothing else, that was what I was going for.
  - pjmlp 5y ago
    To note that WSGL still is pretty much WIP, with many semantics up in the air how they will look like in version 1.0.
    - dangerbird2 5y ago
      It's also pretty broken for webassembly (which is where such a low-level API like WebGPU is going to have the biggest benefit), since Rust and C/C++ WebGPU bindings tend to fall out of API-compatibility with the browser implementation as Chrome and Firefox release new nightlies
sydthrowaway 5y ago
Very sad that none of the fragment shader experts have written a book focusing on generative art. The Book of Shaders is very basic. How to create something like this (including sound!) while thinking on a per color x,y basis is mind boggling. https://www.shadertoy.com/view/XsfXD2 https://www.shadertoy.com/view/XsfXD2
- jedimastert 5y ago
  Also not a book, but Sebastian Lague has some absolutely beautiful generative art https://www.youtube.com/user/Cercopithecan https://www.youtube.com/user/Cercopithecan
- modeless 5y ago
  Inigo Quilez has a ton of great material: https://iquilezles.org/www/index.htm https://iquilezles.org/www/index.htm It's not printed on dead trees but there's easily enough covered there for a book or three.
- train_robber 5y ago
  I would recommend having a look at "The Art of Code" youtube channel. There is some interesting material there. https://www.youtube.com/watch?v=rvDo9LvfoVE https://www.youtube.com/watch?v=rvDo9LvfoVE is a good first watch.
- pdkl95 5y ago
  Thinking about designing a scene in a fragment shader is already mind boggling. Writing a new shader from scratch live in front of an audience within a 25 minute deadline is insane. The demoscene calls this a "Shader Showdown" competition, and they are amazing to watch. A good example is the Revision 2021 semi-finals[1]. The entire video is worth watching, but I especially recommend watching the last half of evvvil-vs-flopine (from about 43:00); the last few minutes (from ~56:00) fundamentally changed my understanding of what is possible in a fragment shader. Ray marching into a hand crafted signed distance field is such a bizarre way of thinking about a scene. [1] https://www.youtube.com/watch?v=NBdRfFwuP40 https://www.youtube.com/watch?v=NBdRfFwuP40 edit: corrected 'last few minutes' time
- 5y ago

255 points by ducaale 5y ago

silverfrost 5y ago

7 years old?

pjmlp 5y ago
Given the progress of WebGL adoption and development tools, still pretty much up to date, for the most part. Safari 15 just added WebGL 2.0 available on stable, and native debugging tools are still the way to go for most cases. After 10 years.
- beebeepka 5y ago
  Yep, not much had changed over the last few years on that regard. Well, except running complex 3d scenes in a modern browser is mostly fine these days. Plenty of performance I still remember Macromedia/Adobe showing off their flash 3d engine. Nothing was accelerated, just software rendering. Ugly and slow but there wasn't anything better at the time. It went nowhere I think
  - pjmlp 5y ago
    Of course it went nowhere, we have spent 10 years catching up with 2011, after killing Flash. See Unreal Engine 3 demo on Flash. And with Web 3D reflecting 2012 hardware in 2021, no wonder that the answer for ultimate 3D and good debugging tools is native on mobile, or server side rendering with streaming.
    - dahart 5y ago
      > we have spent 10 years catching up with 2011, after killing Flash. Lol, Flash 3d was built on OpenGL and DirectX, which are still here and have progressed since then. What are we catching up with? Adobe chose to kill flash because of WebGL.
      - pjmlp 5y ago
        Lol, it wasn't Adobe that killed plugins, rather an intifada against browser plugins, that is yet to match Adobe's tooling.
        dahart 5y ago
        Hahaha Flash abuse by advertisers and spammers is a big reason plugins met their well-deserved end. I really am sorry that you lost your favorite tools, Flash was truly awesome for animators and developers. What you’re talking about is separate and independent from GL APIs, which don’t attempt to compete in the artist-facing tooling space at all.
        pjmlp 5y ago
        The irony is that native game development and server side rendering is where all the 3D programming fun is nowadays. Even when WebGPU eventually comes out into stable Chrome, it will take again 10 years to similar adoption, and it won't be anything more than a plain 1.0 MVP, short of many things that Vulkan, Metal and DirectX 12 Ultimate are capable of in 2021. Enjoy your pyrrhic victory.
        dahart 5y ago
        Safari, made by Apple, was the lone holdout for WebGL2. You’re familiar with Apple’s relationship to Flash. No I won’t be surprised at all if Safari holds out on WebGPU, and it will be precisely because it offers functionality that Metal already has. > Enjoy your pyrrhic victory. I don’t understand why you’re repeatedly spending time on WebGL threads sharing sour grapes about Flash. They don’t compete. At all. WebGL is not an authoring tool, and Flash was. Your sentiment is just laughably misplaced. Adobe killed flash, Adobe alone is where your ire should be aimed, for not making an ecosystem that could withstand abusive content creators.
        pjmlp 5y ago
        As if WebGL and WebAssembly protect anything against abusive content creators. Worse, they can't be be turned off, can be used for tracking analytics as well and it isn't as if shaders can't be used for mining.

thrower123 5y ago

It seems really odd to me that GLSL and HLSL never unified into a common language.

pjmlp 5y ago
Because neither Nintendo nor Sony consoles use any of them, so in practice there are five major shading languages. You forgot MSL. And for WebGPU, it seems like C++, Rust and HLSL had a baby named WGSL. Finally, GLSL on desktop, GL ES, WebGL and Vulkan isn't the same language anyway, just close enough to port most shaders.
- rectang 5y ago
  As an outsider, it's really hard to discern what I might choose to learn amongst graphics tech. I've tried to invest my learning in subjects and technologies that aren't going anywhere and where my knowledge will pay off over decades — computer science fundamentals, math, SQL, C, vanilla JavaScript, HTML, CSS, LaTeX, Git, Python, etc. It looks like everybody's still fighting it out in graphics though.
  - Agentlien 5y ago
    Honestly, if you learn hlsl or glsl it's not much work to learn the other. I originally learned opengl in school and after a few years of working with it I transitioned to a job where we primarily used Direct3D. I guess I had passively picked up enough bits and pieces along the way because I never really thought about the shift. I briefly looked at Vulkan when it first came out, but I haven't had the time to get into it. That's a whole different beast.
    - billti 5y ago
      This. I wrestled with the same topic a couple years ago. Not only which to use, but once you choose a “common” one (say OpenGL), then actually getting pixels in a window is still different across platforms (hence things like SDL and GLFW). For me I settled on: 1) Learn WebGL in the browser. It’s a pretty good subset of OpenGL [ES] and an easy environment to experiment in. Then 2) learn a more “native” approach with good tooling support, such as Direct3D 11. (I wouldn’t get into D3D12 or Vulkan until you learn the basics pretty well). As others have mentioned, while the landscape is confusing, the concepts across them are pretty similar once you get a foothold.

ducaale 5y ago

The sequel to shader-school: Learn the WebGL API https://github.com/stackgl/webgl-workshop https://github.com/stackgl/webgl-workshop

CodeArtisan 5y ago

https://thebookofshaders.com https://thebookofshaders.com Still incomplete but browsable online and has its own interactive shader editor (try to click on values like floats or vectors) https://thebookofshaders.com/edit.php?log=161127202429 https://thebookofshaders.com/edit.php?log=161127202429

doctorhandshake 5y ago
For anyone looking to pick up shaders for the first time, I recommend not beginning with the book of shaders. It’s an excellent introduction to a particularly heady slice of shader programming that, in my opinion, is a blind alley for folks new to shaders. I think focusing on fragment shaders rendering as full-screen quads makes the process feel more arcane and mind-shattering than it does when you consider the frag shader’s role in a 3D rendering pipeline. In the latter context, the simultaneous invocation of every frag doesn’t feel like a puzzle to solve but a reasonable part of getting pixels onscreen as part of a 3D render. For that reason I recommend newbies work on using fragments in the context of materials that include vertex and potentially compute shaders to manipulate geometry and to replicate things like phong shading or a shader-based particle system first.
- jamal-kumar 5y ago
  It hasn't been really added to for a long time, either. I would be surprised at this point if they decide to finish the thing, it feels like I've been checking for over a year now, but starting out on an in-progress book that isn't even 50% of the way there yet sure sounds like a great exercise in disappointment. I'd love to see it get there and cover things more widely in terms of setting up a development environment as well as everything you mentioned, though.

modeless 5y ago

Maybe this is a good place to note that with the release of Safari 15 now every major browser has WebGL 2 enabled. It's finally possible to rely on WebGL 2 without excluding iOS users. For GLSL that means you can upgrade to a new major version of the language. Some limitations on loops have been lifted, bitwise integer operations are available, as well as many other things: https://webgl2fundamentals.org/webgl/lessons/webgl2-whats-new.html https://webgl2fundamentals.org/webgl/lessons/webgl2-whats-ne...

poniko 5y ago
And with the latest release of Chrome/Edge you can now tinker with WebGPU stable release.
- greggman3 5y ago
  I must be misunderstood your comment but WebGPU is has not shipped yet except behind flags and or origin trials. the specs are still changing and not done
  - poniko 5y ago
    My bad it's in origin and available for tinkering nothing else, that was what I was going for.
- pjmlp 5y ago
  To note that WSGL still is pretty much WIP, with many semantics up in the air how they will look like in version 1.0.
  - dangerbird2 5y ago
    It's also pretty broken for webassembly (which is where such a low-level API like WebGPU is going to have the biggest benefit), since Rust and C/C++ WebGPU bindings tend to fall out of API-compatibility with the browser implementation as Chrome and Firefox release new nightlies

sydthrowaway 5y ago

Very sad that none of the fragment shader experts have written a book focusing on generative art. The Book of Shaders is very basic. How to create something like this (including sound!) while thinking on a per color x,y basis is mind boggling. https://www.shadertoy.com/view/XsfXD2 https://www.shadertoy.com/view/XsfXD2

jedimastert 5y ago
Also not a book, but Sebastian Lague has some absolutely beautiful generative art https://www.youtube.com/user/Cercopithecan https://www.youtube.com/user/Cercopithecan
modeless 5y ago
Inigo Quilez has a ton of great material: https://iquilezles.org/www/index.htm https://iquilezles.org/www/index.htm It's not printed on dead trees but there's easily enough covered there for a book or three.
train_robber 5y ago
I would recommend having a look at "The Art of Code" youtube channel. There is some interesting material there. https://www.youtube.com/watch?v=rvDo9LvfoVE https://www.youtube.com/watch?v=rvDo9LvfoVE is a good first watch.
pdkl95 5y ago
Thinking about designing a scene in a fragment shader is already mind boggling. Writing a new shader from scratch live in front of an audience within a 25 minute deadline is insane. The demoscene calls this a "Shader Showdown" competition, and they are amazing to watch. A good example is the Revision 2021 semi-finals[1]. The entire video is worth watching, but I especially recommend watching the last half of evvvil-vs-flopine (from about 43:00); the last few minutes (from ~56:00) fundamentally changed my understanding of what is possible in a fragment shader. Ray marching into a hand crafted signed distance field is such a bizarre way of thinking about a scene. [1] https://www.youtube.com/watch?v=NBdRfFwuP40 https://www.youtube.com/watch?v=NBdRfFwuP40 edit: corrected 'last few minutes' time
5y ago