Written version of this tutorial: waelyasmina.net/articles/glsl-and-shaders-tutorial-for-beginners-webgl-threejs/ A few mistakes I made in the video: 05:58 there's a missing dot. wrong: float f = matB[0]y; correct: float f = matB[0].y; 08:12 wrong function return. wrong: return vec2(1.0, 2.0); correct: return vec2(x, y); 10:38 we can't set precision to vectors and matrices. wrong: precision highp vec2; correct: precision highp int; correct: precision highp sampler2D;
I've struggling to learn GLSL for some years by now. Your tutorial was the best I've seen in this time. Very concise and didactic. Not only that, it really inspired me to take another chance. Thank you so much for this, dude. Excellent work!
Honestly,this was a very simple and easy to understand tutorial. It really helped me and good video. I wanted to code shaders on glsl but I didn't understand it properly now because of the tutorial I have no confusions
this is very useful, thank you! i watched the whole thing with only some vague knowledge of c and c# but your teaching style made it pretty easy to digest :)
You're welcome! Yes there's a shortage in terms of GLSL tutorials but I'll try to make more whenever I learn or come up with something worth making a tutorial on.
@4:44 What are the components for vect.w, vect.a, and vect.q? You explained the other components for position, Color and Textures, but not for above. TIA
Thank you so much for this awesome tutorial😍 One problem: when there are different aspect ratio for the mesh and the image.. that image texture got squeezed/stretched. Do you know any solution of that?
Okay, I know MUCH MUCH more than I did... But.. I am still lost.. I just seem to have some mental block when it comes to the GL shader stuff.. I might be able to understand it more if there was a "copy/paste GL stuff" and be able to see what the equivalent code would be in JS.. Though, if half of the stuff is doing what I think it's doing, that may not help.
2 роки тому+1
Excellent content Wael! Quick question about usage of GLSL: couldn't we simply use Three to do most of what you've created in this video ? Thanks
Thank you Oliver! You mean the examples? I think it's possible to replicate the 1st example without using GLSL. However when it comes to the color gradient and masking I don't think it is possible as far as I know. Anyways even though we have the ability to create cool things without GLSL & shaders they still a must learn if you want to create some high level stuff.
Very Good Tutorial, you help me understand that vertex shader will execute the same times of the count of the vertices.That is very important.So, how much times will the fragment shader execute? Does it depends on the resolution of the canvas?
Thank you! Generally speaking 1 fragment = 1 pixel. Thus the fragment shader is executed the number of pixels times. Sometimes 1 pixel > 1 fragment. Thus the fragment shader is executed more times than the number of pixels. To understand the logic behind the 2nd case check these out: stackoverflow.com/questions/68426777/how-many-times-does-the-glsl-fragment-shader-execute-for-one-draw (The answer) ua-cam.com/video/uH1ES8LOrlM/v-deo.html
Wael do you have courses at udemy or any othre platform?? because u should... i want to support you!! Also for anyone trying, on 17:19 substitute like this for a cool example vec3 newPosition = vec3(position.x, position.y, newZ)
Thanks for making shaders a let harrowing concept :) At 24:10, how come the vec4 know that float effect is v3? I mean we are only putting a sin function in float effect, so isnt it a single value?
effect is actually a single float value since abs(sin(texture.x + u_time)) returns a single float value. You know sin() returns a value between -1 and 1. vec3(effect) is the same as vec3(effect, effect, effect).
@@WaelYasmina why I was worried is in oneof the shader videos I saw, the uploader got an error in console that was something like, 3 arguments expected 2 supplied. Something like this.
Written version of this tutorial: waelyasmina.net/articles/glsl-and-shaders-tutorial-for-beginners-webgl-threejs/
A few mistakes I made in the video:
05:58 there's a missing dot.
wrong: float f = matB[0]y;
correct: float f = matB[0].y;
08:12 wrong function return.
wrong: return vec2(1.0, 2.0);
correct: return vec2(x, y);
10:38 we can't set precision to vectors and matrices.
wrong: precision highp vec2;
correct: precision highp int;
correct: precision highp sampler2D;
thank you so much ❤
I've struggling to learn GLSL for some years by now.
Your tutorial was the best I've seen in this time.
Very concise and didactic.
Not only that, it really inspired me to take another chance.
Thank you so much for this, dude.
Excellent work!
I'm so thankful for these kind words, thank you Doug I really appreciate it!
me too
you are a great instructor! I am a mechanical engineer with limited js knowledge and your videos helped me build a fun website thank you so much!
Honestly,this was a very simple and easy to understand tutorial. It really helped me and good video. I wanted to code shaders on glsl but I didn't understand it properly now because of the tutorial I have no confusions
this is very useful, thank you!
i watched the whole thing with only some vague knowledge of c and c# but your teaching style made it pretty easy to digest :)
Great to hear!
Dude, I had this wet dream of me drawing tasty animations with shaders and this video got me to a “good enough” level in 20minutes! Thank you!
Omg.. the most outstanding explanation ever.. been trying to understand shader from other video but this top it all.. tq very much sir
Man this tutorial was the best one ever! You have done a tremendous job! 👍
great tutorial, I'm stuck with glsl for weeks. This video is really helpful
Thank you so much for this video! Have been looking for something like this for weeks, there is surprisingly little content about GLSL on youtube.
You're welcome!
Yes there's a shortage in terms of GLSL tutorials but I'll try to make more whenever I learn or come up with something worth making a tutorial on.
Thank you Wael, very concise and organized presentation!
Glad you think so!
I love this tutorial! It's so clear and informative.
Thanks a lot for this tutorial. Cleared a lot of confusions I had with glsl.
Nice work, very lucid. The depth and breadth is just right.
Thank you so much for this video - exactly what I was looking for!
Thanks for the clear explaination!
Good tutorial, gave me all the info I need 👍
Glad it helped!
you are a gem.....
Thanks , That tutorial very clear and prefect.
My pleasure!
@4:44 What are the components for vect.w, vect.a, and vect.q?
You explained the other components for position, Color and Textures, but not for above. TIA
great tutorial, thank you!
You're welcome!
Great job!
What an awesome video. Keep going!
Thank you! Will do!
Thank you! Helped a ton
You da champ!
Really excellent - thank you
You're welcome!
Finally a good tutorial
Glad you think so!
Great video!
thankyou for the tutorial!
You're welcome!
thanks , so good video
All love brother
PLEASE PLEASE PLEASE DO A FULL COURSEE ON THISS ONEEE
//good vid
Thank you
You have an amazing font in this video, source may be appreciated
Itim
@@WaelYasmina thanks
Thank you so much for this awesome tutorial😍 One problem: when there are different aspect ratio for the mesh and the image.. that image texture got squeezed/stretched. Do you know any solution of that?
Okay, I know MUCH MUCH more than I did...
But.. I am still lost..
I just seem to have some mental block when it comes to the GL shader stuff..
I might be able to understand it more if there was a "copy/paste GL stuff" and be able to see what the equivalent code would be in JS.. Though, if half of the stuff is doing what I think it's doing, that may not help.
Excellent content Wael! Quick question about usage of GLSL: couldn't we simply use Three to do most of what you've created in this video ? Thanks
Thank you Oliver!
You mean the examples? I think it's possible to replicate the 1st example without using GLSL. However when it comes to the color gradient and masking I don't think it is possible as far as I know.
Anyways even though we have the ability to create cool things without GLSL & shaders they still a must learn if you want to create some high level stuff.
Very Good Tutorial, you help me understand that vertex shader will execute the same times of the count of the vertices.That is very important.So, how much times will the fragment shader execute? Does it depends on the resolution of the canvas?
Thank you!
Generally speaking 1 fragment = 1 pixel. Thus the fragment shader is executed the number of pixels times.
Sometimes 1 pixel > 1 fragment. Thus the fragment shader is executed more times than the number of pixels.
To understand the logic behind the 2nd case check these out:
stackoverflow.com/questions/68426777/how-many-times-does-the-glsl-fragment-shader-execute-for-one-draw (The answer)
ua-cam.com/video/uH1ES8LOrlM/v-deo.html
Sad that i can give only one thumb´s up
But your sweet comment is worth dozens of them. Thank you Niklas!
maybe, this lession is WebGL (vertex and shader...)?
Indeed
@@WaelYasmina respect you,
Example 1 shows the power of math in 4 lines of code.
Wael do you have courses at udemy or any othre platform?? because u should... i want to support you!! Also for anyone trying, on 17:19 substitute like this for a cool example vec3 newPosition = vec3(position.x, position.y, newZ)
Thanks for making shaders a let harrowing concept :)
At 24:10, how come the vec4 know that float effect is v3? I mean we are only putting a sin function in float effect, so isnt it a single value?
effect is actually a single float value since abs(sin(texture.x + u_time)) returns a single float value. You know sin() returns a value between -1 and 1.
vec3(effect) is the same as vec3(effect, effect, effect).
@@WaelYasmina yea I do a lot of p5 animations and sin cos is totally fine with me bro. Thank you very much, again :D
@@WaelYasmina why I was worried is in oneof the shader videos I saw, the uploader got an error in console that was something like, 3 arguments expected 2 supplied.
Something like this.
OH MY GOD!
🤩
I'm probably the best learner here lol
Nice! 💪
You need to be protected at all costs. 😁
Thank you lol
Lmao 🤣
I feel like I need autism to understand this material.
NOT restricted AT ALL to javascript... glsl is online or offline, has nothing to do with Javascript really.. it's its own language...
Did I say something other than that?
@WaelYasmina No, don't listen to that fool lol
Man, the tutorial is just amazing, but my IQ is jut too low... :D