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 TH-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.
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, 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
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. 🤗
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 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.
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 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.
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 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
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.
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
Hey guys I hope you enjoy this video. Here's the link for my extending three.js materials video if you need it : th-cam.com/video/vowT_8oVFmM/w-d-xo.html If you want to learn more about shaders checkout this playlist : th-cam.com/play/PLTEbuqk52pICikiHfD-a52dxEav5UqMLy.html
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.
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?
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?
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.
@@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.
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' ] } );
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 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 TH-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.
Amazing to see such content free on TH-cam, it's a blessing for the community 👊👏
Keep up the good work 👌
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.
thanks.
i had a problem importing the glsl shader into my project though. for this, i had to install the Vite GLSL plugin first.
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
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 ❤
I cant understand why you have 'only' 3k subscribers. Your tutorials are so good, thank you !
This is just the beginning.
Thanks
genuenly the best glsl tutorial on youtube
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 🔥
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!
Not even finished yet, and this is a complete GEM 💎 Thank you so much for it, my friend. Sending all the best vibes ✨
Nice work man you definetly deserve more people who support you! 💪🏽🔥
Indeed!
Thank you for the kind words 🙂
Yeah!! I finally found the ultimate lecture...
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.
Cool, thanks!
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.
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.
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 ♥
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 😁
You are so fantastic at explaining shaders. Thank you so much for this video 🙏
My pleasure 😊
Excellent course man, you're a great teacher. Keep it up!
Thanks for watching!
Very comprehensive and super helpful, great work, thanks
Glad you liked it 🤝
Thank you for uploading this!
You're Welcome 😉
Thanks this was very helpful.
very helpful and well explained, thanks
Glad you liked it.
Gracias por este tutorial, no tienes idea de lo mucho que lo necesitaba, no encontre tutoriales asi en todo youtube, en serio, muchas gracias.
huge thanks for your effort put into this thorough video, it's perfect to start into all of this, literally everything needed perfectly explained 👌🏼
The best shaders course
Loved your explaination here ❤❤
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.
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.
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!
great, big thanks and keep going...
You're great, man! Thank you for sharing your knowledge!
This is great stuff! Thanks for sharing!
Glad you enjoyed it!
Nice and concise thanks for creation
Thanks for watching!!
I enjoyed this video. good luck
Man, it is so brilliant! Much thanks
🙏
fire video! well done 🔥
BRILLIANT, brother thanks. :D
great video! splitting the screen would have been perfect
Thanks for the tip!
So incredibly useful
I like how he explain, thanks for the tutorial
thanks for the content 💎 thats really precious
Amazing. Thank you for sharing your knowledge
Thank you so much, helped a lot.
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.
Really nice content, thanks!!!
tooo good!!
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
Want more shaders course. Please
Hey guys I hope you enjoy this video.
Here's the link for my extending three.js materials video if you need it :
th-cam.com/video/vowT_8oVFmM/w-d-xo.html
If you want to learn more about shaders checkout this playlist :
th-cam.com/play/PLTEbuqk52pICikiHfD-a52dxEav5UqMLy.html
thanks a lot this was super helpful!!!
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.
Thank you so much for this
No problem! Glad you enjoyed.
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.
Good Video!
beautiul, thank you sir
thank you amazing video
Bro how did you make your vscode vim extension look so smooth
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.
Could you give us some fragment shader cheatsheets
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.
Brooooo Thank you!!!!
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?
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
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?
@@tiamat2792 It probably has something to do with UVs but without the code I can’t tell.
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.
Damn I don't even know what I'm getting myself into, too many tangents idk where to start
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.
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!
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' ]
} );
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.
perlin noise function not working
👍👍👍👍✨
JavaScript doesn’t have true mod either 😂 so I’m already used to the mod function
What a shitty mic… It’s a torture to listen this with headphones 😢
I have upgraded since 😅
Awesome content!
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