Shader Resources
Greetings, friends! I hope you have learned a lot from my Shadertoy series. Today, I would like to discuss some additional resources you should check out for learning more about shader development.
The Book of Shaders
The Book of Shaders is an amazing free resource for learning how to run fragment shaders within the browser. It covers these important topics:
In Shadertoy, you will commonly see functions named hash or random. These functions generate pseudorandom values in one or more dimensions (i.e. x-axis, y-axis, z-axis). Pseudorandom values are deterministic and aren't truly random. To the human eye, they look random, but each pixel color has a deterministic, calculated value. All users who visit a shader on Shadertoy will see the same pixel colors which is a good thing!
There's no Math.random function in GLSL or HLSL. Should one ever exist, you probably shouldn't use it anyways. Imagine if you were making a game in Unity and developing shaders that needed to look random. If you had people testing each level of the game, each person might see slightly different visuals. We want the gameplay experience to be consistent for everyone.
Inigo Quilez's Website
Inigo Quilez is one of the co-creators of Shadertoy. His website contains an abundant wealth of knowledge about tons of topics in computer graphics. He has created plenty of examples in Shadertoy to help you learn how to use it and how to implement various algorithms in computer graphics. Check out his Shadertoy profile to see lots of amazing shaders! Here are some very helpful resources he's created for newcomers in the computer graphics world.
- Raymarching - Primitives
- Painting a Selfie Girl, with Maths
- Voronoise
- Voronoise: Exact edges
- Voronoise: Hierarchical
- Voronoise: Smooth
- Value Noise 2D, Derivatives
- Gradient Noise 2D, Derivatives
- Value Noise 3D, Derivatives
- Gradient Noise 3D, Derivatives
- Value Noise 2D
- Value Noise 3D
- Gradient Noise 2D
- Gradient Noise 3D
- Simplex Noise 2D
- Wave Noise 2D
Shadertoy
You can learn a lot from users across the Shadertoy community. If there's a topic in computer graphics you're struggling with, chances are that someone has already created a shader in Shadertoy that implements the algorithm you're looking for. Either use Google to search across Shadertoy using a search query such as "site:shadertoy.com bubbles" (without quotes) or use the search bar within Shadertoy using search queries such as "tag=bubbles" (without quotes).
Shadertoy Unofficial
The Shadertoy - Unofficial Blog by FabriceNeyret2 is an excellent resource for learning more about Shadertoy and GLSL. The author of this blog has a list of amazing Shadertoy shaders that range from games, widgets, GUI toolkits, and more! Definitely check out this blog to learn more advanced skills and tricks in shader development!
The Art of Code
Martijn Steinrucken aka BigWings has an amazing YouTube channel called The Art of Code. His channel helped me tremendously when I was learning shader development. In his videos, he creates really cool shaders to help teach everyone different concepts in the GLSL language and teach about algorithms in computer graphics. His shaders are incredible, so go check out his channel!
Learn OpenGL
Learn OpenGL is an incredible free resource for those who want to learn the OpenGL graphics API. With Shadertoy, we've been stuck with only a fragment shader. By using the OpenGL API, you can create your own shaders outside of the browser and use both a vertex shader and fragment shader. You can also tap into other parts of the graphics pipeline.
Using the OpenGL API requires a lot more work than Shadertoy for creating shaders because Shadertoy takes care of handling a lot of boilerplate code for you. However, Shadertoy must run in the browser using WebGL which has its own set of limitations such as only being able to run shaders near 60 frames per second at a maximum.
The Learn OpenGL website is still a great resource for learning about shader concepts such as textures, cubemaps, lighting, physically based rendering (PBR), image based lighting (IBL), and more. Knowledge you learn on this website can be transferred over to Shadertoy or your preferred game engine or 3D modelling software.
Ray Tracing in One Weekend
The Ray Tracing in One Weekend series is an amazing series of free books by Peter Shirley, a brilliant computer scientist, who specializes in computer graphics. These books are filled with a plethora of information about ray tracing and path tracing.
The Blog at the Bottom of the Sea
Demofox's Blog is an amazing blog on computer graphics, game development, and other topics. The author has lots of amazing examples on Shadertoy with really clean code. On his blog, you can learn a lot about Blue Noise, Path Tracing, Bokeh, and Depth of Field.
Scratchapixel
Scratchapixel has an awesome blog on computer graphics as well. The author has detailed articles on Ray Tracing, Global Illumination, and Path Tracing.
Alain.xyz Blog
Alain Galvan's Blog has a plethora of resources and great content in regards to computer graphics, game development, 3D modelling, and more. There's so many good articles to read!
reindernijhoff.net
reindernijhoff.net is a fantastic blog with so many amazing creations on Shadertoy. The author covers Ray Tracing, Path Tracing, Image Based Lighting, and more. Go check it out! It's awesome!
Resources for Volumetric Ray Marching
Volumetric ray marching is a powerful technique used in game development and 3D modelling for creating clouds, fog, god rays (or godrays), and other types of objects with "volumetric" data. That is, the pixel value will be different depending on how far a ray enters a volume. Here are some really good resources to help you learn volumetric ray marching.