GLSL & Shaders Tutorial - Understanding The Syntax And The Idea Behind The Vertex & Fragment Shaders

By the end of this video, you'll have a solid understanding of the GLSL ES language's syntax. And also the whats and hows behind shaders, the vertex and fragment shaders more precisely.
---
Timestamps
00:00 Introduction
00:13 GLSL definition
00:42 Comments
01:01 Variables and constants
01:25 Basic types
02:09 Vectors and matrices
02:51 Vectors
05:05 Matrices
06:13 Samplers
06:27 Arrays
06:53 Structures
07:29 Control flow statements
07:40 Functions
08:41 Storage qualifiers
26:10 Precision qualifiers
10:48 Shaders definition
11:03 Vertex shader
12:24 Fragment shader
13:41 Example 1
17:45 Example 2
22:52 Example 3
25:40 Final words
---
Article
---
Support the channel
---
The boilerplate that I'm using in my tutorials
---
Links
WebGL, Shaders, Vertex Shader, Fragment Shader, GLSL ES, and WebGPU In A Nutshell
Math For Game Devs by Freya Holmér
GLSL built-in functions

[WaelYasmina]

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;

[dougjord]

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!

[denisblack]

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!

[stevansanchez]

your voice is better than anyone who does shader videos...no hate to others but this did not give me a headache listening to

[fayboyun]

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!

[Cargren]

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

[gamelab]

Man this tutorial was the best one ever! You have done a tremendous job! 👍

[luqal]

Omg.. the most outstanding explanation ever.. been trying to understand shader from other video but this top it all.. tq very much sir

[cardboardspecciesOLD]

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 :)

[huynguyen-cyig]

great tutorial, I'm stuck with glsl for weeks. This video is really helpful

[shanebenlolo]

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.

[leomardo]

@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

[Burak-lsyd]

I love this tutorial! It's so clear and informative.

[diansong]

Thank you Wael, very concise and organized presentation!

[AndreLaBranche]

Nice work, very lucid. The depth and breadth is just right.

[ruffaldimarco]

Good tutorial, gave me all the info I need 👍

[mohitkumartoshniwal]

Thanks a lot for this tutorial. Cleared a lot of confusions I had with glsl.

[Splntxx]

Thank you so much for this video - exactly what I was looking for!

[hubert]

Thanks, That tutorial very clear and prefect.

[theman]

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?