Three.js Shaders (GLSL) Crash Course For Absolute Beginners

We'll discuss things like how shaders work, GLSL language, vertex shader, fragment shader, dot product, useful GLSL functions, how to draw stuff and more...

Links Mentioned In The Video:

Extending Threejs Materials:

Git Branches :

Model View Projection (MVP) Article:

Perlin Noise Implementation In GLSL :

Basic Data Types ( for example in C ):

Ducky 3D Tutorial:

Final Project's Source Code:

Chapters:
00:00 - Course Overview
00:25 - Shader Explanation
03:48 - Shader Setup
09:36 - GLSL Basics
33:15 - Attributes And Uniforms
45:51 - Model View Projection
49:25 - UVs And Normals
52:35 - Varyings
1:08:48 - Mindset
1:10:45 - Useful GLSL Functions
1:34:37 - Dot Product
1:37:39 - The Fresnel Effect
1:44:40 - Drawing Patterns
1:58:21 - Importing Textures
2:00:48 - Cool Desaturation Effect
2:03:19 - Final Project
2:56:12 - Outro

---------------------

Visionary 3D:

Contact me at Discord: (username):
visionary3d

Follow me:

[chaotic_keystroker]

Nice tutorial! I had an error when injecting shaders into standard materials because of the replacement. The first line of the pars/main file continues at the end of the last file in the include. This means that it ruins an ifdef block, then the compilation fails. If you let one free line at the beginning of the main file, this won't happen. But if your code starts at the first line, you have to add linebreak into the replace (just add linebreak and don't think about it).

// Do this for both pars and main injections and you are golden.
shader.vertexShader = shader.vertexShader.replace(
parsVertexString,
parsVertexString + "\n" + vertexPars
)

[ariox]

Finally, I have been learning about shaders for a while. It was a nightmare for me to find any tutorials about shaders on YouTube. This was the best video I saw about shaders. Even though I was already familiar with shaders, I still learned a lot from this video.

[emerald]

Amazing to see such content free on YouTube, it's a blessing for the community 👊👏
Keep up the good work 👌

[markeeangus]

Hey,

Just wanted to drop a comment to say a massive THANK YOU for the awesome shader tutorials you've been putting out there! 🙌 Your ability to break down complex concepts and explain them in such a simple and easy-to-understand way is truly amazing. It's really helped me (and I'm sure many others) get a grip on shaders like never before.

Keep up the fantastic work, and I can't wait to see what you'll share next! You're a rockstar! 🌟

Cheers

[zerpacode]

Hello people!
I was a bit curious about the variables provided by threejs by default, so here is a list of the most common uniforms provided by threejs (taken from chatGPT) I hope you find it useful:

modelMatrix: the model transformation matrix that's used to transform model coordinates into world space.

viewMatrix: the view transformation matrix that's used to transform world coordinates into camera view space.

projectionMatrix: the projection matrix that's used to transform view coordinates into screen coordinates.

modelViewMatrix: the combined model and view transformation matrix.

normalMatrix: the model normal transformation matrix, which is used to transform model normals into view space.

cameraPosition: the position of the camera in world space.

time: the time in seconds since the animation started.

resolution: the screen resolution in pixels.

map: the texture of the material being rendered.

opacity: the opacity of the material being rendered.

color: the color of the material being rendered.

fogColor: the color of the fog that's being applied to the scene.

fogNear: the closest distance to the camera at which fog is applied.

fogFar: the farthest distance from thecamera at which fog is applied.

sunPosition: the position of the sun in world space.

pointLightPosition: the position of the point light in world space.

pointLightColor: the color of the point light.

ambientLightColor: the color of the ambient light.

directionalLightDirection: the direction of the directional light.

directionalLightColor: the color of the directional light.

[tyfooods]

Not even finished yet, and this is a complete GEM 💎 Thank you so much for it, my friend. Sending all the best vibes ✨

[jessemorningstar]

I'm 33 minutes in and I just had to stop to say that you are a fantastic teacher.
It's a pleasure to learn from you.
Count me as a delighted new subscriber. 🤗

[markxavior]

This is an excellent tutorial by a very good person. I can say he knows about the subject very well. He has created one of the best guided videos on shaders.

[enisbu]

Man you are amazing.. for real, first time seeing someone explaining shaders in such a good way! Thank you.

[adinhobl]

Excellent course for an absolute beginner in 3d-graphics like me!

[IonizedSun]

I cant understand why you have 'only' 3k subscribers. Your tutorials are so good, thank you !

I really appreciate the mindset note at 1:08:49. Very important when consuming information for the first time (especially somewhat dense) to step back and give perspective, especially when following a tutorial. Great teacher!

[Fiiilipes]

Nice work man you definetly deserve more people who support you! 💪🏽🔥

[visionary__d]

Hey guys I hope you enjoy this video.
Here's the link for my extending three.js materials video if you need it :

If you want to learn more about shaders checkout this playlist :

[benja-min]

Super late to the party, but thank you. I have followed courses by Bruno Simon etc, and he is brilliant. But you go to another level with explaining every character. Other channels seem to skip the detail. Thanks for the effort and filling the gaps in my knowledge.

[anis]

genuenly the best glsl tutorial on youtube

[theman]

The most important section in the video is the Mindset one. That's what learners need :D

[philipanderegg]

I think this video answers what I want to do, plan is to make a sphere but color is defined at 4 specific vertices and interpolated elsewhere, which ofc shaders should be perfect for! I'll add an edit to say whether or not it was useful

[craftymunz]

this tutorial was amazing. Thank you so much for sharing your talent and creative power with us. Wish you all the best. loving the way you are explaining things especially the mathematical part where lot of teacher lack at explaining how they got there.

[zerpacode]

This is the best ThreeJS channel I have ever seen <3

Just to clarify the part of the Varyings, when you pass the vPosition to the color of the fragment shaders, it gives us a kind of "rainbow" effect.

This is because, for example:
- there should be a vertex like [0, 0, 0] -> Black.
- Another like [1, 0, 0] -> Red, So the right part of the sphere is red because the x value is equivalent to the R.
- The front part of the sphere is blue because the vertex positions in this zone are near to [0, 0, 1]. So, Z is at max and is equivalent to B.

That`s the why we have this "rainbow Effect". A I correct?

pd: Again, wonderful content, the best one I ever seen about this 3D on web <3