Intermediate Three.js Tutorial: Make a Globe with Custom Shaders
VloĆŸit
- Äas pĆidĂĄn 29. 05. 2024
- Display population data, animate geometries, and more with the full course at chriscourses.com/threejs-bundle
Shaders are notoriously hard to deal with-there is little to no debug tools available, while support and learning material online is little-to-none. I created this tutorial as a method to alleviate the stress involved with learning 3D shaders with Three.js.
Every important piece of complex jargon will be explained in plainspeak within this tutorial, including: Vertex Shaders, Fragment Shaders, UVs, and Normals.
In the end, you'll have created a realistic globe using custom atmospheric-like shaders.
đProject Links
Finished Project Demo - chriscourses.com/demos/interm...
Course Snippets - chriscourses.com/courses/inte...
GLSL Notes File - chriscourses.com/courses/inte...
Comprehensive List of Three.js Geometry - threejs.org/docs/index.html?q...
Three.js Uniforms and Attributes - threejs.org/docs/index.html?q...
TailwindCSS CDN - tailwindcss.com/docs/installa...
đ GLSL Documentation Links
Mat4 - thebookofshaders.com/glossary...
Texture2D - thebookofshaders.com/glossary...
Dot Operator - thebookofshaders.com/glossary...
Normalize - thebookofshaders.com/glossary...
đTable of Contents
00:00 - Project overview
03:11 - Create a sphere
08:05 - Map a texture onto sphere
10:34 - Sharpen rendering
13:10 - Create a vertex shader
18:30 - Import shader with Vite Plugin String
24:08 - Create a fragment shader
27:41 - Modify vertex shader to accommodate three.js
35:05 - Add texture to fragment shader
39:36 - UV Coordinates Explained
43:18 - Add texture to fragment shader cont.
46:46 - Add shade of blue to earth texture
49:36 - Normals Explained
50:47 - Add shade of blue to earth texture cont.
55:02 - Add atmosphere
1:00:52 - Fix shader normal bug
1:02:52 - Add mouse movement interaction
1:09:17 - Add background stars
1:15:29 - Add HTML / CSS
1:33:35 - Outro
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.
One of the most complete tutorials I've ever found. Helped me more than I expected!
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!
Thanks for the three js tutorials, man
Been digging it
Love the detailed tutorial. Thanks a lot for this, I was able to have a good start on familiarizing Three.js. Cheers!
I have no words to describe how amazing this video is. Really thank youâ
This is by far the best shader tutorial ou there. Period! Thank you very much for this!
Wow, thanks! Glad you like it homie đ«
Thanks Chris. Best explanation of shaders ever.
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.
One of the best course in the youtube. We will be happy if you make the advance three js course further.
I was trying to make a solar system using three js this going to help me a lot thanks man
your editing is dope and i can see orbit shots in the middle
Best tutorial by a country mile buddy.. thank you for your detailed explanation
Complete beginner and understood everything!! thnak you!!
nice work man! Thank you for your contribution.
Thanks man! IT helped me start in graphics! Best lessons!
Wonderful effort! Learnt a lot. đ
This is awesome. Thank you 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!!
Very detailed and easy to understand
Very informative! I learned something new! Nice job! đ„đŻđ€
Bro you explain this stuff like a boss. Thanks a lot!!!!!
You really shine here again bro... awesome tut
I should try that one,
Amazing
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!
hey, thanks for this tutorial. and actually you don't need `vite-plugin-string`,
just import anything like this by adding a suffix `raw`:
import shader from 'shader.glsl?raw'
this a feature of vite.js
Second that! Very convenient and one of the perks of using Vite
Thanks you bro , i was not able to use plugin string you solved problem
â„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïžâ„ïž
Looking forward to the upcoming videos
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.
Amazing video! Thank u, bro!
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'
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
Thanks bro, for enhancing the skill
great great explanation sir. Subbed!
Amazing. Thanks.
Great tutorial video about threejs
Thanks homie!
I watched your three js video and looks like i gonna dig you channel
This Is Fantastic
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!
Thanks sir, you're amazing
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 what I was looking for â€ïžâ€ïž
Me too!
You just broke my computer, I'm billing you for it.
Should have your payment sometime tmmr đ°
Perfect tutorial, just wondering how can you add several different models inside div. just like how sketchlab showcases their models
Flat earthers be like đż đ
Flat earthers going to be using the PlaneGeometry instead of Sphere đ
@@ChrisCourses đ
Amazing, thank you... adding a bumpmap ???
thank you its good
Hello
Great .
Should we put the open street map on this map as well?
Like Google Earth.
There is also a zoom feature.
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!
this was the best
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?
Awesomeeeeee...
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?
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.
Why not align the mesh to the div size and use canvas fullscreen?
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.
please more videos on shaders and math applied on it
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?
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.
you rock!
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.
czcams.com/video/C8Cuwq1eqDw/video.html
Hey I am creating glsl in react but I am getting compilation error please share me how can I setup this in react
hello chris, it would be possible to make a hot reload video with webpack and php (Codeigniter 4)
please help me how i download package.json in your sine waves video i can't understand
is there a way to retrieve\get a shader from a Mesh?
Could you send the URL for complete course for Create a Globe with Custom Shaders
is it possible to use react instead?
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
Isn't v for varying instead than for vertex ? Anyways : excellent tutorial!!!!!!!!!!!!!
This is a great resource but where is the GLSL notes file. The link leads to a server error.
anyone know what that todo list extension in his vs code is?
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
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.
Would you help me make an iridescent shader for my 3D model on my website lol, itâs impossible for me
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!
45:00
1:15:00
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..
Can this be done using html css java script
Why I cannot create a glsl file? when ever I try to create a shaders.glsl it show as plain text ..help me
czcams.com/video/C8Cuwq1eqDw/video.html
Hey buddy! How are you?
Can you make a vanilla javascript tutorial for Snake Game? I haven't got an impressive tutorial
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 :(
How to create half looking earth??
getting this error what to do
Love Your videos. It was a shame I found you now.
what editor is that!? great tutorialđŻ
sublime
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
Can you update GLSL file link please ? it is erroring. Thank you!
đ„đ„
kindly teach how to make this using html css please...
Error
TypeError: starGeometry.setAttribute is not a function
Please help!
Quick fix: Change 'setAttribute' to "addAttribute". This error occurred due to bcoz of versioning.
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.
did he delete a bunch of stuff from this video like water reflection?
webgl doesnât work on my stupid pc
three.module.js:16343 WebGL: INVALID_OPERATION: drawElements: no valid shader program in use
I think we can build a bloom ball behind the earth by using unrealbloompass. It seems more easy
Behold the next bruno simon
Hah I wish, dude is a beast!
I Love you
No you
This dude's voice sounds like that lawyer from the Silicon Valley series.
UV, Normal, Mapping, Vector, Matrix - we should be thankful that mathematicians have their hands on the design of glsl. Otherwise we would end up with a mess of heck-knows-what other kind of naming convention.
what language is this? python?