The Book of Shaders
thebookofshaders.com
thebookofshaders.com
Shameless self promotion: if you're interested in general WebGL, I have a Youtube channel with over 100 WebGL videos. I publish a couple times a week.
I haven't started diving into doing cool shader things yet (beyond some light stuff with lighting, fog, textures, and a few other minor things). It's on my list to do though.
Shader code tends to be extremely terse. 1000 lines of shader code is like a lot.
Like what can yoh really do with a 1000 loc rails app.
As I posted on the WebGL Voxel Engine thread [1] yesterday, I've been looking to get more into this subject and had found it a little unapproachable. This renderer [2] in 500 loc was also recommended and is a really readable intro for background on the subject.
Written by people who know what the topic is already, so I think they miss that I went into this not knowing if they were talking about computers or some art form or ink and pen style or whatnot.
So if you have a bunch of things occluding each other, they can all get rendered on top of each other even if only the closest is actually displayed.
Sometimes people try to avoid that by not drawing stuff that is occluded, or drawing in order of depth, or discarding fragments if the depth buffer has already drawn over a location with a nearer texel, or that sort of thing. But it's always a PITA to calculate/sort that sort of thing in realtime.
Once per pixel is fine when you're teaching the hello world of shaders.
But I've actually kind of been thinking about that, too. Think about how much 'magic code' most 'hello world' tutorials have that you're told to just ignore. That can also be off-putting when there's too much of it.
I wonder if there's a happy medium for introducing the basic concepts, like starting with microcontroller assembly instead of 'std::cout << "hello, world";'.
Then you won't have to explain things like '#include' because your students will already know that it just means 'pretend I copy/pasted file X here' from when they learned how to make an LED blink.
Anyways, I guess this particular resource does look like it struck a pretty happy middle ground for beginners. I just hope they don't get discouraged trying to branch out with self-teaching; there are a lot of byzantine 'gotcha's with graphics APIs and parallel stuff.
I think the big thing with introducing new things is keep it simple enough that they can riff on it. If you introduce too many things and something breaks, it's hard to get back to "good" and eventually you give up.
Python is a simple language, but I see a lot of online classes giving full-on VMs because the yak shaving involved in getting set up with a consistent environment wastes the first week or two of class.
The book is incomplete but I look forward to future updates.
[1] https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b...
https://hn.algolia.com/?query=%22the%20book%20of%20shaders%2...
I'm also still somewhat confused as to how the live code samples are achieved. Are they being compiled client side somehow? I don't know very much about WebGL.
>WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.
var gl = canvas.getContext('webgl');
var vShaderSource = document.getElementById('vShader');
var vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vShader, vShaderSource);
gl.compileShader(vShaderSource);
"vShader" is the id of a <script> tag of type "x-shader/x-vertex". Get a WebGL context, get the shader source, create a shader object, bind the source to the shader, then compile the source.
You can give floats a range and default value with a comment:
uniform float u_float; //0;.5;1Could've been worse. Since Java was so big back then, too, we're lucky they didn't come up with eg. "Rendlets". At least "shader" is freakin' aesthetic =)
I'm pretty sure the term "shader" was introduced by Pixar, from way back before Toy Story when they were doing little demos and short movies. They were building very modern-looking graphics pipelines in software way before the first GPUs (I think Nvidia coined that term?)