Three.js Shaders (GLSL) Crash Course For Absolute Beginners
Вставка
- Опубліковано 8 лип 2024
- Three.js shaders crash course showing you 95% of what you'll ever need to know about shaders.
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:
• Customize ThreeJS Mate...
Git Branches :
github.com/visionary-3d/shade...
github.com/visionary-3d/shade...
github.com/visionary-3d/shade...
Model View Projection (MVP) Article:
jsantell.com/model-view-proje...
Perlin Noise Implementation In GLSL :
github.com/visionary-3d/noise...
Beginner Three.js Crash Course:
• Three.js Crash Course ...
Basic Data Types ( for example in C ):
• #3: Data Types in C Pr...
Ducky 3D Tutorial:
• Node-based Organic Ani...
Final Project's Source Code:
github.com/visionary-3d/shade...
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:
Follow me:
x.com/visionary_3_d
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 + "
" + vertexPars
)
Thanks 🙏
Pinned
Finally, I have been learning about shaders for a while. It was a nightmare for me to find any tutorials about shaders on UA-cam. 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.
For the record : This is my friend and he has watched my video earlier than anybody else 😅
I'm glad you learned something bro! Keep up the hard work.
Not even finished yet, and this is a complete GEM 💎 Thank you so much for it, my friend. Sending all the best vibes ✨
Amazing to see such content free on UA-cam, it's a blessing for the community 👊👏
Keep up the good work 👌
genuenly the best glsl tutorial on youtube
huge thanks for your effort put into this thorough video, it's perfect to start into all of this, literally everything needed perfectly explained 👌🏼
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
Thank you very much for the kind words ❤
You just made my day. 😊
second this. you're a legend
Man you are amazing.. for real, first time seeing someone explaining shaders in such a good way! Thank you.
Thanks! My hope is that these videos are going to help more people get into shaders.
I'm glad you liked it 🔥
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.
Gracias por este tutorial, no tienes idea de lo mucho que lo necesitaba, no encontre tutoriales asi en todo youtube, en serio, muchas gracias.
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. 🤗
It's my pleasure to be able to teach something to you!
Thank you for the kind words ❤
Loved your explaination here ❤❤
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!
My pleasure!
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.
Thanks for giving me the courage and motivation to make more videos ♥
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.
So incredibly useful
Excellent course for an absolute beginner in 3d-graphics like me!
Your content & video quality are awesome! Keep going 🔥
Good to see you here sir!
I was watching your vids a few days ago.
It's always nice to see other people's process for creating projects 😁
Nice work man you definetly deserve more people who support you! 💪🏽🔥
Indeed!
Thank you for the kind words 🙂
Thank you for uploading this!
You're Welcome 😉
Yeah!! I finally found the ultimate lecture...
You're great, man! Thank you for sharing your knowledge!
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
The best shaders course
Excellent tutorial!!! I really feel like I learned a lot.
This was a great intro, thanks.
great, big thanks and keep going...
BRILLIANT, brother thanks. :D
Thanks this was very helpful.
Amazing course. Really good examples and easy to follow . Thanks a lot
Amazing. Thank you for sharing your knowledge
fire video! well done 🔥
beautiul, thank you sir
Man, it is so brilliant! Much thanks
🙏
Excellent course man, you're a great teacher. Keep it up!
Thanks for watching!
I cant understand why you have 'only' 3k subscribers. Your tutorials are so good, thank you !
This is just the beginning.
Thanks
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.
Cool, thanks!
Thank you so much, helped a lot.
You are so fantastic at explaining shaders. Thank you so much for this video 🙏
My pleasure 😊
thanks for the content 💎 thats really precious
Very comprehensive and super helpful, great work, thanks
Glad you liked it 🤝
I enjoyed this video. good luck
Really nice content, thanks!!!
thank you amazing video
thanks a lot this was super helpful!!!
This is great stuff! Thanks for sharing!
Glad you enjoyed it!
I like how he explain, thanks for the tutorial
Nice and concise thanks for creation
Thanks for watching!!
The most important section in the video is the Mindset one. That's what learners need :D
Thank you so much for this
No problem! Glad you enjoyed.
very helpful and well explained, thanks
Glad you liked it.
amazing tutorial, your explanation is better at shader than bruno's
keep up the good work!
Thank you for the kind words! 🙏
FWIW Bruno's videos were a huge help at the beginning of my own journey.
My hope is that the people watching this will create videos that are 10 times better than this ✌
tooo good!!
Good Video!
This is the best ThreeJS channel I have ever seen 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
Thank You! I'm glad you like the videos.
Yes you're correct about the rainbow like effect.
That's exactly what happens. XYZ turns into RGB.
Brooooo Thank you!!!!
Man! Thank you sooooooooooooooo much for this.
Glad you find this useful!
@@visionary_3_d Bro more shader videos. Pretty please!!!
@@kaifrabi5244 No worries. I am working today!
i think it would be helpful if you also covered in general how to deal with large numbers of objects, like if i want to make a grid or particle effect with some shapes. In particular im wondering how to control when objects are created in time
great video! splitting the screen would have been perfect
Thanks for the tip!
Want more shaders course. Please
Do you think this could be done to move baed on a spectrum analyzer to create an audio spectrum analyzer?
For sure. In fact I'll post videos about this in the near future.
Thanks for the amazing video!
A question: In ducky's example, the contrast between black and white in the noise pattern is higher, and black is more concentrated. This is resulting in smoother displacement crests, compared to what we get here (very sharp crests). What do you think I can change to achieve that?
Thank you 🙏
If I wanted to do that I would visualize the displacement color only ( black and white and without the vertex shader doing any displacement ).
Then I’d try tweaking the values in the code,
Adding subtracting and maybe dividing, multiplying by a constant in different places and etc…
For a more detailed answer I’d have to look at the code but that’s what I would do.
Creating the colors by feel.
Bro how did you make your vscode vim extension look so smooth
do these shaders also work for Lines, or only Meshes? My scene is using Lines and LineSegments but I want to add custom shader code. Any advice is appreciated.
When I change the vec2 uv = vUv by vec3 coords = vNormal, it shows the sphere but not the pattern we had earlier. It looks like a twinkling light.
Oh, I had to define the variable on the vertex shader
Could you give us some fragment shader cheatsheets
Hey, how do you have a blank line at the top of every glsl file, maybe it's a vscode extension or setting that does this?
You just press enter ?
I use vim tho...
and you can creat one line above with shift + o
in vim.
@@visionary_3_d yeah it's just that in vscode the webgl glsl formatter automatically formats the glsl files so that they don't leave a blank line at the top, and this blank line is important since otherwise you get errors when trying to combine THREE.MeshStandardMaterial() with your own shaders
@@MrDoremis hmmm.
I'm not sure I've had that error.
but you can always debug something like that and add blank space manually.
eitherway thanks for mentioning this since other people might have the same issue.
@@MrDoremis I'll pin your comment in case other people have this issue.
@@visionary_3_d great!
Hi everyone, can someone help me, I'm trying to find out what that purpleish icon over the shaders folder? What tool is it for ? I see everyone with it but when I open these files I dont have it its; just plain yellow folder. I think it helps connect the glsl file to the js?? I hope you can understand what I am asking,,,
I've been following every minute of the tutorial but I got stuck at the switch of shader material (onBeforeCompile, ....). I've got an error I can't manage to fix after rewatching multiple times. Any chance we can discuss about it ?
Hey, sure.
Let me suggest a few things you can try to debug the problem!
1. use console.log() and check the shader code ( string ) that you're sending to the compiler. see if you can find any errors within your code there. GLSL compiler errors aren't always obvious
2. there's a lot of repetition of code happening within that section of the video and in fact I myself made a mistake ( a typo ) and I later fixed it in the video. so make sure you don't have any typos within your code.
3. further, if you couldn't fix the issue you can push the code to github and paste the link here and I can take a look at your code 🙂
At around 2:22:00, why did you transfer the entire noise generation function to vertex shader?
Cause it runs less and the performance improves a little bit.
We generally have less vertices than pixels in an object.
So the gpu can do less calculations that way.
Little bit of an off topic question but how is your ide so smooth? I see you jumping thru lines and characters so fast and smooth ? Also there is that smooth effects happening when you type .. What are the configs ? Is it like that because Ubuntu OS?
Hey.
First of all I'm using vim in vscode.
Also smooth typing is enabled ( this can be enabled in the settings ).
And I think this should work on all Operating Systems.
The question for me is always, how do I get it online? So from localhost to my website. Do you also have a tutorial for this?
👍👍👍👍✨
bro i exactly did whatever you said about twice until 2:37:18 and get this error that i cant fix can you help me and i exactly followed your video by the way thanks for this cool video ||
the ERROR is
ERROR: 0:246: 'ifdef' : unexpected end of file found in conditional block
Check you have a blank line at the top of each GLSL file ad don't have some autoformatter removing it. That was my issue
Same error here @visionary3d
@@devlad same error, checked for that and didn't work
did you solve it?
@@cinema4d100 I solved the error. My setup is SvelteKit and i tried to load the vertexFrag, vertexMain, fragmentFrag and fragmentMain from a seperate file which for some reason wouldn't work.
Instead i copied the entire file put it in a variable like const fragMain = `...`
and used the variable instead of import.
This solved it for me.
Hey guys I hope you enjoy this video.
Here's the link for my extending three.js materials video if you need it :
ua-cam.com/video/vowT_8oVFmM/v-deo.html
If you want to learn more about shaders checkout this playlist :
ua-cam.com/play/PLTEbuqk52pICikiHfD-a52dxEav5UqMLy.html
I wanted to run your code, from main branch and it gives me simple sphere without this complex shape. Shader files are empty, and are imported but unused
I don’t remember exactly but try other branches.
bro u could have just merged the shaders on initialisation of the material, look it up, u can include standard three shaders in your custom with one line of code :3
That's right.
At the time of recording the tutorial that method wasn't on my mind but it's definitely possible.
hi, is there some documentation on this other method?
@@irickhcoding4802 i don't really know but i found that in source code of three js example gpgu water
that was the code:
const material = new THREE.ShaderMaterial( {
uniforms: THREE.UniformsUtils.merge( [
THREE.ShaderLib[ 'phong' ].uniforms,
{
'heightmap': { value: null }
}
] ),
vertexShader: document.getElementById( 'waterVertexShader' ).textContent,
fragmentShader: THREE.ShaderChunk[ 'meshphong_frag' ]
} );
perlin noise function not working
JavaScript doesn’t have true mod either 😂 so I’m already used to the mod function
You spent too much time on the easy part and not enough on the hard part :)
I agree with you that I could've spend a little bit more time explaining the stuff towards the end. ( if that's what you mean )
"easy" and "hard" depend on the level of the individual's current knowledge.
For example this whole 3 hours of video is super easy for me 😄( I'm mentioning this because I don't know which part you're talking about. I'll appreciate it if you specify )
Thank you for your feedback! I appreciate it 🙏
Also I want to add that we will have lots of videos about the hard things you can do with shaders and how they work.
So at least I can promise that 🙂
Very bad tutorial, at least teach how to set the entire project, only when i started making my own project i realised directly importing glsl was a no go
Starter files are provided however they might be somewhat old, and may need update.
Part of being a developer is understanding how to create the dev environment with modern tools.
I look at old tutorials all the time myself.
Sometimes they're using the wrong syntax and I need to see how to do it the modern way now.
That's all part of the journey, honestly 🙂
guy's voice very stuttering, lots of "um"s and "and"s and "uh"s
Awesome content!
Only feedback is the end bit was a bit of a bottom falling out moment since you get into the shader injection. Ugh, that was very complicated sadly.