Two years after the tutorial's initial release - and I feel so incredibly well informed now thanks to you, Chris! All these in-depth explanations and the careful step-by-step progressions make this tutorial invaluable (for me, at least)! And the result? What was once a black box of unknown complexity that I was afraid of even trying to learn, now seems to be easily manageable. Thank you very much!
This is the best GL shader lesson! Thank you. I've been wanting to learn shader programming for some time but find the lack good documentation frustrating.
I would recommend to set x,y coordinats of mouse default to (0,0) and not undefined, other wise you get the blue ball (as in 01:09:46) on start screen, instead of the globe
wow this is a reaaallyy good tutorial, it really enlighten me. I've been strugling to understand glsl and how it works but by the glimpse of it in this tutorial I started to understand bcs u are comparing it to how it's done if it were writen in JAVA. wow bravo you are really helping me thanks a lot dude!!
Most devs bragging about how difficult css was, they're not yet come across GLSL coding. I really have no idea over what I'm looking at. Really admire thus who can code GLSL.
Thanks a lot for lesson. This helps really a lot to understand shaders and how it all works. Really like all comments during the tutorial, all are helpful.
Great video mate! You could use the the following to move the globe with the mouse: const controls = new OrbitControls(camera, renderer.domElement); controls.update(); and include "controls.update()" in the animate function In my opinion an easier way, but I am pretty new to three.js so idk if that feature was released after your video. Thank you!
I like the detail of the video, and I learned a lot, but... I think that if you want to share tutorials with the masses, you need standardtools. There is way to much time adjusting that Vite live server. Does Sublime not have an extension for a live server? I think you should use vs code for your videoes. Its what most people recognize. Also dont use css libraries. Its a video on three js, not tailwinds. It might be your favourite choice, but it confuses, when the same result could be made with simple css in the same amount of time it took you to explain and install Tailwinds. Tip: JS automatically creates variables for all id's from html, so you dont need the queryselector for the id you put on the canvas. Its already accesible. I hope you like the criticism, allthough you might not agree 😁 keep up the good work.
Just finished this video and it was easy to follow along, thank you. A few notes: - The stars are squares and occasionally render large and look odd. - When we split the width of the content in half, we also only have the stars on half of the screen. - The content is not responsive. It would have been great going into making the globe responsive with device sizes.
Using the new version of vite, you don't need to use the plugin to support string output, you just use it like below `import vertexShader from './your/path/vertex.glsl?raw';`
please i have an issue, i am trying to put the canvas in the div but everytime i launch the code and inspect, it appears to be out of the div.. due to that the flex property is not applied to that
I wondered why at the end with the html content you did the thing with putting the canvas on the right, rather than just moving the planet within the canvas. Then I found out, the shaders go weird if the planet is off center. (Also the sphere goes out of shape if it goes too far off center!). Is this something covered in the more advanced courses on your site? Thanks for all your youtube stuff btw, excellent tutorials, finally getting to grips with canvas thanks to those!!
Not really an expert in the field, but yeah, he's careful not to break stuff, for example, he didn't add a mouse scroll zooming effect either, because the way he wrote the shaders, the transition between full color and transparent in the radial gradient simulation from the atmosphere will happen faster as you zoom in, essentially not happening at all if the camera is very close to the planet. As for shaders going weird if the planet is off center (or even if it starts rotated, say around the y axis, which is my case), they don't - it's just that he used hardcoded (aka plain) values in certain places, in the shaders (maybe for simplicity?) instead of having values that automatically adjust to the other variables in the scene. A simple example is the vec3(0.0, 0.0, 1.0) in the intensity formula, which is supposed to represent the normalized (aka from 0 to 1) camera position in a centered view, corresponding to x = 0, y = 0, z = 1. Obviously, if the planet is off center, that vector will also change accordingly, e.g. if you place the planet to the right, x will become negative and so on. Normally, that vector should have been replaced with the proper camera coordinates in view space (I think), by using the built in cameraPosition vec3 (which stands for camera position in world space) and translating it into view space, like (this is for my rotation case, not sure if it'll work for you, but you can try): Vertex Shader: ... varying vec3 cameraViewPosition; ... void main() { ... cameraViewPosition = normalize(mat3(viewMatrix) * cameraPosition); ... } Fragment Shader: ... varying vec3 cameraViewPosition; ... void main() { ... float intensity = ... - dot(vertexNormal, cameraViewPosition) ...; ... } Or something along these lines - basically what he did for the vertexNormal, but in the case of the camera. Hopefully this helps.
Server Error!! Hello Chris, I tried accessing the code since I got stuck at the stars and they are not appearing. Checking code by code is not helping. I want to copy and paste and see if I missed something. When opening the link it says server error.
Heyy can someone help me with this.. In the value property of globetexture Im loading an image.. But that image is not showing. And globetexture.value is showing to be 'undefined' in the console..
Hi I'm having a problem installing tailwind in 2024. It doesn't create a tailwind.css file, it creates it in node modules but its content is different from the one in the video. Can someone help me? I'm a noob :(
Hi Chris, great series on three js. When I created the vertex.glsl file, nothing happens when I follow your code. Dumb question...but is there certain sofware that I should install?! I can't get a clear answer from the web.
The vector normal is in coordinates from the perspective of the viewer, with z going in our direction. It is a normalized vector, so no coordinate will be > 1. The dot product measures the commonality between 2 vectors, so taking the dot product of the normal and a vector that's facing straight towards us will tell us how much the vector normal is facing us. If it's 100% in our direction, we want intensity to be 0. If it's completely to the side and z is 0, we want it to be its highest. Hence we are subtracting that dot product from 1.05. The most the dot product will be is 1, when the normal is facing us completely, and even then the intensity is 0.05. So the atmosphere is slightly tinting everything, even at the center of the globe. I'm not 100% sure on this, because this is the first time I've learned about shaders. Edit: Now I'm later in the video and I have no idea why rotating the globe has anything to do with the atmosphere. Is it the additive blending? In that case, it seems to me that the problem is the back side of the globe, not the atmosphere. And you would take the absolute value of the dot product before subtracting it from 1.05. Normalized vectors can have negative coordinates. That's fine. But I'm concerned because apparently the shader doesn't get new normals when the globe is rotated? Right, you can see the globe's shader on the right side of the globe the light is receding. So if you fix the globe's shader, the original edges of light on the globe should rotate and that will look weird. Wait, is there a way to make the shader re-render after the rotation? Then it would get the new normals. Okay, I see that you pasted the normalize code into both shaders. It's only the globe shader that matters I think. And the normal is already normalized, so what you're doing is basically absolute value. normalMatrix * normal is somehow similar to squaring, so that makes it positive and then you renormalize it and that's like square root. Alright, I think I understand this. Wait. Why did that fix it when before the shader was rotating with the sphere? And we didn't call an re-renders or anything special to get the shader to re-render with the new normal values? Is it actually getting the up to date normals always? I looked up normalMatrix and I think this is what's happening. If I understand right, the normals are not given in our coordinate system like I thought, but in the coordinate system of the sphere itself, but normalMatrix is what converts it into our coordinate system. It's nothing to do with absolute value. If you somehow could see the other side of the sphere, it would still be shaded bright. But the shader will now always use normalMatrix to account for our perspective. I think I'll watch more shader videos (if there are any) and come back if I find out I'm wrong.
You are more or less right. A bit new to this too, but one thing he didn't do is to set the vec3(0.0, 0.0, 1.0), aka camera position in view space, in a way that automatically adjusts if by any chance the globe is not centered or it starts rotated. This also has to be normalized and translated from position in world space to position in view space. For example, adding the correspoding varyings in the shaders and using cameraViewPosition = normalize(mat3(viewMatrix) * cameraPosition); instead of the hardcoded vector above. Some adjustments could be made to the gradient not happening when very close to the planet as well, but that's another story. That being said, you won't find that many information sources on shaders and the GLSL language, unfortunately. The Book of Shaders he mentioned and asking on StackOverflow are your best bets, since it seems most folks are doing a lot of guess work to figure out what is what, in the absence of extensive documentation.
Sir I couldn't find the quick setup video of yours to have faster project setups. I also want to go with the "mkcanv" setup. Can you please tell which one is it?
hi great video! Is there another way to load the image used in the texture? I've tried import the image as an import statement and then set it to new THREE.Texture and passed it as a uniform. No errors in the shader but it appears black. Which is not ideal.
Hi Chris, thanks for the tutorial. I see that your bundlesize is over 500kb and I'm curious if it's possible through three-shaking (version 128 should be able to have three shaking as I onderstand) to get the threejs related stuff far below 500kb. I haven't managed to get that done and I'm not sure if it's impossible to get the bundle any smaller or if the bundler config isn't right. Maybe you have some insights or a example of a bundler config that results in smaller bundlesize.
my texture is a png where the oceans are transparent. when using shader material it makes it black. if i put zero value for alpha the black goes away but i cannot see the other side of the sphere. how can i fix this?
Thanks for this amazing tut, one question I have is are there any options for loading the glsl files into a non vite framework? I'm mainly using MUI components
You don't have to create glsl files. You can just put their content into `` brackets at the top of your JS file and set it as a variable and use that. Ex: const vertexShader = ` varying vec2 vertexUV; varying vec3 vertexNormal; void main() { vertexUV = uv; vertexNormal = normal; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); // x, y, z, transform } `; Then instead of importing it into your JS file you can just use the variable as normal.
Two years after the tutorial's initial release - and I feel so incredibly well informed now thanks to you, Chris! All these in-depth explanations and the careful step-by-step progressions make this tutorial invaluable (for me, at least)!
And the result? What was once a black box of unknown complexity that I was afraid of even trying to learn, now seems to be easily manageable. Thank you very much!
One of the most complete tutorials I've ever found. Helped me more than I expected!
This is the best GL shader lesson! Thank you. I've been wanting to learn shader programming for some time but find the lack good documentation frustrating.
This is by far the best shader tutorial ou there. Period! Thank you very much for this!
Wow, thanks! Glad you like it homie 💫
I have no words to describe how amazing this video is. Really thank you⭐
Best tutorial by a country mile buddy.. thank you for your detailed explanation
I would recommend to set x,y coordinats of mouse default to (0,0) and not undefined, other wise you get the blue ball (as in 01:09:46) on start screen, instead of the globe
life saver! thank you! I've been a bit stumped on this. Completely fixed it for me.
mousemove isn't working for me
your editing is dope and i can see orbit shots in the middle
I was trying to make a solar system using three js this going to help me a lot thanks man
wow this is a reaaallyy good tutorial, it really enlighten me. I've been strugling to understand glsl and how it works but by the glimpse of it in this tutorial I started to understand bcs u are comparing it to how it's done if it were writen in JAVA. wow bravo you are really helping me thanks a lot dude!!
I don't have the words to describe how incredible your course is.
Thanks so much!!!!!!
You're very welcome! Thanks for watching, glad you enjoyed it!
Thanks for the three js tutorials, man
Been digging it
One of the best course in the youtube. We will be happy if you make the advance three js course further.
Thanks Chris. Best explanation of shaders ever.
Most devs bragging about how difficult css was, they're not yet come across GLSL coding. I really have no idea over what I'm looking at. Really admire thus who can code GLSL.
Omg this is exactly what I need. Thank you!!
Gonna take my webGIS to the NEXT LEVEL with all your vids omg I'm so excited.
🤯🤯 Just what I was looking for ❤️❤️
Me too!
Thanks a lot for lesson. This helps really a lot to understand shaders and how it all works. Really like all comments during the tutorial, all are helpful.
You really shine here again bro... awesome tut
Complete beginner and understood everything!! thnak you!!
This is awesome. Thank you man!
Love the detailed tutorial. Thanks a lot for this, I was able to have a good start on familiarizing Three.js. Cheers!
You just broke my computer, I'm billing you for it.
Should have your payment sometime tmmr 💰
Bro you explain this stuff like a boss. Thanks a lot!!!!!
in shaders its common practice to prefix the uniform variables with 'u' and the varyings with 'v' so you know what you're dealing with, hence 'vUV'
Great video mate!
You could use the the following to move the globe with the mouse:
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();
and include "controls.update()" in the animate function
In my opinion an easier way, but I am pretty new to three.js so idk if that feature was released after your video.
Thank you!
I like the detail of the video, and I learned a lot, but... I think that if you want to share tutorials with the masses, you need standardtools. There is way to much time adjusting that Vite live server. Does Sublime not have an extension for a live server? I think you should use vs code for your videoes. Its what most people recognize.
Also dont use css libraries. Its a video on three js, not tailwinds. It might be your favourite choice, but it confuses, when the same result could be made with simple css in the same amount of time it took you to explain and install Tailwinds.
Tip: JS automatically creates variables for all id's from html, so you dont need the queryselector for the id you put on the canvas. Its already accesible.
I hope you like the criticism, allthough you might not agree 😁 keep up the good work.
Thanks man! IT helped me start in graphics! Best lessons!
I watched your three js video and looks like i gonna dig you channel
nice work man! Thank you for your contribution.
Amazing, thank you... adding a bumpmap ???
Looking forward to the upcoming videos
I should try that one,
Amazing
Very informative! I learned something new! Nice job! 💥💯🤟
It seems interesting that u (v) is commonly referred as the velocity of x (y)-direction.
Very detailed and easy to understand
Thanks bro, for enhancing the skill
Just finished this video and it was easy to follow along, thank you.
A few notes:
- The stars are squares and occasionally render large and look odd.
- When we split the width of the content in half, we also only have the stars on half of the screen.
- The content is not responsive. It would have been great going into making the globe responsive with device sizes.
How did you achieve the third one? the responsiveness
Wonderful effort! Learnt a lot. 😊
Amazing video! Thank u, bro!
please more videos on shaders and math applied on it
Dude, you’re a damn hero!
Shaders were a pain in the ass to learn initially since no one taught them 😂
Glad I could help out a bit!
Thanks sir, you're amazing
Amazing. Thanks.
Great tutorial video about threejs
Thanks homie!
Using the new version of vite, you don't need to use the plugin to support string output, you just use it like below
`import vertexShader from './your/path/vertex.glsl?raw';`
This Is Fantastic
45:00
1:15:00
great great explanation sir. Subbed!
please i have an issue, i am trying to put the canvas in the div but everytime i launch the code and inspect, it appears to be out of the div.. due to that the flex property is not applied to that
This is a great resource but where is the GLSL notes file. The link leads to a server error.
Hello
Great .
Should we put the open street map on this map as well?
Like Google Earth.
There is also a zoom feature.
Thanks for this wonderful tutorial. I have a question, if I want to add two planets like earth and mars how can I do that?
I wondered why at the end with the html content you did the thing with putting the canvas on the right, rather than just moving the planet within the canvas. Then I found out, the shaders go weird if the planet is off center. (Also the sphere goes out of shape if it goes too far off center!). Is this something covered in the more advanced courses on your site?
Thanks for all your youtube stuff btw, excellent tutorials, finally getting to grips with canvas thanks to those!!
Not really an expert in the field, but yeah, he's careful not to break stuff, for example, he didn't add a mouse scroll zooming effect either, because the way he wrote the shaders, the transition between full color and transparent in the radial gradient simulation from the atmosphere will happen faster as you zoom in, essentially not happening at all if the camera is very close to the planet.
As for shaders going weird if the planet is off center (or even if it starts rotated, say around the y axis, which is my case), they don't - it's just that he used hardcoded (aka plain) values in certain places, in the shaders (maybe for simplicity?) instead of having values that automatically adjust to the other variables in the scene. A simple example is the vec3(0.0, 0.0, 1.0) in the intensity formula, which is supposed to represent the normalized (aka from 0 to 1) camera position in a centered view, corresponding to x = 0, y = 0, z = 1. Obviously, if the planet is off center, that vector will also change accordingly, e.g. if you place the planet to the right, x will become negative and so on. Normally, that vector should have been replaced with the proper camera coordinates in view space (I think), by using the built in cameraPosition vec3 (which stands for camera position in world space) and translating it into view space, like (this is for my rotation case, not sure if it'll work for you, but you can try):
Vertex Shader:
...
varying vec3 cameraViewPosition;
...
void main()
{
...
cameraViewPosition = normalize(mat3(viewMatrix) * cameraPosition);
...
}
Fragment Shader:
...
varying vec3 cameraViewPosition;
...
void main()
{
...
float intensity = ... - dot(vertexNormal, cameraViewPosition) ...;
...
}
Or something along these lines - basically what he did for the vertexNormal, but in the case of the camera. Hopefully this helps.
Perfect tutorial, just wondering how can you add several different models inside div. just like how sketchlab showcases their models
Server Error!!
Hello Chris, I tried accessing the code since I got stuck at the stars and they are not appearing. Checking code by code is not helping. I want to copy and paste and see if I missed something. When opening the link it says server error.
What's that todo plugin you're using?
Flat earthers be like 🗿 😂
Flat earthers going to be using the PlaneGeometry instead of Sphere 😂
@@ChrisCourses 😂
when i do it with live server i cant load shaders in javascript it throws an error how to tackle this? please someone help ToT
Hey I am creating glsl in react but I am getting compilation error please share me how can I setup this in react
Why not align the mesh to the div size and use canvas fullscreen?
Heyy can someone help me with this..
In the value property of globetexture Im loading an image..
But that image is not showing.
And globetexture.value is showing to be 'undefined' in the console..
Isn't v for varying instead than for vertex ? Anyways : excellent tutorial!!!!!!!!!!!!!
thank you its good
Server error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details.
Hi I'm having a problem installing tailwind in 2024. It doesn't create a tailwind.css file, it creates it in node modules but its content is different from the one in the video. Can someone help me? I'm a noob :(
Hi Chris, great series on three js. When I created the vertex.glsl file, nothing happens when I follow your code. Dumb question...but is there certain sofware that I should install?! I can't get a clear answer from the web.
th-cam.com/video/C8Cuwq1eqDw/w-d-xo.html
Why I cannot create a glsl file? when ever I try to create a shaders.glsl it show as plain text ..help me
th-cam.com/video/C8Cuwq1eqDw/w-d-xo.html
Can you update GLSL file link please ? it is erroring. Thank you!
this was the best
The vector normal is in coordinates from the perspective of the viewer, with z going in our direction. It is a normalized vector, so no coordinate will be > 1. The dot product measures the commonality between 2 vectors, so taking the dot product of the normal and a vector that's facing straight towards us will tell us how much the vector normal is facing us. If it's 100% in our direction, we want intensity to be 0. If it's completely to the side and z is 0, we want it to be its highest. Hence we are subtracting that dot product from 1.05. The most the dot product will be is 1, when the normal is facing us completely, and even then the intensity is 0.05. So the atmosphere is slightly tinting everything, even at the center of the globe. I'm not 100% sure on this, because this is the first time I've learned about shaders.
Edit: Now I'm later in the video and I have no idea why rotating the globe has anything to do with the atmosphere. Is it the additive blending? In that case, it seems to me that the problem is the back side of the globe, not the atmosphere. And you would take the absolute value of the dot product before subtracting it from 1.05. Normalized vectors can have negative coordinates. That's fine. But I'm concerned because apparently the shader doesn't get new normals when the globe is rotated? Right, you can see the globe's shader on the right side of the globe the light is receding. So if you fix the globe's shader, the original edges of light on the globe should rotate and that will look weird. Wait, is there a way to make the shader re-render after the rotation? Then it would get the new normals.
Okay, I see that you pasted the normalize code into both shaders. It's only the globe shader that matters I think. And the normal is already normalized, so what you're doing is basically absolute value. normalMatrix * normal is somehow similar to squaring, so that makes it positive and then you renormalize it and that's like square root.
Alright, I think I understand this. Wait. Why did that fix it when before the shader was rotating with the sphere? And we didn't call an re-renders or anything special to get the shader to re-render with the new normal values? Is it actually getting the up to date normals always?
I looked up normalMatrix and I think this is what's happening. If I understand right, the normals are not given in our coordinate system like I thought, but in the coordinate system of the sphere itself, but normalMatrix is what converts it into our coordinate system. It's nothing to do with absolute value. If you somehow could see the other side of the sphere, it would still be shaded bright. But the shader will now always use normalMatrix to account for our perspective.
I think I'll watch more shader videos (if there are any) and come back if I find out I'm wrong.
You are more or less right. A bit new to this too, but one thing he didn't do is to set the vec3(0.0, 0.0, 1.0), aka camera position in view space, in a way that automatically adjusts if by any chance the globe is not centered or it starts rotated. This also has to be normalized and translated from position in world space to position in view space. For example, adding the correspoding varyings in the shaders and using cameraViewPosition = normalize(mat3(viewMatrix) * cameraPosition); instead of the hardcoded vector above. Some adjustments could be made to the gradient not happening when very close to the planet as well, but that's another story.
That being said, you won't find that many information sources on shaders and the GLSL language, unfortunately. The Book of Shaders he mentioned and asking on StackOverflow are your best bets, since it seems most folks are doing a lot of guess work to figure out what is what, in the absence of extensive documentation.
Sir I couldn't find the quick setup video of yours to have faster project setups.
I also want to go with the "mkcanv"
setup.
Can you please tell which one is it?
hi great video! Is there another way to load the image used in the texture? I've tried import the image as an import statement and then set it to new THREE.Texture and passed it as a uniform. No errors in the shader but it appears black.
Which is not ideal.
Did you ever find a fix for this? I'm having the same results.
Hi Chris, thanks for the tutorial. I see that your bundlesize is over 500kb and I'm curious if it's possible through three-shaking (version 128 should be able to have three shaking as I onderstand) to get the threejs related stuff far below 500kb. I haven't managed to get that done and I'm not sure if it's impossible to get the bundle any smaller or if the bundler config isn't right. Maybe you have some insights or a example of a bundler config that results in smaller bundlesize.
He does an import * from threejs which is importing EVERYTHING from threejs. It's probably more efficient simply importing what you need.
my texture is a png where the oceans are transparent. when using shader material it makes it black. if i put zero value for alpha the black goes away but i cannot see the other side of the sphere. how can i fix this?
did he delete a bunch of stuff from this video like water reflection?
please help me how i download package.json in your sine waves video i can't understand
anyone know what that todo list extension in his vs code is?
Hey Chris can you tell me what is that todo thing I want that badly!
Hey Akshat, that would be the Sublime Text plugin PlainTasks. You can check it out here: github.com/aziz/PlainTasks
@@ChrisCourses thanks a lot bud!I actually use VS Code but thanks nevertheless you are the reason of my progress in Three.js Props to you man!
Could you send the URL for complete course for Create a Globe with Custom Shaders
Would you help me make an iridescent shader for my 3D model on my website lol, it’s impossible for me
Thanks for this amazing tut, one question I have is are there any options for loading the glsl files into a non vite framework? I'm mainly using MUI components
You don't have to create glsl files. You can just put their content into `` brackets at the top of your JS file and set it as a variable and use that. Ex:
const vertexShader = `
varying vec2 vertexUV;
varying vec3 vertexNormal;
void main() {
vertexUV = uv;
vertexNormal = normal;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); // x, y, z, transform
}
`;
Then instead of importing it into your JS file you can just use the variable as normal.
hello chris, it would be possible to make a hot reload video with webpack and php (Codeigniter 4)
I think we can build a bloom ball behind the earth by using unrealbloompass. It seems more easy
Hey buddy! How are you?
Can you make a vanilla javascript tutorial for Snake Game? I haven't got an impressive tutorial
is there a way to retrieve\get a shader from a Mesh?
Awesomeeeeee...
it only renders earth image on mouse hover on desktop and does not even load image on mobile, your demo also does not show image please help
It's because the three.js library only runs on the browser, not in mobile devices
what editor is that!? great tutorial💯
sublime
you rock!
three.module.js:16343 WebGL: INVALID_OPERATION: drawElements: no valid shader program in use
is it possible to use react instead?
getting this error what to do
Love Your videos. It was a shame I found you now.
Can this be done using html css java script
kindly teach how to make this using html css please...
How to create half looking earth??
Error
TypeError: starGeometry.setAttribute is not a function
Please help!
Quick fix: Change 'setAttribute' to "addAttribute". This error occurred due to bcoz of versioning.
Behold the next bruno simon
Hah I wish, dude is a beast!
what language is this? python?