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 )
Finally, I have been learning about shaders for a while. It was a nightmare for me to find any tutorials about shaders on RUclips. 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.
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
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.
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.
Hey guys I hope you enjoy this video. Here's the link for my extending three.js materials video if you need it : ruclips.net/video/vowT_8oVFmM/видео.html If you want to learn more about shaders checkout this playlist : ruclips.net/p/PLTEbuqk52pICikiHfD-a52dxEav5UqMLy
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!
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. 🤗
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.
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
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.
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 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 ✌
Hey man, great tutorial. I have a question. I was able to implement it in React Three Fiber up until the point where I have to inject my shaders into the ThreeJs materials. Any idea of how I can do that in React Three Fiber?
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
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.
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.
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.
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 🙂
Hey, how come when I try out the varyings rainbow I just get black? I did it exactly like you but I'm using a model I made in from Blender. Does it have something to do with transforms?
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
@@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.
@@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.
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
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
@@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' ] } );
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.
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 🙏
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 🙂
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 RUclips. 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.
Amazing to see such content free on RUclips, it's a blessing for the community 👊👏
Keep up the good work 👌
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
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.
Not even finished yet, and this is a complete GEM 💎 Thank you so much for it, my friend. Sending all the best vibes ✨
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.
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 🔥
Nice work man you definetly deserve more people who support you! 💪🏽🔥
Indeed!
Thank you for the kind words 🙂
Hey guys I hope you enjoy this video.
Here's the link for my extending three.js materials video if you need it :
ruclips.net/video/vowT_8oVFmM/видео.html
If you want to learn more about shaders checkout this playlist :
ruclips.net/p/PLTEbuqk52pICikiHfD-a52dxEav5UqMLy
Excellent course for an absolute beginner in 3d-graphics like me!
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!
I cant understand why you have 'only' 3k subscribers. Your tutorials are so good, thank you !
This is just the beginning.
Thanks
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 ❤
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 ♥
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
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 😁
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 👌🏼
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!
The most important section in the video is the Mindset one. That's what learners need :D
Excellent tutorial!!! I really feel like I learned a lot.
You are so fantastic at explaining shaders. Thank you so much for this video 🙏
My pleasure 😊
Amazing course. Really good examples and easy to follow . Thanks a lot
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.
Very comprehensive and super helpful, great work, thanks
Glad you liked it 🤝
Excellent course man, you're a great teacher. Keep it up!
Thanks for watching!
Thanks this was very helpful.
Gracias por este tutorial, no tienes idea de lo mucho que lo necesitaba, no encontre tutoriales asi en todo youtube, en serio, muchas gracias.
Yeah!! I finally found the ultimate lecture...
Thank you for uploading this!
You're Welcome 😉
Loved your explaination here ❤❤
very helpful and well explained, thanks
Glad you liked it.
You're great, man! Thank you for sharing your knowledge!
great, big thanks and keep going...
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 ✌
This was a great intro, thanks.
Want more shaders course. Please
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!
Amazing. Thank you for sharing your knowledge
This is great stuff! Thanks for sharing!
Glad you enjoyed it!
thanks for the content 💎 thats really precious
I like how he explain, thanks for the tutorial
Man, it is so brilliant! Much thanks
🙏
Hey man, great tutorial. I have a question. I was able to implement it in React Three Fiber up until the point where I have to inject my shaders into the ThreeJs materials. Any idea of how I can do that in React Three Fiber?
@@eliekhoury1717 Hey 👋
Well I have no idea but I’m pretty sure there’s a way to customize your materials in r3f.
great video! splitting the screen would have been perfect
Thanks for the tip!
I enjoyed this video. good luck
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
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.
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.
fire video! well done 🔥
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.
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 🙂
BRILLIANT, brother thanks. :D
Nice and concise thanks for creation
Thanks for watching!!
Thank you so much, helped a lot.
The best shaders course
So incredibly useful
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?
Hey, how come when I try out the varyings rainbow I just get black? I did it exactly like you but I'm using a model I made in from Blender. Does it have something to do with transforms?
@@tiamat2792 It probably has something to do with UVs but without the code I can’t tell.
Really nice content, thanks!!!
thanks a lot this was super helpful!!!
Bro how did you make your vscode vim extension look so smooth
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.
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.
beautiul, thank you sir
Thank you so much for this
No problem! Glad you enjoyed.
tooo good!!
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!
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.
thank you amazing video
Good Video!
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
Brooooo Thank you!!!!
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
👍👍👍👍✨
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.
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 🙂
What a shitty mic… It’s a torture to listen this with headphones 😢
I have upgraded since 😅
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!