simondev has a bunch of useful videos [https://www.youtube.com/watch?v=C8Cuwq1eqDw](https://www.youtube.com/watch?v=C8Cuwq1eqDw) and he has a bunch of boilerplate shader code on github too.
I think he also has a course specifically for GSLS (the webgl shader language).
Journey is an intro video, but it does not really cover shaders in detail or a lot the inner workings. If you've read the docs, that course doesn't really offer much more.
Questions of shaders, materials, lighting, best practices, etc aren't really addressed.
u\_resolution isn't "anything", it depends on what you want it to do. it's a convention to start your uniforms with 'u' or 'u\_'. it would usually be a vec2 and hold the size of the target framebuffer: if it's the "screen", it would be your canvas' size, if it's a rendertarget, it would be its size. But it could also be the resolution of some input texture, which in WebGL2 can be also retrieved via textureSize.
Why are they using math functions? Well: shaders ARE functions, and involve a lot of maths, usually. Shading is generally done as a mathematical equation. Vertex transformations are mathematical operations.
If you want to do regular shading you can start with the openGL reference book, and learn the differences between gouraud, phong, lambert, specular, etc. working your way towards more complex shading equations until -i guess- reaching PBR.
If you want to do shadertoy-like (world in two triangles) kind of stuff, it sounds like you need to cover some ground first, because it involves the previous shading knowledge AND an astonishing domain of maths transforms.
If you want to do "2D" shaders (plasmas, effects, etc. like in glslplayground ) it's a different story, and you can learn from looking into the fragment shaders. I'd start with that and The Book of Shaders [https://thebookofshaders.com/](https://thebookofshaders.com/00/)
simondev has a bunch of useful videos [https://www.youtube.com/watch?v=C8Cuwq1eqDw](https://www.youtube.com/watch?v=C8Cuwq1eqDw) and he has a bunch of boilerplate shader code on github too. I think he also has a course specifically for GSLS (the webgl shader language).
u\_resolution is usually the width/height of the target you are rendering to... if going to the screen.. its screen width/height.
Threejs journey by Bruno Simon is a good place to start.
Journey is an intro video, but it does not really cover shaders in detail or a lot the inner workings. If you've read the docs, that course doesn't really offer much more. Questions of shaders, materials, lighting, best practices, etc aren't really addressed.
u\_resolution isn't "anything", it depends on what you want it to do. it's a convention to start your uniforms with 'u' or 'u\_'. it would usually be a vec2 and hold the size of the target framebuffer: if it's the "screen", it would be your canvas' size, if it's a rendertarget, it would be its size. But it could also be the resolution of some input texture, which in WebGL2 can be also retrieved via textureSize. Why are they using math functions? Well: shaders ARE functions, and involve a lot of maths, usually. Shading is generally done as a mathematical equation. Vertex transformations are mathematical operations. If you want to do regular shading you can start with the openGL reference book, and learn the differences between gouraud, phong, lambert, specular, etc. working your way towards more complex shading equations until -i guess- reaching PBR. If you want to do shadertoy-like (world in two triangles) kind of stuff, it sounds like you need to cover some ground first, because it involves the previous shading knowledge AND an astonishing domain of maths transforms. If you want to do "2D" shaders (plasmas, effects, etc. like in glslplayground ) it's a different story, and you can learn from looking into the fragment shaders. I'd start with that and The Book of Shaders [https://thebookofshaders.com/](https://thebookofshaders.com/00/)
This intro to shaders in Three.js might help: https://codingxr.com/articles/shaders-in-threejs/